Table of CCS items: http://webreview.com/pub/guides/style/style.html
 
 

       The style (e.g. fonts, colors, spacing, etc) of the text displayed on a browser is governed by a wide variety of sources (the user, the browser, the Web page author, and the Web site designer).  The style actually displayed is determined by the source with the highest priority.  Cascading Style Sheets (CSS), which occupy the middle level in this priority hierarchy, are an efficient way to define a default control for the style of blocks of text all the way up to a whole Web site. You should already be familiar with how the user, the browser, and the author can contol styles, so, after a brief review of these other style control mechanisms, this LM focuses on CCS.  .... CSS, along with HTML and JavaScript, is one of the key components of DHTML (dynamic HTML) which is covered in LM IX.  Therefore, we will revisit these three methodologies (HTML, CCS, and JavaScript) in the next LM where we will see how they complement each other in the single, powerful DHTML approach. ...CCS are sponsered by the W3C, whose primary sourse is: http://www.w3.org/Style/ (This page is part of the LM as far as assessment goes.)

See the Study Guide for this learning module.

The Objectives of this learning module are to:

1. present the various ways the style of Web pages can be specified
2. explain the mechanics of CCS
3. discuss the advantages and disadvantages of CCS

This LM covers the same content as Chapter 23 in Niederst, Web Design in a Nutshell, but modifies this in order to better associate related techniques. The sequence of presentations in this learning module is as follows.   You can click on any link to jump directly to that section.

1. WAYS TO CONTROL THE STYLE OF WEB PAGES
2. CASCADING STYLE SHEETS, THE PREFERRED WAY TO SPECIFY STYLE ON THE WEB
3. HOW CSS WORK
4. NEW FEATURES OF CSS2
5. STYLE SHEET TIPS AND TRICKS
6. SUMMARY

1. WAYS TO CONTROL THE STYLE OF WEB PAGES:

1. The style of the text displayed by a Web broswer can be catagorized three ways.  These are listed below from lowest priority to highest, i.e. style specifications of higher numbers override specifications of lower numbers.
• Style settings of the browser:
1. Browser default settings have the lowest priority, i.e. all the following specifications superced the browser defaults.
2. User selected settings in browser preferences
• Style sheets (See this tutorialfor an illustration of the following.):
3. External style sheet linked to the document
4. External style sheet imported
5. Embedded style sheet
• tag specifications within the HTML code:
6. Inline style declarations
7. Tags and Tag attribute assignments:  Styles defined by using the <style> tag within the document head or by assigning values to the style attribute supercede all other style specifications.
2. Style settings in the browser are the lowest priority way of controlling the style of the browser display.
3. Style assingments defined with HTML tags are the highest priority way of controlling display styles.  They override styles of lower priority.
4. Style sheets are the most efficient way to govern styles especially global styles that affect groups of Web pages. A style sheet can define the default style specifications of a Web site, a single page, or even particular subsection of a page.  For a Web site or page, a style sheet can specify the default background, hypertext link colors, the content layout, etc. These features help style sheets to ensure consistency across a Web site or group of associated pages.
5. There are three kinds of style sheets (Most browsers support the first two.):
1. cascading style sheets (CSS) were initiall defined, by the W3C, with the CSS1 (level 1 or Version 1.0) specification in 1996. For a more detailed treatment of CSS see section 2, below.
2. style sheets written in JavaScript that use the document object model (DOM). In the document object model, a document is an object that has properties. Each property can in turn be an object that has further properties, and so on.  (See LM VII, section 0.3.)
3. XSL (Extensible Stylesheet Language) is a new type of style sheet designed to complement CSS.  See "Why two Style Sheet languages?", a subsection of the W3C Web Style Sheet Web site.

1. Cascading Style Sheet (CSS) is text  format for HTML documents endorsed by the World Wide Web Consortium.  With CSS, designers and users can create style sheets that define how different typographic elements of a Web page or a whole Web site  appear when viewed in a browser. These style sheets can then be applied to any Web page. The term cascading derives from the fact that multiple style sheets can be applied to the same Web page. CSS was developed by the W3C. The specification is still evolving and is not fully supported by any current Web browsers.
1. Before CSS, to modify any typographic element that appeared on several pages of a Web site, you would have change each element individually, a tedious, error-prone waste of time.  Now CSS provide a way to define global styles by specifying a template-like technique to define styles.  This allows developers to define a style for an typographic element and then apply anywhere in a Web site.  Consequently when you want to modify a style, you simply change the style sheet specification, and all elements defined with that style are updated immediately.
2. There are two levels of Cascading Style Sheets  (from the W3C Web site):
1. CSS1 (level 1 or Version 1.0) is a typographic formatting mechanism that allows developers to associate global style specifications to HTML documents.  It provides hundreds of layout settings that can be applied to all the subsequent HTML pages that are downloaded.
1. The CSS1 language is human readable and writable, and expresses style in common desktop publishing terminology.
2. A fundamental feature of CSS is the cascade which provides for the resolution of conflicts when multiple stylesheets apply to specific content.  Using the cascade, authors can attach a preferred style sheet or the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in the following specification.
3. The W3C reference for CSS1 is http://www.w3.org/TR/REC-CSS1-961217.html.
2. CSS2 (level 2 or Version 2.0) adds new features (e.g. positioning, z-order, visibility, overflow, etc. discussed in section 4, below) as well as incorporates support for XML, oral presentations for the visually impaired, downloadable fonts and other enhancements.  It is a generalization of CSS2 in that it allows developers and users to attach style to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.
1. CSS2 builds on CSS1 and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets.
2. CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc.
3. CSS2 also adds support content positioning, overlapping elements, visibility controls, text overflow, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface.
4. The W3C reference for CSS2 is http://www.w3.org/TR/REC-CSS2/.
5. Features that are added (to CSS1) in CSS2 are summarized in section 4, below and discussed in What's New in CSS2 in Niederst, pp. 422+.

1. Basically, a cascading style sheet is made up of style rules that declare how a particular typographic element should be dispalyed by a browser.  ( A nice introduction to CSS in general is given in Web Design Group's "Quick Tutorial.)
2. A CSS rule is a declaration that consists of a selector (usually an HTML element, h1, p, etc) followed by a list of declared properties and their values that specify the style to be applied to the selector; the rules have the syntax:

selector { property1: value1; property2: value2 ... }
1. Selectors identify the HTML elements to which the specified style is applied (by usiing the selector as a tag attribute).  There are four kinds of selectors (See WDG's CSS Structure and Rules for explanation and examples.):
1. Type selectors are are simple HTML tags, i.e. they are used to associate a style with a specific HTML element.
2. Contextual selectors specify a context within which the style is to be applied.
3. Class and ID attribute selectors specify user-defined elements that can be assigned a style, later, within an HTML tag.
1. Class selectors allow a class of elements to be defined by associating a class name to a specific set of HTML element tags.  Elements of the class can then be given a style by a single style rule, after which they are applied, in a tag, by using class=<class name> as an attribute.
2. ID selectors are used similarly to class selectors, except they are used to associate a style with a single, unique identifier.  An ID selector is defined by adding a "#" to the beginning of the identifier name.
4. Pseudo selectors are not based on structural elements of an HTML document; instead they are interpreted by the browser based on context and function.
1. Pseudo-elements are sub-parts of existing elements, e.g. first-line and first-letter.
2. Pseudo-classes, e.g link, visited, and active, can be applied to the anchor tags that contain the href attribute.
2. CSS1 defines the five categories of properties
1. font properties specifies the font family and variations used.
2. Color and Background properties
3. Text properties govern spacing, alignment, etc.
4. Box properties allow specification of the size, circumference, and position of the boxes that represent HTML elements.
5. Classification properties simply classifies HTML elements into categories which can be styled as a whole.
3. CSS2 adds a sixth property category, Positioning which allows HTML elements to be shifted from their original position.  See Section 4.1, below.
4. An outstanding tabulated summary of CSS1 properties is given by CNET.  At this point, surveying this table will give you an overview of the capabilites of CSS.  The Web Design Group gives a more detailed summary (with examples) of the CSS1 properties.
1. Inheritanceis the feature of CSS that allows nested tags (enclosed within other tags) to inherit the property values of the outer tags, unless superceded by selector declarations in the outer selectors.
1. A default style property, which is inherited by all visible elements, can be decared for a rule within the document's body section.
2. Some style properties are not inherited from the parent element to the child element. Most often it is intuitive why this is not the case. E.g., the 'background' property does not inherit, but the parent element's background will shine through by default.
2. Cascading is the style sheet facility that allows multiple styles (inline, embedded, or external) to be applied to a Web page while providing a priority hierarchy to resolve conflicting styles. Conflict resolution is based on each style rule having a "weight"; rules with higher weights override those of lower weights.As with inheritance, more specific rules have higher weights.
3. There are two elements, specificaly designed to apply CSS styles with HTML documents.  Styles for the content delimited by these tags is defined by declaring values for the style attribute.
1. <div> is used to specify a block of text (which can contain other HTML elements within it) for which a style can be defined.
2. <span> is used to specify a sequence of text for which a style can be defined.
When used with the class and id attribute selectors, these can be used to create custom-named elements, "sort of like creating your own HTML tags".
4. Ways of applying styles to an HTML document, ordered according to section 1.A, above, include:
1. Linking to an External Style Sheet
2. Importing a Style Sheet
3. Embedding a Style Sheet
4. Inlining Style
5. Tag declarations:
1. The CLASS Attribute
2. The ID Attribute
3. The SPAN Tag
4. The DIV Tag

SAQ:

4. NEW FEATURES OF CSS2:

An list of the new elements (selectors, properties, font descripters, pseudo-selectors, functions, and values) in CSS2 is given in Neiderst, pp. 423-425.  The most important of the associated new features are summarized in the following subsections.

4.1 Positioning with CSS:

1. Positioning of HTML elements on a browser display is part of the visual formatting model of the CSS2 specification.  It is not universily implemented and complex, so it is beyond the scope of this course.  The following features are noteworthy and cause me to look forward to the full implementation of this feature.
2. The CSS positioning scheme defines three kinds of positioning.
1. Static positioning, the default, means that elements can not be positioned or used serve as a context for child element replacement.
2. Absolute positioning allows the repositioning of and HTML element to an arbitrary location defined relative to the top-left point of the page or containing block of another element.  The vacated space disappears, i.e. the element appears to be removed.
3. Relative positioning allows the repositioning of an HTML element relative the top-left corner of the element box (box model) of its initial position.  The vacated space is left blank, i.e. the element appears to shifted.
3. A more detailed description is given in the CSS2 specification for positioning scheme of the visual formatting model.

1. Overlapping HTML elements are a result of their being repositioned outside theri normal flow.
2. The z-index is a special property that specifies the placement of elements in a 3D space, where the third dimension is normal to the 2D page.  The third dimension is simply a stack of overlapping elements where those with higher z-indexes obscure those with lower indexes.
3. A more detailed description is given in the CSS2 specification for "Specifying the stack level: the 'z-index' property".

1. The CSS2 property visibility can have the values visible (default) or hidden.
2. The space occupied by a hidden element appears blank when viewed in a browser.

1. The CSS2 property overflow provides a way to specify the way text that does not fit in its box is handled.
2. The overflow property has four possible attributes:
1. visible causes the box to be resized so that it displays all the text,
2. hidden leave the box alone making the overflow text invisible,
3. scroll causes a scroll box to be created (even if there is no overflow) that retains the original box size but allows the viewer to scroll through the text content, and
4. auto creates a scroll box only when necessary.

5. CSS TIPS, TRICKS, AND WORKAROUNDS:

1. See the text, pp. 426-428 for some unusual tricks and workarounds.