Connect with us!

Creating Rectangle using HTML and Width and Height CSS

Rectangle is created either by twice of width or height of the element. Rectangle is a very simple shape, having width as twice the height and is super simple to create using 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 a rectangle:

.rectangle {
        width: 200px;
        height: 100px;
        background: #99d3ff;
      }

And, here is the output:

Rectange

Video Tutorial

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

Rectangle shorts

Here is the complete tutorial code for HTML and CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .rectangle {
        width: 200px;
        height: 100px;
        background: #99d3ff;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Rectangle</h1>
    <div class="rectangle"></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