Scribd Logo
Upload

Welcome to Scribd!

  • How To Create A Square and A Rectangle

    Uploaded by

    Aan Suseno
    14 views4 pages
    The document provides instructions for creating a square and rectangle using HTML and CSS. It involves creating an index.html file with basic HTML structure, adding a style tag for CSS, inserting a div element, and then using CSS to style the div with a height and width to form either a square (when height and width are equal) or rectangle (when height and width are different). The instructions are followed by code examples to create first a square and then a rectangle by adjusting the height and width values.

    Original Description:

    Original Title

    How to Create a Square And a Rectangle

    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 provides instructions for creating a square and rectangle using HTML and CSS. It involves creating an index.html file with basic HTML structure, adding a style tag for CSS, inserting a div element, and then using CSS to style the div with a height and width to form either a square (when height and width are equal) or rectangle (when height and width are different). The instructions are followed by code examples to create first a square and then a rectangle by adjusting the height and width values.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    14 views4 pages

    How To Create A Square and A Rectangle

    Uploaded by

    Aan Suseno
    The document provides instructions for creating a square and rectangle using HTML and CSS. It involves creating an index.html file with basic HTML structure, adding a style tag for CSS, inserting a div element, and then using CSS to style the div with a height and width to form either a square (when height and width are equal) or rectangle (when height and width are different). The instructions are followed by code examples to create first a square and then a rectangle by adjusting the height and width values.

    Copyright:

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

    HOW TO

    CREATE
    A SQUARE and
    A RECTANGLE
    1. Create index.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>CREATE A SQUARE AND A RECTANGLE</title>
    </head>
    <body>

    </body>
    </html>

    2. Add style tag

    Inside head tag add style tag for the CSS

    <!DOCTYPE html>
    <html>
    <head>
    <title>CREATE A SQUARE AND A RECTANGLE</title>
    <style type="text/css">

    </style>
    </head>
    <body>

    </body>
    </html>

    2. Add a div element inside body

    <!DOCTYPE html>
    <html>
    <head>
    <title>CREATE A SQUARE AND A RECTANGLE</title>
    <style type="text/css">

    </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>

    2. Add the style

    <!DOCTYPE html>
    <html>
    <head>
    <title>CREATE A SQUARE AND A RECTANGLE</title>
    <style type="text/css">
    #box {
    background: red;
    height: 200px;
    width: 200px;
    }
    </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>

    Well, now you have a square.

    How to make a rectangle shape.

    3. Change the width and height

    <!DOCTYPE html>
    <html>
    <head>
    <title>CREATE A SQUARE AND A RECTANGLE</title>
    <style type="text/css">
    #box {
    background: red;
    height: 200px;
    width: 500px;
    }
    </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>

    <!DOCTYPE html>
    <html>
    <head>
    <title>CREATE A SQUARE AND A RECTANGLE</title>
    <style type="text/css">
    #box {
    background: red;
    height: 700px;
    width: 500px;
    }
    </style>
    </head>
    <body>
    <div id="box"></div>
    </body>
    </html>

    You might also like