Dev.to

CSS Blog: ID vs Class, Main Axis vs Cross Axis, Flexbox Properties, Justify Content vs Text Align Center —Interview Q&A

1. CSS ID vs Class What? ID is a unique identifier for an HTML element. Class is a reusable identifier that can be assigned to multiple elements. When to Use? Use ID when you want to style or manipulate one unique element on the page. Use Class when you want to style or select multiple elements with the same styles. Why? IDs have higher specificity, so they override classes if both are applied to the same element. Classes promote reusable styles and avoid duplication. Differences Feature ID Class Uniqueness Unique per page Can be used on multiple elements Selector syntax #idName .className Specificity Higher Lower Usage Single element styling Group of elements Example Header Box 1 Box 2 #header { background-color: blue; color: white; } .box { border: 1px solid gray; padding: 10px; } 2. Main Axis vs Cross Axis (Flexbox) What? In Flexbox, the main axis is the direction in which flex items are laid out (horizontal by default). The cross axis is perpendicular to the main axis. When? When working with flex containers and wanting to align or distribute items. Why? Understanding these axes is key to using Flexbox properties correctly like justify-content (main axis) and align-items (cross axis). Differences Property Main Axis Cross Axis Direction Defined by flex-direction Perpendicular to main axis Alignment props justify-content align-items / align-content Example .container { display: flex; flex-direction: row; /* main axis: horizontal */ justify-content: center; /* aligns items along main axis */ align-items: center; /* aligns items along cross axis */ } 3. Flexbox Properties: justify-content, align-items, align-content When & What? justify-content: Aligns flex items along the main axis (horizontal if flex-direction: row). align-items: Aligns flex items along the cross axis (vertical if flex-direction: row). align-content: Aligns rows of flex items (if there are multiple lines, i.e., flex-wrap: wrap). Common values for justify-content: flex-start (default) — items packed at the start center — items centered flex-end — items packed at the end space-between — equal space between items space-around — equal space around items Common values for align-items: stretch (default) — items stretch to fill container center — items centered vertically flex-start — items aligned at top flex-end — items aligned at bottom Example .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: flex-start; } 4. justify-content: center vs text-align: center What? justify-content: center is a Flexbox container property that centers flex items horizontally along the main axis. text-align: center is a text property that centers inline or inline-block content inside a block container. When? Use justify-content: center when working with flex containers to center child elements. Use text-align: center to center text or inline elements inside a block. Differences Feature justify-content: center text-align: center Applies To Flex container’s children (flex items) Inline or inline-block content inside a block element Effect Centers flex items along the main axis Centers inline text or elements horizontally Works With Flexbox layout Normal block layout Example .flex-container { display: flex; justify-content: center; } .text-container { text-align: center; } Interview Questions & Answers Q1. What is the difference between an ID and a class in CSS? A: ID is unique and used for single elements; class can be reused for multiple elements. Q2. What is the main axis and cross axis in Flexbox? A: Main axis is the direction flex items are laid out (default horizontal), cross axis is perpendicular to it. Q3. How does justify-content differ from align-items in Flexbox? A: justify-content aligns items along the main axis; align-items aligns items along the cross axis. Q4. When would you use text-align: center instead of justify-content: center? A: Use text-align: center to center inline text inside block elements; use justify-content: center to center flex items in a flex container. Q5. What happens if you apply both an ID and a class to the same element with conflicting styles? A: The ID styles usually take precedence because of higher specificity. Q6. Can align-content be used if flex items do not wrap? A: No, align-content only affects multi-line flex containers when flex-wrap is enabled. Q7. Give an example of a CSS selector using ID and class. #header { color: blue; } .menu-item { font-weight: bold; } If you want, I can prepare separate

Jun 11, 2025 - 18:50
 0
CSS Blog: ID vs Class, Main Axis vs Cross Axis, Flexbox Properties, Justify Content vs Text Align Center —Interview Q&A

1. CSS ID vs Class

What?

  • ID is a unique identifier for an HTML element.
  • Class is a reusable identifier that can be assigned to multiple elements.

When to Use?

  • Use ID when you want to style or manipulate one unique element on the page.
  • Use Class when you want to style or select multiple elements with the same styles.

Why?

  • IDs have higher specificity, so they override classes if both are applied to the same element.
  • Classes promote reusable styles and avoid duplication.

Differences

Feature ID Class
Uniqueness Unique per page Can be used on multiple elements
Selector syntax #idName .className
Specificity Higher Lower
Usage Single element styling Group of elements

Example 

 id="header">Header
class="box">Box 1
class="box">Box 2