Working with CSS

•Using 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
•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 import the content of one style sheet into another
•Understanding 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
•Applying a single style sheet to multiple documents
•Applying multiple sheets to a single document
•Style Precedence
1.External style sheet
2.Embedded styles
3.Inline styles
•Style Inheritance
•If a style is not specified for an element, it inherits the style of its parent element; This is called style inheritance.
•Working 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
•Simple and contextual selectors
•Attribute 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
•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:

…

•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
…
•Applying a style to a class
•STOP
•STOP
•Applying a style to a class and element
•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
•Working with the div Element
•The div element is a generic block-level element

content

•Setting the Display Style
•Setting the Display Style
•Working with the Box Model
•The box model is an element composed of four sections:
–Margin
–Border
–Padding
–content
•The Box Model
•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
•Border Styles
•Border Style Types
•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
•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