Chapter 4: CSS Contents ◼ Stylesheet ◼ Accessibility ◼ Link CSS with HTML ◼ Syntax of CSS Style sheet ◼ Style sheet describes how documents are presented on screens, in print, or perhaps how they are pronounced ◼ Separate structure and presentation ◼ W3C has actively promoted the use of style sheets since 1994. ◼ W3C recommends several stylesheets CSS1, CSS2, XPath, XSLT ◼ CSS especially is widely implemented in browsers. Advantage of StyleSheet ◼ Simple management Separating of presentation result in well-organized content and simple structure.  Construction and maintenance of the site easier. ◼ Change the apparence of the document easily without changing the HTML code ◼ Consistency in the appearance of the site ◼ Change style of a page easily  Switch from a style for the others  For handicap people and limited user-interface environment. Example of page using stylesheet A document with different style A document with different style A document with different style Document without style Link CSS with HTML ◼ HTML document contains content of a web page ◼ CSS document contains the presentation style ◼ 3 ways for defining a style for a HTML  Inline: writing styles mixing with the HTML tags  Internal: writing CSS in a style section in the HTML document  External: leaving CSS in a separate document and link it with the HTML document Link CSS with HTML: Inline ◼ In-line styles are plonked straight into the HTML tags using the style attribute. ◼ <p style="color: red">text</p> ◼ Style is applied only for the tags contaning it ◼ in-line styles make the HTML document presentation dependant ➔should be avoided Link CSS with HTML: Internal Internal styles are used for the whole page. Styles are defined inside the head section, surrounded by <style> tags <html> <head> <style type="text/css"> p {color: red;} a {color: blue;} </style> </head>. …. This will make all of the paragraphs in the page red and all of