The Internet 10/11/11 Fonts and Colors CIS 228 The Internet 10/11/11 Fonts and Colors
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 ; }
Font Families Sans-serif Serif Monospace Cursive Fantasy Ariel, Verdana, Geneva, Helvetica, “DejaVu Sans” Serif “Times New Roman”, Times, “DejaVu Serif” Monospace “Courier New”, Courier, “DejaVu Sans Mono” Cursive “Comic Sans”, Cartoon, “Apple Chancery” Fantasy Impact, “Last Ninja”, Crush, Papyrus
Font Size Keywords: Absolute size: Relative size: Suggestions: xx-small, x-small, small, medium, large, x-large, xx-large Absolute size: Pixels: 14px Points: 14pt Relative size: Reference character: 1.4em Percentage: 140% Suggestions: Default: use keyword (medium or small) in body rule Otherwise: use relative size measurements
Other Text Properties font-weight “bold” or “normal” font-style “italic” (“oblique”) or nothing text-decoration “underline”, “overline”, “line-through”, “blink”, “none” line-height e.g. 1.6em or 160%
Color Specifying color 17 named colors Red-Green-Blue triples black, white, red, green, blue, aqua, fuchsia, yellow, etc. Red-Green-Blue triples rgb(100%, 50%, 25$) rgb(255, 127, 63) Hex codes #FF7F3F #963 (= #996633)
Setting Defaults Set defaults for inherited properties on body element font-family: Verdana, Geneva, “Dejavu Sans”, Arial, san-serif ; font-size: medium ; background-color: #FEA ; Color: #963 ; } h1 { font-size: 150% ; } h3 { font-size: 1.2em ; }