Presentation is loading. Please wait.

Presentation is loading. Please wait.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.

Published byJob Mervyn Jenkins Modified over 10 years ago

Similar presentations

Presentation on theme: " 2003 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style."— Presentation transcript:

1  2003 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style Sheets 6.4 Conflicting Styles 6.5 Linking External Style Sheets 6.6W3C CSS Validation Service 6.7 Positioning Elements 6.8 Backgrounds 6.9 Element Dimensions 6.10 Text Flow and the Box Model 6.11 User Style Sheets 6.12 Web Resources

2  2003 Prentice Hall, Inc. All rights reserved. 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 specify the precise font, size, color and other properties of displayed text. –To specify element backgrounds and colors. –To understand the box model and how to control the margins, borders and padding. –To use style sheets to separate presentation from content.

3  2003 Prentice Hall, Inc. All rights reserved. 6.1 Introduction Cascading Style Sheets (CSS) –Separation of structure from presentation

4  2003 Prentice Hall, Inc. All rights reserved. 6.2 Inline Styles Declare an individual element’s format –Attribute style –CSS property Followed by a colon and a value

5  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline inline.html (1 of 2)

6  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline inline.html (2 of 2)

7  2003 Prentice Hall, Inc. All rights reserved. 6.3 Embedded Style Sheets Embed an entire CSS document in an XHTML document’s head section –Multipurpose Internet Mail Extensions (MIME) type Describes a file’s content –Property background-color Specifies the background color –Property font-family Specifies the name of the font to use –Property font-size Specifies a font size (e.g., 14-point font)

8  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline declared.html (1 of 3)

9  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline declared.html (2 of 3)

10  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline declared.html (3 of 3)

11  2003 Prentice Hall, Inc. All rights reserved. 6.4 Conflicting Styles Inheritance –Descendant’s properties have greater specificity than ancestor’s properties

12  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline advance.html (1 of 3)

13  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline advance.html (2 of 3)

14  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline advance.html (3 of 3)

15  2003 Prentice Hall, Inc. All rights reserved. 6.5 Linking External Style Sheets External style sheets –Can provide uniform look and feel to entire site

16  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline styles.css (1 of 1)

17  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline external.html (1 of 2)

18  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline external.html (2 of 2)

19  2003 Prentice Hall, Inc. All rights reserved. 6.6 W3C CSS Validation Service Validates external CSS documents Ensures that style sheets are syntactically correct

20  2003 Prentice Hall, Inc. All rights reserved. 6.6 W3C CSS Validation Service Fig. 6.6Validating a CSS document. (Courtesy of World Wide Web Consortium (W3C).)

21  2003 Prentice Hall, Inc. All rights reserved. 6.6 W3C CSS Validation Service Fig. 6.7CSS validation results. (Courtesy of World Wide Web Consortium (W3C).)

22  2003 Prentice Hall, Inc. All rights reserved. 6.7 Positioning Elements Absolute positioning –z-index attribute Layer overlapping elements properly Relative positioning –Elements are positioned relative to other elements

23  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline positioning.html (1 of 1)

24  2003 Prentice Hall, Inc. All rights reserved.

25 Outline  2003 Prentice Hall, Inc. All rights reserved. Outline positioning2.html (1 of 2)

26  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline positioning2.html 2 of 2

27  2003 Prentice Hall, Inc. All rights reserved.

28 6.8 Backgrounds background-image –Specifies the image URL background-position –Places the image on the page background-repeat –Controls the tiling of the background image background-attachment –fixed –scroll font-weight –Specify the “boldness” of text

29  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline background.html (1 of 2)

30  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline background.html (2 of 2)

31  2003 Prentice Hall, Inc. All rights reserved.

32 6.9 Element Dimensions CSS rules can specify the actual dimensions of each page element

33  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline width.html (1 of 2)

34  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline width.html (2 of 2)

35  2003 Prentice Hall, Inc. All rights reserved. 6.10 Text Flow and the Box Model Floating –Move an element to one side of the screen Box model –Margins margin-top, margin-right, margin-left, margin-bottom –Padding padding-top, padding-right, padding-left, and padding-bottom –Border border-width –thin, medium, thick border-color –Sets the color border-style –none, hidden, dotted, dashed, solid, double, groove, ridge, inset and outset

36  2003 Prentice Hall, Inc. All rights reserved. 6.10 Text Flow and the Box Model Fig. 6.13Box model for block-level elements.

37  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline floating.html (1 of 3)

38  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline floating.html (2 of 3)

39  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline floating.html (3 of 3)

40  2003 Prentice Hall, Inc. All rights reserved. Border Example Border properties: –border-width Any valid CSS length or thin, medium, thick –border-color sets the color –border-style border-top-style, border-bottom-style, border-left-style, border- right-style none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset

41  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline borders.html (1 of 2)

42  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline borders.html (2 of 2)

43  2003 Prentice Hall, Inc. All rights reserved.

44 Outline  2003 Prentice Hall, Inc. All rights reserved. Outline borders2.html (1 of 2)

45  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline borders2.html (2 of 2)

46  2003 Prentice Hall, Inc. All rights reserved. 6.11 User Style Sheets Format pages based on preferences

47  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline User_absolute.html (1 of 2)

48  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline User_absolute.html (2 of 2)

49  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline userstyles.css 1 of 1

50  2003 Prentice Hall, Inc. All rights reserved. 6.11 User Style Sheets Fig. 6.18User style sheet in Internet Explorer 6.

51  2003 Prentice Hall, Inc. All rights reserved. 6.11 User Style Sheets Fig. 6.19User style sheet applied with pt measurement.

52  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline User_relative.html (1 of 2)

53  2003 Prentice Hall, Inc. All rights reserved. Outline  2003 Prentice Hall, Inc. All rights reserved. Outline User_relative.html (2 of 2)

54  2003 Prentice Hall, Inc. All rights reserved. 6.11 User Style Sheets Fig. 6.21User style sheet applied with em measurement.

55  2003 Prentice Hall, Inc. All rights reserved. 6.12 Web Resources www.w3.org/TR/css3-roadmap http://www.w3.org/TR/html4/present/styles.html www.ddj.com/webreview/style tech.irt.org/articles/css.htm http://www.htmlhelp.com/reference/html40/head/l ink.html

Download ppt " 2003 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style."

Similar presentations

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.

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.
Cascading Style Sheets Color and Background Controls Border and Margin Controls (Boxes)

Cascading Style Sheets Color and Background Controls Border and Margin Controls (Boxes)
9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.

9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.
 2002 Prentice Hall, Inc. All rights reserved. Chapter 4 – Cascading Style Sheets (CSS) Objectives –To take control of the appearance of a Web site by.

 2002 Prentice Hall, Inc. All rights reserved. Chapter 4 – Cascading Style Sheets (CSS) Objectives –To take control of the appearance of a Web site by.
1 Dynamic HTML: Cascading Style Sheets™ (CSS). 2 Introduction Cascading Style Sheets (CSS) –Specify the style of your page elements –Spacing, margins,

1 Dynamic HTML: Cascading Style Sheets™ (CSS). 2 Introduction Cascading Style Sheets (CSS) –Specify the style of your page elements –Spacing, margins,
Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.

Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.
1 XHTML Cascading Style Sheets™ (CSS). 2 Inline.html 1 2

1 XHTML Cascading Style Sheets™ (CSS). 2 Inline.html 1 2
Tutorial 4: Creating page layout with css

Tutorial 4: Creating page layout with css
Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding, margins, and borders Wrap text around an image Float a block-level.

Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding, margins, and borders Wrap text around an image Float a block-level.
1 Lesson 11. 2 Style Sheets Box Model Content (text,image,table) Margin Padding Border Box.

1 Lesson Style Sheets Box Model Content (text,image,table) Margin Padding Border Box.
 2002 Prentice Hall, Inc. All rights reserved. Chapter 4 – Cascading Style Sheets (CSS) Outline 4.1Introduction 4.2Inline Styles 4.3Creating Style Sheets.

 2002 Prentice Hall, Inc. All rights reserved. Chapter 4 – Cascading Style Sheets (CSS) Outline 4.1Introduction 4.2Inline Styles 4.3Creating Style Sheets.
Tutorial 3 Working with Cascading Style Sheets. XP Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external.

Tutorial 3 Working with Cascading Style Sheets. XP Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external.
Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.

Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic CSS: Cascading Style Sheets.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
1 Dynamic HTML -Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style Sheets 6.4 Conflicting Styles 6.5 Linking External.

1 Dynamic HTML -Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style Sheets 6.4 Conflicting Styles 6.5 Linking External.
14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.

14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.
Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.

Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.
Pre-Module CSS BTM 395: Internet Programming. Cascading Style Sheets (CSS) Separation of structure from presentation CSS guide and tutorial –http://www.westciv.com/style_master/academy/css_tutorial/index.htmlhttp://www.westciv.com/style_master/academy/css

Pre-Module CSS BTM 395: Internet Programming. Cascading Style Sheets (CSS) Separation of structure from presentation CSS guide and tutorial –
Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.

Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.
Cascading Style Sheets CS3505. What are CSS? Method for adding style attributes consistently to HML tags Cascading because styles are applied in order.

Cascading Style Sheets CS3505. What are CSS? Method for adding style attributes consistently to HML tags Cascading because styles are applied in order.

Similar presentations

Ads by Google