![Page 1: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/1.jpg)
Cascading Style Sheets I
Embedded Style Sheets
![Page 2: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/2.jpg)
Page Design I CSS 2 Instructor: Sean Griffin
What is a Style Sheet?
A style sheet is a text file that contains one or more rules that determine – through properties and values – how the elements on your Web page should be displayed.
![Page 3: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/3.jpg)
Page Design I CSS 3 Instructor: Sean Griffin
What Can They Control?
• Font size, color, kerning, leading, alignment• Size & position of layers• Border size, color & style (e.g., dotted / dashed)• Page breaks for printing• Background images• List formatting• and much, much more!
![Page 4: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/4.jpg)
Page Design I CSS 4 Instructor: Sean Griffin
What Browswers Support Them?
Most browsers support CSS 2 – a guideline from our friends at the W3C.
No browser fully supports all of CSS 2.
![Page 5: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/5.jpg)
Page Design I CSS 5 Instructor: Sean Griffin
Anatomy of a CSS Rule
Each style rule in a style sheet has two main parts:– Selectors: determines which elements are affected
(Example: the <h1> tag)– Declarations: consists of one or more property/value
pairs. Declarations are enclosed within curly brackets. (Example: {color:green})
![Page 6: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/6.jpg)
Page Design I CSS 6 Instructor: Sean Griffin
Embedded Styles
Embedded styles are placed within the head tag and contain all of the following:– <style></style> element: this is a container for CSS
rules– The type attribute: refers to MIME type which tells
the browser which style sheet syntax to use.– CSS rule: the select and declaration
![Page 7: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/7.jpg)
Page Design I CSS 7 Instructor: Sean Griffin
Example 1
Changes all <h1> tags to green.
![Page 8: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/8.jpg)
Page Design I CSS 8 Instructor: Sean Griffin
Example 2
Changes all <h1> tags to green and their backgrounds to red.
![Page 9: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/9.jpg)
Page Design I CSS 9 Instructor: Sean Griffin
Example 3
Changes all <img> tags so they have a solid red 4 pixel border.
![Page 10: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/10.jpg)
Page Design I CSS 10 Instructor: Sean Griffin
Example 4
Changes all <body> tag text to blue.
![Page 11: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/11.jpg)
Page Design I CSS 11 Instructor: Sean Griffin
Example 5
Changes the page background to an image.
![Page 12: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/12.jpg)
Page Design I CSS 12 Instructor: Sean Griffin
Example 6
Changes all paragraphs to green text.
![Page 13: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/13.jpg)
Page Design I CSS 13 Instructor: Sean Griffin
Example 7
Changes all <h1> tags to red and all paragraphs to green text.
![Page 14: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/14.jpg)
Page Design I CSS 14 Instructor: Sean Griffin
Example 8
Changes all body text to blue, all <h1> tags to red and images will have a orange 4 pixel dashed border.
![Page 15: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/15.jpg)
Page Design I CSS 15 Instructor: Sean Griffin
Example 9
Changes the body to a green background, all body text to blue, all <h1> tags to red and images will have a orange 4 pixel dashed border.
![Page 16: Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains](https://reader035.vdocuments.us/reader035/viewer/2022070415/5697c0281a28abf838cd6a24/html5/thumbnails/16.jpg)
Page Design I CSS 16 Instructor: Sean Griffin
Example 10
Changes all paragraphs to 12pt blue Verdana text.