CSU953 - CSE 2026 - Shoolini University

Create a HTML file with these instructions:

Create 2 checkboxes
Difference between Margin and Padding.
On an image, write the text on all four corners of the image.

Details of the tags:

form: Form is used to get input of data from users

abbr: This tag is used to create an abbreviation.

br: This tag is used to create a line break.

h1: This is an heading 1 tag.

address: This is an address tag used for syntactical marking of an address.

Code

                    
<!doctype html>
<!html lang="en">
<head>
    <title>First Webpage</title>
</head>
<body style="background-color:#fafafa; padding:15px;">
<div class="row">
    <div class="col">
        <img src="https://shooliniuniversity.com/assets/images/logo.png" style="width:100px;
        height:50px;">
    </div>
    <div class="col" style="margin-left: -20%;">
        <h1 style="font-size: 50px;">Output</h1>
    </div>
    <hr>
</div>

<div>
    <h3>Create a short html to demonstrate the use of style tag.</h3>
    <style>
        .styledemo1 :nth-child(odd) {
            font-family: "Maven Pro", Verdana;
            color: lightBlue;
        }

        .styledemo1 :nth-child(even) {
            font-family: "Roboto", Verdana;
            color: lightgreen;
        }
    </style>
    <div class="styledemo1">This is a demo text with custom style with automated styling for odd
        div's.</div>
    <div class="styledemo1">This is a demo text with custom style with automated styling for
        even div's.</div>
    <div class="styledemo1">This is a demo text with custom style with automated styling for odd
        div's.</div>
    <div class="styledemo1">This is a demo text with custom style with automated styling for
        even div's.</div>
    <div class="styledemo1">This is a demo text with custom style with automated styling for odd
        div's.</div>
    <div class="styledemo1">This is a demo text with custom style with automated styling for
        even div's.</div>
</div>
<div>
    <h3>Create some types of colored border: dotted </h3>
    <style>
        .demodot {
            border-style: dotted;
        }

        .demodash {
            border-style: dashed;
        }

        .demodouble {
            border-style: double;
        }

        .demogroove {
            border-style: groove;
        }

        .demoins {
            border-style: inset;
        }

        .demoout {
            border-style: outset;
        }

        .demoridge {
            border-style: ridge;
        }

        .demosolid {
            border-style: solid;
        }
    </style>
    <div class="demodot p-2 border border-success">Dotted Colored Border</div>
    <div class="demodash p-2 border border-warning">Dashed Colored Border</div>
    <div class="demodouble p-2 border border-danger">Double Colored Border</div>
    <div class="demogroove p-2 border border-primary">Groove Colored Border</div>
    <div class="demoins p-2 border border-secondary">Inset Colored Border</div>
    <div class="demoout p-2 border border-info">Outset Colored Border</div>
    <div class="demoridge p-2 border border-light">Ridge Colored Border</div>
    <div class="demosolid p-2 border border-white">Solid Colored Border</div>
</div>

<div>
    <h3>Create some types of colored border and colored text </h3>
    <style>
        .demodot {
            border-style: dotted;
        }

        .demodash {
            border-style: dashed;
        }

        .demodouble {
            border-style: double;
        }

        .demogroove {
            border-style: groove;
        }

        .demoins {
            border-style: inset;
        }

        .demoout {
            border-style: outset;
        }

        .demoridge {
            border-style: ridge;
        }

        .demosolid {
            border-style: solid;
        }
    </style>
    <div class="demodot p-2 border border-success text-dark">Dotted Colored Border</div>
    <div class="demodash p-2 border border-warning text-danger">Dashed Colored Border</div>
    <div class="demodouble p-2 border border-danger text-warning">Double Colored Border</div>
    <div class="demogroove p-2 border border-primary text-secondary">Groove Colored Border</div>
    <div class="demoins p-2 border border-secondary text-info">Inset Colored Border</div>
    <div class="demoout p-2 border border-info text-dark">Outset Colored Border</div>
    <div class="demoridge p-2 border border-light text-success">Ridge Colored Border</div>
    <div class="demosolid p-2 border border-white text-primary">Solid Colored Border</div>
</div>

<div>
    <h3>Create some types of colored border and colored text </h3>
    <style>
        .demomargin {
            margin-top: 10px;
            margin-bottom: 29px;
            margin-left: 20px;
            margin-right: 15px;
        }
    </style>
    <div class="demomargin p-5 m-5 border border-5  border-bottom border-danger text-dark">Dotted
        Colored Border</div>
</div>                    
</body>
</html>

#	Margin	Padding
1	margin is the space outside of the element's border.	padding is the space inside of the element's border
2	We can set the margin to auto.	Setting padding to auto will have no effect.
3	Styling of an element such as background color does not affect the margin.	Styling of an element such as background color affects the padding.
4	Margin can be negative.	It does not allow negative values.
5	Margins are transparent.	Background color of padding and borders can be customized.

Create a HTML file with these instructions:

Details of the tags:

Code

Output

Output

Create five checkboxes.

Write difference between Margin and padding.

Write text on all four corners and center on an image