All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

CSS Multiple Class Selector

Last Updated : Mar 11, 2024

CSS Multiple Class Selector

In this article we will show you the solution of CSS multiple class selector, the Cascading style sheet or CSS is used to add style to the HTML. In HTML file we can add multiple class to any HTML tag.

By addressing the class, we can select multiple class to add style by CSS class selector (.class).

Step By Step Guide On CSS Multiple Class Selector :-

Let us see an example on CSS multiple class selector.

<!DOCTYPE html>
<html lang = " en " >
<head>
    <meta charset = " UTF - 8" >
    <meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
    <meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
    <title> CSS multiple class selector </title>
    <style>
        h1 {
         font-size : larger ;
         font-weight : bolder ;
         color : lightgreen ;
        }
        .container {
            background-color: antiquewhite;
            border: 2px solid black;
        }
        .clr {
            color : blueviolet ;
        }
        .bgclr {
            background-color : aquamarine ;
        }
        .font {
            font-family : Cambria, Cochin, Georgia, Times, 'Times New Roman', serif ;
            font-weight : bolder ;
        }
    </style>
</head>
<body>
    <h1> TALKERSCODE </h1>
    <p> CSS multiple class selector </p>
    <div class = " container " >
        <h2 class = " clr " > this is heading 1 </h2>
        <p class = " bgclr clr " > this is paragraph 1 </p>
    </div>
    <div class = " container " >
        <h2 class = " font bgclr " > this is heading 2 </h2>
        <p class = " font " > this is paragraph 2 </p>
    </div>
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. Creating a <div> with a class “container” .
  8. Into that <div> create <h2> with class “clr” and <p> tag with two classes “ bgclr” and “clr”
  9. Again create another <div> with the class “container”.
  10. Into that <div> create <h2> with two classes “font” and “bgclr” and <p> tag with class “ font “.
  11. Creating a <style> tag between the <head> tag
  12. Addressing the classes “container” , “clr”, “bgclr” , “font” ,add CSS property.

Conclusion :-

At last here in conclusion, here we can say that with the help of this article we are able to multiple class selector using CSS.

I hope this article on CSS multiple class selector helps you and the steps and method mentioned above are easy to follow and implement.