CSS Rule Selector body { font-family: Tahoma, Arial, sans-serif; Declaration color: black; background: white; Block margin: 8px; } Value Attribute Name CS 142 Lecture Notes: CSS Slide 1
CSS Selectors CSS HTML Tag h1 { <h1>Today’s Specials</h1> name color: red; } Class .large { <p class="large">... attribute font-size: 16pt; } Tag and p.large {...} class Id #p20 { <p id="p20">... attribute font-weight: bold; } 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: #ff0000 R G B ● 0-255 decimal intensities: rgb(255,255,0) R G B ● Percentage intensities: rgb(80%,80%,100%) R G B CS 142 Lecture Notes: CSS Slide 3
CSS Box Layers Parent’s background used in margin area Border Margin Element Content Padding Padding Element’s background used in padding area CS 142 Lecture Notes: CSS Slide 4
CSS Distances 2px pixels 1mm millimeters 2cm centimeters 0.2in inches printer’s points 3pt other printer’s units 2em, 4ex CS 142 Lecture Notes: CSS Slide 5
Adding Styles to HTML Separate Stylesheet <head> ... <link rel="stylesheet" type="text/css" href="myStyles.css" /> <style type="text/css"> body { font-family: Tahoma, Arial, sans-serif; ... } </style> </head> <body> Page-Specific Styles ... <div style="padding:2px; ... "> ... </body> Element-Specific Styles CS 142 Lecture Notes: CSS Slide 6
CSS: HTML: body { <body> font-family: Tahoma, Arial, sans-serif; <h1>First Section Heading</h1> font-size: 13px; <p> color: black; Here is the first paragraph, containing background: white; text that really doesn't have any use margin: 8px; or meaning; it just prattles on and on, } with no end whatsoever, no point to h1 { make, really no purpose for existence font-size: 19px; at all. margin-top: 0px; </p> margin-bottom: 5px; <div class="shaded"> border-bottom: 1px solid black <h1>Another Section Heading</h1> } <p> .shaded { Another paragraph. background: #d0d0ff; </p> } </div> </body> CS 142 Lecture Notes: CSS Slide 7
Recommend
More recommend