Download presentation
Presentation is loading. Please wait.
1
The Internet 10/11/11 Fonts and Colors
CIS 228 The Internet 10/11/11 Fonts and Colors
2
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>
3
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 ; }
4
Some CSS Properties color maroon grey background-color border
border-bottom font-family sans-serif serif
5
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 ; }
6
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?
7
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 ; }
8
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
9
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
10
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%
11
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)
12
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 ; }
Similar presentations
