xp tutorial 7new perspectives on html and xhtml, comprehensive 1 working with cascading style sheets...
TRANSCRIPT
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
1
XP
Working with Cascading Style Sheets
Tutorial 7
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
2
XPUsing Inline StylesSession 7.1
• 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;…”>
<h1 style=“text-align: center; font-family: Arial, Helvetica, sans-serif”>
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
3
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.
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
4
XPUsing an External Style Sheet
• Because an embedded style sheet only applies to the content of the file it is embedded in, you need to place style declarations in an external style sheet to apply to 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
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
5
XPUsing an External Style Sheet
• You can add style comments as you develop an external style sheet.– /* comment */
• Use the link element to link a Web page to an external style sheet.<link href=“name.css” rel=‘stylesheet” type =
“text/css” />
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
6
XPUsing an External Style Sheet
• You can import the content of one style sheet into another.
• Add the following to either an embedded or an external style sheet– @import(name.css);
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
7
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.
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
8
XPApplying a single style sheet to multiple documents
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
9
XPApplying multiple sheets to a single document
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
10
XPStyle Precedence
1. External style sheet
2. Embedded styles
3. Inline styles
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
11
XPStyle Precedence
• If two styles have the same weight then the one declared last has precedence.<style type=“text/css”>
H1 {color: orange; font-family: sans-serif”}
H1{color: blue; font-family: serif}
</style>
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
12
XPStyle Precedence
• You can override the precedence rules by adding the !important property to a style declaration<style type=“text/css”>
H1 {color: orange !important; font-family: sans-serif”}H1{color: blue; font-family: serif}
</style>Gives the orange colour precedence
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
13
XPStyle Inheritance
• If a style is not specified for an element, it inherits the style of its parent element. This is called style inheritance.– Causes style declarations to cascade down
through a document’s hierarchy
• To set every element on a page to blue– Body {color: blue}
• Every element on the page inherits this style
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
14
XPStyle Inheritance
• To override style inheritance you specify an alternate style for one of the descendent elements of the parent.– Body {color: blue}
– P {color: red}
– Changes every element on the page to blue except for paragraphs and every element within a paragraph
• !important property also overrides style inheritance
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
15
XPWorking with Selectors
• CSS allows you to work with a wide variety of selectors to match different combinations of elements.– h1, h2, h3 {font-family: sans-serif}– h1 {color: blue}– h2 {color: red}
• h1 headings are blue sans-serif• h2 headings are red sans-serif.
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
16
XPWorking with Selectors
• Set all bold text to blue – b {color: blue }
• Use contextual selectors to apply a style based on the context in which an element is used.
• Eg, to apply a style to text within a list– li b {color: blue}
• li is the parent element, b is the descendant element
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
17
XPSimple and contextual selectors
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
18
XPAttribute Selectors
• Create an attribute selector to select an element based on the element’s attributes.– a {color: blue} – all <a> tags
– a[href] {color: blue} – only hrefs, not anchors
– See figure 7-13 in your text for a list of attribute selectors
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
19
XPUsing IDs and ClassesSession 7.2
• 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>
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
20
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>
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
21
XPApplying a style to a class
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
22
XPApplying a style to a class and element
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
23
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
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
24
XPWorking with the div Element
• The div element is a generic block-level element.
<div>
content
</div>
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
25
XPSetting the Display Style
Values of the display style
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
26
XPSetting the Display Style
Values of the display style
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
27
XPWorking with the Box Model
• The box model is an element composed of four sections:– Margin– Border– Padding– content
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
28
XPThe Box Model
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
29
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
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
30
XPBorder Styles
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
31
XPBorder Style Types
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
32
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.
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
33
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.
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
34
XPPositioning Objects with CSSSession 7.3
• 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;
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
35
XPWorking with Overflow and Clipping
• The overflow property syntax:overflow: type
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
36
XPStacking Elements
• Specify stacking order with:z-index: value
z-index: 3
z-index: 1
z-index: 2
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
37
XPWorking with Different Media
• Specify output styles for particular devices in the media attribute of the link and style elements
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
38
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.
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
39
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
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
40
XPMedia Groups
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
41
XPHiding Elements
• Two different styles that allow you to hide elements:– Display style– Visibility style
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
42
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
Tutorial 7 New Perspectives on HTML and XHTML, Comprehensive
43
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.