Slide 1 CSS Rule body fontfamily Tahoma Arial sansserif color black background white margin 8px Selector Declaration Block Attribute Name Value CS 142 Lecture Notes CSS ID: 620323
Download Presentation The PPT/PDF document "CS 142 Lecture Notes: CSS" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
CS 142 Lecture Notes: CSS
Slide 1
CSS Rule
body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px;}
Selector
DeclarationBlock
Attribute Name
ValueSlide2
CS 142 Lecture Notes: CSS
Slide
2
CSS SelectorsCSSHTML<h1>Today’s Specials</h1>
h1 { color: red;
}.large { font-size: 16pt;
}p.large {...}
#p20 { font-weight: bold;}
<p class="large">...
<p id="p20">...
TagnameClass
attribute
Id
attribute
Tag and
class
t
able.items
tr.headerSlide3
CS 142 Lecture Notes: CSS
Slide 3
Predefined names:
white black red …8-bit hexadecimal intensities for red, green, blue:0-255 decimal intensities:Percentage intensities:CSS Color Specifiers
#ff0000
R
G
B
rgb
(255,255,0)
R
G
B
rgb
(80%,80%,100%)
R
G
BSlide4
CS 142 Lecture Notes: CSS
Slide 4
Padding
CSS Element Boxes
ElementContent
Padding
Margin
Element’s background used in padding area
Parent’s background used in margin area
BorderSlide5
CS 142 Lecture Notes: CSS
Slide 5
CSS Distances
2px pixels1mm millimeters2cm centimeters0.2in inches3pt printer’s points
2em, 4ex other printer’s unitsSlide6
CS 142 Lecture Notes: CSS
Slide 6
Adding Styles to HTML
<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>
Separate Stylesheet
Page-Specific Styles
Element-Specific StylesSlide7
CS 142 Lecture Notes: CSS
Slide 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;}
<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>
CSS:
HTML:Slide8
CS 140 Lecture Notes: File Systems
Slide 8