LangStop

What is CSS? — Cascading Style Sheets Explained

What is CSS? — Cascading Style Sheets Explained

Definition

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and visual styling of a document written in HTML or XML. CSS controls layout, colors, fonts, spacing, animations, and responsive behavior — separating content (HTML) from presentation (CSS).

CSS was first proposed by Håkon Wium Lie in 1994 and has evolved through CSS1, CSS2, and CSS3 (the current modular standard).

How CSS Works

CSS applies styles to HTML elements by selecting them and declaring visual properties:

/* Selector { property: value; } */
h1 {
  color: #333;
  font-size: 2rem;
  margin-bottom: 1rem;
}

Three Ways to Add CSS

Method Description Use Case
Inline style attribute on HTML elements One-off overrides
Internal <style> block in <head> Single-page styles
External Linked .css file via <link> Multi-page sites (best practice)

CSS Selectors

Selectors determine which HTML elements a style rule applies to:

Basic Selectors

Selector Syntax Example Target
Element element p All <p> elements
Class .class .highlight Elements with class="highlight"
ID #id #header The element with id="header"
Universal * * All elements
Attribute [attr] [type="text"] Elements with a specific attribute value

Combinators

/* Descendant — all <span> inside <div> */
div span { }
 
/* Child — direct <p> children of <section> */
section > p { }
 
/* Adjacent sibling — <p> immediately after <h2> */
h2 + p { }
 
/* General sibling — all <p> after <h2> */
h2 ~ p { }

Pseudo-classes and Pseudo-elements

/* Pseudo-classes — element states */
a:hover { }
input:focus { }
li:first-child { }
li:nth-child(odd) { }
 
/* Pseudo-elements — virtual elements */
p::before { content: "→ "; }
p::after { content: " ←"; }
p::first-line { font-weight: bold; }

The CSS Box Model

Every HTML element is rendered as a rectangular box. The box model defines how the size and spacing of each box is calculated:

┌─────────────────────────────────┐
│          Margin                  │
│  ┌───────────────────────────┐  │
│  │       Border               │  │
│  │  ┌─────────────────────┐  │  │
│  │  │     Padding          │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   Content     │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

.box {
  width: 300px;
  padding: 20px;
  border: 2px solid #333;
  margin: 10px;
}

Total width = width + padding-left + padding-right + border-left + border-right

When using box-sizing: border-box, the padding and border are included in the element's declared width:

* {
  box-sizing: border-box;
}

Positioning

CSS positioning controls how elements are placed in the document flow:

Value Behavior
static Default — follows normal document flow
relative Positioned relative to its normal position
absolute Positioned relative to the nearest positioned ancestor
fixed Positioned relative to the viewport (stays on scroll)
sticky Toggles between relative and fixed based on scroll position 
.relative-container {
  position: relative;
}
 
.absolute-child {
  position: absolute;
  top: 10px;
  right: 10px;
}
 
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

Flexbox

Flexbox is a one-dimensional layout model that distributes space and aligns items within a container:

.container {
  display: flex;
  justify-content: center;    /* horizontal alignment */
  align-items: center;        /* vertical alignment */
  gap: 1rem;                  /* spacing between items */
  flex-wrap: wrap;            /* allow items to wrap */
}

Flex Properties

Property Values Purpose
flex-direction row, column, row-reverse, column-reverse Direction of the main axis
justify-content flex-start, center, space-between, space-around, space-evenly Alignment along the main axis
align-items stretch, center, flex-start, flex-end, baseline Alignment along the cross axis
flex-grow Number (default 0) How much an item grows relative to siblings
flex-shrink Number (default 1) How much an item shrinks relative to siblings
flex-basis Length or auto Initial size before growing/shrinking

CSS Grid

Grid is a two-dimensional layout system that handles rows and columns simultaneously:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  gap: 1rem;
}
 
.grid-item {
  grid-column: span 2;   /* spans two columns */
}

Grid Terminology

/* Define the grid */
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  grid-template-rows: 200px auto 100px;    /* named rows */
  gap: 16px;                                /* shorthand for row-gap and column-gap */
}
 
/* Place items */
.header  { grid-column: 1 / -1; }          /* span all columns */
.sidebar { grid-row: 2; grid-column: 1; }
.content { grid-row: 2; grid-column: 2 / 4; }
.footer  { grid-column: 1 / -1; }

Flexbox vs Grid

Aspect Flexbox Grid
Dimensions One-dimensional (row OR column) Two-dimensional (rows AND columns)
Control Content-first (items control layout) Layout-first (container controls layout)
Use Case Navigation bars, centering, card rows Page layouts, dashboards, galleries
Browser Support Excellent (IE10+) Excellent (IE11+ with prefixes)

Responsive Design and Media Queries

Responsive design ensures web pages look good on all screen sizes:

/* Mobile-first base styles */
.container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
 
/* Tablet: 768px and up */
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
 
/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}
 
/* Large desktop: 1440px and up */
@media (min-width: 1440px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;
    margin: 0 auto;
  }
}

Common Breakpoints

Breakpoint Target Device
320px — 480px Mobile phones
481px — 768px Large phones, small tablets
769px — 1024px Tablets, small laptops
1025px — 1200px Desktops
1201px +` Large screens, TVs

CSS Preprocessors

CSS preprocessors extend CSS with variables, nesting, mixins, and functions:

Sass/SCSS

$primary-color: #007bff;
$spacing-unit: 8px;
 
.card {
  background: white;
  padding: $spacing-unit * 2;
  border: 1px solid lighten($primary-color, 30%);
 
  &__title {
    color: $primary-color;
    font-size: 1.25rem;
  }
 
  &:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
}

Less

@primary-color: #007bff;
@spacing-unit: 8px;
 
.card {
  background: white;
  padding: @spacing-unit * 2;
 
  &__title {
    color: @primary-color;
  }
}

Benefits of Preprocessors

  • Variables — Reusable values for colors, fonts, spacing
  • Nesting — Mirrors HTML structure for cleaner code
  • Mixins — Reusable style blocks with parameters
  • Functions — Color manipulation, math operations
  • Partials/Import — Modular CSS file organization

LangStop CSS Tools