Create United States Flag with HTML and CSS

Happy Independence Day to all the citizens of United States of America. My old post of creating Indian Flag with HTML and CSS was very popular among my readers. So today I want to create American Flag with HTML and CSS to celebrate US Independence Day.

Learn to create United Stages Flag with HTML and CSS. US Flag is fun.
Flag of the United States of America.

United States Flag or American Flag is rectangular in shape like most flags. It has 13 horizontal stripes which are of two alternating colors red and white. There is a blue rectangle (called as a canton) with 50 small white five pointed stars.

US Flag which is also called as Stars and Stripes, Old Glory and the Star Spangled Banner has been a proud symbol of freedom, democracy and liberty in the world.

Lets break down this challenge into easy steps.

  1. US Flag has 13 Horizontal stripes, which are of equal height. So let us take height of each stripe to be 20px. I have chosen this height so that we do not run into decimals or fractions when it comes to aspect ratio.
  2. US Flag has several predefined aspect ratios. So let us take flag ratio of 1.9 which means we can build a flag with dimensions 494px width x 260px height.
  3. Among 13 Horizontal Stripes, there are 7 red stripes and 6 white stripes.
  4. Width of Blue Canton is 2/5th width of the flag. This means width of Canton is 197.6px.
  5. Blue Canton spans 7 stripes in height. Hence its height is 140px.
  6. There are 50 white stars in total. They are arranged in 5 rows of 6 stars and 4 rows of 5 stars. Let us assume height of each star is 16px.
  7. Approximate Hex Codes of Flag Colors are Red (#B22234), Blue (#3C3B6E) and White(#FFFFFF).

So we have got all the data to build the US Flag. Let us write some code.


We will plan our HTML as follows.

  • Let us have an outer div with class flag
  • The Flag div will have 13 divs with class ‘stripe’ and 1 div with class ‘canton’. To do this very quickly, we can take help of emmet and type .flag>.stripe*13+.canton and press enter
  • Stripe will be empty divs. Canton will have 9 rows of div with class star-rows. Each star row will have 6 spans or 5 spans called star with a unicode character ★ or ‘★‘.
  • You can do this quickly using emmet once again by typing .star-row9>{★}*6and press enter. You can eliminate addition star from alternate rows.
  • We will add a message I ❤️ USA at the bottom of the flag.

Here is the HTML Code.

CSS Code

Let us apply CSS code to our flag by applying a mini reset.

  • The flag class as per the specification will have a width of 494px and height of 260px. We can give some top and bottom margin. Let us set its position to relative which will help us to position canton later. Let us give some box shadow for visual appeal.
  • The stripe class will have an height of 20px. Now comes the fun part. In order to assign background colors to alternate red and white stripes we will make use of CSS nth-child selector. .stripe:nth-child(odd) selects all odd stripes from first one and .stripe:nth-child(even) selects all even stripes.
  • The blue canton will have to be positioned absolute with respect to top left corner of the flag. It has a height of 140px.
  • The stars are the most trickiest part of this flag challenge. Let us assign a height of 15px for 9 star-rows. The star-row will display all its child elements as a flex. Let us assign white color to our star spans.
  • US Flag stars are arranged differently in alternate rows. To achieve this we will use the nth-child selector once again. However for the odd rows we will use justify-content:space-around and for even rows we will use justify-content:space-evenly. Voila, the star arrangement is perfect !
  • We will style our message and show some love to the flag !

Here is the final CSS.

Finally we have built the US Flag with HTML and CSS. Here is the CodePen

See the Pen US Flag by Tech Jasmine (@techjasmine) on CodePen.

I hope you have enjoyed this challenge. Its a good challenge to test your skills in HTML and CSS. Using nth-child selector is a coolest part. Of course there are thousand different ways to achieve the result, but this is my little approach. If you have any suggestions, let me know about it 🙂

Wish you once again a very happy 4th of July ???????? !

Keep Coding ! Keep Smiling 🙂