Presentation is loading. Please wait.

Presentation is loading. Please wait.

Chapter 6 Cascading Style Sheets™ (CSS)

Published byClare Hardy Modified over 6 years ago

Similar presentations

Presentation on theme: "Chapter 6 Cascading Style Sheets™ (CSS)"— Presentation transcript:

1 Chapter 6 Cascading Style Sheets™ (CSS)
Internet & World Wide Web: How to Program Deitel, Deitel & Goldburg Fall 2007 Yanjun Li CSRU2350

2 Cascading Style Sheets (CSS)
We shift our focus to formatting and presenting information. Separation of structure from presentation To simplify maintaining and modifying a web page Three ways to define the style of XHTML files External Style Sheet Embedded Style Sheet Inline Style Fall 2007 Yanjun Li CSRU2350

3 Cascading Style Sheets (CSS)
Separation of structure from presentation Inline Styles Declare an individual element’s format Attribute style inside a single XHTML element CSS property Properties background-color, color Properties font-family, font-size Followed by a colon and a value For example: <p style = “font-size: 20pt; color: #0000ff”> your paragraph</p> Fall 2007 Yanjun Li CSRU2350

4 Inline Styles Fall 2007 Yanjun Li CSRU2350

5 Example inline <html> <body>
<p>This text does not have any style applied to it.</p> <p style = "font-size: 20pt"> This text has the <em>font-size</em> style applied to it, making it 20pt.</p> <p style = "font-size: 20pt; color: #6666ff"> This text has the <em>font-size</em> and <em>color</em> styles applied to it, making it 20pt. and light blue.</p> </body> </html> Fall 2007 Yanjun Li CSRU2350

6 Color property body { color:red; } h1 { color:#00ff00; } p { color:rgb(0,0,255); } Fall 2007 Yanjun Li CSRU2350

7 2.Embedded Style Sheets Embed an entire CSS document in an XHTML document’s head element. To achieve separation between the CSS code and the XHTML Element style Attribute type describes a file’s content using Multipurpose Internet Mail Extensions (MIME) type Example: <style type=“text/css”> </style> Fall 2007 Yanjun Li CSRU2350

8 CSS Rules For an element in XHTML, you can specify a displaying rule
The body of each rule is enclosed in { }. Properties background-color, color Properties font-family, font-size Example : li, p {color: red; font-size: 12pt} Fall 2007 Yanjun Li CSRU2350

9 Style Class Defines styles that can be applied to any type of element.
The declaration: .special {. . . } Attribute class of an XHTML element is used to apply a style class: Example : <p class=“special”> Fall 2007 Yanjun Li CSRU2350

10 Example <head> <title>Style Sheets</title>
<style type = "text/css"> em { font-weight: bold; color: black } h1 { font-family: tahoma, helvetica, sans-serif } p { font-size: 12pt; font-family: arial, sans-serif } .special { color: #6666ff } </style> </head> Fall 2007 Yanjun Li CSRU2350

11 font-size property 12-point
Relative values— xx- small, x-small, small, smaller, medium, large, larger, x-large and xx-large— Fall 2007 Yanjun Li CSRU2350

12 Fall 2007 Yanjun Li CSRU2350

13 Font family/ font-family: tahoma, helvetica, sans-serif
The browser attempts to use the fonts in the order they appear in the list. It’s advisable to end a font list with a generic font family name in case the other fonts are not installed on the user’s computer. In this example, if the tahoma font is not found on the system, the browser will look for the helvetica font. If neither is found, the browser will display its default sans-serif font. Fall 2007 Yanjun Li CSRU2350

14 3.Linking External Style Sheets
Can provide uniform look and feel to entire site File extension : styles.css CSS comments : /* ….*/ Element link in the head section of the XHTML document : <link rel = “stylesheet” type=“text/css” href=“styles.css” /> Fall 2007 Yanjun Li CSRU2350

15 Conflicting Styles (1) Cascading: all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority: Browser default External style sheet Embedded style sheet (inside the <head> tag) Inline style (inside an HTML element) Fall 2007 Yanjun Li CSRU2350

16 Conflicting Styles (2) Inheritance :
Child (nested) element inherits styles of parent element. Descendant’s properties have greater specificity than ancestor’s properties. Child’s style > Parent’s style Fall 2007 Yanjun Li CSRU2350

17 Grouping Element XHTML Element span : a grouping/inline-level element.
Apply CSS rules to a block of text. XHTML Element div: a similar element, but display on its own line, with margins above and below (a block-level element). Fall 2007 Yanjun Li CSRU2350

18 Length Measurement Relative-length Measurement is based on screen resolution. px (pixels) : margin-left: 75px em (height of an uppercase M) : font-size: 1.5em ex (height of a lowercase x) Absolute-length Measurement in (inches), cm (centimeters), mm (millimeters), pt (points, 1 pt = 1/72 in), pc (picas, 1 pc = 12 pt). Fall 2007 Yanjun Li CSRU2350

19 In next lecture Fall 2007 Yanjun Li CSRU2350

20 Font font-size sets the size of a font
xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, XXpt, xx% font-family: a prioritized list of font family names and/or generic family names for an element arial, sans-serif font-weight sets the weight of a font normal, bold, bolder, lighter, 100 ~ 900 font-style sets the style of the font normal, italic, oblique Fall 2007 Yanjun Li CSRU2350

21 2.6 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 Fall 2007 Yanjun Li CSRU2350

22 background.html (1 of 2) Fall 2007 Yanjun Li CSRU2350

23 background.html (2 of 2) Fall 2007 Yanjun Li CSRU2350

24 Fall 2007 Yanjun Li CSRU2350

25 2.7 Element Dimensions CSS rules can specify the actual dimensions of each page element Example: style=“width:20%; height:30%” Fall 2007 Yanjun Li CSRU2350

26 width.html (1 of 2) Fall 2007 Yanjun Li CSRU2350

27 width.html (2 of 2) Fall 2007 Yanjun Li CSRU2350

28 2.5 Positioning Elements Absolute positioning Relative positioning
Property position: “position : absolute;” Properties top, left, right, bottom The distances from margins of its containing block-level element. z-index attribute Layer overlapping elements properly, higher in front of lower value. Relative positioning Elements are positioned relative to other elements Property position : “position : relative; ” Fall 2007 Yanjun Li CSRU2350

29 positioning.html (1 of 1) Fall 2007 Yanjun Li CSRU2350

30 Fall 2007 Yanjun Li CSRU2350

31 positioning2.html (1 of 2) Fall 2007 Yanjun Li CSRU2350

32 positioning2.html 2 of 2 Fall 2007 Yanjun Li CSRU2350

33 Fall 2007 Yanjun Li CSRU2350

34 6.12 Web Resources www.w3.org/TR/css3-roadmap
tech.irt.org/articles/css.htm Fall 2007 Yanjun Li CSRU2350

35 W3C CSS Validation Service
Validates external CSS documents Ensures that style sheets are syntactically correct jigsaw.w3.org/css-validator/validator-upload.html Fall 2007 Yanjun Li CSRU2350

36 Reference Reproduced from the PowerPoints for Internet & World Wide Web How to Program, 3e by Deitel, Deitel and Goldberg © 2004. Reproduced by permission of Pearson Education, Inc. Fall 2007 Yanjun Li CSRU2350

Download ppt "Chapter 6 Cascading Style Sheets™ (CSS)"

Similar presentations

Intro To Cascading Style Sheets By Mario Yannakakis.

Intro To Cascading Style Sheets By Mario Yannakakis.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a 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.

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 Basics. Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed.

Cascading Style Sheets Basics. Why use Cascading Style Sheets? Allows you to set up a series of rules for all pages in a site. The series may be changed.
© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.

© 2004, Robert K. Moniot Chapter 6 CSS : Cascading Style Sheets.
 2008 Pearson Education, Inc. All rights reserved. 1 5 5 Cascading Style Sheets™ (CSS)

 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.

1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
Part 3 Introduction to CSS. CSS Text Text Styles h1 {color: green} // rgb(0,255,0), #00ff00 h2{letter-spacing: 0.5cm} // 2px h3 {text-align: right} //

Part 3 Introduction to CSS. CSS Text Text Styles h1 {color: green} // rgb(0,255,0), #00ff00 h2{letter-spacing: 0.5cm} // 2px h3 {text-align: right} //
© 2010, Robert K. Moniot Chapter 5 CSS : Cascading Style Sheets 1.

© 2010, Robert K. Moniot Chapter 5 CSS : Cascading Style Sheets 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.

 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.
Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.

Using Cascading Style Sheets CSS Basics. Goals Understand basic syntax of Cascading Style Sheets (CSS) Understand basic syntax of Cascading Style Sheets.
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.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.

Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
Lecture 7 Cascading Style Sheets (CSS) Boriana Koleva Room: C54

Lecture 7 Cascading Style Sheets (CSS) Boriana Koleva Room: C54
3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.

3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.
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 –
TECH2018 Multimedia and the Internet More about CSS and Page Layouts.

TECH2018 Multimedia and the Internet More about CSS and Page Layouts.
1 Working with Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size,

1 Working with Cascading Style Sheet (CSS). 2 Cascading Style Sheets (CSS)  a style defines the appearance of a document element. o E.g., font size,
Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.

Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.
COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 3.

COP 3813 Intro to Internet Computing Prof. Roy Levow Lecture 3.

Similar presentations

Ads by Google