working with cascading style sheets. introducing cascading style sheets style sheets are files or...
TRANSCRIPT
![Page 1: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/1.jpg)
Working with Cascading Style Sheets
![Page 2: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/2.jpg)
Introducing 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,
CSS2.1, and CSS3
![Page 3: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/3.jpg)
Cascading Style Sheets
• CSS1 introduced styles for the following document features:– Fonts– Text– Color– Backgrounds– Block-level Elements
New Perspectives on HTML and XHTML, Comprehensive 3
![Page 4: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/4.jpg)
Cascading Style Sheets
• CSS2 introduced styles for the following document features:– Positioning– Visual Formatting– Media Types– Interfaces
• CSS 2.1 did not add any new features to the language
New Perspectives on HTML and XHTML, Comprehensive 4
![Page 5: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/5.jpg)
Cascading Style Sheets
• CSS3 (The CSS3 specification is still under development by W3C. However, many of the new CSS3 properties have been implemented in modern
browsers.) introduces styles for the following document features:– User Interfaces– Accessibility– Columnar layout– International Features– Mobile Devices– Scalable Vector Graphics
New Perspectives on HTML and XHTML, Comprehensive 5
![Page 6: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/6.jpg)
Applying a Style Sheet
• Three ways to apply a style to an HTML or XHTML document:1. Inline Styles
2. Embedded Styles
3. External Styles
![Page 7: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/7.jpg)
1. Using Inline Styles
• Inline styles are easy to use and interpret because they are applied directly to the elements they affect.
<element style=“Property: value; Property: value; Property : value3;…”>
![Page 8: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/8.jpg)
2. Using Embedded Styles
• You can embed style definitions in a document head using the following form:
<head><title>The Title</title><style>
style declarations</style></head>
Where style declarations are the declarations of the different styles to be applied to the document
![Page 9: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/9.jpg)
3. Using an External Style Sheet
• Because an embedded style sheet only applies to the content of one 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 10: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/10.jpg)
Using 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 also link a single document to several style sheets
![Page 11: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/11.jpg)
Applying a single style sheet to multiple documents
![Page 12: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/12.jpg)
Applying multiple sheets to a single document
![Page 13: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/13.jpg)
Style Precedence order:
1. Inline styles
2. Embedded styles
3. External style sheet
4. Browser default styles
![Page 14: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/14.jpg)
Using 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 15: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/15.jpg)
Classes
• 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 16: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/16.jpg)
Applying a style to a class
![Page 17: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/17.jpg)
Applying a style to a class and element
![Page 18: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/18.jpg)
Working with the div Element
• The div element is a generic block-level element
<div>
content
</div>
![Page 19: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/19.jpg)
Working with the Box Model
• The box model is an element composed of four sections:– Margin– Border– Padding– content
![Page 20: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/20.jpg)
Working with the Box Model
![Page 21: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/21.jpg)
Working 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 22: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/22.jpg)
Sizing 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 (see positioning objects)
![Page 23: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/23.jpg)
Using 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 24: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/24.jpg)
Using 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 25: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/25.jpg)
Positioning 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 26: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/26.jpg)
Floating an Element
New Perspectives on HTML and XHTML, Comprehensive 26
• The syntax for the float style is: float: position
![Page 27: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/27.jpg)
Floating an Element
• To float an element, use the style
float: position
where position is none (to turn off floating), left or right
• To display an element clear of a floating element, use the style
clear: position
where position is none, left, right, or both
New Perspectives on HTML and XHTML, Comprehensive 27
![Page 28: Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649e165503460f94b0129f/html5/thumbnails/28.jpg)
Stacking Elements
• Specify stacking order with:z-index: value
z-index: 3
z-index: 1
z-index: 2