Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a...
16
Cascading Style Sheets I Embedded Style Sheets
-
Upload
brittany-garrett -
Category
Documents
-
view
213 -
download
0
Transcript of Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a...
Cascading Style Sheets I
Embedded Style Sheets
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 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 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 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 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 Design I CSS 7 Instructor: Sean Griffin
Example 1
Changes all <h1> tags to green.
Page Design I CSS 8 Instructor: Sean Griffin
Example 2
Changes all <h1> tags to green and their backgrounds to red.
Page Design I CSS 9 Instructor: Sean Griffin
Example 3
Changes all <img> tags so they have a solid red 4 pixel border.
Page Design I CSS 10 Instructor: Sean Griffin
Example 4
Changes all <body> tag text to blue.
Page Design I CSS 11 Instructor: Sean Griffin
Example 5
Changes the page background to an image.
Page Design I CSS 12 Instructor: Sean Griffin
Example 6
Changes all paragraphs to green text.
Page Design I CSS 13 Instructor: Sean Griffin
Example 7
Changes all <h1> tags to red and all paragraphs to green text.
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 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 Design I CSS 16 Instructor: Sean Griffin
Example 10
Changes all paragraphs to 12pt blue Verdana text.
