Sideway
output.to from Sideway



Draft for Information Only

Cascading Style Sheet

The introduction of cascading style sheet (CSS) to the HTML document is to separate the rendering information from the HTML document contents. The presentation attributes of elements are rearrange into cascading styles separately. However, the CSS specification is still very flexible in applying CSS to HTML because all HTML tags always have their own initial value preset by browser and all browsers have their own rendering engine.

Processing Model

The key purpose of CSS is to generate a cascading style model from the source document. The output of the cascading style model is the canvas. Selectors and properties are used by the CSS engine to address the HTML document and to parse the source document.

The canvas

In general, the canvas is a virtual space on which the cascading style model is rendered. The canvas is infinite for each dimension of the space, however user agents may impose limits on the dimnsions of the viewport. The virtual space is arranged in layer form in the z-dimension. While each layer is the virtual flat canvas where the cascading style model is rendered.

Addressing Model

Selectors and properties are used by CSS to address the elements of the source document. CSS properties can be directly assign to elements in the document. Or CSS properties can be assign through selector matching to elements in the document.

Types of Style

There are a few ways to attach rendering information to a HTML document.

Inline Styles

Style element attributes are used to implement the rendering style as the attributes of an element.

<h2 style="color: blue">

Embedded Styles

A style section is included in the head section of HTML document for grouping all rendering styles

<style type="text/css">h2  { color: blue }</style>

External Style Sheets

All the rendering styles are grouped into an style sheet and is linked to the HTML document by a link in the head section after the <title> element.

<link rel="stylesheet" type="text/css" href="external.css" />

Importing Style Sheets

External style sheet is imported to a cascading style sheet by an importing rule at the beginning of a cascading style sheet.

@import url("external.css");

CSS Syntax

The basic item of CSS is rendering properties which are used to replace the rendering attributes of a HTML tag. Rending properties can be grouped together by a STYLE attributes of HTML tag for rendering a specified tag.

<h2 style="color: blue">

The basic element of CSS is CSS rules. A CSS rule consists of a selector, h2 and a declaration, { color: blue }. A declaration comprises of  a  rendering property, color,  with rendering value, blue. Rending rules are applied to a particular tag name by matching with the selector.

h2 { color: blue }

A comment begins with "/*" and ends with "*/". 

/* comment */

Cascading Order

CSS is mainly a collection of CSS rules in cascading order. In general sense, the value of a valid styling rule will be overwritten by the later loaded value of the same valid styling rule. The cascading order of a CSS value is

  1. Inline Style (inside an HTML element)
  2. External Style Sheets and Embedded Styles (in the head section)
  3. Browser default

In other words, an inline style rule has the highest priority over other styling rule. However, overusing of inline style may mix content with presentation as not using of CSS.

Style Method

Style rules of CSS can be applied directly to an element through an inline style attribute or be applied indirectly through a selector.

  1. Inline: style="color:red;text-align:center">
  2. selector: p { color: red; text-align: center; }

Although CSS rule can be applied to individual element in the HTML document directly, but this is not the best way of applying CSS rule. In general, CSS rules are grouped by a selector. A group of style rules are then applied to those elements that matched the pattern of selectors.

By using the cascading order property of CSS, CSS rules can be applied by grouping selectors, multiple CSS  declarations, and grouping both selectors and CSS declarations.

  1. Grouping Selector. Selectors are seperated by ",". e.g.
    h1, h2 { font-family: sans-serif }
    h1, h2 { font-weight: bold }
    h1 { font-size: 14px }
    h2 { font-size: 12px }
  2. Multiple CSS  declarations. Multiple CSS  declarations are seperated by ";". e.g.
    h1 {
      font-weight: bold;
      font-size: 14px;
      font-family: sans-serif
    }
    h2 {
      font-weight: bold;
      font-size: 12px;
      font-family: sans-serif
    }
  3. Both grouping selectors and multiple CSS  declarations. e.g.
    h1, h2 { 
      font-family: sans-serif;
      font-weight: bold
    }
    h1 { font-size: 14px }
    h2 { font-size: 12px }

Selectors

In order to make CSS more flexible and simple to apply, a number of patterns are provided for manipulating CSS rules.

Universal selector CSS2.1

This is a styling method to redefine any element. e.g. any element

* { color: blue }

Type Selectors CSS2.1

This is a styling method to redefine the presentation style of existing elements. e.g. h2

h2 { color: blue }

Descendant selectors CSS2.1

This is a styling method to redefine the presentation style of existing elements that is a descendant of another element. e.g. em, nested anywhere within  h2,

h2 em { color: blue }

Child selectors CSS2.1

This is a styling method to redefine the presentation style of existing elements that is a child of another element. e.g. em, nested as a child within h2,

h2 > em { color: blue }

Adjacent selectors CSS2.1

This is a styling method to redefine the presentation style of existing elements that immediately follow another element, and both elements share the same parent. e.g. h2 follows h1 within body,

h1 + h2 { color: blue }

Attribute selectors CSS2.1

This is a styling method to redefine the presentation style of existing elements that match the specified attribute conditions.

h1[title] { color: blue }
h1[title="example"] { color: blue }
h1[title~="example"] { color: blue }
h1[lang|="en"] { color: blue }
h1[title="example"][lang|="en"] { color: blue }

Class Selectors CSS2.1

This is a styling method used in HTML to redefine the presentation style of existing elements that match the specified class attribute conditions.

.head1 { color: blue }
*.head1 { color: blue }
h1.heat1 { color: blue }
h1.heat.blue { color: blue }

ID Selectors CSS2.1

This is a styling method to redefine the presentation style of existing elements that match the specified id attribute conditions.

h1#titleid { color: blue }

Pseudo-Class CSS2.1

This is a styling method to redefine the presentation style of existing elements that match the specified  state.

p:first-child { color: blue }
*>p:first-child { color: blue }
h1>p:first-child { color: blue }
:link { color: blue }
a:link { color: blue }
:visited { color: blue }
a:visited { color: blue }
a.head1:visited { color: blue }
a:hover { color: blue }
a:active { color: blue }
a:focus { color: blue }
a:focus:hover { color: blue }
html:lang(fr) { color: blue }
:lang(fr) { color: blue }
:lang(fr) > h1{ color: blue }

Pseudo-Element CSS2.1

This is a styling method to redefine the presentation style of existing elements that match the specified part of an element.

p:first-line { color: blue }
p:first-letter { color: blue }
p:before { color: blue }
p:after { color: blue }

CSS Standard

CSS References..........


┬ęsideway
close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

ID: 101000009 Last Updated: 1/21/2019 Revision: 2 Ref:

IMAGE

Home (1)

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (334)

Reference (60)

Computer

Hardware (148)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (538)new

CSS (1)

HTML

Knowledge Base

Common Color (1)

Html Entity (Unicode) (1)

Html 401 Special (1)

OS (366)

MS Windows

Windows10 (1)

DeskTop (5)

Knowledge

Mathematics

Formulas (8)

Number Theory (165)new

Algebra (14)

Trigonometry (18)

Geometry (18)

Calculus (67)

Engineering

Tables (8)

Mechanical

Control

Process Control (1)

Mechanics (1)

Rigid Bodies

Statics & Dynamics (129)new

Fluid (5)

Fluid Kinematics (5)

Acoustics (19)

FiniteElement (2)

Biology (1)

Geography (1)


facebook
Latest Updated Links

Copyright © 2000-2019 Sideway . All rights reserved Disclaimersfacebook last modified on 08 Mar 2018