1 Cascading Style Sheets™ (CSS) Outline 5.1 Introduction 5.2 Inline Styles 5.3 Embedded Style Sheets 5.4 Conflicting Styles 5.5 Linking External Style Sheets 5.6 Web Resources

2 Objectives In this lesson, you will learn: To control the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of a Web site the same look and feel. To use the class attribute to apply styles. To use style sheets to separate presentation from content.

3 5.1 Introduction Cascading Style Sheets (CSS) Separation of structure from presentation Three methods of CSS: Inline Styles Embedded Style Sheets Conflicting Styles Linking External Style Sheets

4 5.2 Inline Styles Declare an individual element’s format Attribute style CSS property followed by a colon and a value i.e: style = “font-size:20pt”

5 Example1: Inline styles: inline.html This text does not have any style applied to it. This text has the font-size style applied to it, making it 20pt. This text has the font-size and color styles applied to it, making it 20pt. and blue. The style attribute allows you to declare inline styles. Separate multiple styles with a semicolon.

6 5.3 Embedded Style Sheets Embed an entire CSS document in an XHTML document’s head section AttributesDescription MIME type type = “text/css” Multipurpose Internet Mail Extensions (MIME) type Describes a file’s content PropertyDescription background-color Specifies the background color font-family Specifies the name of the font to use font-size Specifies a 14-point font

7 Example2: Embedded style sheets: declared.html em { background-color: #8000ff; color: white } h1 { font-family: arial, sans-serif } p { font-size: 14pt }.special { color: blue } Deitel & Associates, Inc. Deitel & Associates, Inc... programming, and Object Technology. Clients The company's clients include many Fortune 1000 companies, government agencies, branches …. and World Wide Web courses. this begins the style sheet section

8 5.4 Conflicting Styles Inheritance Descendant’s properties have greater specificity than ancestor’s properties

9 Example3: Inheritance in style sheets: advanced.html a.nodec { text-decoration: none } a:hover { text-decoration: underline;color: red;background-color: #ccffcc } li em { color: red;font-weight: bold } ul { margin-left: 75px } ul ul { text-decoration: underline; margin-left: 15px } Shopping list for Monday : Milk Bread White bread Rye bread Whole wheat bread Rice Potatoes Pizza with mushrooms Go to the Grocery store

10 Example3: Inheritance in style sheets: advanced.html a.nodec { text-decoration: none } a:hover { text-decoration: underline;color: red;background-color: #ccffcc } li em { color: red;font-weight: bold } ul { margin-left: 75px } ul ul { text-decoration: underline; margin-left: 15px } Shopping list for Monday : Milk Bread White bread Rye bread Whole wheat bread Rice Potatoes Pizza with mushrooms Go to the Grocery store

Linking External Style Sheets External style sheets Can provide uniform look and feel to entire site

12 Example4: External style sheets: styles.css a { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #ccffcc } li em { color: red; font-weight: bold; background-color: #ffffff } ul { margin-left: 2cm } ul ul { text-decoration: underline; margin-left:.5cm }

13 Example4: Linking external style sheets: external.html Shopping list for Monday : Milk Bread White bread Rye bread Whole wheat bread Rice Potatoes Pizza with mushrooms Go to the Grocery store

14

Web Resources tech.irt.org/articles/css.htm