The document provides an overview of cascading style sheets (CSS) including background information on how CSS works with HTML pages. It discusses the three types of CSS - internal, inline, and external stylesheets - and provides details on their structure and use. The anatomy of a CSS rule is explained. Grouping and applying stylesheets is also covered.
5. XHTML RULES
html <tags>
? XHTML pages need to end with
a .html (or .htm) extension
Photo by Jesper on Flickr
6. XHTML RULES
html <tags>
? XHTML pages need to end with
a .html (or .htm) extension
? Tags Gotta Close
Photo by Jesper on Flickr
7. XHTML RULES
html <tags>
? XHTML pages need to end with
a .html (or .htm) extension
? Tags Gotta Close
? Tags are like boxes
Photo by Jesper on Flickr
8. XHTML RULES
html <tags>
? XHTML pages need to end with
a .html (or .htm) extension
? Tags Gotta Close
? Tags are like boxes
? They close out in order
<body><p><b></b></p></body>
Photo by Jesper on Flickr
9. XHTML RULES
html <tags>
? XHTML pages need to end with
a .html (or .htm) extension
? Tags Gotta Close
? Tags are like boxes
? They close out in order
<body><p><b></b></p></body>
? Attributes go inside the angle
brackets. <p style=¡°color: red;¡±>
Photo by Jesper on Flickr
10. XHTML RULES
html <tags>
? XHTML pages need to end with
a .html (or .htm) extension
? Tags Gotta Close
? Tags are like boxes
? They close out in order
<body><p><b></b></p></body>
? Attributes go inside the angle
brackets. <p style=¡°color: red;¡±>
? A tag pair is called an element
Photo by Jesper on Flickr
11. XHTML RULES
html <tags>
? XHTML pages need to end with
a .html (or .htm) extension
? Tags Gotta Close
? Tags are like boxes
? They close out in order
<body><p><b></b></p></body>
? Attributes go inside the angle
brackets. <p style=¡°color: red;¡±>
? A tag pair is called an element
? <p> + </p> = element
Photo by Jesper on Flickr
12. T HE FIGHT
Physical
Logical Structure
Formatting
vs.
Photo by Private Nobby on Flickr
13. The Fight
LOGICAL ELEMENTS PHYSICAL ELEMENTS
? De?ne individual ? All about formatting
components ? They do not de?ne
? They do not de?ne the structure.
the actual formatting.
14. <b>bold</b> Structure won out.
And so there is separation
<i>italic</i> of Structure and Style.
<u>underline</u> And that leads us to...
15. <b>bold</b> Structure won out.
And so there is separation
<i>italic</i> of Structure and Style.
<u>underline</u> And that leads us to...
16. <b>bold</b> Structure won out.
And so there is separation
<i>italic</i> of Structure and Style.
<u>underline</u> And that leads us to...
20. AKA
REAL
ULTIMATE
POWER
Photo by nhussein on Flickr
21. Background Info
When you go to a Web page that uses a style sheet, the following things happen:
1) Your browser requests the XHTML page from a Web server. 2) The browser ?nds an
instruction in the XHTML page indicating that the page uses a style sheet. The
browser then grabs that style sheet with a separate request. 3) The browser chews
through the XHTML in the Web page, and uses the rules in the style sheet to adjust
the page¡¯s appearance.
22. THE 3 TYPES
OF STYLES
Photo by g_originals on Flickr
23. THE 3 TYPES
OF STYLES
1. Internal Style Sheets
Photo by g_originals on Flickr
24. THE 3 TYPES
OF STYLES
1. Internal Style Sheets
2. Inline Styles
Photo by g_originals on Flickr
25. THE 3 TYPES
OF STYLES
1. Internal Style Sheets
2. Inline Styles
3. External Style Sheets
Photo by g_originals on Flickr
31. Inline Styles
? Set as an attribute on an element
Photo by jdblundell on Flickr
32. Inline Styles
? Set as an attribute on an element
? Inline means in the XHTML markup
Photo by jdblundell on Flickr
33. Inline Styles
? Set as an attribute on an element
? Inline means in the XHTML markup
? For example:
<p style= ¡°color: red; border: thin solid #000;¡±>
Photo by jdblundell on Flickr
35. External Style Sheets
? A separate ?le with just the styles - style.css
Photo by s4xton on Flickr
36. External Style Sheets
? A separate ?le with just the styles - style.css
? Can have multiples
Photo by s4xton on Flickr
37. External Style Sheets
? A separate ?le with just the styles - style.css
? Can have multiples
? Keeps your CSS orderly and easy-to-edit
Photo by s4xton on Flickr
38. External Style Sheets
? A separate ?le with just the styles - style.css
? Can have multiples
? Keeps your CSS orderly and easy-to-edit
? True separation of structure and
presentation
Photo by s4xton on Flickr
The tags are what separate normal text from HTML code. You might know them as the words between the <angle-brackets>. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page.
Different tags will perform different functions. The tags themselves don&#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:
<b>These words will be bold</b>, and these will not.
Pairs are called elements. Containers elements & standalone elements.
The tags are what separate normal text from HTML code. You might know them as the words between the <angle-brackets>. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page.
Different tags will perform different functions. The tags themselves don&#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:
<b>These words will be bold</b>, and these will not.
Pairs are called elements. Containers elements & standalone elements.
The tags are what separate normal text from HTML code. You might know them as the words between the <angle-brackets>. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page.
Different tags will perform different functions. The tags themselves don&#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:
<b>These words will be bold</b>, and these will not.
Pairs are called elements. Containers elements & standalone elements.
The tags are what separate normal text from HTML code. You might know them as the words between the <angle-brackets>. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page.
Different tags will perform different functions. The tags themselves don&#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:
<b>These words will be bold</b>, and these will not.
Pairs are called elements. Containers elements & standalone elements.
The tags are what separate normal text from HTML code. You might know them as the words between the <angle-brackets>. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page.
Different tags will perform different functions. The tags themselves don&#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:
<b>These words will be bold</b>, and these will not.
Pairs are called elements. Containers elements & standalone elements.
The tags are what separate normal text from HTML code. You might know them as the words between the <angle-brackets>. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page.
Different tags will perform different functions. The tags themselves don&#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:
<b>These words will be bold</b>, and these will not.
Pairs are called elements. Containers elements & standalone elements.
The tags are what separate normal text from HTML code. You might know them as the words between the <angle-brackets>. They allow all the cool stuff like images and tables and stuff, just by telling your browser what to render on the page.
Different tags will perform different functions. The tags themselves don&#x2019;t appear when you view your page through a browser, but their effects do. The simplest tags do nothing more than apply formatting to some text, like this:
<b>These words will be bold</b>, and these will not.
Pairs are called elements. Containers elements & standalone elements.
Create a new text file in your text editor (notepad++) and save it as style.css
Create a new text file in your text editor (notepad++) and save it as style.css
Create a new text file in your text editor (notepad++) and save it as style.css
Create a new text file in your text editor (notepad++) and save it as style.css
Selector - Identifies the type of content you want to format. Browser then applies that to every occurrence of that content.
Property - type of formatting you want to apply. (Color, fonts, alignment, borders... etc.)
Value - set the value for the property defined. (the color, alignment direction, etc.)
Selector - Identifies the type of content you want to format. Browser then applies that to every occurrence of that content.
Property - type of formatting you want to apply. (Color, fonts, alignment, borders... etc.)
Value - set the value for the property defined. (the color, alignment direction, etc.)
Selector - Identifies the type of content you want to format. Browser then applies that to every occurrence of that content.
Property - type of formatting you want to apply. (Color, fonts, alignment, borders... etc.)
Value - set the value for the property defined. (the color, alignment direction, etc.)
Selector - Identifies the type of content you want to format. Browser then applies that to every occurrence of that content.
Property - type of formatting you want to apply. (Color, fonts, alignment, borders... etc.)
Value - set the value for the property defined. (the color, alignment direction, etc.)