Scribd
Upload
286 views7 pages

CS 142 CSS Lecture Notes

This document contains lecture notes on CSS (Cascading Style Sheets) from CS 142. It covers several key topics: 1) Adding styles to HTML through internal stylesheets, embedded styles, and linked stylesheets. 2) Element-specific and class-based styles that can be used to format different elements and sections. 3) CSS color specifications including hexadecimal, decimal, percentage values and color names. 4) The CSS box model including margins, borders, padding, and content. 5) CSS units of measurement for distances like pixels, ems, exs, points, etc.

Uploaded by

Brian Glenn
Copyright
© Attribution Non-Commercial (BY-NC)
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
286 views7 pages

CS 142 CSS Lecture Notes

This document contains lecture notes on CSS (Cascading Style Sheets) from CS 142. It covers several key topics: 1) Adding styles to HTML through internal stylesheets, embedded styles, and linked stylesheets. 2) Element-specific and class-based styles that can be used to format different elements and sections. 3) CSS color specifications including hexadecimal, decimal, percentage values and color names. 4) The CSS box model including margins, borders, padding, and content. 5) CSS units of measurement for distances like pixels, ems, exs, points, etc.

Uploaded by

Brian Glenn
Copyright
© Attribution Non-Commercial (BY-NC)
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: 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:
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; }

HTML:
<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 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 G B

Percentage intensities:

rgb(80%,80%,100%)
R G B
CS 142 Lecture Notes: CSS Slide 4

CSS Element Boxes


Parents background covers margin Margin Border

Element Padding Content

Padding

Elements background covers padding


CS 142 Lecture Notes: CSS Slide 5

CSS Distances
2px 1mm 2cm 0.2in pixels millimeters centimeters inches

3pt
2em, 4ex

printers points
other printers units

CS 142 Lecture Notes: CSS

Slide 6

CS 142 Lecture Notes: CSS

Slide 7

You might also like