Cascading Style Sheets CSS Details Cascading Style Sheets

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

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

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

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

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

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

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

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.

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

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%

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

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

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