CSS Styling Fundamentals: From Zero to Flexbox

Making the Web Beautiful#

HTML provides the structure (the skeleton). CSS (Cascading Style Sheets) provides the style (the skin and clothes).

Without CSS, every website looks like a Word document from 1995. With CSS, you can create immersive 3D experiences.

1. Selectors: Targeting Elements#

To style something, you first have to tell CSS what you are talking about.

• Type Selector: Targets all tags of a type.
  content_copy

  p { color: red; } /* All paragraphs are red */
  

• Class Selector (.): Targets specific elements. Reusable.
  content_copy

  .btn { background: blue; } /* Any element with class="btn" */
  

• ID Selector (#): Targets ONE unique element.
  content_copy

  #header { height: 60px; } /* The element with id="header" */
  

Pro Tip: Use Classes (.classname) for 99% of your styling. IDs are too specific and hard to override later.

2. The Box Model#

This is the most critical concept in CSS. Every element on a webpage is a rectangular box.

That box has 4 layers (from inside out):

1. Content: The text or image itself.
2. Padding: Space inside the border (clears space around content).
3. Border: A line around the padding.
4. Margin: Space outside the border (pushes other elements away).

.card {
    width: 300px;
    padding: 20px;   /* Space inside */
    border: 1px solid #ccc;
    margin: 50px;    /* Space outside */
}

If you understand the Box Model, you understand layout.

3. Flexbox: Modern Layouts#

Before Flexbox, aligning things side-by-side was a nightmare of float: left and clear: both. Flexbox makes it easy.

To enable it, just add display: flex to the container.

.container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    gap: 20px;               /* Space between items */
}

Common properties:

• flex-direction: column -> Stacks items vertically.
• flex-wrap: wrap -> Allows items to go to the next line if there isn't enough space.

4. Responsive Design (Media Queries)#

Your site must look good on Mobile, Tablet, and Desktop. We use Media Queries to apply different styles based on screen width.

/* Default styles (Mobile First) */
.sidebar {
    display: none; /* Hide sidebar on small screens */
}

/* Tablet and up (width > 768px) */
@media (min-width: 768px) {
    .sidebar {
        display: block; /* Show sidebar on larger screens */
        width: 250px;
    }
}

5. Colors and Units#

Colors

• Hex: #ff0000 (Red)
• RGB: rgb(255, 0, 0)
• HSL (Preferred): hsl(0, 100%, 50%). It's easier to tweak brightness.

Units

• px: Fixed pixels. Good for borders (1px).
• rem: Relative to font size. Good for text and padding. If user zooms text, rem scales with it.
• %: Relative to parent width.

Summary#

1. Use Classes for styling.
2. Memorize the Box Model (Margin > Border > Padding > Content).
3. Use Flexbox for layout.
4. Use Media Queries for mobile responsiveness.

Try editing CSS live in the HTML Editor