Sideway
output.to from Sideway
Draft for Information Only

Content

Cascading Style Sheet
 CSS Processing Model
  The CSS canvas
  CSS Addressing Model
 CSS Syntax
 CSS Rule
   Direct Specifying CSS Rule
   Indirect Matching CSS Rule
   Example
 CSS Styling Method
  Method of Direct Specifying
  Method of Indirect Matching
 The Creator
 Types of Style Sheet
 CSS Standard

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.

CSS 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 CSS 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.

CSS Addressing Model

Selectors and properties are used as CSS rules 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.

CSS Syntax

The CSS language has a very simple form with a few elements.

CSS PropertyThe basic item of CSS is rendering properties which are used to replace the rendering attributes of a HTML tag. Rending properties can either be used as the parameter of style attributes of a element tag for rendering a specified tag, or be a property declaration of a CSS rule set. For example, CSS property color with value blue: <h2 style="color: blue">
h2 {color: blue;}
CSS DeclarationA CSS declaration is to assign a legal value to a specified CSS property. A declaration may be empty or consists of a property name, followed by a colon ':" and the specipied property value. For example, a declaration of property color with value blue: "color: blue"
{color: blue;}
CSS Rule SetThe basic component of CSS is CSS rule sets or CSS rules. A CSS rule consists of a selector and a declaration. A declaration comprises of a rendering property and a rendering value. Rendering rules are then applied to a particular element tag by selector matching. For example, a selector, h2 with a declaration consists of properties, color with value blue and background-color with value cyan. h2 { color: blue; background-color:cyan; } important ruleBy default, an ordinary author CSS rule declarations have a more weight than an ordinary user CSS rule declarations. A type of important CSS rule declaration is introduced such that an important CSS rule declaration always has more weight than ordinary normal CSS rule declaration and an user important CSS rule declaration always reversively has more wight than author or other important CSS rule claration. An important declaration is specified by a dellimier token '!' and keyword 'important' following the normal CSS rule declaration. <h2 style="color: blue !important">
h2 {color: blue !important;}
at-ruleAn at-rule is a rule set for the CSS engine instead of matching with the element tag. An at-rule can therefore be used to instructs how the CSS engine to behave. An at-rule begins with at-sign, '@' with unicode U+0040, and immediately followed by a keyword identifier. @charset "utf-8; CommentLike other language, a comment block allows author to enter notes into CSS that will not be interpreted as CSS rules. A comment begins with "/*" and ends with "*/", and all stuff in between are CSS comments. /* comment */
/*
comment1
comment2
*/

CSS Rule

According to the source of CSS rules, there are two types of CSS rules

Direct Specifying CSS Rule

Properties of CSS rule declaration are directly assigned to the 'style' attribute of the elements of a document.

<h2 style="color:red">

Indirect Matching CSS Rule

Properties of CSS rule declaration are indirectly assigned to the elements of a document through cascaded selector matching mechanism in form of CSS rule set.

A CSS rule set consists of a selector and a declaration block. The selector is used to match the element of the document and the declaration block is then assigned to the element accordingly. The declaration block contains one or more declarations of format, CSS property name and corresponding value pair.

h2 {color: blue}

Example

Example
HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
p {background-color:cyan;border:1px solid black;margin:5px;padding:5px}
</style>
<title>Sample Page</title>
    </head>
    <body>
<h2 style="color:red">Example of direct specifying CSS rule</h2>
<p>Example of indirect matching CSS rule</p>
    </body>
</html>
HTML Web Page Embedded Output:

not support

CSS Styling Method

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

Method of Direct Specifying

For method of specifying CSS rules using 'style' attribute in an element, the CSS styling method is rigid. CSS rules are declared as the paraemeter of the 'style' attribute. Multiple CSS rules can be declarated by separating each declaration with a delimiter ';'.

<p style="color:blue">
<h2 style="background color:cyan;color:red">

Although CSS rules can be applied to individual element in the HTML document directly, this is not the best way of using CSS to render a source document.

Method of Indirect Matching

For method of matching selectors with an element according to pattern, the CSS styling method is more flexible and powerful. The matching mechanism is based on matching all rule sets against all available CSS of the document. A rule set consists of a selector followed by a declaration block. The selector is actually the CSS pattern matching rules used to determine which declaration block to be applied to elements of the source document. According to the type of matching pattern, selector can be divided in simple selector, compound selector, complex selector, and selector list. A declaration block is a set of CSS declarations enclosed by a pair of curly brace, '{}'. The set of CSS declarations is a list of zero or more semicolon-separated, ';' declarations.

h1, h2 { font-weight: bold }
p { font-weight: bold;font-size: 12px }

The Creator

Style sheets may have three different creators, author, user, and user agent.

Author:The author may specify style sheets for a source document. User:A user may also be able to specify style information for a particular document. User agent:A user agent must apply a default style sheet according to the CSS specification such that the presentation of the document can satisfy general presentation expectations for the document language.

Types of Style Sheet

In general, there are a few ways for author to attach rendering information to a HTML document.

Inline Style style element attributes are used to implement the rendering style as the attributes of an element. <h2 style="color: blue"> Embedded Style 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 Sheet 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 Sheet 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 Standard

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


©sideway

ID: 101000009 Last Updated: 5/2/2019 Revision: 3 Ref:

close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999
close
IMAGE

Home 5

Business

Management

HBR 3

Information

Recreation

Hobbies 7

Culture

Chinese 1097

English 337

Reference 67

Computer

Hardware 149

Software

Application 187

Digitization 24

Numeric 19

Programming

Web 740

CSS 1

ASP.NET 1

Regular Expression 1

HTML

Knowledge Base

Common Color 1

Html Entity (Unicode) 1

Html 401 Special 1

OS 389

MS Windows

Windows10 1

.NET Framework 1

DeskTop 7

Knowledge

Mathematics

Formulas 8

Algebra 20

Number Theory 206

Trigonometry 18

Geometry 18

Calculus 67

Complex Analysis 21

Engineering

Tables 8

Mechanical

Mechanics 1

Rigid Bodies

Statics 92

Dynamics 37

Fluid 5

Fluid Kinematics 5

Control

Process Control 1

Acoustics 19

FiniteElement 2

Physics

Electric 5

Biology 1

Geography 1


Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 06 September 2019