In the past if you wanted to style generic tags like the
paragraph tag you could use p for the selector and add properties that would
affect every paragraph tag on the page or in the document. Or you could have just created class
selectors to apply to different paragraph tags.
All viable options but a lot of extra coding is required and great
organization is needed to apply the right class to where you needed it used.
Now with semantics you can format every paragraph in a
specific section by using pseudo selectors.
If you need a review on how to use HTML 5 semantics please review previous posts explaining.
Using our example of a paragraph tag let’s look at how we
can now format text according to semantic element:
New Way
|
Old Way
|
CSS EXAMPLE:
header p {
font-family: helvetica, arial, sans-serif;
font-size; 2em;
color:#000000;
}
section p {
font-family: helvetica, arial, sans-serif;
font-size; 1em;
color:#336699;
}
HTML EXAMPLE:
<header>
<p> My company rocks content. </p>
</header>
<section>
<p> My company rocks content. </p>
</section>
|
CSS EXAMPLE:
Applies to every paragraph on the page
p {
font-family: helvetica, arial, sans-serif;
font-size; 1em;
color:#000000;
}
OR for formatting paragraphs differently
.class {
font-family: helvetica, arial, sans-serif;
font-size; 2em;
color:#000000;
}
.class2 {
font-family: helvetica, arial, sans-serif;
font-size; 1em;
color:#336699;
}
HTML CLASS EXAMPLE:
<p class=”class”> content for first class goes here </p>
<p class=”class2”> content for second class goes here
</p>
|
Of course the less code I have to write the better! You can use this method for other semantic tags and with tags other than paragraph. More tips coming soon.
No comments:
Post a Comment