CSS Classes

SS class is a selector to assign class name either one or group of element and apply specific styles. The class selector selects HTML elements with a specific class attribute. The class selector is defined with a period sign (.) immediately followed by the class value. The simple syntax of defining properties of a class in CSS would be :
    .class_name { property: value; }
Example :
<!DOCTYPE>
<html>
  <head>
    <style>
      .char {
        color: blue;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h3 class="char">Class Selector</h3>
    <p>This is test paragraph.</p>
    <p class="char">This is Another test paragraph</p>
  </body>
</html>
Output :

Class Selector

This is test paragraph.
This is Another test paragraph

As we can see at the above example by using class selector we can easily modify element styles. CSS class selector define using class attribute with value (user define class name). And also note that one or more CSS class can be assigned to a single element separate by single space. For example
<!DOCTYPE>
<html>
  <head>
    <style>
      .char {
        color: blue;
        text-align: center;
      }
      .heading {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h3 class="char heading">Class Selector</h3>
    <p>This is test paragraph.</p>
    <p class="char">This is Another test paragraph</p>
  </body>
</html>
Output :

Class Selector

This is test paragraph.
This is Another test paragraph

In CSS if we assign same class to multiple element, so in this situation assign unique style to each element we need to use the element name before the class name. The syntax would be :
  element_name.class_name {
    property: value;
  }
Example :
<!DOCTYPE>
<html>
  <head>
    <style>
      p.char {
        color: red;
        text-align: center;
      }
      h3.char {
        color: black;
        background-color: yellow;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h3 class="char">Class Selector</h3>
    <p>This is test paragraph.</p>
    <p class="char">This is Another test paragraph</p>
  </body>
</html>
Output :

Class Selector

This is test paragraph.
This is Another test paragraph

We can also assign css style to different classes in a group manner. Example :
<!DOCTYPE>
<html>
  <head>
    <style>
      .class1, .class2, .class3 {
        text-align: center;
      }
      .class1 {
        color: blue;
        background-color: lightgray;
      }
      .class2 {
        color: red;
        background-color: yellow;
      }
      .class3 {
        color: green;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h3 class="class1">Class Selector</h3>
    <p class="class2">This is test paragraph.</p>
    <p class="class3">This is Another test paragraph</p>
  </body>
</html>
Output :

Class Selector

This is test paragraph.
This is Another test paragraph


Next Topic :

No comments:

Post a Comment