How to make a square in html

Learn how to create a simple square in HTML using CSS and the
element with this easy-to-follow tutorial.

How to make a square in HTML

Creating a square in HTML is a simple task that can be achieved using a combination of HTML and CSS. The following example will demonstrate how to create a square using HTML and CSS.

HTML Structure

First, let's create the HTML structure for the square. We will use a <div> element to represent the square. The <div> element will have a class attribute that we will use to apply styles to the square using CSS.


      <div class="square"></div>

CSS Styling

Now, let's style the square using CSS. We will define the width and height of the square, and also set the background color to make it visually appear as a square.


      .square {
        width: 100px;
        height: 100px;
        background-color: #ff0000; /* Red color */
      }

Putting it all together

Now that we have defined the HTML structure and the CSS styling for the square, let's put it all together in a complete HTML file.


      <!DOCTYPE html>
      <html>
        <head>
          <title>Square</title>
          <style>
            .square {
              width: 100px;
              height: 100px;
              background-color: #ff0000; /* Red color */
            }
          </style>
        </head>
        <body>
          <div class="square"></div>
        </body>
      </html>

By saving this code in an HTML file and opening it in a web browser, you will see a red square displayed on the page. You can modify the width, height, and background color in the CSS to customize the appearance of the square to your liking.

html

How to make a square in html

How to make a square in HTML

HTML Structure

CSS Styling

Putting it all together

Answers (0)

Popular questions