Now that we have our main.css style sheet linked to our index.html page we can add code into our HTML tags to have them styled individually or by group from the style sheet.

class - Used to group and style page tags. Multiple page tags can have the same class name applied.

id - Used to style individual tags on the page. Only one tag on the page can be tied to an id.

Here is an example of using the class and id attributes on different kinds of HTML tags to make all of them have the same style. In the example below we have given the <h2> tag the id attribute to make it behave slightly different from the other tags by applying "mystyle2" from the style sheet to it as well as the class style "mystyle1".

index.html


And this is what your style sheet would look like defining mystyle1 and mystyle2.

main.css



You can create as many styles in your style sheet as you like. Use them or not.

---

You can add the class or id attributes to most HTML tags. Experiment with any tags you want. Below we have given some examples for reference.

<div class="mystyle1">Text</div>

<p class="mystyle1">Text</p>

<table class="mystyle1">Text</table>

<hr class="mystyle1" / >

<h3 class="mystyle1">Text</h3>

<img class="mystyle1" src="images/my_pic.jpg" />