Scribd Logo
Upload

Welcome to Scribd!

  • 7 views

    Practical 4 1

    Uploaded by

    vaishnavipatel.it22

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Practical 4 1

    Uploaded by

    vaishnavipatel.it22
    7 views5 pages

    Original Title

    Practical-4-1

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    7 views5 pages

    Practical 4 1

    Uploaded by

    vaishnavipatel.it22

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 5

    Practical-4

    1. 1. Use different selectors in CSS (Class, id, name) to apply Color,


    text-align, background of the html file.
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5. <meta charset="UTF-8">
    6. <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    7. <link rel=""stylesheet" href=""style.css">
    8. <title>Document</title>
    9. <style>
    10. .class2{
    11. background-color :aquamarine;
    12. color :black;
    13. text align:center;
    14. }
    15. </style>
    16. </head>
    17. <body>
    18. <h1 style="background-color :aquamarine; color :black; text-align
    :center;">name tags is used</h1>
    19. <h2 class="class2">class tag is used</h2>
    20. <h3 id="class3"><a
    href="https://moodle.escet.online/login/index.php">Moddle</a></h3>
    21. </body>
    22. </html>

    1. 2. Use different types of CSS with the above example (Internal,


    External & Inline).
    2. body{
    3. background-color: burlywood;
    4. }
    5.
    6. class3{
    7. background-color: aquamarine;
    8. color: black;
    9. text-align: center;
    10. align-items: center;
    11. display: grid;
    12. }
    3. Create a web page like this. (i.e.Source Code attached with this
    assignment in first.html)
    4. Now add a styles to the previous page so that it looks like this.
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <style>
    header{background-color: #333;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px 0px;
    text-align: center;
    }
    main{font-family: Arial,Sans-Serif;
    }
    header h1{margin: 0;
    }
    nav a { color: #fff; display:
    inline-block;
    padding: 10px 20px;
    text-decoration: none;
    }
    nav a:hover { background-color: #555;
    }
    nav ul{list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    }
    nav ul li{margin: 0 10px;
    }
    nav ul li a{display: grid;
    display: inline-flex;
    color: white;
    font-size: 20px;
    text-decoration: none;
    padding: 5px 10px;
    }
    section{
    font-size: 15px;
    line-height: 40px;
    margin:1px;
    padding:1px;
    }
    section p1{
    margin-top: 0;
    border :2px solid lightgrey;
    padding :20px 50px 20px 20px;
    background-color: #eee;
    }
    section p3{
    margin top: 0px;
    border :2px solid lightgrey;
    padding: 20px 50px 20px 20px;
    background-color: #eee;
    }
    </style>
    </head>
    <body>
    <header>
    <h2>Welcome to CSS Selectors Example</h2>
    <nav>
    <ul>
    <li><a href="Section 1">Section 1</a></li>
    <li><a href="Section 2">Section 2</a></li>
    <li><a href="Section 3">Section 3</a></li>
    </ul>
    </nav>
    </header>
    <main>
    <section id="Section 1">
    <h3>SECTION 1</h3>
    <p1>This is the content of Section 1</p1>
    <section id="Section 2">
    <h3>SECTION 2</h3>
    <p>This is the content of Section 2</p>
    <section id="Section 3">
    <h3>SECTION 3</h3>
    <p3>This is the content of Section 3</p3>
    </section>
    </main>
    </body>
    </html>

    You might also like