Scribd
Upload
36 views25 pages

Cascading Style Sheets

CSS is a language used to style and lay out web pages. CSS describes how HTML elements should be displayed, allowing separation of documentation structure/semantics from presentation. CSS rules consist of selectors pointing to HTML elements to style, and declaration blocks containing properties and values to apply styles like color and layout. Styles can be defined internally, in separate CSS files linked externally, or inline in HTML elements.

Uploaded by

Uchiha Ntian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
36 views25 pages

Cascading Style Sheets

CSS is a language used to style and lay out web pages. CSS describes how HTML elements should be displayed, allowing separation of documentation structure/semantics from presentation. CSS rules consist of selectors pointing to HTML elements to style, and declaration blocks containing properties and values to apply styles like color and layout. Styles can be defined internally, in separate CSS files linked externally, or inline in HTML elements.

Uploaded by

Uchiha Ntian
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

CSS

Cascading Style Sheets


What is CSS?
 CSS stands for Cascading Style Sheets

 CSS is a language that describes the style of an HTML


document.

 CSS describes how HTML elements should be displayed.


Why Use CSS?
 CSS is used to define styles for your web pages, including
;
 Design
 layout and
 variations in display for different devices and screen
sizes.
CSS Saves a Lot of Work!
 The style definitions are normally saved in external .css
files.

 With an external stylesheet file, you can change the look


of an entire website by changing just one file!
CSS Syntax
 A CSS rule-set consists of a selector and a declaration block:

 The selector points to the HTML element you want to style.


 The declaration block contains one or more declarations separated by
semicolons.
 Each declaration includes a CSS property name and a value, separated by a
colon.
 A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
CSS Selectors
 CSS selectors are used to "find" (or select) HTML
elements based on their element name, id, class, attribute,
and more.
CSS Selectors
The element Selector:

 The element selector selects elements based on the


element name.
 Ex:
 You can select all <p> elements on a page like this (here, all <p> elements will be
center-aligned, with a red text color):

p {
text-align: center;
color: red;
}
CSS Selectors
The id Selector:
 The id selector uses the id attribute of an HTML element to
select a specific element.

 The id of an element should be unique within a page, so the id


selector is used to select one unique element!

 To select an element with a specific id, write a hash (#)


character, followed by the id of the element.
CSS Selectors
The id Selector:
 Example
 The style rule below will be applied to the
HTML element with id="para1":

#para1 {
text-align: center;
color: red;
}
 Note: An id name cannot start with a number!
CSS Selectors
The class Selector:
 The class selector selects elements with a specific class
attribute.

 To select elements with a specific class, write a period (.)


character, followed by the name of the class.
CSS Selectors
 Example
 In this example all HTML elements with
class="center" will be red and center-aligned:

.center {
text-align: center;
color: red;
}
CSS Selectors
 Example
 In this example only <p> elements with
class="center" will be center-aligned:

p.center {
text-align: center;
color: red;
}
 Note: A class name cannot start with a number!
CSS Selectors
Grouping Selectors:
 If you have elements with the same style definitions, like this:

h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
CSS Selectors
Grouping Selectors:
 It will be better to group the selectors, to minimize the code.

 To group selectors, separate each selector with a comma.


 Example
 In this example we have grouped the selectors from
the previous code:

h1, h2, p {
text-align: center;
color: red;
}
CSS Comments
 Comments are used to explain the code, and may help
when you edit the source code at a later date.

 Comments are ignored by browsers.


CSS Comments
 Example
 A CSS comment starts with /* and ends with */.
Comments can also span multiple lines:

p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
Three Ways to Insert CSS
 There are three ways of inserting a style sheet:
1. External style sheet
2. Internal style sheet
3. Inline style
External Style Sheet
 With an external style sheet, you can change the look of
an entire website by changing just one file!

 Each page must include a reference to the external style


sheet file inside the <link> element.
External Style Sheet
 Example
 External styles are defined within the <link>
element, inside the <head> section of an
HTML page:
<head>
<link rel="stylesheet" type="text/css" href=
"mystyle.css">
</head>
External Style Sheet
 An external style sheet can be written in any text
editor. The file should not contain any html tags. The
style sheet file must be saved with a .css extension.
External Style Sheet
 "mystyle.css“

 body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
Internal Style Sheet
 An internal style sheet may be used if one single page has
a unique style.
Internal Style Sheet
 Example
 Internal styles are defined within the <style> element,
inside the <head> section of an HTML page:

 <head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
Inline Styles
 An inline style may be used to apply a unique style for a
single element.

 To use inline styles, add the style attribute to the relevant


element. The style attribute can contain any CSS property.
Inline Styles
 Example
 Inline styles are defined within the "style"
attribute of the relevant element:

 <h1 style="color:blue;margin-
left:30px;">This is a heading</h1>

You might also like