Presentation is loading. Please wait.

Presentation is loading. Please wait.

 2004 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 byJasper Shepherd Modified over 8 years ago

Similar presentations

Presentation on theme: " 2004 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  2004 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  2004 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  2004 Prentice Hall, Inc. All rights reserved. 6.1 Introduction Cascading Style Sheets (CSS) –Separation of structure from presentation

4  2004 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  2004 Prentice Hall, Inc. All rights reserved. Outline inline.html (1 of 2)

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

7  2004 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 14-point font

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

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

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

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

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

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

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

15  2004 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  2004 Prentice Hall, Inc. All rights reserved. Outline styles.css (1 of 1)

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

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

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

20  2004 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  2004 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  2004 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  2004 Prentice Hall, Inc. All rights reserved. Outline positioning.html (1 of 1)

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

25 Outline positioning2.html (1 of 2)

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

27  2004 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  2004 Prentice Hall, Inc. All rights reserved. Outline background.html (1 of 2)

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

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

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

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

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

35  2004 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  2004 Prentice Hall, Inc. All rights reserved. Outline floating.html (1 of 3)

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

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

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

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

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

42  2004 Prentice Hall, Inc. All rights reserved.

43 Outline borders2.html (1 of 2)

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

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

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

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

48  2004 Prentice Hall, Inc. All rights reserved. Outline userstyles.css 1 of 1

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

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

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

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

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

54  2004 Prentice Hall, Inc. All rights reserved. 6.12 Web Resources www.w3.org/TR/css3-roadmap www.ddj.com/webreview/style tech.irt.org/articles/css.htm

Download ppt " 2004 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.
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.
 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.

 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.
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.
CASCADING STYLE SHEETS CSS. 2 What CSS means?  CSS is an extension to basic HTML that allows you to style your web pages.  It separates the part that.

CASCADING STYLE SHEETS CSS. 2 What CSS means?  CSS is an extension to basic HTML that allows you to style your web pages.  It separates the part that.
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.
Selectors thru Borders. CSS – Cascading Style Sheets – is a way to style HTML HTML is the content base of a web page CSS provides the presentation qualities.

Selectors thru Borders. CSS – Cascading Style Sheets – is a way to style HTML HTML is the content base of a web page CSS provides the presentation qualities.
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.

Similar presentations

Ads by Google