Scribd Logo
Upload

Welcome to Scribd!

  • Assignment 2 Question 1:-Change The Color of All Elements To "Red"

    Uploaded by

    समिर मोरे
    3 views23 pages
    The document contains 24 questions related to HTML and CSS coding assignments. Each question provides code snippets to style various HTML elements (e.g. <p>, <h1>, <a> etc.) using CSS properties like color, font, padding, margin etc. It also includes questions on positioning elements, setting borders, background colors and text alignments. The output for each question is left blank to be filled after implementing the given CSS code.

    Original Description:

    123

    Original Title

    Document

    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
    The document contains 24 questions related to HTML and CSS coding assignments. Each question provides code snippets to style various HTML elements (e.g. <p>, <h1>, <a> etc.) using CSS properties like color, font, padding, margin etc. It also includes questions on positioning elements, setting borders, background colors and text alignments. The output for each question is left blank to be filled after implementing the given CSS code.

    Copyright:

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

    Assignment 2 Question 1:-Change The Color of All Elements To "Red"

    Uploaded by

    समिर मोरे
    The document contains 24 questions related to HTML and CSS coding assignments. Each question provides code snippets to style various HTML elements (e.g. <p>, <h1>, <a> etc.) using CSS properties like color, font, padding, margin etc. It also includes questions on positioning elements, setting borders, background colors and text alignments. The output for each question is left blank to be filled after implementing the given CSS code.

    Copyright:

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

    ASSIGNMENT 2

    Question 1:- Change the color of all <p> elements to "red".

    CODE:-

    <!DOCTYPE html>

    <html>

    <head>

    <style>

    body {

    color: red;

    </style>

    </head>

    <body>

    <h1>Name Sameer More</h1>

    <p>MSC CA1</p>

    </body>

    </html>

    OUTPUT:-
    QUESTION 2:- Change the color of all elements with the class "color text", to "red".

    CODE:-

    <style>
    .colortext
    {
    color:red;
    }
    </style>

    <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph</p>
    <p class="colortext">This is a paragraph</p>
    <p class="colortext">This is a paragraph</p>
    </body>

    OUTPUT:-
    QUESTION 3:- Change the color of all <p> and <h1> elements, to "red". Group the selectors to
    minimize code.

    CODE:-

    <style>
    h1,p
    {

    color:
    red;
    }
    </style>

    <body>
    <h1>abcdefghi</h1>
    <h2>1234567898</h2>
    <p>paragraph</p>
    <p>paragraph 2</p>
    </body>

    OUTPUT:-

    QUESTION 5:- With the font property: Set the <p> to "italic", "20px" and "Verdana".
    Hint: The font property contains:
    font-style font-variant font-weight font-size/line-height font-family

    CODE:-
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    p.italic{
    font: italic bold 20px verdana;
    }
    </style>
    </head>
    <body>
    <p class="italic">This is a paragraph.</p>
    </body>
    </html>

    OUTPUT:-

    QUESTION 6:- Use the padding property to set the top and bottom paddings for <p> to "25px", and
    left and right paddings to "50px".

    CODE:-

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
    }
    </style>
    </head>
    <body>

    <div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and
    a left padding of 80px.</div>

    </body>
    </html>

    OUTPUT:-

    QUESTION 7:- Set all paddings for <p> to "50px".

    CODE:-
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
    padding: 50px;
    }
    </style>
    </head>
    <body>

    <div>This is all padding for 50px.</div>

    </body>
    </html>

    OUTPUT:-
    QUESTION 8:- Style text in <h1> to uppercase letters and text in <p> to capitalized letters.
    Hint: Use the text-transform property.
    CODE:-

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1.uppercase {
    text-transform: uppercase;
    }

    p.capitalize {
    text-transform: capitalize;
    }
    </style>
    </head>
    <body>

    <h1 class="uppercase">This is some text.</h1>

    <p class="capitalize">what is this behaviour</p>

    </body>
    </html>

    OUTPUT:-

    QUESTION 13:- Set the various text decoration for various heading elements

    CODE:-
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    h1 {
    text-decoration: overline;
    }

    h2 {
    text-decoration: line-through;
    }

    h3 {
    text-decoration: underline;
    }

    h4 {
    text-decoration: underline overline;
    }
    </style>
    </head>
    <body>

    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>

    </body>
    </html>

    OUTPUT:-

    QUESTION 14:- Position the <h1> element to always be 50px from the top, and 50px from the right,
    relative to the window/frame edges

    CODE:-

    <html>
    <head>
    <style>
    h1 {
    position: fixed;

    top: 50px;

    right: 50px;
    }
    </style>

    <h1>This is a heading</h1>

    </body>
    </html>

    OUTPUT:-
    QUESTION 15:- With the border property: Set the border for p to "10px", "solid" and "green".

    CODE:-

    <html>
    <head>
    </head>

    <body>
    <p style = "border:10px solid green;">
    This example is showing border.
    </p>
    </body>
    </html>

    OUTPUT:-
    QUESTION 17:- Set all margins for <h1> to "25px".

    CODE:-

    <!DOCTYPE>
    <html>
    <head>
    <style>
    h1 {
    margin: 25px;
    }
    </style>
    </head>
    <body>
    <h1>This is a heading</h1>
    </body>
    </html>

    OUTPUT:_

    QUESTION 18:- Show <p> elements as "bold" text.

    CODE:-

    <!DOCTYPE>
    <html>
    <head>
    <style>
    p{
    font-weight
    : bold;
    }
    </style>
    <head>
    <body>
    <h1>This is a paragraph</h1>
    <p>This is a paragraph</p>
    </body>
    </html>

    OUTPUT:-
    QUESTION 19:- Set the background color for visited and unvisited links to "lightblue", and the
    background color for the hover and active link states to "yellow".
    Hint: Use the background-color property.

    CODE:-

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    a:hover{
    background-color: Yellow;
    }

    a:active{
    background-color: Yellow;
    }

    a:unvisited{
    color: lightblue;
    }

    a:visited {
    color: lightblue;
    }

    </style>
    </head>
    <body>

    <p><b><a href="default.asp" target="_blank">This is a link</a></b></p>


    <p><b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be
    effective.</b></p>
    <p><b> a:active MUST come after a:hover in the CSS definition in order to be effective.</b></p>

    </body>
    </html>

    OUTPUT:-
    QUESTION 22:- Set the background color of <th> elements to "lightblue".

    CODE:-

    <html>
    <head>
    <style>
    table, th, td {
    border: 1px solid ;
    }

    th
    {

    background-color
    : lightblue;
    }
    </style>
    </head>
    <table>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    </tr>
    <tr>
    <td>Sameer</td>
    <td>More</td>
    </tr>
    <tr>
    <td>shubham</td>
    <td>More</td>
    </tr>
    </table>
    </html>

    OUTPUT:-

    QUESTION 23:- Set the text alignment in <td> elements to "right".


    Hint: Use the text-align property

    CODE:-

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    table, th
    td {

    text-align: Right;
    }
    </style>

    <table>
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    </tr>
    <tr>
    <td>Peter</td>
    <td>Griffin</td>
    </tr>
    <tr>
    <td>Lois</td>
    <td>Griffin</td>
    </tr>
    </table>
    </body>

    </html>

    OUTPUT:-
    QUESTION 24:- Display the list items as inline elements.

    CODE:-

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    li
    {

    display: inline;
    }
    </style>
    <body>
    <ul>
    <li>PP</li>
    <li>MM</li>
    <li>SS</li>
    </ul>
    </body>

    </html>

    OUTPUT:-

    You might also like