The syntax We have said that they have their own element (tag) that is specified in the html, this is the element: a <style> with its closing </style>. This element serves to inform the browser that it is styles that make the appropriate changes to the html elements defined within it.
The statement of style should be placed inside of the tags <head> and </head> of the web page, the only exception to the definitions directly in the line just where the solo style as an attribute of the tag used (we’ll see later on).
It is possible to specify the type of style, usually text/css and the media, which device refers to, usually screen or print , respectively, to the screen or printer. Other possible media are: all, braille, handheld, tv.
We have said that basically there are three ways to use css, which is better I let you decide, know that the use of a way does not exclude the other two, on the contrary, combine to perfection, depends only from yourself, and from your plan, apart from the real needs:
- Directly In line
- At the beginning of the page in the embedded style
- In the link to an external style sheet
Each of these three possible ways differs slightly from the other, we will see later when we will analyze one by one in detail.
The rules in the external sheet and in the embedded style at the top of the page, require that the attributes should be included within curly braces { }.
In all cases, where in the HTML would be used a “=” (equal) is used instead of“:“(colon). Topics in a row are separated by a “;“ (semicolon) instead of “,” (comma). In addition, many of the arguments are separated by “-“ (hyphen) and is an integral part of the name itself.
The empty spaces and the carriage return have no influence.
We see a possible style. Let’s imagine that we want to give our text a slight indentation (12 pixels), and justified alignment, which translated means: to have a slight indent of the text at the beginning of the paragraph with alignment printout on both sides, exactly like the one you are seeing right now in this paragraph
the <head>
<style type=”text/css”>
p {text-align: justify; text-indent: 12px;}
</style>
</head>
First of all, we identify in our html page, the area head, and inside it we create a declaration of the sheet of style using the tags, style and /style as shown above. Then we define the tag <p> (paragraph) of html associandogli the attribute text-align with the parameter justify for justified text, while the attribute text-indent parameter with the 12px for the indentation of 12 pixels from its left margin at the beginning of the paragraph.
You will notice in this phase of learning only the syntax: Item, open curly brace, attribute, two points, a parameter, a semicolon, attribute, colon, parameter, semicolon, close curly brace.
The curly braces are not present in the Italian keyboards, you can get equally with the ascii codes 123 and 125, practically holding down the left ALT key, type the numeric keypad (enabled), the relative number, without release the ALT key, if not at the end of the typing.
I hope I explained myself. Or, press and hold [Alt Gr] (right) at the same time the shift key (shift) press one of two keys for the square brackets [ ] where there is also the + with the asterisk or two is accented with the [alt gr] and one of the two keys you get the bracket if combined with the addition of the Shift key are transformed in curly brackets {}.
To know what are the attributes and their possible parameters, I refer to the items of the side menu, style attributes and the parameters where it is possible to see a broad overview, more or less complete, of the ones that are the most common and the most used.
We have said that a style can be associated to a valid element in html, so if we associate our style on the <body> element will be as you have defined a style for the whole web page from the time that of body in html is the element that comprises the whole of the body of the page (in the previous example we were limited only to the P tag of a paragraph).
Note that if the element is contained inside another element, this inherits its properties, which (being contained within the body inherits its properties, unless these are changed by redefining the paragraph the same.
Some examples of possible styles:
<style type=”text/css”>
body {font-size: 10pt; color: Blue;}
strong {font-size: 12pt; color: Red;}
em {font-size: 9pt; font-style: italic; color: Green;}
</style>
We see the three examples above, the first body has a font size of 10 points (10pt), and uses a dark blue color, would have been valid even a specification of the color with hexadecimal notation: #000099 (which I personally prefer) is always to the blue, is also valid: this abbreviation #009.
Being assigned to the body, all of the text within that page will follow this style because the element of the html body refers to the entire document, pretty much what I did with this page.
strong (or bold in html) increase the font by 2 points than the one defined in the body so as to highlight it more, and more, it also changes color passing from blue to red.
em (or Italic in the html) and change the style into Italic, and reduce the font one point (9pt) than the standard one defined in the body (10pt) three compared to the bold (12pt) of the strong and the color change by switching to green (Green).
It is also possible to associate the same definitions for multiple elements:
<style type=”text/css”>
h1, h2, p, div {font-size: 20px; color: #ff9900;}
</style>
In this case, the use of any one of the tags: <h1>, <h2>, <p>and <div> will produce the same effect: font size of 20 pixels of the color orange.
<P> as redefined above
Well, if you understood the mechanism, if there is anything clear, it remains to pass to the various techniques to associate the style with different html elements and to do this, remember that the possible ways are more than one.
Let’s start from the most simple and immediate style in the line.