Which selector has the highest specificity?

ID selectors have higher specificity than class selectors, which have higher specificity than element selectors. This is why IDs should be used sparingly.

What does `box-sizing: border-box;` do?

With `border-box`, the width and height properties include content, padding, and border, making layout calculations more intuitive.

Which color format includes transparency?

RGBA (Red, Green, Blue, Alpha) includes an alpha channel for transparency, where 0 is fully transparent and 1 is fully opaque.

What is the main difference between Flexbox and CSS Grid?

Flexbox handles one-dimensional layouts (rows or columns), while CSS Grid handles two-dimensional layouts (rows and columns simultaneously).

What is the difference between transitions and animations?

Transitions smoothly change between two property values, while animations use @keyframes to define multiple steps and can loop automatically.

In the card component, what CSS property creates the smooth hover effect?

The `transition` property smoothly animates changes to other properties (like `transform`) over a specified duration when the state changes.

Learn CSS Styling

Master CSS styling techniques to create visually appealing and responsive web designs.

beginner0 upvotes0 views📄 6 lessons

📄

CSS Basics & Selectors

beginner🕒 1 min readfrom MDN Web Docs

Understanding CSS Syntax

CSS (Cascading Style Sheets) controls the visual presentation of HTML elements. The basic syntax consists of a selector and a declaration block:

🎨CSS

selector {
  property: value;
  property: value;
}

4 linesCSS

Types of Selectors

Element Selectors

Target HTML elements directly:

🎨CSS

p { color: blue; }

1 linesCSS

Class Selectors

Target elements with a specific class (prefix with .):

🎨CSS

.highlight { background-color: yellow; }

1 linesCSS

ID Selectors

Target a unique element (prefix with #):

🎨CSS

#header { font-size: 24px; }

1 linesCSS

Specificity & Cascade

Specificity determines which rule applies when conflicts exist. Order of precedence:

1Inline styles (highest)
2IDs
3Classes, attributes, pseudo-classes
4Elements (lowest)

The cascade means later rules override earlier ones with equal specificity.

💡

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

📄

Box Model & Spacing

beginner🕒 1 min readfrom MDN Web Docs

The CSS Box Model

Every HTML element is a box with four layers:

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

│ Margin │

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

│ │ Border │ │

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

│ │ │ Padding │ │ │

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

│ │ │ │ Content │ │ │ │

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

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

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

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

Properties Explained

Property	Purpose	Example
Content	Actual element size	width, height
Padding	Space inside border	`padding: 20px;`
Border	Outline around padding	`border: 2px solid black;`
Margin	Space outside border	`margin: 10px;`

Box-Sizing Property

By default, width and height only include content. Use box-sizing: border-box; to include padding and border:

🎨CSS

* {
  box-sizing: border-box;
}

3 linesCSS

💡

Always set `box-sizing: border-box;` on all elements for predictable sizing.

Color Formats

CSS supports multiple color formats:

🎨CSS

/* Named colors */
color: red;

/* Hexadecimal */
color: #FF0000;

/* RGB */
color: rgb(255, 0, 0);

/* RGBA (with transparency) */
color: rgba(255, 0, 0, 0.5);

/* HSL */
color: hsl(0, 100%, 50%);

14 linesCSS

Font Properties

🎨CSS

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

8 linesCSS

Text Styling

🎨CSS

.text {
  text-align: center;       /* left, right, center, justify */
  text-decoration: underline; /* underline, overline, line-through */
  text-transform: uppercase; /* uppercase, lowercase, capitalize */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

6 linesCSS

💡

Use `line-height: 1.5-1.6` for better readability in body text.

📄

CSS Styling Cheatsheet & Mini-Project

beginner🕒 2 min readfrom MDN Web Docs

Quick Reference Table

Feature	Syntax	Example
Selector	Element, .class, #id	`p { }`, `.btn { }`, `#header { }`
Colors	hex, rgb, rgba, hsl	`#FF0000`, `rgb(255,0,0)`, `rgba(255,0,0,0.5)`
Box Model	margin, padding, border	`padding: 20px; margin: 10px;`
Fonts	font-family, font-size, font-weight	`font-family: Arial; font-size: 16px;`
Layout	display, flex, grid	`display: flex; justify-content: center;`
Effects	transform, transition, animation	`transform: scale(1.1); transition: 0.3s;`

Mini-Project: Styled Card Component

🌐HTML

<div class="card">
  <img src="image.jpg" alt="Card image">
  <h2>Card Title</h2>
  <p>Card description goes here.</p>
  <button class="btn">Learn More</button>
</div>

6 linesHTML

🎨CSS

.card {
  width: 300px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

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

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.card h2 {
  padding: 20px 20px 10px;
  margin: 0;
}

.card p {
  padding: 0 20px 20px;
  color: #666;
}

.btn {
  margin: 0 20px 20px;
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.btn:hover {
  background: #2980b9;
}

43 linesCSS

💡

This card component demonstrates selectors, box model, colors, transitions, and hover effects—core CSS skills!

📄

Layout Techniques

intermediate🕒 1 min readfrom MDN Web Docs

Display Property

The display property controls how elements are rendered:

🎨CSS

display: block;      /* Full width, new line */
display: inline;     /* Only takes needed width */
display: inline-block; /* Inline but respects width/height */
display: none;       /* Hidden from layout */

4 linesCSS

Flexbox

Flexbox creates flexible, one-dimensional layouts:

🎨CSS

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

6 linesCSS

CSS Grid

Grid creates two-dimensional layouts:

🎨CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* 3 equal columns */
  grid-gap: 20px;
}

5 linesCSS

Positioning

🎨CSS

position: static;    /* Default */
position: relative;  /* Relative to normal position */
position: absolute;  /* Relative to positioned parent */
position: fixed;     /* Relative to viewport */
position: sticky;    /* Hybrid of relative and fixed */

5 linesCSS

Responsive Design Basics

🎨CSS

@media (max-width: 768px) {
  .container { flex-direction: column; }
}

3 linesCSS

💡

Flexbox for 1D layouts, Grid for 2D layouts. Use media queries for responsive design.

📄

Advanced Styling & Effects

intermediate🕒 1 min readfrom MDN Web Docs

Transitions

Smooth animations between property changes:

🎨CSS

.button {
  background: blue;
  transition: background 0.3s ease;
}

.button:hover {
  background: darkblue;
}

8 linesCSS

Animations

Complex, keyframe-based animations:

🎨CSS

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

.box {
  animation: slide 2s ease infinite;
}

8 linesCSS

Transforms

Manipulate element appearance:

🎨CSS

transform: rotate(45deg);
transform: scale(1.5);
transform: translateX(20px);
transform: skew(10deg);

4 linesCSS

Shadows & Gradients

🎨CSS

/* Box shadow */
box-shadow: 0 4px 6px rgba(0,0,0,0.1);

/* Text shadow */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

/* Linear gradient */
background: linear-gradient(90deg, #ff0000, #0000ff);

/* Radial gradient */
background: radial-gradient(circle, #ff0000, #0000ff);

11 linesCSS

Pseudo-Classes

🎨CSS

a:hover { color: red; }      /* Mouse over */
input:focus { border: 2px solid blue; } /* Focused */
li:nth-child(2n) { background: #f0f0f0; } /* Even items */

3 linesCSS

⚠️

Use animations sparingly to avoid performance issues and accessibility concerns.

Learn CSS Styling

CSS Basics & Selectors

Understanding CSS Syntax

Types of Selectors

Element Selectors

Class Selectors

ID Selectors

Specificity & Cascade

Box Model & Spacing

The CSS Box Model

Properties Explained

Box-Sizing Property

Recommended Videos

CSS Flexbox in 100 Seconds

CSS Grid Layout Tutorial

CSS Animations & Transitions

Colors, Fonts & Text Styling

Color Formats

Font Properties

Text Styling

CSS Styling Cheatsheet & Mini-Project

Quick Reference Table

Mini-Project: Styled Card Component

Layout Techniques

Display Property

Flexbox

CSS Grid

Positioning

Responsive Design Basics

Advanced Styling & Effects

Transitions

Animations

Transforms

Shadows & Gradients

Pseudo-Classes

Top Interview Questions

Missing something?

Related Topics