HTML CSS on class - CSS

CSS, short for Cascading Style Sheets, is a style sheet language used for describing the presentation of a document written in HTML (HyperText Markup Language) or XML (eXtensible Markup Language).

Basic CSS Syntax

The following is the basic syntax of a CSS rule:

selector {
  property: value;
}

• Selector: Selects the HTML element that you want to style
• Property: The attribute that you want to change
• Value: The new value for the property

For example, let's say you want to change the color of a paragraph text to red:

p {
  color: red;
}

CSS Classes

Classes are a way of defining a group of HTML elements that share the same CSS rules. Classes are indicated in HTML by the "class" attribute.

<div class="my-class">
  ...
</div>

To target a class in CSS, use a period (.) before the class name:

.my-class {
  property: value;
}

For example, let's say you want to change the color of all elements with the class "my-class" to blue:

.my-class {
  color: blue;
}

The on Class

The on class is a special class that is often used in conjunction with JavaScript events. It is added to an HTML element using JavaScript, and is styled in CSS to indicate that the element has a certain state.

For example, let's say you want to change the background color of a button when it is clicked:

<button id="my-button">Click me</button>

const button = document.getElementById("my-button");
button.addEventListener("click", () => {
  button.classList.add("on");
});

button.on {
  background-color: blue;
}

In the above code, the on class is added to the button element when it is clicked. This triggers the CSS rule that changes the background color of the button to blue.

Conclusion

CSS is a powerful tool for styling HTML documents. Learning how to use CSS classes and the on class can help you create more interactive and engaging web pages.