Download - Working with Cascading Style Sheets
![Page 1: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/1.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
1
XP
Working with Cascading Style Sheets
Creating a Style for Online Scrapbooks
Tutorial 7
![Page 2: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/2.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
2
XPObjectives
• Introducing Cascading Style Sheets• Using Inline Styles• Using Embedded Styles• Using an External Style Sheet• Understanding Cascading Order• Working with Selectors
![Page 3: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/3.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
3
XPObjectives
• Using IDs and Classes• Sizing Elements• Floating an Element• Working with the div Element• Setting the Display Style• Working with the Box Model• Using Pseudo-Classes and Pseudo-Elements• Applying a Style to a Web Site
![Page 4: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/4.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
4
XPObjectives
• Positioning Objects with CSS• Working with Overflow and Clipping• Stacking Elements• Working with Different Media• Hiding Elements• Using Print Styles
![Page 5: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/5.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
5
XPIntroducing Cascading Style Sheets
• Style sheets are files or forms that describe the layout and appearance of a document.
• Cascading Style Sheets, or CSS, is a style sheet language used on the Web.– CSS specifications are maintained by the World
Wide Web Consortium (W3C)– Three versions of CSS exist: CSS1, CSS2, and
CSS3
![Page 6: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/6.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
6
XPCascading Style Sheets
• CSS1 introduced styles for the following document features:– Fonts
– Text
– Color
– Backgrounds
– Block-level Elements
![Page 7: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/7.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
7
XPCascading Style Sheets
• CSS2 introduced styles for the following document features:– Positioning
– Visual Formatting
– Media Types
– Interfaces
![Page 8: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/8.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
8
XPCascading Style Sheets
• CSS3 (which is still in development) will introduce styles for the following document features:– User Interfaces– Accessibility– Columnar layout– International Features– Mobile Devices– Scalable Vector Graphics
![Page 9: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/9.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
9
XPApplying a Style Sheet
• Three ways to apply a style to an HTML or XHTML document:– Inline Styles– Embedded Styles– External Styles
![Page 10: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/10.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
10
XPUsing Inline Styles
• Inline styles are easy to use and interpret because they are applied directly to the elements they affect.
<element style=“style1: value1; style2:
value2; style3: value3;…”>
![Page 11: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/11.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
11
XPUsing Embedded Styles
• You can embed style definitions in a document head using the following form:
<style>style declarations
</style>
Where style declarations are the declarations of the different styles to be applied to the document.
![Page 12: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/12.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
12
XPUsing an External Style Sheet
• Because an embedded style sheet only applies to the content of the start.htm file, you need to place a style declaration in an external style sheet to apply to the headings in the rest of the Web site.
• An external style sheet is a text file that contains style declarations.– It can be linked to any page in the site, allowing the
same style declaration to be applied to the entire site
![Page 13: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/13.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
13
XPUsing an External Style Sheet
• You can add style comments as you develop an external style sheet.
• Use the link element to link a Web page to an external style sheet.
• You can import the content of one style sheet into another.
![Page 14: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/14.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
14
XPUnderstanding Cascading Order
• You can link a single style sheet to multiple documents in your Web site by using the link element or the @import element.
• You can also link a single document to several style sheets.
![Page 15: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/15.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
15
XPApplying a single style sheet to multiple documents
![Page 16: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/16.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
16
XPApplying multiple sheets to a single document
![Page 17: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/17.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
17
XPStyle Precedence
1. External style sheet
2. Embedded styles
3. Inline styles
![Page 18: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/18.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
18
XPStyle Inheritance
• If a style is not specified for an element, it inherits the style of its parent element. This is called style inheritance.
![Page 19: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/19.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
19
XPWorking with Selectors
• CSS allows you to work with a wide variety of selectors to match different combinations of elements.
• Use contextual selectors to apply a style based on the context in which an element is used.
![Page 20: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/20.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
20
XPSimple and contextual selectors
![Page 21: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/21.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
21
XPAttribute Selectors
• Create an attribute selector to select an element based on the element’s attributes.– See figure 7-13 in your text for a list of
attribute selectors
![Page 22: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/22.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
22
XPUsing IDs and Classes
• Use an id to distinguish something, like a paragraph, from the others in a document.– For example, to identify a paragraph as
“head”, use the code:
<p id=“head”>… </p>
![Page 23: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/23.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
23
XPClasses
• HTML and XHTML require each id be unique– therefore an id value can only be used once in a document.
• You can mark a group of elements with a common identifier using the class attribute.
<element class=“class”> … </element>
![Page 24: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/24.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
24
XPApplying a style to a class
![Page 25: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/25.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
25
XPApplying a style to a class and element
![Page 26: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/26.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
26
XPSizing Elements and Floating an Element
• You can define the width of columns in a columnar layout using: width: value
• You can use CSS to set an element’s height using: height: value
• You can float a paragraph using: float: position
![Page 27: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/27.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
27
XPWorking with the div Element
• The div element is a generic block-level element.
<div>
content
</div>
![Page 28: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/28.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
28
XPSetting the Display Style
Values of the display style
![Page 29: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/29.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
29
XPSetting the Display Style
Values of the display style
![Page 30: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/30.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
30
XPWorking with the Box Model
• The box model is an element composed of four sections:– Margin– Border– Padding– content
![Page 31: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/31.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
31
XPThe Box Model
![Page 32: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/32.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
32
XPWorking with the Box Model
• Styles to set padding are similar to styles to set margins:– padding-top: value– padding-right: value– padding-bottom: value– padding-left: value
![Page 33: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/33.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
33
XPBorder Styles
![Page 34: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/34.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
34
XPBorder Style Types
![Page 35: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/35.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
35
XPUsing Pseudo-Classes and Pseudo-Elements
• A pseudo-class is a classification of an element based on its status, position, or current use in the document.
![Page 36: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/36.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
36
XPUsing Pseudo-Classes and Pseudo-Elements
• Rollover effects can be created using pseudo-classes.
• Pseudo-elements are elements based on information about an element’s content, use or position.
![Page 37: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/37.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
37
XPPositioning Objects with CSS
• The different positioning styles in the original CSS1 specifications were known as CSS-Positioning or CSS-P.
• To place an element at a specific position on a page use:
position: type; top: value; right: value;
bottom: value; left: value;
![Page 38: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/38.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
38
XPWorking with Overflow and Clipping
• The overflow property syntax:overflow: type
![Page 39: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/39.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
39
XPStacking Elements
• Specify stacking order with:z-index: value
z-index: 3
z-index: 1
z-index: 2
![Page 40: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/40.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
40
XPWorking with Different Media
• Specify output styles for particular devices in the media attribute of the link and style elements
![Page 41: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/41.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
41
XPThe @media Rule
• You can also specify the output media within a style sheet using:
@media type {style declarations}
Where media is one of the supported media types
and style declarations are the styles
associated with that media type.
![Page 42: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/42.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
42
XPMedia Groups
• CSS2 uses media groups to describe basic facets of different media– and to differentiate between different types of media based on the ways they render content.– Continuous or paged– Visual, aural, or tactile– Grid (for character grid devices) or bitmap– Interactive or static
![Page 43: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/43.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
43
XPMedia Groups
![Page 44: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/44.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
44
XPHiding Elements
• Two different styles that allow you to hide elements:– Display style– Visibility style
![Page 45: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/45.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
45
XPComparing the visibility and display styles
Visibility hidden
Object is hidden but still is part of the page flow
Display: none
Object is hidden and is removed from the page flow
![Page 46: Working with Cascading Style Sheets](https://reader036.vdocuments.net/reader036/viewer/2022062408/56813dea550346895da7c1e4/html5/thumbnails/46.jpg)
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
46
XPUsing Print Styles
• You can specify the size of a page, margins, internal padding, etc. of the page box.
• Review the Reference Window on page HTML 420 for working with print styles.