CSS, short for Cascading Style Sheets, are tags used to format web pages (for example, text formatting, background or page layout, etc.).
The benefits of CSS syntax are:
• formatting is introduced in one place for the entire document
• fast editing of labels
• thanks to the insertion in one place of the labels a reduction of the page code is obtained, implicitly the faster loading of the page
The CSS syntax is structured on three levels:
1. level 1 being the properties of the tags in the HTML document, inline type
2. level 2 is the information entered in the HEAD block, embedded type
3. Level 3 is represented by the orders located on separate pages, external type
The most important (overrides any other parameter) has the syntax of level 1 and the least important is that of level 3.
Using an external file or level 3 containing, CSS commands is very practical because it can be used in many situations (multiple HTML files can use the same external CSS file), eliminating the time required to enter the corresponding code on each page and also editing them in a single place for multiple files.
The extension of these files is .css and the linking of the HTML pages with the CSS external files is done by entering the following line:
<link rel=”stylesheet” type=”text/css” href=”file_css.css”>
The attributes indicate the following:
• the file is styleshhet type
• type – text type that contains CSS commands
• href – the file or the address of the CSS file.
Level 2 or embedded commands are those hosted anywhere between the <head> and </head> tag pairs according to the syntax:
<style type=”text/css”>
<! —
… CSS commands …
–>
</style>
Where style – specifies where the CSS block starts and ends and the type is used to hide old browsers, which do not know the CSS syntax, the content of the style block.
Level 1 or inline CSS commands are the most commonly used, overwriting any other CSS commands. They are located inside the HTML tags in the BODY area and have the syntax:
<style label=”the desired CSS code”>
…the text or object on which the CSS code is applied…
</label>
It is allowed to use comments in CSS as in HTML:
/* This is a comment in CSS */
ID and class are commands that give the CSS formatting a name. They are used when we want to apply a formatting style to a particular area. For compatibility with previous versions of browsers the names associated with the zones will not contain the _ character.
The ID element is applied to a format style once or to a single HTML label, placing a name for that style. This element requires the existence of CSS beginnings in the HEAD area or in an external file.
Example: using element ID
<html>
<head>
<title>Example 2_1 </title>
<style type=”text/css”>
<! — #blue{color: #0000FF;} –>
</style>
</head>
<body>
<p id=”blue”>Blue text entered with “blue” id </p>
Black text
</body>
</html>
The class element is similar to ID but unlike it it can be used multiple times or for larger areas. As with id it requires the existence of CSS beginnings in the HEAD area or in an external file.
Example: using the class element
<html>
<head>
<title>Example 2_2</title>
<style type=”text/css”>
<! –. red{color: #FF0000;}–>
</style>
</head>
<body>
<p class =”red”>The first red text entered by the “red” class</p>
Black text
<p class=”red”>The second red text entered by the “red” class</p>
</body>
</html>