CSS - Class selector


CSS - Class selector

  • The class selector is used to specify a style for a group of elements. Using div tag we can call the class.
  • Unlike the id selector the class selector is most often used for several elements.
  • Class selector is represented by dot ‘.’ symbol.

Sample Code :

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    .center
           {  
             text-align:center;
           }
  </style>
</head>
  <body>
    <div class=”center”>
      <h1>Education is different with Wikitechy </h1>
      <p>Wikitechy wants to reshape the education.</p>
    <div>
</body>
</html>


Code Explanation :


    Here we declared a class name (.center) with in the style tag by typing dot (.) followed by the class name.

    Using text-align property we have assigned the text (“Learn To Code Easily With Wikitechy”  & “Wikitechy wants to reshape E-Learning Platform” ) to display in the center of the web page.

    In CSS, color property is used to apply color for the font of the text. Here we have given red color for the <h1>& <p>tag.

    Using the div tag we have called the class selector (.center) and assigned the class property for heading <h1> and paragraph <p> tag.

Output :


    The heading text “Learn To Code Easily With Wikitechy” will appear in red color and center of the web page as displayed in the above browser window.

    Similarly, the paragraph text “Wikitechy wants to reshape E-Learning Platform” will appear in red color and center of the web page as displayed.