What is the specificity value of a class selector?

Class selectors have a specificity of 10 points, which is higher than element selectors (1 point) but lower than ID selectors (100 points).

In the box model, which property creates space INSIDE the border?

Padding creates space inside the border, between the border and the content. Margin creates space outside the border.

Which unit is best for responsive font sizing?

The `rem` unit is relative to the root font-size, making it ideal for responsive designs. It's more predictable than `em` which is relative to parent elements.

What is the main difference between Flexbox and Grid?

Flexbox handles one-dimensional layouts (rows OR columns), while Grid handles two-dimensional layouts (rows AND columns simultaneously).

Which position value removes an element from the normal document flow?

The `absolute` position removes an element from the normal document flow and positions it relative to its nearest positioned ancestor. `relative` keeps it in the flow.

What does `repeat(auto-fit, minmax(250px, 1fr))` do in CSS Grid?

`auto-fit` automatically creates as many columns as fit in the container, with each column having a minimum of 250px and maximum of 1fr (equal share of remaining space).

Learn CSS Styling

Master CSS fundamentals to style web pages with colors, layouts, typography, and responsive design.

beginner0 upvotes0 views📄 6 lessons

📄

CSS Basics & Selectors

beginner🕒 1 min readfrom MDN Web Docs

What is CSS?

CSS (Cascading Style Sheets) is a language used to style and layout web pages. It controls colors, fonts, spacing, positioning, and responsive behavior.

CSS Syntax

CSS rules consist of a selector and a declaration block:

🎨CSS

selector {
  property: value;
  property: value;
}

4 linesCSS

Common Selectors

Selector	Syntax	Example
Element	`element`	`p { }`
Class	`.classname`	`.highlight { }`
ID	`#idname`	`#header { }`
Attribute	`[attr=value]`	`input[type="text"] { }`
Descendant	`parent child`	`div p { }`

Specificity

Specificity determines which CSS rule applies when conflicts occur. Higher specificity wins:

1Inline styles (1000 points)
2IDs (100 points)
3Classes, attributes, pseudo-classes (10 points)
4Elements (1 point)

💡

Use classes for reusable styles and IDs sparingly for unique elements.

📄

The Box Model & Layout

beginner🕒 1 min readfrom MDN Web Docs

Understanding the Box Model

Every HTML element is a box with four layers:

┌─────────────────────────┐

│ Margin │

│ ┌───────────────────┐ │

│ │ Border │ │

│ │ ┌───────────────┐ │ │

│ │ │ Padding │ │ │

│ │ │ ┌───────────┐ │ │ │

│ │ │ │ Content │ │ │ │

│ │ │ └───────────┘ │ │ │

│ │ └───────────────┘ │ │

│ └───────────────────┘ │

└─────────────────────────┘

Box Model Properties

Content: The actual element (text, images)
Padding: Space inside the border
Border: Line around padding
Margin: Space outside the border

🎨CSS

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 15px;
}

7 linesCSS

Display Property

Value	Behavior
`block`	Takes full width, starts new line
`inline`	Only takes needed width, flows with text
`inline-block`	Inline but respects width/height
`none`	Hidden from layout

⚠️

Use `box-sizing: border-box` to include padding and border in width calculations.

Color Properties

CSS supports multiple color formats:

🎨CSS

.element {
  color: red;                    /* Named color */
  color: #FF0000;                /* Hex */
  color: rgb(255, 0, 0);         /* RGB */
  color: rgba(255, 0, 0, 0.5);   /* RGBA with transparency */
  background-color: lightblue;
}

7 linesCSS

Font Families

🎨CSS

body {
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-size: 16px;
  font-weight: bold;        /* 400-700 or normal/bold */
  font-style: italic;
  line-height: 1.6;         /* Improves readability */
  letter-spacing: 2px;
}

8 linesCSS

Text Styling

Property	Values
`text-align`	left, center, right, justify
`text-decoration`	underline, overline, line-through
`text-transform`	uppercase, lowercase, capitalize
`text-shadow`	offset-x offset-y blur color

💡

Use web-safe fonts or Google Fonts for consistent rendering across browsers.

Font Sizing Best Practices

Use rem for scalable sizing (relative to root font-size)
Use em for relative sizing within components
Avoid px for responsive designs

📄

CSS Styling Cheatsheet & Mini-Project

beginner🕒 1 min readfrom MDN Web Docs

Quick Reference Guide

Selectors

🎨CSS

* { }                    /* Universal */
element { }              /* Element */
.class { }               /* Class */
#id { }                  /* ID */
element.class { }        /* Element with class */
parent > child { }       /* Direct child */
ancestor descendant { }  /* Any descendant */

7 linesCSS

Common Properties

🎨CSS

/* Colors & Backgrounds */
color: #333;
background-color: white;
background-image: url('image.jpg');

/* Sizing */
width: 100%;
height: auto;
max-width: 1200px;

/* Spacing */
margin: 20px;
padding: 15px;
gap: 10px;

/* Text */
font-size: 16px;
font-weight: bold;
text-align: center;
line-height: 1.6;

/* Layout */
display: flex;
justify-content: center;
align-items: center;

25 linesCSS

Mini-Project: Responsive Card Layout

🎨CSS

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}

.card {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.card h3 {
  margin-top: 0;
  color: #333;
}

.card p {
  color: #666;
  line-height: 1.6;
}

30 linesCSS

💡

Use `auto-fit` with `minmax()` for truly responsive grids that adapt to any screen size.

📄

Flexbox & Grid Layouts

intermediate🕒 1 min readfrom MDN Web Docs

Flexbox Basics

Flexbox is a one-dimensional layout system perfect for aligning items in rows or columns.

🎨CSS

.container {
  display: flex;
  justify-content: center;      /* Horizontal alignment */
  align-items: center;          /* Vertical alignment */
  gap: 20px;                    /* Space between items */
  flex-direction: row;          /* row or column */
}

.item {
  flex: 1;                      /* Equal growth */
  flex-basis: 200px;            /* Base size */
}

12 linesCSS

CSS Grid Fundamentals

Grid is a two-dimensional layout system for complex layouts.

🎨CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  /* 3 columns */
  grid-template-rows: auto 200px;      /* 2 rows */
  gap: 15px;
}

.item {
  grid-column: 1 / 3;           /* Span columns 1-2 */
}

10 linesCSS

Responsive Layouts

🎨CSS

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .grid {
    grid-template-columns: 1fr;  /* Single column on mobile */
  }
}

9 linesCSS

💡

Use Flexbox for one-dimensional layouts and Grid for complex two-dimensional designs.

📄

Positioning & Transforms

intermediate🕒 1 min readfrom MDN Web Docs

Position Property

The position property controls how elements are placed:

🎨CSS

.element {
  position: static;      /* Default, normal flow */
  position: relative;    /* Relative to normal position */
  position: absolute;    /* Relative to positioned parent */
  position: fixed;       /* Relative to viewport */
  position: sticky;      /* Hybrid of relative and fixed */
  
  top: 20px;
  left: 30px;
  z-index: 10;           /* Stacking order */
}

11 linesCSS

Transforms & Animations

🎨CSS

.box {
  transform: rotate(45deg);
  transform: scale(1.5);
  transform: translateX(50px);
  transform: skew(10deg);
  
  transition: all 0.3s ease;  /* Smooth animation */
}

.box:hover {
  transform: scale(1.2) rotate(5deg);
}

@keyframes slide {
  from { left: 0; }
  to { left: 100px; }
}

.animated {
  animation: slide 2s infinite;
}

21 linesCSS

Z-Index Stacking

Higher z-index values appear on top. Only works with positioned elements.

⚠️

Avoid excessive z-index values; keep them organized (10, 20, 30, etc.).

**Key Insight**: Transforms don't affect document flow, making them ideal for animations and visual effects.

Learn CSS Styling

CSS Basics & Selectors

What is CSS?

CSS Syntax

Common Selectors

Specificity

The Box Model & Layout

Understanding the Box Model

Box Model Properties

Display Property

Recommended Videos

CSS Flexbox in 100 Seconds

CSS Grid Layout Course

CSS Tutorial for Beginners

Colors, Fonts & Typography

Color Properties

Font Families

Text Styling

Font Sizing Best Practices

CSS Styling Cheatsheet & Mini-Project

Quick Reference Guide

Selectors

Common Properties

Mini-Project: Responsive Card Layout

Flexbox & Grid Layouts

Flexbox Basics

CSS Grid Fundamentals

Responsive Layouts

Positioning & Transforms

Position Property

Transforms & Animations

Z-Index Stacking

Top Interview Questions

Missing something?

Related Topics