CSS Cascading Style Sheets

Session Checklist ► Learn why style sheets are needed and their advantages and disadvantages ► Learn the format of a style in a style sheet and the most popular styles ► Prepare a style sheet for an individual Web page or one for an entire site

Introduction ► Separate content from style ► HTML was created as a semantic language ► Characteristic felt as a limitation ► Back to the roots

Definition of Style Sheets ► Style Sheet  Group of Rules

Advantages of Style Sheets ► You can speed the formatting of your Web pages ► You can change the look of your entire Web site by changing only the style sheet’s styles ► Style sheets support formatting that straight HTML does not support ► Maintain the separation between content and style

CSS Syntax ► The CSS syntax is made up of three parts:  Selector  Property  Value selector {property: value}

CSS examples body {color: black} p {font-family: "sans serif"} p {text-align: center; color: red} p { text-align: center; color: black; font-family: arial } p { text-align: center; color: black; font-family: arial } h1, h2, h3, h4, h5, h6 { font-family: "Arial", "Verdana"; color: green } h1, h2, h3, h4, h5, h6 { font-family: "Arial", "Verdana"; color: green }

Including CSS ► Style sheets for an individual Web page  Inline Styles  Internal Style Sheet ► Style sheet for an entire site  Multiple Style Sheets

Inline Styles This is a paragraph

Internal Style Sheets h1 { font-size:16pt; color: blue} This headline is blue and 16 pt. This headline is in standard H1 style.

Example body {background-color=yellow} h1 { font-size:16pt; font-family: "Verdana"; text-align: center; text-spacing: 4px; color: blue} p { font-size:12pt; font-family: "Verdana"; color: green} A title Some text A second title Some other text

Example <!-- body {background-color=green} h1 { font-size:16pt; font-family: "Verdana"; text-align: center; text-spacing: 4px; color: blue} p { font-size:12pt; font-family: "Arial"; font-weight: bold; color: yellow} --> A title Some text A second title Some other text

Popular and most-visited sites ► ► They contain needed information or provide an enjoyable diversion ► ► They load quickly ► ► They retain a consistent look throughout the site

One style sheet for multiple Web pages ► You have only to create a text file with the styles inside ► Do not include tags ► Save the file with.css filename extension

body {background-color=green} h1 { font-size:16pt; font-family: "Verdana"; text-align: center; text-spacing: 4px; color: blue} p { font-size:12pt; font-family: "Arial"; font-weight: bold; color: yellow} <link rel=stylesheet type="text/css" href=style1.css> A title Some text A second title Some other text style1.css Lesson8-3.htmLesson8-3.htm

Examples of CSS usage …/demo_default.htm