In line when you need to apply the style to only one block or part of the code that we are dealing with, without that this style is going to affect other parts of the same web page.
For example a paragraph <p> that should have certain characteristics, but with the certainty that these are not to be extended to all the other paragraphs in <p>content within the same web page.
To resume the style of the previous example, we said we want a slight indent with justified text, wishing to apply this choice to a single paragraph, the most convenient and fast is to bind the style to only one element in <p> interested.
This practical example will clarify better:
<p style=”text-align: justify; text-indent: 12px;”>… </p>
Everything that will be written between the opening <p style=”… >(paragraph), and for the closing element </p> will have how to style: justified with an indent of 12 pixels;
You can combine between them the most styles, the correct syntax involves enclosing everything between the double quotes separating the various style attributes with a semicolon.
The more observant will have noticed the importance of making use of the element (tag) of the closure, in this case, the </p> and for HTML it was not mandatory, it becomes in the use of CSS. The closure of this element determines, in fact, even the closure (and therefore the end) of the style, so better to take immediately the good habit to always close all elements (tags) that are open.
Notice how the inline style has been associated with the <p> element, simply having introduced the attribute style inside the same angle brackets <> without the need to specify type of css/txt seen previously.
At the same time could be associated with any other valid element of HTML (excluding elements such as <br>) it follows the easy customization of all (or almost all) html elements, even those that do not like very much or are of little use, and perhaps precisely for this reason are almost never used.
With CSS, you work in a particular way, the two html elements: div and span that you would not otherwise have much reason to be used since are just the “container“, these two elements do not produce any effect if used alone, but for them it is possible to associate all of the various styli. Let’s see in detail, it is respectively:
the <div></div> and <span></span>
the <div> is applied to a block of code, and causes a carriage return with its closing </div> while <span> can be applied at any point in the document (also within a <div>) without that this would affect the structure, practically, is transparent to the rest of the code since it doesn’t cause any carriage return limited practically to only change the part of text associated with it.
For our example above, I could get the same thing using a container <div> instead of a paragraph <p> in this way:
<div style=“text-align: justify; text-indent: 12px;”> text </div>
Always keep well in mind the difference between <div> and <span>, of the fact that div can be used as a small or large container, its closure causes a carriage return and is then used for whole blocks of code, whether they are paragraphs of text or images to be placed on the screen, and span is used inside the paragraphs themselves, and maybe to change only parts of a text that make it up, without causing alterations to the structure as the carriage return. Put the span inside the div is correct to put div inside span is totally wrong.
Note the ability to nest among their more containers inside of other elements or other containers:
<div style=“font-size: 10pt; color:#006600;”>test text style div
<p style=“font-size: 12pt; text-align: center;”>paragraph text with style div + style p
text center-aligned 12 pt</p>
proof text style of the div without the style of the p
</div>
This is the result:
test text style div = 10pt color green
the text of the paragraph with the style div + style p
text center-aligned 12 pt
proof text style of the div without the style of p
the <div> and assign the entire block of text, until the closing </div> with a font of 10pt, and a green color, <p> assigns the paragraph a larger font: 12 pt, and an alignment of the centered text, the closing </p> puts an end to the text center-aligned and size 12pt, and all returns as defined by the div initial and remains valid until its closing </div>
If you want to write in red only some of the words without altering the structure, we use the span that we have said is a container line that does not cause changes in if not for the one that is declared inside it.
<div style=“font-size: 10pt; color:#006600;”> test text style div
<p style=“font-size: 12pt; text-align: center;”>paragraph text with style div + style p text center-aligned 12 pt, and <span style=“color:#ff0000;”>red writing</span></p>
proof text style of the div without styles p and span
</div>
This is the result:
test text style div = 10pt color verdetesto of the paragraph with the style div + style p
text center-aligned 12 pt and written in red
proof text style of the div without styles p and spanthe <div> and assign the entire block of text, until the closing </div> with a font of 10pt, and a green color, <p> assigns the paragraph a larger font: 12 pt, and text alignment is centered, with <span> defines a part of text in red, the closing </span>put an end to the red text, the </p> puts an end aligned in the center with the size 12pt and all returns as defined by the div for the previous and remains valid until its closing </div>