The United States flag is a symbol of freedom, unity, and history. In this tutorial, you will learn how to create a simple representation of the US flag using HTML and CSS. This project is beginner-friendly and helps you understand HTML structure and CSS styling.
For more flag designs and resources, you can visit allworldflags.com.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.flag {
width: 300px;
height: 160px;
border: 2px solid #000;
display: flex;
}
.blue-star {
width: 40%;
background-color: #3c3b6e;
}
.stripes {
width: 60%;
display: flex;
flex-direction: column;
}
.stripe {
flex: 1;
}
.red {
background-color: #b22234;
}
.white {
background-color: #ffffff;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.flag {
width: 300px;
height: 160px;
border: 2px solid #000;
display: flex;
}
.blue-star {
width: 40%;
background-color: #3c3b6e;
}
.stripes {
width: 60%;
display: flex;
flex-direction: column;
}
.stripe {
flex: 1;
}
.red {
background-color: #b22234;
}
.white {
background-color: #ffffff;
}
Sam HobbsPosted Feb 16, 2026, 8:00 PM
Or we can go to:
File:Flag of the United States.svg - Wikimedia Commons
https://commons.wikimedia.org/wiki/File:Flag_of_the_United_States.svg
And save the Original file. Then display it with:
Using the CSS: