The Internet 10/6/11 Cascading Style Sheets CIS 228 The Internet 10/6/11 Cascading Style Sheets
Attaching CSS to a Web Page Style element Attribute type=”text/css” Content: one or more CSS rules Link element (empty element) Attribute rel=”stylesheet” Attribute href=”somepath/file.css” CSS file contains one or more CSS rules Both <link> and <style> belong in <head>
CSS Rules Template: selector { property : value+ ; } Selector identifies 0 or more elements in a document (Remember a document is a tree of elements) Element names can be selectors (e.g. blockquote, p, q …) Property governs an aspect of element presentation Value specifies a property (e.g. 7, 7px, 7%, red, etc.) Example: h1, q, em { background-color: maroon ; border: 1px solid blue ; }
Some CSS Properties color maroon grey background-color border border-bottom font-family sans-serif serif
Property Inheritance Some property values are inherited Some are not e.g. color, font-family Some are not e.g. border (why?) Elements pass inherited values to their children e.g. em inherits color from p Inheritance can be overridden by explicit assignment e.g. em { color: maroon ; }
Determining Property Values What is the value v of property p on element e? Is there a rule that selects e and defines p? Only one? that rule gives v More than one? take the (physically) last one Is p an inherited property? Take the value of p for e's parent Otherwise Default value To come: what if there are multiple style sheets?
The Class Attribute Distinguishes elements having the same name All Sam's must ware red hats All Sam's in the drama club must ware red hats XHTML (and HTML) Any element (in <body>) can have a class attribute e.g. <p class=”legalese”>...</p> CSS p.legalese { color: red ; } .legalese { font-size: small ; }