CSS Overview

CSS means Cascading Style Sheets ( C ascading S tylE S heets)
Styles define how to display HTML elements

CSS syntax

CSS rule consists of two main parts: a selector, and one or more statements.

Each statement consists of an attribute and a value.

Attribute (property) that you want to set the style attributes (style attribute). Each attribute has a value. And attribute value are separated by a colon.

Remember to write quotes

Tip: If the value is a number of words, then give the value in quotes

Multiple statement:

Tip: If you want to define more than one statement, you need to use a semicolon to separate each statement

A packet selector

You can group selectors, so, grouped selectors can share the same declaration. The required separated by commas packet selector.

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

Succession and its problems

According to inherit properties from the parent element CSS, child elements. But it does not always work this way. Consider the following rule:

body {
     font-family: Verdana, sans-serif;
     }

According to the above rule, body elements of the site will use Verdana fonts (if the presence of the visitor's system font words).

CSS through inheritance, child elements will inherit the highest level element (in the present embodiment the body) have properties (such as the sub-elements p, td, ul, ol, ul, li, dl, dt, and dd). No additional rules, all sub-elements of the body should display the Verdana font, sub-elements child elements, too. And in most modern browsers, it is indeed the case.

id selector

id selector may be labeled with a particular HTML element id specifying a particular style.

id selector to "#" to define.

Note: id attribute can appear only once in each HTML document

CSS class selector

In CSS, class selector shown in a dot:

CSS attribute selectors

Set the style of the HTML element with the specified attributes.

You can set styles for HTML element has the specified attribute, not just class and id attributes.

Note:! Only when the specified DOCTYPE, IE7 and IE8 support attribute selectors only. In IE6 and earlier versions, does not support the selected property.

Example: attribute selector

The following example is provided to all of the style elements with title attribute:

[title]
{
color:red;
}

CSS Selector Reference Manual

Selector	description
[attribute]	For selecting elements with the specified attribute.
[attribute=value]	For selecting elements with the specified attributes and values.
[attribute~=value]	For selecting the attribute value contained in the element specified words.
[attribute\|=value]	For selecting attribute values of elements having to begin with a specified value, this value must be a whole word.
[attribute^=value]	Each element matches with the specified value at the beginning of the attribute value.
[attribute$=value]	Each matching element end with the specified value of the attribute value.
[attribute=value*]	Matching attribute value of each element contained in the specified value.

CSS selectors 1 review