WHAT IS CSS AND HOW IT'S WORK

What is CSS?

CSS stands for Cascading Style Sheets
CSS defines how HTML elements are to be displayed
Styles were added to HTML 4.0 to solve a problem
CSS saves a lot of work
External Style Sheets are stored in CSS files

HOW CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all formatting could (and should!) be removed from the HTML document, and stored in a separate CSS file.

The style definitions are normally saved in external .css files.

With an external style sheet file, you can change the look of an entire Web site by changing just one file!

CSS Syntax

A CSS rule set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a property name and a value, separated by a colon.

CSS Example

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces:

p {color:red;text-align:center;}

To make the CSS code more readable, you can put one declaration on each line.

In the following example all <p> elements will be center-aligned, with a red text color:

CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

How CSS works

When a browser displays a document, it must combine the document's content with its style information. It processes the document in two stages:

The browser converts the markup language and the CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.
The browser displays the contents of the DOM.

A markup language uses elements to define the document's structure. You mark an element using tags, which are strings beginning with '<' and ending with '>'. Most elements have paired tags, a start tag and an end tag. For the start tag, place the element name between '<' and '>'. For the end tag, place a '/' after the '<' and before the element name.

Depending on the markup language, some elements have only a start tag, or a single tag where the '/' comes after the element name. An element can also be a container and include other elements between its start tag and end tag. Just remember to always close the tags inside the container.

A DOM has a tree-like structure. Each element, attribute and run of text in the markup language becomes a node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.

Understanding the DOM helps you design, debug and maintain your CSS, because the DOM is where your CSS and the document's content meet up.

Example

In your sample document, the <p> tag and its end tag </p> create a container:

<p>
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>

Live Example

http://jsfiddle.net/djaniketster/6jbpS/

In the DOM, the corresponding P node is a parent. Its children are the STRONG nodes and the text nodes. The STRONG nodes are themselves parents, with text nodes as their children:

P
├─STRONG
│ └─"C"
├─"ascading"
├─STRONG
│ └─"S"
├─"tyle"
├─STRONG
│ └─"S"
└─"heets"

WCidea

Search This Blog