CSS HTML Tutorial

All CSS declarations and groups are stored in style sheets; let’s look at how both the CSS sheet and HTML document communicate with each other.

.educate {
width: 40%;
float: left;
padding-left: 25px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
}


Above we can see the CSS has been defined using a class selector, this is indicated by the grouping beginning with a period “.” This means we can call upon .educate anywhere on our site to apply the same formatting.


How do we call upon the CSS from HTML

<div class=”educate”>the content placed within this div tag will have the .educate attributes applied</div>

In the above example we can see demonstrated in red we have called upon a class selector, and in green we have called upon the educate selector, the result is the HTML will go looking for .educate and apply those attributes like colour, size, margins etc to the content within that part of the page.

The class selector can be used repeatedly throughout your website in any editable regions and will call upon the same attributes from those cascading style sheets, if you only plan on using the particular attributes on one occasion, or you plan in locking the area to a template you can then use the id selector demonstrated below.

<div id=”csshtml”>the content placed within this div tag will have the #csshtml attributes applied</div>

Please not class selectors are defined using the period symbol ".",
where id selectors are defined using the hash tag "#"

comments powered by Disqus