Using CSS classes : You might have noticed that adding lots of CSS properties to our HTML tags has made our lines of code long and difficult to read. It also takes time to type in the same CSS properties over and over again.

To save time and make our code look neater, we now need to learn how to use CSS classes. CSS classes help you organize the CSS in the < body > of your page. A CSS class is a very handy way of applying a group of CSS properties to any HTML element on your page.

Programmers use CSS classes to keep their code as simple as possible. It’s really important to do this when you are coding, as it means you are less likely to make mistakes.

If, for example, you know that you want all the text in every < div > on your page to be a certain colour and font size, rather than having to type the CSS properties into every < div >, you can use a CSS class to change all the < div > tags on your page in one go.

Using the HTML < head > tag

So far we’ve mostly been coding inside the < body > of our page. It’s now time to take a closer look at how we can use the < head >. Let’s go back in time to the very first code we built at the start:

[html] <!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<p> Learning about using CSS classes.</p>
</body>
</html>[/html]

The style tag: < style > and < /style >

When you create a CSS class you tell your browser that you are switching from HTML to CSS. You do this by using the < style > tag, which you nest inside the < head >.

The < style > tag is just like all the other HTML tags you have used so far, except you put CSS inside it. Once you’ve opened the < style > tag, you can create a CSS class. Every CSS class needs a name.

It’s a good idea to make the name relate to the element you want to change. Let’s have a look at how we can create a CSS class that changes the look of our text:

[html] <head>
<title>Hello World!</title>
<style>
.text {
text-align: center;
font-size: 18pt;
background-color: aqua;
}
</style>
</head>[/html]

Breakdown of above code:

Line 3) is the < style > tag
Line 4) is dot followed by CSS class name (.text) then opening curly brace {
Line 5) are CSS properties
Line 6) are CSS properties
Line 7) are CSS properties
Line 8) closing curly brace }

Syntax in programming is very important. The wrong character, variable, or misspelling can cause your work to have bugs or inadvertently affect other pieces of code. If you’re having difficulties debugging your code Contact Us Now.

This is a different way of writing and structuring our code. CSS classes always start with the class name. It’s up to you what you name your CSS classes, but before the class name, there has to be a dot (.)

Then there is a pair of curly braces { }. The curly braces tell your browser where the instructions it needs to follow begin and end. Inside the curly braces, you put all the CSS properties you want to apply to the HTML element.

As before, you separate the property from the value with a colon ( ) and after the value put a semi-colon ( ; ). In this example, we have created a CSS class which we have named “text“.

Every time we use this CSS class we will change the text-align, font-size and background-color CSS properties to the values we’ve selected.

Curly braces { } are found next to the P key on your keyboard and on the same keys as the square brackets [ ] on your keyboard. You need to press Shift to use them. They represent a beginning (opening) and an end (closing). Programming is more of a philosophy of abstract thought if you really think about it. Which will soon pave the way for conceptual programming.

Learn more about the available CSS properties from W3SCHOOLS

Available CSS Properties.

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.