Quartz 4

CSS Flag

5 min read

Metadata

Notes

🎨 Making the Flag of Laos with HTML & CSS: A Beginner-Friendly Guide

🧠 What Are We Learning?

We’re going to create the flag of Laos using only HTML and CSS.
No images. No magic. Just code! ✨

By the end of this little project, you’ll understand:

  • How to style with CSS

  • How to position boxes and circles

  • How to combine selectors

  • What CSS specificity is

  • And why Pikachu might look a bit weird when you’re just starting out (but that’s okay!)

🏳️ The Flag of Laos – What Does It Look Like?

The flag has:

  • A big red rectangle as the base

  • A blue rectangle on top of it, but centered vertically

  • A white circle in the middle of the blue part

  • Text on top of the flag

  • Text inside the white circle too!

🎯 That’s what we’re going to build!

🧱 Let’s Understand the HTML Structure First

We’ve already been given a bit of HTML. But there’s a challenge!

❗ We’re not allowed to change the HTML. 😲

So we have to do all the magic with just CSS. Like a CSS wizard! 🧙‍♂️🪄

Here’s what the HTML looks like (simplified):

<div class="flag">
  <p>Some text</p>
  <div>
    <div>
      <p>Text in the circle</p>
    </div>
  </div>
</div>

Let’s label them:

  1. .flag → The big red background

  2. The first <p> → The title (top text)

  3. The first <div> inside → Blue box

  4. The second <div> inside that → White circle

  5. The last <p> inside → Text in the circle

🎨 Step 1: Style the Flag Container

Let’s target .flag, the main container. This is the red rectangle.

.flag {
  width: 900px;
  height: 600px;
  background-color: #ce1126; /* Red */
  position: relative;
}

📝 Why position: relative? Because we want to position other things relative to this box later.

📘 Step 2: Add the Blue Rectangle

This blue part sits on top of the red part, right in the middle.

How do we select it?

It’s the first div inside .flag. So we use the child selector:

.flag > div {
  width: 100%;
  height: 300px; /* Half of the red (600px) */
  background-color: #002868; /* Blue */
  position: absolute;
  top: 150px; /* Push it down to the middle */
}

💡 top: 150px moves it down a bit so it’s centered nicely.

⚪ Step 3: Add the White Circle

The white circle is inside the blue box.

So how do we select it? It’s a div inside a div inside .flag. We can use:

.flag div div {
  width: 200px;
  height: 200px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: 350px;
}

💡 border-radius: 50% turns a square into a circle! 💡 top: 50px and left: 350px position it in the center of the blue box.

✍️ Step 4: Make the Text Look Nice

📝 Top Paragraph Text

We want the top text (first paragraph) to:

  • Be centered

  • Be large

So let’s select all <p> tags and give them:

p {
  margin: 0;
  font-size: 5rem;
  text-align: center;
  color: white;
}

❗ margin: 0 removes space that may push things around.

📝 Text Inside the Circle

But wait! The circle text is ALSO white, so it becomes invisible!

We need it to be black, so it shows up on the white circle.

Let’s select that one specific paragraph using a smart selector.

You can do this:

.flag div div p {
  color: black;
}

🎉 Now the circle text is black while the other text is white!

🕵️ Fixing Weird Layouts

Sometimes your layout doesn’t look right. Maybe things are pushed too far.

A great trick is using the Chrome Inspector tool:

  1. Right-click the element.

  2. Click Inspect.

  3. Look at margin, padding, or borders that might affect spacing.

🛠 You can even use a Chrome plugin like Pesticide to draw boxes around elements to see what’s going on.

🤓 CSS Tips & Tricks

  • Absolute vs Relative Positioning

    • position: relative is used on the parent

    • position: absolute is used on the child

    • This way, the child moves relative to the parent!

  • Combining Selectors

    • .flag > div → child div of .flag

    • .flag div div → grandchild div of .flag

    • p → all paragraph tags

    • .flag div div p → very specific: only paragraph inside the circle

  • Colors

    • Use hex codes to match exact colors like:

      • Red: #ce1126

      • Blue: #002868

✅ What Should It Look Like in the End?

You should see:

  • A red rectangle

  • A blue band across the middle

  • A white circle in the center of the blue band

  • Text on the top in white

  • Text inside the circle in black

💡 If something looks off — margins are often the culprit!

🖌 Want to Make More Flags?

You can try drawing other flags like:

  • Japan (a white background with a red circle)

  • Nigeria (three vertical green-white-green bands)

  • Austria (red-white-red)

But if you’re from Serbia, brace yourself! Their flag has a royal crest and it’s super hard to do with CSS alone!

🌟 Final Thoughts

Creating pictures with just HTML and CSS is like digital LEGO.
You build with little blocks — rectangles, circles, lines — and stack them in clever ways!

It takes patience, practice, and a bit of creativity. 🎨💻
So don’t worry if your flag looks a little like “weird Pikachu” right now.

You’re learning, and you’re doing amazing! 🚀

Would you like me to help you build the actual code now or make a template to start from?

References

Graph View

Backlinks