lecture 7 style sheets: css
DESCRIPTION
Lecture 7 Style Sheets: CSS. 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: - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/1.jpg)
1
Lecture 7
Style Sheets:CSS
![Page 2: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/2.jpg)
2
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
![Page 3: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/3.jpg)
3
Style Sheet Languages
• Cascading Style Sheets (CSS)– Applies to (X)HTML as well as XML
documents in general– Focus of this chapter
• Extensible Style-sheet Language (XSL)– Often used to transform one XML document
to another form, but can also add style– XSL Transformations covered in later chapter
![Page 4: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/4.jpg)
4
CSS Introduction
• A styled HTML document
produced by the style sheet style1.css:
![Page 5: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/5.jpg)
5
CSS Introduction
link element associates style sheet with doc.
![Page 6: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/6.jpg)
6
CSS Introduction
type attribute specifies style language used
![Page 7: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/7.jpg)
7
CSS Introduction
href attribute provides style sheet URL
![Page 8: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/8.jpg)
8
CSS Introduction
title attribute provides style sheet name
![Page 9: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/9.jpg)
9
CSS Introduction
![Page 10: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/10.jpg)
10
CSS Introduction
Alternative, user selectable style sheetscan be specified
![Page 11: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/11.jpg)
11
CSS Introduction
• A styled HTML document
produced by the style sheet style2.css:
![Page 12: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/12.jpg)
12
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.
![Page 13: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/13.jpg)
13
CSS Syntax
• Parts of a style rule (or statement)
![Page 14: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/14.jpg)
14
CSS Syntax:Selector Strings
• Single element type:
• Multiple element types:
• All element types:
• Specific elements by id:
![Page 15: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/15.jpg)
15
CSS Syntax:Selector Strings
• Single element type:
• Multiple element types:
• All element types:
• Specific elements by id:
type selector
![Page 16: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/16.jpg)
16
CSS Syntax:Selector Strings
• Single element type:
• Multiple element types:
• All element types:
• Specific elements by id:universal selector
![Page 17: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/17.jpg)
17
CSS Syntax:Selector Strings
• Single element type:
• Multiple element types:
• All element types:
• Specific elements by id:
ID selector
![Page 18: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/18.jpg)
18
CSS Syntax:Selector Strings
![Page 19: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/19.jpg)
19
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
![Page 20: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/20.jpg)
20
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
![Page 21: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/21.jpg)
21
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
![Page 22: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/22.jpg)
22
CSS Syntax: Selector Strings
• Source anchor elements:
• Element types that are descendents:pseudo-classes
![Page 23: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/23.jpg)
23
CSS Syntax: Selector Strings
• Source anchor elements:
• Element types that are descendants:
rule applies to li element that is
![Page 24: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/24.jpg)
24
CSS Syntax: Selector Strings
• Source anchor elements:
• Element types that are descendants:
rule applies to li element that ispart of the content of an ol element
![Page 25: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/25.jpg)
25
CSS Syntax: Selector Strings
• Source anchor elements:
• Element types that are descendants:
rule applies to li element that ispart of the content of an ol elementthat is part of the content of a ul element
![Page 26: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/26.jpg)
26
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
![Page 27: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/27.jpg)
27
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)
![Page 28: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/28.jpg)
28
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
![Page 29: Lecture 7 Style Sheets: CSS](https://reader035.vdocuments.net/reader035/viewer/2022062309/568151e5550346895dc01e52/html5/thumbnails/29.jpg)
29
End of Lecture 7