1. 1 © Netskills Quality Internet Training, University of Newcastle Introducing Cascading Style Sheets http://www.netskills.ac.uk/ © Netskills, Quality Internet Training University of Newcastle Netskills is a trademark of Netskills, University of Newcastle.

2. 2 © Netskills Quality Internet Training, University of Newcastle Topics What are style sheets? How do they work? Syntax Internal and external style sheets Classes Cascading styles Bugs and browsers Why should I use CSS?

3. 3 © Netskills Quality Internet Training, University of Newcastle Separation of display instructions from content structure HTML used to structure a document Style sheet used to control display in browser If no support in browser standard display is used Style sheet can include: Colours Margins Fonts Positioning What are Style Sheets? www.w3.org/Style/CSS

4. 4 © Netskills Quality Internet Training, University of Newcastle How Do Style Sheets Work? Style sheets specify formatting rules Rules consist of selectors and declarations Browser uses the selector to identify an HTML tag to be displayed according to the relevant rule Selector identifies an HTML tag p { background-color: blue; color: white; } Style declarations for the … tag This paragraph should have white text on a blue background Result when viewed in web browser

5. 5 © Netskills Quality Internet Training, University of Newcastle Style Sheet Syntax ul {margin-left: 15%; font-weight: bold;} Semi-colon ; separates declarations p { background-color: blue; color: white; } Declaration(s) defined as: style property: value Curly braces Tag selector h1,h2,h3,h4 { background-color: white; color: blue; font-style: italic; } Multiple selectors as comma separated list

6. 6 © Netskills Quality Internet Training, University of Newcastle Internal Style Sheets Simplest to use Style information included in each page Rules set out in tags Usually in the section of the page Styles available to browser when it loads the page p { background-color: blue; color: white; }

7. 7 © Netskills Quality Internet Training, University of Newcastle Internal Style Sheets Internal Example h1 {color: green; font-style: italic;} Heading 1 in green italics Style sheet rule for declared inside tags within the document

8. 8 © Netskills Quality Internet Training, University of Newcastle External Style Sheets Often the most practical method Style information is held in a separate file Pages using the style sheet link to the same file Only one master to maintain File has.css extension Link can be to a local file or a full URL Multiple style sheets can be used in a page

9. 9 © Netskills Quality Internet Training, University of Newcastle External Style Sheets CSS example Heading 1 in green italics Style sheet rule for declared inside linked file mystyle.css

10. 10 © Netskills Quality Internet Training, University of Newcastle Classes Apply specific styles to sub-sets of HTML tags Set in style sheet p {text-align: left; color: red;} p.myclass {text-align: right; color: green;} Assign to tag with class attribute A different class of paragraph This is a normal paragraph Classes are re-usable in a page Several instances in one page Classes can be set that apply to all tags

11. 11 © Netskills Quality Internet Training, University of Newcastle Generic Classes Created by omitting the tag name in the selector p {text-align: left; color: red;}.myclass {text-align: right; color: green;} The class can now be assigned to any tag A different class of header A different class of paragraph This is a normal header This is a normal paragraph

12. 12 © Netskills Quality Internet Training, University of Newcastle Using Classes CSS example p {text-align: left; color: red;}.myclass {text-align: right; color: green;} A different class of header A different class of paragraph This is a normal header This is a normal paragraph Class applied to

13. 13 © Netskills Quality Internet Training, University of Newcastle Cascading Styles Cascading Style Sheets Multiple levels of style can be applied, merged and controlled Priority set according to simple rules If multiple style sheets are used – priority based on order in page Browser will attempt to use to last style declared before an element is displayed

14. 14 © Netskills Quality Internet Training, University of Newcastle Cascading Example CSS example h1 {color: red; font-family: Arial, sans-serif;} Heading 1 in Arial, red and in italics

15. 15 © Netskills Quality Internet Training, University of Newcastle Bugs and Browsers CSS support varies across major browsers Basic support Internet Explorer 3 Netscape 4 (a problem as it is still widely used) Good support Opera 3 Internet Explorer 4 Internet Explorer 5 (better than 4) Very good support Opera 4 and 5 Internet Explorer 5.5 Internet Explorer 6 Netscape 6 (Mozilla 5)

16. 16 © Netskills Quality Internet Training, University of Newcastle Issues CSS is a good thing if used correctly but: Pages must function without the style sheet Different browsers may give slightly different results May need to maintain separate style sheets for different browsers Also involves dynamic browser detection (not covered here!) Bug lists at: http://css.nu/pointers/bugs.html

17. 17 © Netskills Quality Internet Training, University of Newcastle Why Should I Use CSS? Separate display information means: Improved accessibility Different style sheets for different uses of the same content Reduced maintenance Changing site appearance may only require changes to the style sheet More options than HTML HTML has restricted value as a display mark-up CSS offers much richer control Dynamic HTML (DHTML) Exciting interactive pages – use CSS and scripting

18. 18 © Netskills Quality Internet Training, University of Newcastle Summary Style sheets separate display information from content structure Style sheet information can be internal to the page or stored in an external file Classes define reusable sub-sets of styles Cascading refers to the priority assigned to each style rule applied to an HTML element Browser compatibility is the main problem but should not be seen as a barrier to use