CASCADING STYLE SHEETS

Chapter 3 Objectives Customize HTML elements Specify Font characteristics Classes Tag style Inline and block-level elements External style sheets

The Power of Styles Review Chapter 1 –URL in browser instructs PC to request a doc –Server returns the HTML source document for URL Review Chapter 2 –Structure and content on the page; also presentation,, –Browser displayed elements in default styles In this Chapter, customize styles

Creating an Internal Style Sheet Redefine the presentation rules for an element on a single page Defined in the head element Defining the style sheet language for a element as css (cascading style sheets): h2 {color:red}

Changing the Alignment h1 {text-align:center; font-style:italic; font-size:30pt} h2 {color:red; font-size:24pt; font-variant:small-caps}

Formatting Fonts Using Styles Absolute sizes in points (24pt) Percentage (150%) Preset values of xx-small, x-small, small, medium, large, x-large, and xx-large. h1 {text-align:center; font-size:30pt}

Bold and Italic Revisited font-style:italic (or normal, oblique) h1 {text-align:center; font-style:italic; font-size:30pt} font-weight:bold (or normal, bolder, lighter, or the values 100, 200, ) h2 {text-align:center; font-weight:bolder}

Beyond Bold and Italic text-decoration text-decoration:underline (or overline, line-through, none, blink) text-transform text-transform:capitalize (or uppercase, lowercase, none) font-variant font-variant:small-caps (or none) background background:color:red (or transparent or predefined color name or valid color number)

Paragraph Styles p {font-size:14pt} text-indent:25pt (or a percentage of the line width, e.g., 10%; negative for hanging indent) line-height:20pt (or a percentage of the single-line height, e.g., 150%, or a multiplication factor, e.g., 1.5)

Font Families font-family:"Lucida","Arial" (first-choice and second- choice font names) font: italic bolder small-caps 14pt/24pt "Lucida","Arial"

One Tag, Multiple Styles: Classes Class Example p {text-align:justify; font-weight:bold} p.intro {text-align:center; color:red} This paragraph will be centered with red, bold text. This paragraph will be bold text with justified alignment.

Using Local Styles This paragraph will be uppercase and red (in addition to any other style properties that may be defined for the regular paragraph).

Creating Custom Tags span {font-size:18pt} Let me make one thing perfectly clear…

External Style Sheets

End of Chapter 3 Customize HTML elements Specify Font characteristics Classes Tag style Inline and block-level elements External style sheets