OneBite.Dev - Coding blog in a bite size

use classes in css

Code snippet for how to use classes in css with sample and detail explanation

Title: Using Classes in CSS

Introduction: Learning how to properly use classes in CSS is a fundamental step in becoming a proficient web developer. This vital CSS feature allows developers to apply specific styles to multiple elements without repeating code.

Code snippet: Defining a CSS Class

To begin with, we need to understand how to define a CSS class. Here is a simple example:

<!DOCTYPE html>
<html>
<head>
<style>
    .blueText {
        color: blue;
    }
</head>
<body>
    <p class="blueText">This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <p class="blueText">This is yet another paragraph.</p>
</body>
</html>

Code Explanation: Defining a CSS Class

In the code provided above we start by declaring a CSS class inside the <style> elements, within the <head> tags. A CSS class is basically declared by putting a period (.) at the beginning of the line followed by the class name. In our code, we have a class called .blueText.

Inside this class, we define a property which is color: blue;. This simply means any HTML element with this class will have its text color set to blue.

Further, in the HTML body, we have 3 <p> tags with a mixture of classed and unclassed elements. The first and third paragraph tags include class="blueText" attribute, thus these elements are affected by the .blueText CSS class and will display blue text. The second paragraph is missing this attribute and hence will remain in the default text color.

By using CSS classes, we can apply the same styling properties to as many elements as desired across our HTML document, without writing repetitive code. This not only reduces the chances of error, but it also improves the maintainability of your code.

css