1. Cascading Style Sheets
CSS Details
Cascading
Style
Sheets

2. Lesson Overview In this lesson, you will learn: Selector grouping
CSS properties for fonts
Ask one kid to sketch what other kids describe (magazine page that sketcher can’t see)
Look at result—shortcomings?
Sketch is probably not super-accurate
Need a very specific, accurate page description language—HTML

3. Grouping Styles
A style can select multiple elements separated by commas
The individual elements can also have their own styles
Grouping: 3 elements
with same color
Introduce CSS. Cascading Style Sheets (CSS) are used to create a consistent look within a Web site. Remind students that a Web site is a collection of Web pages. By using CSS, a Web designer can create a consistent look between the pages of the site and easily change the look with a few simple changes of code.
h2 has additional style

4. Grouping Styles Exercise
In your favorites assignment, apply the same color to the <p>, <h1>, <h3> tags

5. Font Properties Property Description Example Values font-family
Which font will be used
Arial
“Times New Roman”
font-size
How large are the letters
12pt
12px
1.5em
font-style
Enable / disable italic style
normal
italic
font-weight
Enable / disable bold style
bold
bolder
lighter

6. font-family Specifies the font for an element.
If a font name contains a space, it must be quoted.
Supports multiple font names in the preferred order.
If the first font is not supported by the computer, the next is tried
Specify generic fonts at the end
Generic font names: serif, sans-serif, cursive, fantasy, monospace

7. font-size
Units:
pt (point): number of points. A point is 1/72 of an inch onscreen.
px (pixels): number of pixels on the screen
em (m-size): number of m-widths. 1em is equal to the font’s current size
Vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger
Percentage sizes: e.g.:

8. font-weight, font-style
font-weight: normal, bold, bolder, lighter
font-style: normal, italic

9. Deprecated HTML Tags
Do NOT use the following HTML tags for styling. They are deprecated:
<font>
<b>
<i>
<center>
Use CSS to define the font, size, and other styles of text.
Use of deprecated HTML tags will result in deductions in your homework scores.

10. Font Exercise
In your favorites assignment, apply the following styles:
font-family
font-size
font-style
font-weight

11. Text Properties Property Description Example Values text-align
Horizontal alignment of text in an element
left
center
right
justify
text-decoration
Special decoration on the text
none
underline
overline
line-through
blink
line-height
Gap between lines of text 2
12pt
120%
text-indent
Indents first letter of each paragraph
20px 5%

12. line-height Possible values: normal
number: a number that will be multiplied with the current font size to set the line height.
length: a fixed line height in px, pt, cm, etc.
%: a line height in percent of the current font size

13. list-style-type Possible values: none disc (default), circle, square
decimal: 1,2,3,…
decimal-leading-zero: 01, 02, 03,…
lower-roman: i, ii, iii, iv,v,…
upper-roman
lower-alpha
others

14. Text Exercise
In your favorites assignment, apply the following styles:
text-align
line-height
text-decoration
list-style-type