Navigate the tutorial:

CSS styling with Class names

Class names are used when you want to have more than one element with the same style. Class names save you from having to style each element individually. CSS classes are coded in the headers of your web page. Below is the full code.

<html>

<head>

<style>

.bold-blue{

font-weight:bold;
color:blue;

}

</style>

</head>

<body>

<span class="bold-blue">This text is bold and blue!</span> <br/><br/>

<span class="bold-blue">This text is also bold and blue!</span>


</body>

</html>

In the above code, we created a CSS style in the headers of our page. In the style we created the class name bold-blue. We then applied the class name to the 2 span elements in the body of the page. Class names begin with a . but when calling the class name in the element you leave the . out. More than one class can be created in the <style> tags. Class names can not contain spaces or special characters. Always use a - in place of spaces.

HTML editor