Frontend Engineering | VoidX Academy

2. CSS Styling & Layouts

CSS: Painting the Web

Cascading Style Sheets (CSS) brings your HTML to life. It controls colors, spacing, typography, and complex layouts. In this module, we break down CSS conceptually so you don't just memorize properties, but understand how the rendering engine thinks.

CSS Selectors: Elements

The most basic way to style something is to target the HTML element directly. This will apply the style to EVERY instance of that tag on the page.

/* Targets every single

tag on the page */ p { color: #333333; font-size: 16px; line-height: 1.5; }

CSS Selectors: Classes

Classes are the most common way to style elements. You add a class="card" to your HTML, and target it in CSS with a dot (.). Classes can be reused on multiple elements.

/* Targets any element with class="product-card" */
.product-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

CSS Selectors: IDs

IDs are meant to be entirely unique. An ID should only appear ONCE per HTML page. You target them in CSS with a hash (#). They are very powerful and will override class styles.

/* Targets the single element with id="main-navigation" */
#main-navigation {
  position: sticky;
  top: 0;
}

The Box Model: Margin

Every element in CSS is a box. Margin is the transparent space on the OUTSIDE of the box. It pushes other elements away.

.article-preview {
  /* Pushes elements below it 24 pixels down */
  margin-bottom: 24px; 
  
  /* Shorthand: Top, Right, Bottom, Left (Clockwise) */
  margin: 10px 20px 10px 0;
}

The Box Model: Padding

Padding is the space on the INSIDE of the box, between the border and the actual content (text/images). It makes elements look breathable.

.button {
  /* Creates empty space inside the button around the text */
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 24px;
  padding-right: 24px;
  
  /* Shorthand: Vertical (Top/Bottom) then Horizontal (Right/Left) */
  padding: 12px 24px;
}

The Crucial Reset: Box-Sizing

By default, if you give a box a width of 100px and a padding of 20px, the box actually becomes 140px wide on the screen. This makes layout math a nightmare. We fix this by forcing padding to be calculated INSIDE the width.

/* The universal selector (*) targets absolutely everything */
* {
  /* Border and padding are now included in the element's width/height */
  box-sizing: border-box;
}

Flexbox: The Container

Flexbox is a 1-dimensional layout system used for rows OR columns. To use it, you must first apply display: flex to a parent container. By default, it places all its children in a horizontal row.

.navbar-container {
  display: flex;
  /* Changes the direction from a horizontal row to a vertical column */
  /* flex-direction: column; */
}

Flexbox: Justify Content (Main Axis)

justify-content aligns items along the primary direction (horizontally, if it's a row).

.navbar-container {
  display: flex;
  /* Pushes the first item to the far left, and the last to the far right */
  justify-content: space-between;
  
  /* Other options: center, flex-start, flex-end, space-around */
}

Flexbox: Align Items (Cross Axis)

align-items aligns items perpendicular to the primary direction (vertically, if it's a row).

.navbar-container {
  display: flex;
  justify-content: space-between;
  /* Ensures the logo and the text links are vertically centered with each other */
  align-items: center;
}

CSS Grid: 2D Layouts

While Flexbox is for a single line, CSS Grid is for entire page layouts involving both rows and columns simultaneously.

.EcoStore-product-grid {
  display: grid;
  /* Creates 3 columns. '1fr' means 1 fraction of the available free space */
  grid-template-columns: 1fr 1fr 1fr;
  
  /* The modern way to add spacing between items (no more margin hacks) */
  gap: 32px;
}

Responsive Design: Media Queries

A website must look good on a phone and a 4K monitor. Media Queries allow you to write CSS rules that only activate when the screen size matches your condition.

/* Mobile First: Write your mobile styles outside of media queries */
.EcoStore-product-grid {
  display: grid;
  grid-template-columns: 1fr; /* 1 column on small phone screens */
}

/* When the screen width hits 768px (Tablet), override the rules inside */
@media (min-width: 768px) {
  .EcoStore-product-grid {
    grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
  }
}

/* When the screen hits 1024px (Desktop), override again */
@media (min-width: 1024px) {
  .EcoStore-product-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 columns on desktop */
  }
}

2. CSS Styling & Layouts

CSS: Painting the Web

CSS Selectors: Elements

The most basic way to style something is to target the HTML element directly. This will apply the style to EVERY instance of that tag on the page.

/* Targets every single

tag on the page */ p { color: #333333; font-size: 16px; line-height: 1.5; }

CSS Selectors: Classes

Classes are the most common way to style elements. You add a class="card" to your HTML, and target it in CSS with a dot (.). Classes can be reused on multiple elements.

/* Targets any element with class="product-card" */
.product-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

CSS Selectors: IDs

IDs are meant to be entirely unique. An ID should only appear ONCE per HTML page. You target them in CSS with a hash (#). They are very powerful and will override class styles.

/* Targets the single element with id="main-navigation" */
#main-navigation {
  position: sticky;
  top: 0;
}

The Box Model: Margin

Every element in CSS is a box. Margin is the transparent space on the OUTSIDE of the box. It pushes other elements away.

.article-preview {
  /* Pushes elements below it 24 pixels down */
  margin-bottom: 24px; 
  
  /* Shorthand: Top, Right, Bottom, Left (Clockwise) */
  margin: 10px 20px 10px 0;
}

The Box Model: Padding

Padding is the space on the INSIDE of the box, between the border and the actual content (text/images). It makes elements look breathable.

.button {
  /* Creates empty space inside the button around the text */
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 24px;
  padding-right: 24px;
  
  /* Shorthand: Vertical (Top/Bottom) then Horizontal (Right/Left) */
  padding: 12px 24px;
}

The Crucial Reset: Box-Sizing

/* The universal selector (*) targets absolutely everything */
* {
  /* Border and padding are now included in the element's width/height */
  box-sizing: border-box;
}

Flexbox: The Container

Flexbox is a 1-dimensional layout system used for rows OR columns. To use it, you must first apply display: flex to a parent container. By default, it places all its children in a horizontal row.

.navbar-container {
  display: flex;
  /* Changes the direction from a horizontal row to a vertical column */
  /* flex-direction: column; */
}

Flexbox: Justify Content (Main Axis)

justify-content aligns items along the primary direction (horizontally, if it's a row).

.navbar-container {
  display: flex;
  /* Pushes the first item to the far left, and the last to the far right */
  justify-content: space-between;
  
  /* Other options: center, flex-start, flex-end, space-around */
}

Flexbox: Align Items (Cross Axis)

align-items aligns items perpendicular to the primary direction (vertically, if it's a row).

.navbar-container {
  display: flex;
  justify-content: space-between;
  /* Ensures the logo and the text links are vertically centered with each other */
  align-items: center;
}

CSS Grid: 2D Layouts

While Flexbox is for a single line, CSS Grid is for entire page layouts involving both rows and columns simultaneously.

.EcoStore-product-grid {
  display: grid;
  /* Creates 3 columns. '1fr' means 1 fraction of the available free space */
  grid-template-columns: 1fr 1fr 1fr;
  
  /* The modern way to add spacing between items (no more margin hacks) */
  gap: 32px;
}

Responsive Design: Media Queries

A website must look good on a phone and a 4K monitor. Media Queries allow you to write CSS rules that only activate when the screen size matches your condition.

/* Mobile First: Write your mobile styles outside of media queries */
.EcoStore-product-grid {
  display: grid;
  grid-template-columns: 1fr; /* 1 column on small phone screens */
}

/* When the screen width hits 768px (Tablet), override the rules inside */
@media (min-width: 768px) {
  .EcoStore-product-grid {
    grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
  }
}

/* When the screen hits 1024px (Desktop), override again */
@media (min-width: 1024px) {
  .EcoStore-product-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 columns on desktop */
  }
}

2. CSS Styling & Layouts

CSS: Painting the Web

CSS Selectors: Elements

CSS Selectors: Classes

CSS Selectors: IDs

The Box Model: Margin

The Box Model: Padding

The Crucial Reset: Box-Sizing

Flexbox: The Container

Flexbox: Justify Content (Main Axis)

Flexbox: Align Items (Cross Axis)

CSS Grid: 2D Layouts

Responsive Design: Media Queries

Knowledge Check

2. CSS Styling & Layouts

CSS: Painting the Web

CSS Selectors: Elements

CSS Selectors: Classes

CSS Selectors: IDs

The Box Model: Margin

The Box Model: Padding

The Crucial Reset: Box-Sizing

Flexbox: The Container

Flexbox: Justify Content (Main Axis)

Flexbox: Align Items (Cross Axis)

CSS Grid: 2D Layouts

Responsive Design: Media Queries

Knowledge Check