eric meyer on css project 12 pp. 263-280 project 12 files
TRANSCRIPT
Eric Meyer on CSSProject 12
pp. 263-280
Project 12 Files
Web Page Backgrounds/CSS
Project 12 uses standard CSS
completed project will look like this
standards-compliant browser
FireFox (Official CIS 110 Browser)
CSS Box Model
• CSS assumes that every element is contained in an element box
• E-M-B-P-C = Edge-Margin-Border-Padding-Content
• The width of an element is the distance from the left side of the content to the right side of the content:
div.box { margin-top:50px; background-color:yellow;
color:green; border-style:double; padding: 10px; border-color: #000090;
/* text-align applies only to the inline content of a block-level element. To center a div, use the following three style definitions */
margin-left: auto; margin-right: auto; width: 50%; }
proj12: Unstyled Document
Ch1201.html Open in TextPad
• Sequence of Two DIVs
<div id="content"> . . . </div>
<div id=“links"> . . . </div>
Positioning the DIVs
div#links {
position: absolute; top: 40px; left: 0;
width: 150px;
border: 1px dotted black;
}
position:absolute positioned wrt to parent element: <body>
div#links {position: absolute; top: 40px; left: 0; width: 150px;
border: 1px dotted black;}Absolute positioning
• element removed from document flow• positioned wrt containing block (parent)• may overlap other elements or be overlapped by them
div#links {position: absolute; top: 40px; left: 0; width: 150px;
border: 1px dotted black;}
• top, left, width properties define location
• top & left are side offset properties
• turn border on to see layout
body {margin: 0; padding: 0;}
div#content {margin: 40px 25px 25px 150px; border: 3px solid gray;}
• order of margin values: Top Rt Bttm Lft “remember this to avoid TRBL”
• left margin prevents overlap with links
• Run <body> margins to edges of viewport
div#content {margin: 40px 25px 25px 150px; border: 3px solid gray;}
div#links a {display: block;}
• make links block level: ch1202.htmlch1203.html
• rule uses a descendent selector
• Classification of Elements: block, inline, list-item
Descendant selectors
Problem: specify a CSS rule that “applies to EM elements that are contained by an H1 element"
Example:
h1 { color: red }
em { color: red }
Descendant selectors
• Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:
<h1>This headline is <EM>very</EM> important</h1>
Descendant selectors
Add a rule that sets the text color to blue whenever an em occurs anywhere within an h1
h1 { color: red }
em { color: red }
h1 em { color: blue }
return to proj12
Classification of Elements:Block-level, Inline, List-item
Block-Level Elements: Displayed on a line by itself
p, h1, div, table, ol, ul, . . .
Can only be contained by other block-level elements (with restrictions):
• p can be in a div• p can not be in a p
Classification of Elements:Block-level, Inline, List-item
Inline Elements: Do not begin on a new line
a, em, span, img, …
Can be children of any other element
List-item Elements: appear in lists
CSS Display Property
display
values: block | inline | list-item | none
applies to: all elements
div#links a {display: block;}
return to proj12