 a style language that defines layout & appearance of HTML documents  CSS covers fonts, colours, margins, lines, height, width, background images and positioning  HTML is used to structure content  CSS is used for formatting structured content

 Consider this screenshot…

  Name  Description  Part No   250A  Empty box  9BC   251A  5 way backmount frame, earth post and 4 x jumper rings  9BC   250/7A  7 way backmount frame & earth post  9BC  How much actual content?

  Name  Description  Part No   250A  Empty box  9BC   251A  5 way backmount frame, earth post and 4 x jumper rings  9BC   250/7A  7 way backmount frame & earth post  9BC  Not a lot…

 control layout of many documents from one single style sheet  more precise control of layout  apply different layout to different media- types (screen, print, etc) Basically just a change of style sheet

 Accessibility ◦ Screen readers see content only ◦ Allows use of user style sheets for e.g. increasing font size  File Sizes are smaller  Downloaded once into the browser

 Inconsistent browser support  Larger initial time commitment  Not perfect & can be buggy but improving

Using HTML to set a background colour With CSS the same result can be achieved like this: body {background-color: #FF0000;}

When setting multiple properties, put them all inside one set of {} with a semi-colon at the end of each body{ background: url("bg.gif"); background-color: #ffffff; background-repeat: repeat-x; }

You can even combine properties like this body { background: url("bg.gif") #fff repeat-x; } BUT it makes the CSS harder to understand!

Three possible methods  Inline styles ◦ Style info embedded in HTML code  Internal style sheets ◦ Style sheet held in section of html page  External style sheets ◦ CSS held in separate file with css extension BEST!!

A new background and font color with inline CSS This is broken This is working'

Inline CSS has the highest priority out of external, internal, and inline CSS. This means that you can override styles that are defined in external or internal by using inline CSS BUT Results are little different to previous HTML formatting tags approach! Use only when strictly necessary!

Use when 1 page has a different style to others

An external style sheet is simply a text file with the extension.css

My document My first stylesheet

body { background-color: #FF0000; } You can continue to add to this page by increasing the styles