property : value +
advertisement
CIS 228
The Internet
10/13/11
The Box Model
Attaching CSS to a Web Page
Style element
Attribute type=”text/css”
Content: one or more CSS rules
Link element (empty element!)
Attribute type=”text/css”
Attribute rel=”stylesheet”
Attribute href=”somepath/file.css”
Attribute media=“screen” (“print”, “handheld”, etc.)
Both <link> and <style> belong in <head>
CSS Rules
Template: selector { property : value+ ; }
Selector identifies 0 or more elements in a document
Element names (e.g. blockquote, p, q …)
Class attribute values (e.g. p.legalese or .legalese)
Id attribute values (e.g. p#signature or #signature)
Property governs an aspect of element presentation
Value specifies a property (e.g. 7px, 7%, red, #777, etc.)
Example: p.legalese, #signature {
color: #0BEAF0 ;
}
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
Multiple style sheets are concatenated together
Class and Id Attributes
Distinguish elements having the same name
XHTML (and HTML)
Any element (in <body>) can have a class attribute
At most one element can have an id attribute
CSS
p.legalese { color: red ; }
.legalese { font-size: small ; }
p#signature { font-size: 3em ; }
#signature { border: 1px solid #DEAD29
Some Fonts
Sans-serif
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:
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%
text-align
“left”, “center”, “right”, “justify”, “inherit”
Color
Specifying color
17 named colors
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)
Deciphering Hex Color Codes
Example: #3FE29B
Separate into color pairs: 3F E2 9B
Replace letters with numbers: 3(15) (14)2 9(11)
A->(10) B->(11) C->(12) D->(13) E->(14) F->(15)
Multiply first by 16: (48)(15) (224)2 (144)(11)
Add: 63 226 155
#3FE29B = rgb( 63, 226, 155)
Setting Defaults
Set defaults for inherited properties on body element
body {
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 ; }
Some More CSS Properties
padding:
10px
border:
2px dotted #A84E19
border-width:
2px
border-style:
dotted
border-color:
#A84E19
margin:
8em
background-image:
url(Images/myDucky.png)
background-repeat:
no-repeat
background-position:
top center
The Box Model
Element content is surrounded by (optional) boxes:
Padding
transparent space
Border
width
style solid double groove outset dotted dashed inset ridge
color if not specified, same as content text (element color)
Margin
transparent space
Sides
Each box has four sides:
top right bottom left (clockwise ordering)
Properties of each side can be specified separately
border-bottom-style: dotted
padding-left: 10%
Properties of each side can be specified in turn
border-style: none double dotted inherit
margin: 2em 5% 30px 6pt
padding: 4em 8em
