CSS Group

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.