Chapter 11: Introducing Cascading Style Sheets (CSS)
The Benefits of CSS:
- Precise type and layout control
- Less work: Change look of the whole site with one edit
- Accessibility: Markup stays semantic
- Flexibility: The same HTML markup can be made to appear in dramatically different ways
- Style separates the structure
How Style Sheets Work:
1. Start with a marked-up document (like HTML, but could be another XML markup language)
2. Write styles for how you want elements to look using CSS syntax
3. Attach the styles to the document (there are a number of ways)
4. The browser uses your instructions when rendering the elements
Style Rules:
- Each rule selects an element and declares how it should display
h1 { color: green; }
- This rule selects all h1 elements and declares that they should be green
strong { color: red; font-style: italic; }
- This rule selects all strong inline elements and declares that they should be red and in an
italic font
Style Rule Structure:
- A style rule is made up of a selector and a declaration
- The declaration is one or more property/value pairs (remember to add a semicolon at end)
selector { property: value; }
Selectors: (two examples)
1. p {property: value;}
Element type selector: Selects all elements of this type (p) in the document
2. #intro {property: value}
ID selector (indicated by the # symbol) selects by ID value. In the example, an element with
an id of “intro” would be selected
1
,Declarations:
- The declaration is made up of a property/value pair contained in curly brackets { }:
Selector { property: value; }
Example:
h2 { color: red;
font-size: 2em;
margin-left: 30px;
opacity: 0.5;
}
- End each declaration with a semicolon to keep it separate from the next declaration
- White space is ignored, so you can stack declarations to make them easier to read
- Properties are defined in the CSS specifications
- Values are dependent on the type of property:
o Measurements
o Keywords
o Color values
o More
CSS Comments:
/* comment goes here */
- Content between /* and */ will be ignored by the browser
- Useful for leaving notes or section labels in the style sheet
- Can be used within rules to temporarily hide style declarations in the design process
Attaching Styles to the HTML Document:
1. External style sheets: (focus more on using this one)
A separate, text-only.css file associated with the document with link element or @import rule
link element in HTML: <head>
<title> Titles are required </title>
<link rel=”stylesheet” href=”/path/example.css”>
</head>
@import rule in style sheet: <head>
<title> Titles are required </title>
<style>
@import url (“/path/example.css”);
p {font-face: Verdana; }
</style>
</head>
2
, 2. Embedded style sheets:
Styles are listed in the head of the HTML document in the style element
<head>
<title> Titles are required </title>
<style>
/* style rules go here */
</style>
</head>
3. Inline styles:
Properties and values are added to an individual element with the style attribute
<p> style=”font-size: large;”> Paragraph text ... </p>
OR
<h3 style=”color: red; margin-top: 30px;”> Intro </h3>
Document Structure: Inheritance
Documents have an implicit structure
We give certain relationships names, as if they’re a family:
- All the elements contained in a given element are its descendants
- An element that is directly contained within another element is the child of that element
- The containing element is the parent of the contained element
- Two elements with the same parents are siblings
Inheritance:
- Many properties applied to elements are passed down to the elements they contain. This is
called inheritance
- For example, applying a sans-serif font to a p element causes the em element it contains to be
sans-serif as well:
Some properties inherit; others do not
Properties related to text usually inherit; properties related to layout generally don’t
- Styles explicitly applies to specific elements override inherited styles
- You’ll learn to use inheritance strategically to keep your style rules simple
3
, The Cascade:
- The cascade refers to the system for resolving conflicts when several styles apply to the same
element
- Style information is passed down (it “cascades” down) until overwritten by a style rule with
more weight
- Weight is considered, based on:
o Priority of style rule source
o Specificity of the selector
o Rule order
The Cascade: Priority
Style rules from sources higher in this list override rules from sources listed below them
- Any style marked as !important by the user (to accommodate potential accessibility settings)
- Any style marked !important by the author (of the web page)
- Author styles (style sheets created in web site production)
- User styles (added by the reader)
- User agent styles (browser defaults)
The Cascade: Specificity
- When two rules in a single style sheet conflict, the type of selector is used to determine
which rule has more weight
- For example, ID selectors are more specific than general element selectors
NOTE: Specificity will be discussed once we have covered more selector types
The Cascade: Rule Order
- When two rules have equal weight, rule order is used (whichever rule appears last “wins”)
<style>
p {color: red;}
p {color: blue’}
p {color: green;}
</style>
- In this example, paragraphs would be green
- Styles may come in from external sheets, embedded style rules and inline styles
o The style rule that gets parsed last (the one closest to the content) will apply
4
The Benefits of CSS:
- Precise type and layout control
- Less work: Change look of the whole site with one edit
- Accessibility: Markup stays semantic
- Flexibility: The same HTML markup can be made to appear in dramatically different ways
- Style separates the structure
How Style Sheets Work:
1. Start with a marked-up document (like HTML, but could be another XML markup language)
2. Write styles for how you want elements to look using CSS syntax
3. Attach the styles to the document (there are a number of ways)
4. The browser uses your instructions when rendering the elements
Style Rules:
- Each rule selects an element and declares how it should display
h1 { color: green; }
- This rule selects all h1 elements and declares that they should be green
strong { color: red; font-style: italic; }
- This rule selects all strong inline elements and declares that they should be red and in an
italic font
Style Rule Structure:
- A style rule is made up of a selector and a declaration
- The declaration is one or more property/value pairs (remember to add a semicolon at end)
selector { property: value; }
Selectors: (two examples)
1. p {property: value;}
Element type selector: Selects all elements of this type (p) in the document
2. #intro {property: value}
ID selector (indicated by the # symbol) selects by ID value. In the example, an element with
an id of “intro” would be selected
1
,Declarations:
- The declaration is made up of a property/value pair contained in curly brackets { }:
Selector { property: value; }
Example:
h2 { color: red;
font-size: 2em;
margin-left: 30px;
opacity: 0.5;
}
- End each declaration with a semicolon to keep it separate from the next declaration
- White space is ignored, so you can stack declarations to make them easier to read
- Properties are defined in the CSS specifications
- Values are dependent on the type of property:
o Measurements
o Keywords
o Color values
o More
CSS Comments:
/* comment goes here */
- Content between /* and */ will be ignored by the browser
- Useful for leaving notes or section labels in the style sheet
- Can be used within rules to temporarily hide style declarations in the design process
Attaching Styles to the HTML Document:
1. External style sheets: (focus more on using this one)
A separate, text-only.css file associated with the document with link element or @import rule
link element in HTML: <head>
<title> Titles are required </title>
<link rel=”stylesheet” href=”/path/example.css”>
</head>
@import rule in style sheet: <head>
<title> Titles are required </title>
<style>
@import url (“/path/example.css”);
p {font-face: Verdana; }
</style>
</head>
2
, 2. Embedded style sheets:
Styles are listed in the head of the HTML document in the style element
<head>
<title> Titles are required </title>
<style>
/* style rules go here */
</style>
</head>
3. Inline styles:
Properties and values are added to an individual element with the style attribute
<p> style=”font-size: large;”> Paragraph text ... </p>
OR
<h3 style=”color: red; margin-top: 30px;”> Intro </h3>
Document Structure: Inheritance
Documents have an implicit structure
We give certain relationships names, as if they’re a family:
- All the elements contained in a given element are its descendants
- An element that is directly contained within another element is the child of that element
- The containing element is the parent of the contained element
- Two elements with the same parents are siblings
Inheritance:
- Many properties applied to elements are passed down to the elements they contain. This is
called inheritance
- For example, applying a sans-serif font to a p element causes the em element it contains to be
sans-serif as well:
Some properties inherit; others do not
Properties related to text usually inherit; properties related to layout generally don’t
- Styles explicitly applies to specific elements override inherited styles
- You’ll learn to use inheritance strategically to keep your style rules simple
3
, The Cascade:
- The cascade refers to the system for resolving conflicts when several styles apply to the same
element
- Style information is passed down (it “cascades” down) until overwritten by a style rule with
more weight
- Weight is considered, based on:
o Priority of style rule source
o Specificity of the selector
o Rule order
The Cascade: Priority
Style rules from sources higher in this list override rules from sources listed below them
- Any style marked as !important by the user (to accommodate potential accessibility settings)
- Any style marked !important by the author (of the web page)
- Author styles (style sheets created in web site production)
- User styles (added by the reader)
- User agent styles (browser defaults)
The Cascade: Specificity
- When two rules in a single style sheet conflict, the type of selector is used to determine
which rule has more weight
- For example, ID selectors are more specific than general element selectors
NOTE: Specificity will be discussed once we have covered more selector types
The Cascade: Rule Order
- When two rules have equal weight, rule order is used (whichever rule appears last “wins”)
<style>
p {color: red;}
p {color: blue’}
p {color: green;}
</style>
- In this example, paragraphs would be green
- Styles may come in from external sheets, embedded style rules and inline styles
o The style rule that gets parsed last (the one closest to the content) will apply
4
