Scribd Logo
Upload

Welcome to Scribd!

  • Classes in HTML

    Uploaded by

    Jeronimo
    6 views14 pages
    lesson

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    lesson

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    6 views14 pages

    Classes in HTML

    Uploaded by

    Jeronimo
    lesson

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 14

    Classes in HTML

    Dot Net Tutorials

    Back to: HTML Tutorials

    Classes in HTML with Examples

    In this article, I am going to discuss Classes in HTML with Examples. Please read our previous article where we discussed Heading and
    Paragraph in HTML with Examples. At the end of this article, you will learn everything about HTML Classes with Examples.

    Classes in HTML

    In Html, a class attribute is used to define a class for an element. Inside the class attribute, multiple classes can be defined at a time. A class can
    be defined for any Html element. To access any class ” ” symbol is used.

    The class names can be used by CSS to style different elements in Html documents. Same class names can be given to different elements in Html.

    <h1 class_attribute = “class_name”> Content </h1>

    Class Attribute Syntax in HTML


    Multiple Classes in HTML

    Multiple classes can be defined inside the Html element. Above you can see a heading tag with a class attribute. Here I have defined three classes
    inside one class attribute. one can define many classes inside one class attribute. To separate different classes from each other, blank space is
    used. Classes are mostly used for styling different Html elements.

    Class Attribute in CSS

    To access a class in CSS (.Class Name) is used.


    For example: .htitle
    .hcolor
    .hfont

    The class attribute is useful if we want to apply the same styling to a group of elements. Below you can see three cards with the same styling. All
    cards have the same look because the card class is applied to all three divs. Using class attributes saves time as you don’t need to style each and
    every element separately.

    Here we have used internal CSS to write CSS code. Internal CSS is always written inside <style>Tags and placed inside the head tag of the Html
    document.

    Example:

    background-color: violet;

    border: 1px solid transparent;

    <!DOCTYPE html> <html> <head> <style> body{ display:flex; justify-content:center; align-items:center; height:100vh; } .card { background-
    color: violet; color: black; border: 1px solid transparent; border-radius:10px; margin: 10px; padding: 25px; width:120px; } </style> </head>
    <body> <div class="card"> <h2>CARD1</h2> <p>This is CARD 1</p> </div> <div class="card"> <h2>CARD2</h2> <p>This is CARD 2</p>
    </div> <div class="card"> <h2>CARD3</h2> <p>This is CARD 3</p> </div> </body> </html>
    <!DOCTYPE html>
    <html>

    <head>
    <style>
    body{
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    }
    .card {
    background-color: violet;
    color: black;
    border: 1px solid transparent;
    border-radius:10px;
    margin: 10px;
    padding: 25px;
    width:120px;
    }
    </style>
    </head>
    <body>

    <div class="card">
    <h2>CARD1</h2>
    <p>This is CARD 1</p>
    </div>

    <div class="card">
    <h2>CARD2</h2>
    <p>This is CARD 2</p>
    </div>

    <div class="card">
    <h2>CARD3</h2>
    <p>This is CARD 3</p>
    </div>

    </body>
    </html>

    Output:
    Class Attribute in JavaScript

    The class attribute is used in JavaScript to access Html elements.

    <li class="child">Coffee</li>

    <button onclick="myFunction()">Try it</button>

    var list = document.getElementsByClassName("child")[0].innerHTML = "Milk";

    <!DOCTYPE html> <html> <body> <li class="child">Coffee</li> <button onclick="myFunction()">Try it</button> <script> function
    myFunction() { var list = document.getElementsByClassName("child")[0].innerHTML = "Milk"; } </script> </body> </html>

    <!DOCTYPE html>
    <html>
    <body>

    <li class="child">Coffee</li>
    <button onclick="myFunction()">Try it</button>

    <script>
    function myFunction() {
    var list = document.getElementsByClassName("child")[0].innerHTML = "Milk";
    }
    </script>

    </body>
    </html>

    Output:

    In the example above the value for list li is “Coffee” the moment we click on the button it will change the list value to “Milk”. All these things are
    made possible by JavaScript DOM methods. You will get to know more about DOM in the JavaScript tutorial.

    Same Class with Different Tag


    The same class can be shared by different elements. Above we have a heading tag and span tag and a class title is applied to both tags.

    background-color: lightgreen;

    <h1 class="title">Dot Net Tutorials</h1>

    <span class="title">Dot Net Tutorials</span>

    <!DOCTYPE html> <html> <head> <style> .title { background-color: lightgreen; color: #141414; padding: 10px; } </style> </head> <body> <h1
    class="title">Dot Net Tutorials</h1> <span class="title">Dot Net Tutorials</span> </body> </html>

    <!DOCTYPE html>
    <html>
    <head>
    <style>

    .title {
    background-color: lightgreen;
    color: #141414;
    padding: 10px;
    }
    </style>
    </head>
    <body>

    <h1 class="title">Dot Net Tutorials</h1>


    <span class="title">Dot Net Tutorials</span>

    </body>
    </html>

    Here we have used the ” ” symbol to access the title class for styling.
    As you can see the same styling is applied to both the elements irrespective of tags. The class attribute can be used to style multiple elements at a
    time.

    In the next article, I am going to discuss Ids in HTML with Examples. Here, in this article, I try to explain Classes in HTML with Examples
    and I hope you enjoy this HTML Classes with Examples article.

    About the Author: Pranaya Rout

    Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies,
    Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud
    Computing, Microservices, Design Patterns and still learning new technologies.

    You might also like