Scribd
Upload
56 views7 pages

CSS Rule: Selector Declaration Block

This document discusses CSS (Cascading Style Sheets) and how they are used to style HTML documents. CSS rules have selectors that specify elements to style and declaration blocks that define attribute-value pairs to apply styles like font properties, color, and more. Styles can be defined internally in <style> tags or externally in separate .css files linked via <link> tags. Element-specific and class-based styles are demonstrated with examples styling body text and elements with the .shaded class. The document also covers CSS color specification methods and CSS box model properties like padding, margin, and border.

Uploaded by

brucebinh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
56 views7 pages

CSS Rule: Selector Declaration Block

This document discusses CSS (Cascading Style Sheets) and how they are used to style HTML documents. CSS rules have selectors that specify elements to style and declaration blocks that define attribute-value pairs to apply styles like font properties, color, and more. Styles can be defined internally in <style> tags or externally in separate .css files linked via <link> tags. Element-specific and class-based styles are demonstrated with examples styling body text and elements with the .shaded class. The document also covers CSS color specification methods and CSS box model properties like padding, margin, and border.

Uploaded by

brucebinh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 7

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: C

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: C

Slide 2

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: C

Slide 3

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

Percentage intensities:

rgb(80%,80%,100%)
R

B
CS 142 Lecture Notes: C

Slide 4

CSS Element Boxes


Parents background covers margin

Border

Margin

Element
Padding
Content

Padding

Elements background covers padding


CS 142 Lecture Notes: C

Slide 5

CSS Distances
2px

pixels

1mm

millimeters

2cm

centimeters

0.2in

inches

3pt

printers points

2em, 4ex

other printers units

CS 142 Lecture Notes: C

Slide 6

CS 142 Lecture Notes: C

Slide 7

You might also like