Sheet style the outside We have seen how to define a style in line when we need maybe a fast special features bounded to a single area of our document.
We have also seen how to define one style at the beginning of the page to which the whole document was a reference and use.
Now let’s see what is the absolute most comfortable and practical of systems, the one in which there is a external style sheet separate from the web page, that contains all the statements of style, and that is referred to in all the web pages that make up the site. In this sheet, or sheets since they can be more than one, you’re going to write all of the styles that we need, including the “classes” and “id”.
Even in the case of one or more sheets of style external, it will always be possible to define the necessary styles to the top of the page and inline styles, these would have priority over those declared in the sheet of style outside.
What does it mean external style sheet?
It means that if the styles you want to define are as many, if more than one web page will use, the best thing to do is surely to create an external structure which will be able to access all of the pages are affected.
This structure would be that the sheet of style, a document’s normal text, with the final extension .css where to the inside it will be contained all the valid statements for a sheet of style.
The same rules apply syntactic views until now for the embedded sheet to the top of the page. Only difference is that it should not contain statements of style because of its already present in the html page that invokes it.
Try to imagine the benefits. You have to make a change to the entire site, maybe just to change a font type that you like more or replace one color with another, it will be sufficient to make the change once to that single external sheet to see then immediately all of the pages in the result of the modification.
Easy right? Gone are the times when you spent whole hour to reprocess all the various pages for the changes, and where, invariably, it always ended up with forget one of them.
To create this external sheet will be enough, once again, a text editor, the same as that used for html, better still if it is a specific for css. I remind you that the wordpad, or notepad, supplied with windows will do just fine, the important thing will be to always save in ascii format, that is, plain text without special formatting, taking care to make sure that the saved file is of type css and not txt as normally occurs. Let us examine more carefully our external Style sheet:
p{
text-align: justify;
text-indent: 12px;
}
You will notice that this is practically the same as that used in the “style embedded” with the only difference that no longer has the original items that he claimed the style: <style type=”text/css”>, this is because since it is an external sheet, the statement is already put in the HTML document that invokes it, using the following syntax:
<link rel=”stylesheet” href=”nome_assegnato.css” type=”text/css”>
Taking care to position this line of recall between the elements (tags) <head> and </head> of the html file. To be sure, put it as the last line of the head. practically before the </head><body>. The nome_assegnato.css will be the exact name that you have decided to use for your external style sheet. Avoid long names and complex, and also avoid blank spaces and reserved characters such as: £ $ % & / ( ? in the name that you decide to use.
In addition to the type , you can also specify the media to which you are referring to, where all for all the display devices, the screen is used for the browser on the screen, print to printer, handheld devices such as pdas. If you want you can specify more than one media, separated by commas.
<link rel=”stylesheet” href=”nome_assegnato.css” type=”text/css” media=”screen”>
You can have multiple sheets, style external, it is sufficient to recall them from the web page in the same way as described above, one after the other:
<link rel=”stylesheet” href=”foglio_uno.css” type=”text/css”>
<link rel=”stylesheet” href=”foglio_due.css” type=”text/css”>
<link rel=”stylesheet” href=”foglio_tre.css” type=”text/css”>
Or from the inside of the sheet of style, both inside and outside, making use of the import at the beginning of the paper, first define any other rule, and by preceding import by the at symbol @.
@import “foglio_due.css”;
@import “foglio_tre.css”;
A sheet of style external type would be this:
html, body{
margin-left: .5cm;
margin-right: .5cm;
color: #000099;
font-family: Verdana, Arial, sans-serif;
font-size: 10pt;
}
a:link{
text-decoration: none;
color: #009900 ;
}
a:visited{
text-decoration: none;
color: Gray;
}
a:hover{
color: #ff0000;
text-decoration: none;
}
td{
font-family: “MS Sans Serif”;
font-size: 12pt;
}
p{
text-align: justify;
text-indent: 12px;
}
Let’s see what has been redefined, so as to better understand and begin to familiarize yourself with the various acronyms:
html, body, everything declared within this element, { … } will be extended to the whole of the document, for which the entire web page will make use of:
font-family: Verdana, Arial, sans-serif;
the verdana font, in case this is not installed in the PC of the visitor, it will try to use Arial, if this also fails then a generic font family sans-serif, after which it will be assumed the default font.
margin-left: .5cm; margin-right: .5cm;
The lateral border by the left and right edges: 0,5 cm
color:#000099;
Text color dark blue
font-size: 10pt;
Font size 10 points
a:link{text-decoration: none; color: #009900;}
Links to visit, not underlined and green in color
a:visited{text-decoration: none; color: Gray;}
Visited links are not underlined and of a grey colour
a:hover{text-decoration: none; Color: #ff0000;}
Change color on mouse-over the link, not underlined and red in color
td{font-family: “MS Sans Serif”; font-size: 12pt;}
Table cells with font Ms Sans Serif, size 12
p{text-align: justify; text-indent: 12px;}
Paragraph with justified alignment, identification 12 pixels
NOTE: a parameter composed of two or more words, as in this example, the font name must be enclosed by quotation marks, font-family: “MS Sans Serif”; When he proposes a choice between different types of fonts (using the font-family), the last choice should be a family of fonts, in this case sans-serif.
In this phase of learning should not be worrying too much about the meaning of all the various acronyms used for the example, it is better to focus on the method of use, once you understand the mechanism, the codes to be used you are to read and you can copy from the table of parameters.