1 / 8

CSS Rule

CSS Rule. Selector. body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; }. Declaration Block. Value. Attribute Name. CSS Selectors. CSS. HTML. Tag name. h1 { color: red; }. <h1>Today’s Specials</h1>. Class attribute.

naoko
Download Presentation

CSS Rule

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. CSS Selectors CSS HTML Tagname h1 { color: red;} <h1>Today’s Specials</h1> Classattribute .large { font-size: 16pt;} <p class="large">... Tag and class p.large {...} Idattribute #p20 { font-weight: bold; } <p id="p20">... table.itemstr.header CS 142 Lecture Notes: CSS

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

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

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

  6. 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> ... <div style="padding:2px; ... "> ... </body> Page-Specific Styles Element-Specific Styles CS 142 Lecture Notes: CSS

  7. CSS: HTML: 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; } <body> <h1>First Section Heading</h1> <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"> <h1>Another Section Heading</h1> <p> Another paragraph. </p> </div> </body> CS 142 Lecture Notes: CSS

  8. CS 140 Lecture Notes: File Systems

More Related