CSS Tutorial: Introduction to Cascading Style Sheets

Email Us

info@yourdomain.com

Call Us

+01 3434320324

Find Us

234 Littleton Street

CSS in the page

To style built-in that is, when a certain style reference several elements (tags) of the html the same, in the same page. It would be extremely dispersive, besides laborious, always define the same style multiple times within the same page since it would always for the same purpose. Much better to define it only once, at the beginning of the page. By doing so all the affected items on a page follow the same style.

In this case, the instructions should not be included within a specific element, as we have seen in the explanation in line but will be declared at the beginning of the page, using the tags (tags) <style> and </style> inside the section <head> </head>

This method does not prevent you from making use of any style definitions in-line, indeed, these would override the style declarations inserted at the beginning of the page.

Note that in this way it is necessary to have braces to delimit the blocks of instructions related to the items concerned, which is not needed for the styli in the line.

Referring again to the previous example:

<style type=”text/css”>

<!–

p {

text-align: justify;

text-indent: 12px;

}

–>

</style>

Now all that you will find within any paragraph <p> defined with the usual form html <p> … </p> will the style settings declared at the beginning of the page, unless you created a style in line with one or more of certain paragraphs, which, as I said above, they would have priority with respect to (as defined in the style at the beginning of the page.

I repeat once again the importance of the closure of the open items, even in cases where there were elements such as <p> html does not require its closing </p> do Not close an item by means not put an end to the style associated with it, but extend it to the whole document, the wrong thing and almost never desired.

In this context, it is precisely that: the tags are closed, to decide the end of the style as well as that of the paragraph. To forget means to tell the browser to extend the parameters of the style of the rest of the document.

Explaining the code of the example: the two elements of comment,<! – and –>, placed at the beginning and end of the block, are the same as used in html and need to override the style of all those outdated browsers that don’t support it. Never used to leave comments inside the style declaration, it is not like in HTML, if you need to comment within a spreadsheet-style work /* (slash and asterisk) to the beginning of a comment and */ (asterisk slash) to the end.

<style type=”text/css”>

<!–

p {

text-align: justify; /* comment for justified alignment */

color: #ff0000; /* comment for red color */

}

–>

</style>

The drafting of the code I have written thus, with the carriage returns, only to give it a certain order, but nobody forbids that can be written all on one line, the important thing is to respect the symbols: parentheses, colons, spaces, dots and commas.

<style type=”text/css”>

<!–

p {text-align: justify; color: #ff0000;}

–>

</style>

In the example we used the element (tag) <p> and without angle brackets, in sheets style, in fact, you must use the tag or element, but not its angle brackets, which instead are part of html. You have surely understood that instead of p we could use any other valid element of the html: b, strong, H1, table, etc., etc.

View this brilliant opportunity, why not redefine the elements of html that doesn’t work, because he does not like or customize the ones used most frequently to make it more palatable?

By doing so it would be like to have a layout of the new html commands, or better, the new elements, with the fact of having them custom to your liking, if not versatility this.

Personally I make little use of elements to be refined, I prefer much more to use “classes” (we will see later) that I create in the moment and to which I associate the names much more significant, for me, to better understand what I really needed. There are no limits to the number of classes definable by the user, for which I could have only one paragraph with ten different classes, long live the imagination of each of us.

Leave a Reply

Your email address will not be published.

Solve : *
26 − 14 =