1. CS 142 Lecture Notes: CSSSlide 1 CSS Rule body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; } Selector Declaration Block Attribute Name Value

2. CS 142 Lecture Notes: CSSSlide 2 CSS Selectors CSSHTML Today’s Specials h1 { color: red; }.large { font-size: 16pt; } p.large {...} #p20 { font-weight: bold; }... Tag name Class attribute Id attribute Tag and class table.items tr.header

3. CS 142 Lecture Notes: CSSSlide 3 ● Predefined names: white black red … ● 8-bit hexadecimal intensities for red, green, blue: ● 0-255 decimal intensities: ● Percentage intensities: CSS Color Specifiers #ff0000 RGB rgb(255,255,0) RGB rgb(80%,80%,100%) RGB

4. CS 142 Lecture Notes: CSSSlide 4 Padding CSS Element Boxes Element Content Padding Margin Element’s background used in padding area Parent’s background used in margin areaBorder

5. CS 142 Lecture Notes: CSSSlide 5 CSS Distances 2px pixels 1mm millimeters 2cm centimeters 0.2in inches 3pt printer’s points 2em, 4ex other printer’s units

6. CS 142 Lecture Notes: CSSSlide 6 Adding Styles to HTML... body { font-family: Tahoma, Arial, sans-serif;... }...... Separate Stylesheet Page-Specific Styles Element-Specific Styles

7. CS 142 Lecture Notes: CSSSlide 7 body { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: black; background: white; margin: 8px; } h1 { font-size: 19px; margin-top: 15px; margin-bottom: 5px; border-bottom: 1px solid black }.shaded { background: #d0d0ff; } First Section Heading Here is the first paragraph, containing text that really doesn't have any use or meaning; it just prattles on and on, with no end whatsoever, no point to make, really no purpose for existence at all. Another Section Heading Another paragraph. CSS:HTML:

8. CS 140 Lecture Notes: File SystemsSlide 8