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

Download Report

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

CSS Rule
Selector
Declaration Block
body {
font-family: Tahoma, Arial, sans-serif;
color: black;
background: white;
margin: 8px;
}
Value
Attribute Name
CS 142 Lecture Notes: CSS
Slide 1
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 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 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
2px
pixels
1mm
millimeters
2cm
centimeters
0.2in
inches
3pt
printer’s points
2em, 4ex
other printer’s units
CS 142 Lecture Notes: CSS
Slide 5
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
Slide 6
CS 142 Lecture Notes: CSS
Slide 7