Connect with us!

Creating Square using HTML and Width and Height CSS

Square has equal width and height. Square is a very simple shape to start with, having the same width and height and  is super easy to create with simple HTML and CSS.

CSS Properties Definitions

The CSS width property specifies the width of the element.

The CSS height property specifies the height of the element.

The background property specifies the background of the element.

Code Block

Here is the code for creating the square:

.square {
        width: 100px;
        height: 100px;
        background: #98d2fd;
      }

Here is the output:

Triangle using CSS Salow Studios
Square

Video Tutorial

You can find the complete coding tutorial in the following YouTube Video

Square CSS Shorts

Here is complete HTML and CSS code

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .square {
        width: 100px;
        height: 100px;
        background: #98d2fd;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Square</h1>
    <div class="square"></div>
  </body>
</html>

Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!

Related Posts

Trending now

Creating Six Sided Star for rating using HTML and CSS
Creating Diamond using HTML and CSS
Creating Triangle using HTML and CSS
Creating Trapezoid using HTML and CSS