Overview Of CSS

CSS (Cascading Style Sheets) do simplify dramatically the creation of your pages at the price of a small initial learning. The sheet is a file that is included in each web page, which contains the attributes of position and style for the content. The CSS format exists since 1994 but has become more widespread in 2000 with a complete support in Internet Explorer 5 (I.E. is now replaced by Edge). It is possible to associate a stylesheet to an XML document. In this case the properties are attributed to the tags of the document.

Why style sheets?

The main interest is to define the layout of the page by the creation of several columns of text.
CSS has the following advantages too:

The bases

Stylesheets are mainly used:

Note that you can not put text in the stylesheet file, but it is better anyway they are in the page to be taken into consideration by search engines.

Selectors and properties

CSS definitions are made of two things: the selectors and their properties. Selectors are HTML tags or user-defined classes.

To divide and position parts of the page, a tag called "div" is used.

The general format of a style rule is as follows: 

name {
    ...list of properties...
}

The name may have three forms, as detailed below.
The properties have the following form: 

attribute : value ;

Some attributes as "border" for example, may include a list of values separated by a space (not a comma).

Rules

A style sheet is made of rules. There are three types of rules in a CSS file:

Identifiers and class require an attribute in the HTML code. This will have the following form with the div tag for example:

Inserting a stylesheet

To insert a stylesheet into an HTML page, the following line is added into the <head> section: 

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

- The type designates the type of display.
- href set to file containing definitions of style.
- rel="stylesheet" specifies the type of link.

Layout

The parts of the page are cut with a div tag at which is assigned an identifier. Examples: 

<div id="logo"> </div>
<div id="menu"> </div>
<div id="content"> </div>

These elements are reflected in the style sheet in the following format: 

#logo { 
     ...
}        
 
#menu {  
    top: 60px; 
}

#content { 
    left: 120px;
}

Then attributes of positions have to be defined.
For the menu top: 60px;
- to be placed 60 pixels under the logo.
For the content: left: 120px;
- to spare 120 pixel left to the menu.

A rule: properties in cascades

Never forget that CSS are hierarchical: all the properties you set are related to the element where they are defined.
For example, a police decreased to 80% within one element in which the police is increased to 120% returns to the standard font size.

Indeed, it is possible to target precisely an element within another element with the following syntax: 

#item inner-item {
     ...properties...
}

Example:

#table a {
    color:green;
}

The links will be green, but only in tables.
To get CSS properties in details, see the references below.

Resources

Some tutorials to learn how to use CSS with examples, and tools.

See also