Approx. read time: 3 min.
Post: More than one CSS class
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:
[html] <!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>[/html]
Sample output of above code:
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:
[html] <!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>[/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!
Related Links:
Building a web-based JavaScript game
Object-Oriented Programming (OOP)
Using more than one CSS property
Building a web page with HTML tags
Tips and tricks for CSS coding
Learn more about JavaScript Variables
CODING WITH CSS: The style attribute
Your first Hello World app in C# Sharp
Learn Code Introspection Python Programming
Introduction to Batch File Viruses
Tips and Tricks for WRITING JAVASCRIPT code
Related Posts
The Longevity Blueprint: AI-Powered Health Optimization
About the Author: Bernard Aybout (Virii8)
