How to use class attribute in Css style

How to use class attribute in Css style

Generally in css we use tag name of html elements to select an element and apply a style.

body {
font-family: serif;
color:blue;
background-color: lightBlue;
}

h1{
font-family: serif;
font-size: 25px;
}

But using tag name to select an html element is not efficient in some case if we want to select one or more elements but not all of them. We will use what we call a Class attribute on a exact element we want to change.

.grey-element {

color: grey;

}

Css class

Classes aren’t unique, so we can set the same class for multiple elements, class always start with the dot (.)

.grey-element {

color: grey;

}

.red-element {

color: red;

}

Always put dot in front of the class name.

Now let apply what we just learn in an example

<!DOCTYPE html
<html>
  <head>
    
     <title> FirstWebPage </title>
     <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
      <h1 class="red-element"> Hello World ! this first h1 element have a style attribute  </h1>
      <p> This my first paragraph  </p>
      <h2 class=" grey-element"> My second sub-title </h2>
      <p> This my second paragraph  </p>
      <h1> this second h1 paragraph have no style attribute  </h1>
       <h2> My second sub-title with no style attribute </h2>
  </body>
</html>

Now let see how the style .css will look.

// class only start with a comma

.grey-element {

color: grey;

}

.red-element {

color: red;

}

We set a class when we want to make a change for an exact element but not all.

class = “blue-element

.blue-element {

color: blue;

}

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow by Email
LinkedIn
LinkedIn
Share
Instagram
error: Content is protected !!