Using CSS for a web presentation

CSS (Cascading Style Sheets) make it easy to create pages with little initial training. This is a file that is included on each web page and contains attributes for the location and style of the content.
The CSS format has existed since 1994, but became widespread in 2000 with full support in Internet Explorer 5 (now I.E. replaced by Edge).
You can associate a style sheet with an XML document. In this case, properties are assigned to elements (tags) of the document .

Why style sheets

?

The most common interest is the creation of several text columns, according to a newspaper presentation.
CSSs have the following advantages:

Bases

Style sheets are mainly:

Please note that texts cannot be placed in a style sheet file, but in any case it is better that they are on the page, so that they are taken into account by search engines.

Elements and Properties

CSS boils down to two things: both the elements and their properties. Elements are HTML tags or a class defined in a style sheet.

To separate and arrange parts of the page, use a tag called "div."

The general format of a style declaration is as follows:

nom 
 {
    ...liste de propriétés...
 }
The title may have three figures, as detailed below.
Properties have the form:
 attribut : valeur ;
For example, some attributes, such as "border," may contain a list of values separated by a space (not a comma).

CSS Announcements

There are three types of statements in the CSS file:

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

Insert Style Sheet

The <head> section contains the following line:

<link type = «text/css» href = «mafeuille.css» rel = «stylesheet»>

-Type means display type.
- The href value is the file containing the style definitions.
- rel = "stylesheet" indicates the type of association.

Positioning

Parts of the page are cut by the div tag with which the identifier is associated. Examples:

  <div id="logo"> </div>
  <div id="menu"> </div>
  <div id="contenu"> </div>
These elements are included in the style sheet in the following format :
#logo  { }         
#menu
{  
    top: 60px; 
}
#contenu
{ 
    left: 120px;
}

Then it is enough to set the attributes of the item.
The menu will have the attribute: top: 60px; to place 60 pixels under part of the logo.
The content will have the attribute: left: 120px; to place 120 pixels on the left for the menu.

Rule Cascading Properties

Do not lose sight of the fact that CSSs are hierarchical - all the properties you set relate to the element in which you are. For example, a font that is reduced to 80% within an element, and in which the font is increased to 120%, reverts to a standard size font.

By the way, you can accurately target an element inside another element with the following syntax:

#selecteur selecteurinterne
{
     ...attributs...
}

Exemple:

#table a
{
    color:green;
}

Links will be green, but only in tables. For information about CSS properties, see the following links:

Resources and tutorials

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