1 Creating Web Pages Part 3

2 CASCADING STYLE SHEETS (CSS): What exactly are they? Set of rules that define how a web browser should display an HTML page. Set of rules that define how a web browser should display an HTML page. Types of Style Sheets Types of Style Sheets InlineInline EmbeddedEmbedded ExternalExternal What is meant by “cascading”? What is meant by “cascading”?

3 div {color:#FF0000;} div.style1 {color:#FF0000;} div.style2 {color:#FF0000;} Cascading Style Sheets external.csscssexample.html CASCADING STYLE SHEETS (CSS): What do they look like? Cascading Style Sheets div.style2 { color:#009900;} div style in external sheet div.style1 in external sheet div.style2 in embedded style sheet inline style sheet div.style2 { color:#009900;} div style in external sheet div.style1 in external sheet inline style sheet div.style2 in embedded style sheet browser

4 The syntax is composed of three parts: a selector, a property and a value: selector {property:value} The property and value are separated by a colon and are surrounded by curly brackets: body {color:black} where: selector = the HTML element/tag you wish to define selector = the HTML element/tag you wish to define property = the attribute you wish to change property = the attribute you wish to change value = the setting to be assigned to the property value = the setting to be assigned to the property CASCADING STYLE SHEETS (CSS): How does CSS syntax work? If the value contains multiple words, it should be enclosed in quotes: p {font-family:"sans serif"} If there’s more than one property, separate each pair of properties with a semi-colon. p {text-align:center;color:red} To make style definitions easy to read, put one property on each line: p { text-align:center; color:black; font-family:arial; } GROUPS: GENERAL RULES:

5 You can group selectors. Use a comma to separate each pair of selectors: You can use the class selector to define different styles for the same type of HTML element: h1,h2,h3,h4,h5,h6 {color: green} CASCADING STYLE SHEETS (CSS): How does CSS syntax work? To make use of these defined class selectors, you then use the class attribute in your HTML document: This paragraph will be right-aligned. This paragraph will be right-aligned. This paragraph will be center-aligned. This paragraph will be center-aligned. To define a style that will be used by all HTML elements that have a certain class, omit the tag name in the selector To use the defined style in the body of the document, specify the class attribute..center {text-align:center} GROUPS: CLASS SELECTORS: p.right {text-align:right} p.center {text-align:center} This heading will be center-aligned This heading will be center-aligned This paragraph will also be center-aligned. This paragraph will also be center-aligned. Source:

6 CASCADING STYLE SHEETS (CSS): What kind of formatting can style sheets do? 1. Font and background colors 2. Background images

7 CASCADING STYLE SHEETS (CSS): What kind of formatting can style sheets do? 4. Font properties 3. Text properties

8 CASCADING STYLE SHEETS (CSS): What kind of formatting can style sheets do? 5. Box properties