CSS Rule Selector body fontfamily Tahoma Arial sansserif
CSS Rule Selector body { font-family: Tahoma, Arial, sans-serif; color: black; Declaration background: white; Block margin: 8 px; } Value Attribute Name CS 142 Lecture Notes: CSS Slide 1
CSS Selectors Tag name Class attribute Tag and class Id attribute CSS HTML h 1 { color: red; } <h 1>Today’s Specials</h 1> . large { font-size: 16 pt; } <p class="large">. . . p. large {. . . } #p 20 { font-weight: bold; } <p id="p 20">. . . table. items tr. header CS 142 Lecture Notes: CSS Slide 2
CSS Color Specifiers ● Predefined names: white black red … ● 8 -bit hexadecimal intensities for red, green, blue: #ff 0000 R G B ● 0 -255 decimal intensities: rgb(255, 0) R G B ● Percentage intensities: rgb(80%, 100%) R G B CS 142 Lecture Notes: CSS Slide 3
CSS Element Boxes Parent’s background used in margin area Border Margin Element Padding Content Padding Element’s background used in padding area CS 142 Lecture Notes: CSS Slide 4
CSS Distances 2 px pixels 1 mm millimeters 2 cm centimeters 0. 2 in inches 3 pt printer’s points 2 em, 4 ex other printer’s units CS 142 Lecture Notes: CSS Slide 5
Adding Styles to HTML Separate Stylesheet <head>. . . <link rel="stylesheet" type="text/css" href="my. Styles. css" /> <style type="text/css"> body { font-family: Tahoma, Arial, sans-serif; . . . } </style> </head> <body> Page-Specific Styles. . . <div style="padding: 2 px; . . . ">. . . </body> Element-Specific Styles CS 142 Lecture Notes: CSS Slide 6
CSS: HTML: body { font-family: Tahoma, Arial, sans-serif; font-size: 13 px; color: black; background: white; margin: 8 px; } h 1 { font-size: 19 px; margin-top: 15 px; margin-bottom: 5 px; border-bottom: 1 px solid black }. shaded { background: #d 0 d 0 ff; } <body> <h 1>First Section Heading</h 1> <p> 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. </p> <div class="shaded"> <h 1>Another Section Heading</h 1> <p> Another paragraph. CS 142 Lecture Notes: CSS Slide 7 </p>
CS 140 Lecture Notes: File Systems Slide 8
- Slides: 8
