1. HTML Overview - Cascading Style Sheets (CSS)

2. Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your HTML file you have previously created Do this in ‘My Computer’ Do this in ‘My Computer’ Use copy/paste to copy the file Use copy/paste to copy the file Rename the copy to ‘stylesheets.html’ Rename the copy to ‘stylesheets.html’ Remove everything between the and tags Remove everything between the and tags Remove any formatting Remove any formatting

3. Before We Begin Add some basic HTML to your file Add some basic HTML to your file Simple stylesheet demo Simple stylesheet demo By your name here By your name here This is some unmarked text <br> This text is a paragraph This text is a paragraph This is my second paragraph This is my second paragraph This is my third paragraph This is my third paragraph This is my fourth paragraph This is my fourth paragraph

4. Why CSS? HTML was originally intended to define content and structure, not formatting HTML was originally intended to define content and structure, not formatting Format tags caused problems Format tags caused problems Must apply format to every tag Must apply format to every tag If changes are needed, you must change it EVERYWHERE If changes are needed, you must change it EVERYWHERE

5. Why CSS? CSS was created to take over the formatting and display settings CSS was created to take over the formatting and display settings It ‘centralizes’ web page formatting It ‘centralizes’ web page formatting You can move all formatting to a single location or file You can move all formatting to a single location or file

6. CSS Syntax Individual statements are called rules Individual statements are called rules Rules have 2 parts Rules have 2 parts Selector – identifies what you want to style (usually an HTML element) Selector – identifies what you want to style (usually an HTML element) Declaration(s) – property:value pairs (like we did using the STYLE attribute) Declaration(s) – property:value pairs (like we did using the STYLE attribute) Each pair is a declaration Each pair is a declaration You can have more than one (a group) You can have more than one (a group)

7. CSS Syntax For Declarations and Declaration Groups… For Declarations and Declaration Groups… Properties and values are separated by a colon : Properties and values are separated by a colon : Each declaration ends with a semicolon ; Each declaration ends with a semicolon ; Declaration groups are enclosed in curly braces {} Declaration groups are enclosed in curly braces {}

8. CSS Syntax Example Example h1 {color:blue; font-size:12px;} Selector Declaration Declaration Group

9. CSS Syntax You can also format like this for better readability You can also format like this for better readabilityh1{color:blue;font-size:12px;}

10. Assigning The Style The Selector can be one of 4 things: The Selector can be one of 4 things: HTML tag – the style will apply to all instances of that tag HTML tag – the style will apply to all instances of that tag An ID – the style will apply to all tags with the same ID= attribute An ID – the style will apply to all tags with the same ID= attribute A Class – the style will apply to all tags with the same CLASS= attribute A Class – the style will apply to all tags with the same CLASS= attribute Tag.Class – the style will apply to all instances of that tag and class Tag.Class – the style will apply to all instances of that tag and class

11. Assigning The Style - example p {color:blue} Which text will be turned blue below? paragraph 1 paragraph 1 paragraph2 paragraph2 paragraph3 paragraph3 header header

12. Assigning The Style - example h1 {color:blue} Which text will be turned blue below? paragraph 1 paragraph 1 paragraph2 paragraph2 paragraph3 paragraph3 header header

13. Assigning The Style - example.p2 {color:blue} Which text will be turned blue below? paragraph 1 paragraph 1 paragraph2 paragraph2 paragraph3 paragraph3 header header

14. Assigning The Style - example.cc {color:blue} Which text will be turned blue below? paragraph 1 paragraph 1 paragraph2 paragraph2 paragraph3 paragraph3 header header

15. Assigning The Style - example p.cc {color:blue} Which text will be turned blue below? paragraph 1 paragraph 1 paragraph2 paragraph2 paragraph3 paragraph3 header header

16. Where To Put CSS Inline style using STYLE attribute that we’ve already seen Inline style using STYLE attribute that we’ve already seen Not a good option since you’re putting it on every tag Not a good option since you’re putting it on every tag Winds up being similar to HTML formatting Winds up being similar to HTML formatting

17. Where To Put CSS Inline style example Inline style example In your 4 paragraphs, make this change (use copy/paste to make it easier) In your 4 paragraphs, make this change (use copy/paste to make it easier) Next, change the font size to 28. How many changes did you have to make? Next, change the font size to 28. How many changes did you have to make?

18. Where To Put CSS Internal style sheet Internal style sheet Use for a unique single document Use for a unique single document Goes in the HEAD section Goes in the HEAD section Uses STYLE tag and TYPE attribute Uses STYLE tag and TYPE attribute<head>... rules go here </style></head>

19. Where To Put CSS Internal style sheet example Internal style sheet example In your 4 paragraphs, completely remove the style attribute In your 4 paragraphs, completely remove the style attribute Add the following to the HEAD section Add the following to the HEAD section p {font-family:arial; font- size:24} </style>

20. Where To Put CSS Internal style sheet example (cont.) Internal style sheet example (cont.) Next, change the font size to 36. How many changes did you make? How many paragraphs did it affect? Next, change the font size to 36. How many changes did you make? How many paragraphs did it affect?

21. Where To Put CSS External style sheet External style sheet Can be applied to many pages Can be applied to many pages You can change the look of all the pages by changing one file You can change the look of all the pages by changing one file Rules go in a separate text file with a.css extension Rules go in a separate text file with a.css extension Each page links to the css file by using the LINK tag in the HEAD section Each page links to the css file by using the LINK tag in the HEAD section

22. Where To Put CSS External style sheet (cont.) External style sheet (cont.) For example, assume you create a rules file called myrules.css For example, assume you create a rules file called myrules.css To use it, web pages must include: To use it, web pages must include:<head> </head>

23. Where To Put CSS External style sheet example External style sheet example Make a copy of your stylesheets.html file and call it extstylesheets.html Make a copy of your stylesheets.html file and call it extstylesheets.html Open it and remove the entire style tag Open it and remove the entire style tag Put this in the HEAD section Put this in the HEAD section

24. Where To Put CSS External style sheet example External style sheet example Using Notepad, create a new empty file and name it myrules.css (you’ll have to specify ‘all files’ with this one, too) Using Notepad, create a new empty file and name it myrules.css (you’ll have to specify ‘all files’ with this one, too) Type this in the empty file Type this in the empty file p {font-family:arial; font-size:42} h1 {color:red;}

25. Where To Put CSS If you use more than one type of CSS, rules are applied in this order: If you use more than one type of CSS, rules are applied in this order: 1. Browser default 2. External style sheet 3. Internal style sheet (in the head section) 4. Inline style (inside an HTML element) The same style is overlayed, so the higher the number, the higher the priority (WITH EXCEPTIONS) The same style is overlayed, so the higher the number, the higher the priority (WITH EXCEPTIONS)

26. Where To Put CSS Multiple styles example Multiple styles example In your extstylesheets file, enter this AFTER the link tag In your extstylesheets file, enter this AFTER the link tag h1 {color:blue;} </style> What color is the level 1 heading? What color is the level 1 heading? A Style attribute would trump both A Style attribute would trump both