Chapter 7 pp 201-221
Cascading Style Sheets are the preferred method for document formatting. All the presentational methods used in html are said to be deprecated.
XHTML
XHTML uses styles
sheets to perform document formatting.
The <DOCTYPE>
Identifier
Transitional: Style sheets perform most formatting
Strict: Style sheets perform all formatting
Frameset: Document contains frames
XHTML Syntax
Use lowercase tags and attributes.
Enclose attribute values in quotes.
Terminate all nonempty elements.
Use nested tags and don't overlap.
Style Sheet Concepts
Separate appearance from structure
Style rules consist of selectors and declarations.
Selectors are html tags.
Declarations define properties with values.
e.g. h1 {color: blue}
Using Style Rules
- Cascading: the ordered sequence in which style rules apply
Style sheet files are specified in the <head> of the document - Inline, Embedded, External
Inline Styles
Rules applied to specific elements on a page
using the style attribute
<h1 style="font-color: #0000ff">
Embedded Style Sheets
Consistent element appearance on a page
<style type="text/css">
<!--
use comment tags for browsers that
don't support XHTML
enter style rules between
the comment tags e.g.
body { background-color: #ccffcc }
-->
External Style Sheets
Consistent appearance across a web site
Use <link rel="stylesheet"
href "mystyle.css">
Commonly Used Style Sheet Properties and Values
Complete CSS specifications from W3C's CSS section
Typography
Backgrounds, Colors, and Images
Page Layout
Length units
Percentage values
Margin and padding values
Border Appearance
Font Appearance and Style
Text Alignment
Inline Styles
Core
attributes
id
class
style
<span>
Tag
Tutorials
- Cascading Style Sheets
- Reference from the Web Design Group
- Stylesheets
- CSS: cascading style sheets tutorials and style guide from HTMLSource
- Sheets
- A great collection of articles from the Style section of WebReference.com
- CSS Tutorial
- Another thorough collection from W3Schools
- stylesheets
- tutorials from Webmonkey in the authoring section
- Web Typography Tutorial
- A collection from Webmonkey's series on Design