Download presentation
Presentation is loading. Please wait.
1
The Internet 10/13/11 The Box Model
CIS 228 The Internet 10/13/11 The Box Model
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” Attribute media=“screen” (“print”, “handheld”, etc.) Both <link> and <style> belong in <head>
3
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 ; }
4
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
5
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
6
Some Fonts 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
7
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
8
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”
9
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)
10
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: #3FE29B = rgb( 63, 226, 155)
11
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 ; }
12
Some More CSS Properties
padding: px border: px dotted #A84E19 border-width: px border-style: dotted border-color: #A84E19 margin: em background-image: url(Images/myDucky.png) background-repeat: no-repeat background-position: top center
13
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
14
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
Similar presentations
