Understand Before You Build

  • HTML
    • Form
    • HTML pattern Attribute
  • CSS
    • inset
    • scroll-snap-type
    • margin-inline
    • Content-visibility
    • Scroll-Driven Animations
    • Isolation
    • @Container
    • @layer
    • :not()
    • :is()
    • :Where()
    • :has()
    • :target
    • backdrop-filter
    • :root
    • Color-scheme
    • Animations
    • Selectors
    • Object-fit
    • Logical Pseudo-Classes
    • :scope
    • Properties
    • Performance
    • Aspect-ratio
    • State Pseudo-Classes
    • Positioning
    • Resize
    • Structural Pseudo-Classes
    • Responsive Design
    • Units
    • Root & Scope Selectors
    • Scrolling
    • At-Rules
    • Target & URL Selectors
    • Spacing
    • Functions
    • Attribute Selectors
    • Layouts
    • Basic Selectors
    • Filters & Effects
    • Colors & Typography
    • Flexbox
    • Combinator Selectors
    • Grid
    • Form & UI State Selectors
    • AI CSS Generator
  • Sass
    • Variables
    • Nesting
    • Mixins
    • Reusable styles
    • Large project management
  • CSS Frameworks
    • Material UI
    • Bootstrap
    • Tailwind CSS
  • React UI
    • Performance Optimization
    • React.memo
    • useMemo
    • useCallback
    • Lazy Loading
    • Code Splitting
    • Virtual DOM Optimization
    • Preventing Re-renders
    • Props & State
    • Hooks
    • Component-based architecture
    • State-driven UI updates
  • Figma
    • Design systems
    • Tokens
    • Variables
    • Auto layout
    • Component variants
    • Design handoff
    • UI consistency

CSS

CSS stands for Cascading Style Sheets.

CSS is used to design and style websites. It controls colors, layouts, spacing, fonts, responsiveness, animations, and the overall look of a webpage.

HTML creates the structure of a webpage, while CSS makes it visually attractive.

Why Do We Use CSS?

  • To make websites visually attractive
  • To create responsive layouts for mobile and desktop
  • To manage spacing, colors, and typography
  • To create animations and effects
  • To separate design from HTML structure
  • To write reusable styling code

Ways to Add CSS

CSS can be added in 3 different ways.

1. Inline CSS

CSS is written directly inside an HTML tag.

[code theme="dark"]

Hello CSS

[/code]

Use Case: Quick styling for a single element.

2. Internal CSS

CSS is written inside the <style> tag.

[code theme="dark"] [/code]

Use Case: Styling a single page.

3. External CSS

CSS is written in a separate .css file and linked with HTML.

[code theme="dark"] [/code]

style.css

[code theme="dark"] p{ color: green; } [/code]

Use Case: Professional and reusable styling.

How CSS is Used in Emailers

Email templates mostly use Inline CSS.

Many email clients do not fully support external stylesheets or advanced CSS features.

[code theme="dark"]
Welcome User
[/code]

Important Points for Email CSS

  • Tables are commonly used for layouts
  • Inline CSS gives better compatibility
  • Flexbox and Grid are not fully supported
  • Simple CSS works best in email templates

CSS Layout Types

1. Block Layout

Block elements take the full width available.

Examples: div, p, h1

2. Inline Layout

Inline elements only take the width of their content.

Examples: span, a

3. Inline-Block Layout

Works like inline elements but also allows width and height.

4. Flexbox Layout

A one-dimensional layout system used for alignment and spacing.

5. Grid Layout

A two-dimensional layout system for rows and columns.

Basic CSS Syntax

[code theme="dark"] selector{ property: value; } [/code]

Example:

[code theme="dark"] h1{ color: red; font-size: 40px; } [/code]

Common CSS Selectors

Tag Selector

[code theme="dark"] p{ color:red; } [/code]

Class Selector

[code theme="dark"] .title{ color:blue; } [/code]

ID Selector

[code theme="dark"] #header{ background:black; } [/code]

Padding vs Margin

Padding

Padding creates space inside an element.

[code theme="dark"] .box{ padding:20px; } [/code]

Margin

Margin creates space outside an element.

[code theme="dark"] .box{ margin:20px; } [/code]

CSS Shorthand Properties

Shorthand properties allow multiple values in a single line.

[code theme="dark"] padding: 10px 20px 30px 40px; [/code]

Value Order

  • Top
  • Right
  • Bottom
  • Left

CSS Variables

Variables help create reusable values.

[code theme="dark"] :root{ --main-color: #ff6600; } button{ background: var(--main-color); } [/code]

Advantages

  • Reusable values
  • Easier maintenance
  • Simple theme management
  • Cleaner code structure

Flexbox Example

Flexbox is mainly used for alignment and spacing.

[code theme="dark"] .container{ display:flex; justify-content:center; align-items:center; gap:20px; } .box{ width:100px; height:100px; background:red; } [/code]

Main Flexbox Properties

  • display:flex → Activates flexbox
  • justify-content → Horizontal alignment
  • align-items → Vertical alignment
  • gap → Space between items

Grid Example

CSS Grid is used for advanced layouts.

[code theme="dark"] .container{ display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; } .box{ background:#ddd; padding:20px; } [/code]

Common Use Cases

  • Dashboards
  • Card layouts
  • Image galleries
  • Complex page structures

Responsive Design

Responsive design means a website automatically adjusts for different screen sizes.

[code theme="dark"] @media(max-width:768px){ .container{ flex-direction:column; } } [/code]

Media Queries are used to create responsive layouts.

CSS Frameworks

Earlier developers used to write all CSS manually.

Now many frameworks are available:

  • Bootstrap
  • Tailwind CSS
  • Material UI
  • Bulma

Advantages of Frameworks

  • Faster development
  • Ready-made components
  • Responsive utilities
  • Cleaner workflow

However, real projects often require custom CSS based on project requirements.

That is why understanding core CSS concepts is still very important.

What is SCSS?

SCSS is a CSS preprocessor.

Developers write code in SCSS, and it finally gets compiled into normal CSS.

Advantages of SCSS

1. Nesting

[code theme="dark"] .card{ h2{ color:red; } p{ color:gray; } } [/code]

Nesting creates a cleaner and more readable structure.

2. Variables

[code theme="dark"] $primary-color: blue; button{ background:$primary-color; } [/code]

3. Mixins

Mixins help create reusable styles.

[code theme="dark"] @mixin flex-center{ display:flex; justify-content:center; align-items:center; } .box{ @include flex-center; } [/code]

4. Component-Based Structure

SCSS files can be separated by components.

  • header.scss
  • footer.scss
  • button.scss

CSS vs SCSS

CSS SCSS
Simple styling Advanced styling
No nesting Nesting support
No mixins Mixin support
Direct browser support Needs compilation

Important CSS Concepts Every Developer Should Know

  • Selectors
  • Box Model
  • Flexbox
  • Grid
  • Responsive Design
  • Media Queries
  • Position
  • Z-index
  • Padding & Margin
  • Variables
  • Animations

Final Summary

CSS is the design system of a website.

Modern frameworks like Bootstrap and Tailwind make development faster, but real-world projects still require custom CSS.

That is why understanding concepts like:

  • Flexbox
  • Grid
  • Spacing
  • Responsive Design
  • Selectors
  • Variables

is extremely important for every frontend developer.

SCSS improves development by providing features like nesting, variables, mixins, and reusable structures.

In simple words:

HTML creates the structure, and CSS makes it beautiful.