1. Eric Meyer on CSS Project 12 pp. 263-280 Project 12 Files

2. Web Page Backgrounds/CSS Project 12 uses standard CSS completed project will look like thiswill look like this  standards-compliant browser FireFox (Official CIS 110 Browser)

3. CSS Box Model CSS assumes that every element is contained in an element boxelement 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:

4. 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%; }

5. proj12: Unstyled Document Ch1201.htmlCh1201.html Open in TextPad Sequence of Two DIVs......

6. Positioning the DIVs div#links { position: absolute; top: 40px; left: 0; width: 150px; border: 1px dotted black; } position:absolute  positioned wrt to parent element:

7. 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

8. 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

9. 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 margins to edges of viewport

10. div#content {margin: 40px 25px 25px 150px; border: 3px solid gray;} div#links a {display: block;} make links block level: ch1202.html ch1203.htmlch1202.html ch1203.html rule uses a descendent selectordescendent selector Classification of Elements:Classification of Elements block, inline, list-item

11. 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 }

12. 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: This headline is very important

13. 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

14. 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

15. 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

16. CSS Display Property display values: block | inline | list-item | none applies to: all elements div#links a {display: block;} return to proj12