Presentation is loading. Please wait.

Presentation is loading. Please wait.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 Chapter 3 Style Sheets: CSS WEB.

Published by Modified over 9 years ago

Similar presentations

Presentation on theme: "Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 Chapter 3 Style Sheets: CSS WEB."— Presentation transcript:

1 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 Chapter 3 Style Sheets: CSS WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE JEFFREY C. JACKSON

2 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 Motivation HTML markup can be used to represent –Semantics: h1 means that an element is a top-level heading –Presentation: h1 elements look a certain way It’s advisable to separate semantics from presentation because: –It’s easier to present documents on multiple platforms (browser, cell phone, spoken, …) –It’s easier to generate documents with consistent look –Semantic and presentation changes can be made independently of one another (division of labor) –User control of presentation is facilitated

3 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 Style Sheet Languages Cascading Style Sheets (CSS) –Applies to (X)HTML as well as XML documents in general –Focus of this chapter Extensible Stylesheet Language (XSL) –Often used to transform one XML document to another form, but can also add style –XSL Transformations covered in later chapter

4 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Introduction A styled HTML document produced by the style sheet style1.css :

5 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Introduction link element associates style sheet with doc.

6 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Introduction type attribute specifies style language used

7 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Introduction href attribute provides style sheet URL

8 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Introduction title attribute provides style sheet name

9 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Introduction

10 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Introduction Alternative, user selectable style sheets can be specified

11 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Introduction A styled HTML document produced by the style sheet style2.css :

12 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Introduction Single document can be displayed on multiple media platforms by tailoring style sheets: This document will be printed differently than it is displayed.

13 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax Parts of a style rule (or statement)

14 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax: Selector Strings Single element type: Multiple element types: All element types: Specific elements by id:

15 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax: Selector Strings Single element type: Multiple element types: All element types: Specific elements by id: type selector

16 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax: Selector Strings Single element type: Multiple element types: All element types: Specific elements by id: universal selector

17 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax: Selector Strings Single element type: Multiple element types: All element types: Specific elements by id: ID selector

18 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax: Selector Strings

19 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax: Selector Strings Elements belonging to a style class: –Referencing a style class in HTML: Elements of a certain type and class: class selector

20 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax: Selector Strings Elements belonging to a style class: –Referencing a style class in HTML: Elements of a certain type and class: this span belongs to three style classes

21 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax: Selector Strings Elements belonging to a style class: –Referencing a style class in HTML: Elements of a certain type and class: this rule applies only to span ’s belonging to class special

22 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax: Selector Strings Source anchor elements: Element types that are descendents: pseudo-classes

23 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax: Selector Strings Source anchor elements: Element types that are descendants: rule applies to li element that is

24 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax: Selector Strings Source anchor elements: Element types that are descendants: rule applies to li element that is part of the content of an ol element

25 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax: Selector Strings Source anchor elements: Element types that are descendants: rule applies to li element that is part of the content of an ol element that is part of the content of a ul element

26 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 CSS Syntax Style rules covered thus far follow ruleset syntax At-rule is a second type of rule –Reads style rules from specified URL –Must appear at beginning of style sheet URL relative to style sheet URL

27 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 Style Sheets and HTML Style sheets referenced by link HTML element are called external style sheets Style sheets can be embedded directly in HTML document using style element Most HTML elements have style attribute (value is list of style declarations)

28 Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 Style Sheets and HTML Rules of thumb: –Use external style sheets to define site-wide style –Prefer style sheets (either external or embedded) to style attributes –XML special characters Must use references in embedded style sheets and style attribute Must not use references in external style sheets

Download ppt "Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 Chapter 3 Style Sheets: CSS WEB."

Similar presentations

Table, List, Blocks, Inline Style

Table, List, Blocks, Inline Style
Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.

Intro to HTML. HTML HTML = HyperText Markup Language Used to define the content of a webpage HTML is made up of tags and attributes Content.
Introduction to HTML & CSS

Introduction to HTML & CSS
Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.

Cascading Style Sheets (CSS) “Styles” for short. Pg. 418.
HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.

HTML Overview - Cascading Style Sheets (CSS). Before We Begin Make a copy of one of your HTML file you have previously created Make a copy of one of your.
Making Things Look Nice: Visual Appearance and CSS CMPT 281.

Making Things Look Nice: Visual Appearance and CSS CMPT 281.
XML: Managing Data Exchange Stylesheets. Lesson Contents CSS The basic XSL file XSL transforms Templates Sort Numbering Parameters and Variables Datatypes.

XML: Managing Data Exchange Stylesheets. Lesson Contents CSS The basic XSL file XSL transforms Templates Sort Numbering Parameters and Variables Datatypes.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.

© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.

Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
1/18 ITApplications XML Module Session 5: Extensible Stylesheet Language (XSL)

1/18 ITApplications XML Module Session 5: Extensible Stylesheet Language (XSL)
Cascading Style Sheets. Slide 2 Lecture Overview Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features.

Cascading Style Sheets. Slide 2 Lecture Overview Overview of Cascading Style Sheets (CSS) Ways to declare a CSS CSS formatting capabilities New features.
Timing in XML XML and XSL Timing framework in XML Approaches Inline syntax (SMIL) Styled Timing Timesheets Timesheets and SMIL comparison.

Timing in XML XML and XSL Timing framework in XML Approaches Inline syntax (SMIL) Styled Timing Timesheets Timesheets and SMIL comparison.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 Chapter 3 Style Sheets: CSS WEB.

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved Chapter 3 Style Sheets: CSS WEB.
Timing in XML Timing framework in XML Approaches Inline syntax (SMIL) Styled Timing Timesheets Timesheets and SMIL comparison.

Timing in XML Timing framework in XML Approaches Inline syntax (SMIL) Styled Timing Timesheets Timesheets and SMIL comparison.
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.
Cascading Style Sheets Controlling the Display Of Web Content.

Cascading Style Sheets Controlling the Display Of Web Content.
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.
 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 4 - Introduction to XHTML: Part 1 Outline 4.1 Introduction 4.2 Editing XHTML 4.3 First XHTML Example.
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0 Chapter 7 Representing Web Data:

Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved Chapter 7 Representing Web Data:

Similar presentations

Ads by Google