More than one CSS class : Using more than one CSS class, if you want to make your CSS really effective, it’s best to split your CSS classes into groups of CSS properties.

This way, when you are designing and laying out a web page you can apply more than one CSS class to your HTML element. It’s really easy to use more than one CSS class at a time. All you have to do is add the names of the different classes to your class attribute. Let’s take a look:

<!DOCTYPE html>
<html>
<head>
 <title>Hello World</title>
 <style>
 .header {
     background-color: lightgreen;
     width: 70%;
     height: 50%;
 }
 .text {
     text-align: center;
     font-size: 18pt;
 }
 .padding {
     padding: 25px;
 }
 </style>
</head>
<body>
 <div class="header text padding">
     Hello World.<br/>
     Using more than one CSS class.
 </div>
</body>
</html>

Sample output of above code:

Hello World.
Using more than one CSS class.

Using CSS classes to select HTML elements

Another handy thing you can do with CSS classes is use them to change the CSS properties of a type of HTML element. To do this you use something called the element selector.

To use the element selector, you use the name of the element you want to change as the name of your CSS class. You shouldn’t include the dot before the name of your CSS class. You also don’t need to include a class attribute in the < body > tag.

So if you want all the text in your paragraphs to be centred and in a certain font size, you can create a CSS class called “p“ which will find and select your < p > tags. Let’s take a look at what using the element selector does:

<!DOCTYPE html>
<html>
<head>
 <title>Hello World!</title>
 <style>
 p { <!--This is the element selector.-->
      font-size: 16pt;
      text-align: center;
      background-color: lightblue;
 }
 </style>
</head>
<body>
 <p>Hello World. Using element selector.</p>
 <p>All p tag elements are using the CSS</p>
 <p>attributes specified in the element selector above.</p>
</body>
</html>

Sample output of above code:

Hello World. Using element selector.

All p tag elements are using the CSS

attributes specified in the element selector above.

Thats clever coding. The element selector has changed all our paragraphs (< p > tags) without us having to add a class attribute to our (< p > tags).

HTML and CSS are the most fundamental programming languages of the web. Now that you’ve mastered them you can start building your own web pages.

Knowing HTML and CSS is a great first step in a career in web design. Rather than using templates, you can create your own unique layouts – a fantastic skill!

More than one CSS class

Sample output of above code:

Using CSS classes to select HTML elements

Sample output of above code:

Related Links:

About the Author: Bernard Aybout

More than one CSS class

Sample output of above code:

Using CSS classes to select HTML elements

Sample output of above code:

Related Links:

About the Author: Bernard Aybout

Related Posts