Beginners Guide: Overview, Features, and Learning Path

CSS (Cascading Style Sheets) is a style sheet language used to define the visual presentation of HTML documents. Everything related to the design of a web page — text color, font size, layout, spacing, and animation — is handled by CSS.

HTML provides the structure and content of a page, while CSS handles the appearance. This division of responsibilities is the foundation of modern web development. It was not an accident — the designers of the web deliberately separated content from presentation, based on the principle that these are distinct concerns.

Before CSS existed, HTML had elements and attributes like <font> and bgcolor for controlling appearance directly. But if you wanted to change the text color on a 100-page site, you had to edit all 100 files. CSS was created to solve this problem at its root.

How HTML and CSS Work Together

The word "Cascading" in CSS refers to how priority is determined when multiple style rules apply to the same element. This is one of CSS's most distinctive features — and one of the most common sources of confusion for beginners.

CSS source code is saved with the following file extensions.

• .css — CSS stylesheet

• HTML and CSS are separate languages — HTML defines structure and content; CSS defines appearance. You can completely change the look of a page just by swapping the CSS, without touching the HTML
• "Cascading" is the central concept — When multiple rules apply to the same element, the winner is determined by specificity and order of declaration. Understanding specificity makes debugging much faster
• Inheritance reduces repetition — Properties like color and font-family set on a parent element are automatically inherited by child elements. Setting them on body once lets you manage fonts and colors for the whole page
• Flexbox and Grid are the current standard for layouts — Modern web development relies on Flexbox (one-dimensional) and Grid (two-dimensional) far more than float-based layouts. Mastering these two has direct real-world payoff
• Knowing the history changes how you think about design decisions — There are reasons why CSS works the way it does. For the full story, see IT Terms & History Dictionary: "CSS — The Style Sheet Language That Separated Structure from Presentation"

CSS has several mechanisms that differ from most programming languages. Understanding these three early on will help you troubleshoot issues much more easily.

Cascading — When Multiple Rules Apply

When more than one CSS rule targets the same element, the cascade determines which rule wins.

/* Defined in an external file */
p { color: black; }

/* Added later */
p { color: blue; }

When two rules have the same specificity, the one written later takes precedence. In the example above, color: blue is applied.

Specificity — Which Selector Wins

Different types of selectors carry different "weight" (specificity). A higher-specificity rule overrides a lower-specificity one, regardless of order.

/* ID selector (high specificity) */
#title { color: blue; }

/* Element selector (lower specificity) — loses even when written later */
h1 { color: red; }

For <h1 id="title">, color: blue wins because the ID selector has higher specificity. For a detailed explanation of how specificity is calculated, see Specificity.

Inheritance — Properties Passed from Parent to Child

Some CSS properties are automatically inherited by child elements from their parent.

body {
	color: #333;
	font-family: sans-serif;
}

Properties like color and font-family set on body are automatically passed down to all elements on the page. Properties like margin and border, however, are not inherited.

CSS Characteristics and Trade-offs

There are three ways to apply CSS to HTML.

1. Inline Style — Written Directly on the Element

<p style="color: red; font-size: 18px;">Text</p>

CSS is written directly in the element's style attribute. This has the highest specificity and overrides other rules. However, styles must be repeated in every place you want to use them, which makes maintenance difficult.

2. Style Tag — Written Inside the HTML File

<head>
  <style>
    p { color: red; font-size: 18px; }
  </style>
</head>

CSS is placed inside a <style> tag in the <head> of the HTML file. The styles apply only to that specific HTML file.

3. External File — Written in a .css File, Linked with a <link> Tag

<head>
  <link rel="stylesheet" href="style.css?lang=en">
</head>

/* style.css */
p { color: red; font-size: 18px; }

CSS is written in a separate .css file and loaded with a <link> tag. The same stylesheet can be shared across multiple HTML pages. This is the most common approach in real web development.

Comparison of the Three Methods

For details on how to create and link .css files, see Creating and Running .css Files.

A selector specifies which HTML elements a CSS rule applies to.

Element Selector — Select by Tag Name

/* Applies to all p elements */
p { color: #333; }

/* Applies to all h1 elements */
h1 { font-size: 24px; }

Class Selector — Select by class Attribute

/* Applies to elements with class="highlight" */
.highlight { background-color: yellow; }

<p class="highlight">This text will have a yellow background.</p>

ID Selector — Select by id Attribute

/* Applies to the element with id="header" */
#header { background-color: #333; color: white; }

An ID should be unique within a page. Using the same ID on multiple elements is invalid HTML.

Descendant Selector — Select by Hierarchy

/* Applies to all a elements inside nav (at any depth) */
nav a { text-decoration: none; }

Adjacent Sibling Selector — Select the Next Element

/* Applies only to the p element immediately following an h2 */
h2 + p { margin-top: 4px; }

Common Selectors at a Glance

In CSS, every HTML element is treated as a rectangular "box." From the inside out, the box consists of four areas: content → padding → border → margin.

.box {
	width: 200px; /* Content width */
	padding: 20px; /* Inner spacing (all sides) */
	border: 2px solid #333; /* Border */
	margin: 16px; /* Outer spacing (all sides) */
}

Watch Out for box-sizing

By default, width applies only to the content area. Adding padding and border increases the total size of the element.

/* Default (content-box): width 200px + padding 40px + border 4px = 244px total */
.box-default {
	width: 200px;
	padding: 20px;
	border: 2px solid #333;
}

/* border-box: padding and border are included within the width */
.box-border {
	box-sizing: border-box;
	width: 200px; /* Total width including padding and border is 200px */
	padding: 20px;
	border: 2px solid #333;
}

box-sizing: border-box can be applied globally in a reset stylesheet with *, *::before, *::after. See box-sizing for details.

Individual property pages: margin / padding / border

CSS provides several ways to specify colors. All of the following express valid colors.

/* Color name */
color: red;
color: navy;

/* Hexadecimal (#RRGGBB) */
color: #ff0000; /* Red */
color: #3498db; /* Blue-ish */

/* Shorthand hex (#RGB) */
color: #f00; /* Same as #ff0000 */

/* rgb() function */
color: rgb(255, 0, 0); /* Red */
color: rgb(52, 152, 219); /* Blue-ish */

/* rgba() — with opacity */
color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */

/* hsl() — hue, saturation, lightness */
color: hsl(0, 100%, 50%); /* Red */

Specifying Backgrounds

.section {
	background-color: #f5f5f5; /* Background color */
	background-image: url('/img/sample1.jpg'); /* Background image */
	background-size: cover; /* Scale image to fill the container */
	background-position: center; /* Image position */
	background-repeat: no-repeat; /* No repeat */
}

Individual property pages: color / background-color / background-image / background-size

These properties control the appearance of text.

body {
	font-family: "Helvetica Neue", Arial, sans-serif; /* Font (fallback list) */
	font-size: 16px; /* Font size */
	font-weight: bold; /* Weight: normal / bold / 100–900 */
	font-style: italic; /* Style: normal / italic / oblique */
	line-height: 1.6; /* Line height (unitless recommended) */
	color: #333; /* Text color */
}

p {
	text-align: center; /* Alignment: left / right / center / justify */
	text-decoration: underline; /* Decoration: none / underline / line-through */
	letter-spacing: 0.05em; /* Character spacing */
	word-spacing: 4px; /* Word spacing */
}

Individual property pages: font-family / font-size / font-weight / line-height / text-align

CSS provides several units for specifying sizes and distances. They fall into two broad categories: absolute units (fixed physical size) and relative units (size relative to some reference).

Absolute Units

Relative Units

html { font-size: 16px; } /* The reference for rem */

.text-sm { font-size: 0.875rem; } /* 14px equivalent */
.text-base { font-size: 1rem; } /* 16px equivalent */
.text-lg { font-size: 1.25rem; } /* 20px equivalent */

.container { width: 90%; max-width: 1200px; }
.hero { height: 100vh; } /* Full screen height */

In web development, px and rem come up often. px is intuitive and straightforward; rem allows you to adjust the entire page's scale by changing just the root font size. For responsive design, %, vw, and vh also appear regularly.

These properties control how elements are displayed — or whether they are visible at all.

Main Values of display

/* block: Takes up a full line; width and height can be set (default for div) */
.block { display: block; }

/* inline: Flows in line with text; width and height have no effect (default for span) */
.inline { display: inline; }

/* inline-block: Flows inline but allows width and height */
.inline-block { display: inline-block; }

/* none: Hides the element completely (space is also removed) */
.hidden { display: none; }

/* flex: Creates a flex container */
.flex { display: flex; }

/* grid: Creates a grid container */
.grid { display: grid; }

Difference from visibility

/* display: none — element disappears along with its space */
.gone { display: none; }

/* visibility: hidden — element is invisible but its space remains */
.invisible { visibility: hidden; }

See also: display / visibility

The position property specifies how an element is placed in the document. The value determines how top / right / bottom / left take effect.

/* A "back to top" button fixed at the bottom-right of the page */
.to-top-btn {
	position: fixed;
	right: 20px;
	bottom: 20px;
}

/* A badge overlaid at the top-right of its parent */
.parent {
	position: relative; /* Establishes the reference point for absolute */
}
.badge {
	position: absolute;
	top: 0;
	right: 0;
}

See position for full details.

Flexbox is a layout feature for arranging elements in one dimension (either horizontally or vertically). It is well-suited for navigation bars, card rows, and button groups.

/* Container settings */
.container {
	display: flex; /* Create a flex container */
	flex-direction: row; /* Direction: row (horizontal) / column (vertical) */
	justify-content: space-between; /* Alignment along the main axis */
	align-items: center; /* Alignment along the cross axis */
	gap: 16px; /* Spacing between items */
}

/* Item settings */
.item {
	flex: 1; /* Grow to fill available space equally */
}

Here is the corresponding HTML:

<div class="container">
  <div class="item">Ikari Shinji</div>
  <div class="item">Ayanami Rei</div>
  <div class="item">Soryu Asuka Langley</div>
</div>

Common Values for justify-content and align-items

Individual property pages: flex (shorthand) / flex-direction / justify-content / align-items

CSS Grid is a layout feature for placing elements in two dimensions (rows and columns simultaneously). It is well-suited for overall page layouts and tile-style card grids.

.grid-container {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
	grid-template-rows: auto auto; /* 2 rows, height based on content */
	gap: 16px; /* Spacing between cells */
}

Here is the corresponding HTML:

<div class="grid-container">
  <div>Ikari Shinji</div>
  <div>Ayanami Rei</div>
  <div>Soryu Asuka Langley</div>
  <div>Nagisa Kaworu</div>
  <div>Katsuragi Misato</div>
</div>

The fr Unit and repeat()

/* repeat(3, 1fr) is shorthand for 1fr 1fr 1fr */
.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}

/* Fixed width + flexible remainder */
.sidebar-layout {
	display: grid;
	grid-template-columns: 240px 1fr; /* Fixed sidebar + flexible main content */
}

Grid and Flexbox are often used together — a common pattern is Grid for the overall page structure and Flex for arranging elements within each section.

Individual property pages: align-content / gap / column-gap / row-gap

Media queries allow you to apply different CSS rules based on conditions such as screen width. They are the primary tool for making layouts adapt to smartphones, tablets, and desktops.

/* Default (mobile) */
.container {
	width: 100%;
	padding: 16px;
}

/* When the screen is 768px or wider */
@media (min-width: 768px) {
	.container {
		max-width: 960px;
		margin: 0 auto;
		padding: 24px;
	}
}

/* When the screen is 1200px or wider */
@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
}

Mobile-First Approach

Writing default styles for mobile and adding styles as the screen gets larger (using min-width) is called mobile-first. The opposite approach — starting from desktop and narrowing down with max-width — is also used. Neither is strictly correct; the choice depends on the nature of the project.

Representative Breakpoints

A breakpoint is the screen width at which a layout switches. The following values are frequently referenced:

These are not absolute standards — they should be adjusted based on how the content looks at each width. Rather than memorizing breakpoint numbers, a more practical approach is to narrow the browser window until the layout breaks, and set a breakpoint at that width.

The Viewport Meta Tag

For responsive design to work properly, the following meta tag must be included in the HTML <head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without this tag, mobile browsers will render the page at desktop width and shrink it to fit the screen. This meta tag is a prerequisite for media queries to function as intended.

/* Responsive Flexbox example */
.items {
	display: flex;
	flex-direction: column; /* Stack vertically on mobile */
}

@media (min-width: 768px) {
	.items {
		flex-direction: row; /* Horizontal on tablet and wider */
	}
}

CSS provides two features for adding motion. transition smooths out state changes, and animation defines more complex motion sequences.

transition — Smooth State Changes

.btn {
	background-color: #3498db;
	color: white;
	padding: 10px 20px;
	transition: background-color 0.3s ease; /* Property, duration, easing */
}

.btn:hover {
	background-color: #2980b9; /* Color smoothly changes on hover */
}

animation — Define Motion with @keyframes

/* Define the motion */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(-10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Apply to an element */
.message {
	animation-name: fadeIn; /* Name of the @keyframes to use */
	animation-duration: 0.4s; /* Duration of one cycle */
	animation-timing-function: ease; /* Easing */
	animation-fill-mode: forwards; /* Hold the final state after completion */
}

Individual property pages: transition / transition-duration / animation / animation-name / animation-duration

When solving CSS problems, the most valuable resource is the developer tools (DevTools) built into every major browser (Chrome, Firefox, Safari, Edge). DevTools let you inspect and modify CSS in real time.

How to Open DevTools

Alternatively, right-click on the element you want to inspect and select "Inspect" to open DevTools with that element already selected.

The Elements Panel — Viewing Applied Styles

The "Elements" panel (called "Inspector" in Firefox) shows all CSS rules applied to the selected element:

• Struck-through styles — properties overridden by the cascade or higher specificity. This is where you find the answer to "why isn't this style working?"
• Computed tab — the final, calculated values after considering cascading, inheritance, and defaults
• Box model visualization — a visual diagram showing the margin, border, padding, and content areas with their values. Invaluable for debugging spacing issues

Live Editing of Styles

Editing CSS values directly in DevTools applies the change to the page immediately. Try changing colors, adjusting margins, or toggling display: none to hide elements — all without modifying the actual CSS file.

These changes are temporary and only affect the browser's display. Once you find a change you like, copy the values from DevTools into your CSS file.

How to Debug "Styles Not Applying"

When CSS is not being applied as expected, you can identify the cause using DevTools:

1. Right-click the target element and select "Inspect"
2. In the Styles panel, check whether your CSS rule appears. If it does not, the selector is wrong
3. If your property is struck through, it is being overridden by a higher-specificity rule. DevTools shows which rule is winning
4. Check the Computed tab for the final applied value. It also shows whether the value was inherited or is a browser default

Mastering DevTools dramatically speeds up CSS troubleshooting. Instead of guessing why the page looks the way it does, you can see the facts.

Mistake 1: Styles Not Applying (Typo in Selector)

A common error is forgetting the . for class selectors or # for ID selectors.

/* Wrong: no dot — this targets all <p> elements instead */
highlight { color: red; }

/* Correct */
.highlight { color: red; }

Mistake 2: position: absolute Placed in an Unexpected Location

position: absolute is positioned relative to the nearest ancestor that has a position value other than static. If no such ancestor exists, it falls back to the html element.

/* Wrong: parent has no position — html becomes the reference */
.parent { width: 200px; height: 100px; }
.child { position: absolute; top: 0; right: 0; }

/* Correct: add position: relative to the parent */
.parent { position: relative; width: 200px; height: 100px; }
.child { position: absolute; top: 0; right: 0; }

Mistake 3: margin: auto Not Centering the Element

margin: auto only centers a block element when an explicit width is set.

/* Wrong: no width, so centering does not work */
.box { margin: 0 auto; }

/* Correct */
.box { width: 600px; margin: 0 auto; }

Mistake 4: float-Based Layout Collapsing

Floated elements are removed from the normal document flow. The parent element's height can collapse to zero, causing backgrounds and borders to disappear. Modern web development typically uses Flexbox or Grid instead of floats for layout.

Mistake 5: z-index Not Working

z-index only works on elements whose position is something other than static.

/* Wrong: no position set, z-index has no effect */
.overlay { z-index: 100; }

/* Correct */
.overlay { position: relative; z-index: 100; }

Comment syntax in CSS. Comments are ignored by the browser and are used to explain the intent of styles or to temporarily disable declarations (comment out).

Comment types

Type	Syntax	Overview
Block comment	/* text */	The only comment syntax defined in the CSS specification. Works for single-line and multi-line comments. Everything from /* to */ is treated as a comment.

// is not part of the CSS specification. Using it may cause unexpected behavior in some browsers, so it should not be used.

Sample

/* Navigation */
nav {
  display: flex;
  gap: 16px;
}

/*
  Card component.
  A lift effect is applied on hover by increasing the shadow.
*/
.card {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* background-color: #f0f0f0; */ /* commented out example */
}

Comments can hold whatever you find useful. Common uses include why the code is written a certain way, what the code does, TODOs, and notes — but you are free to write whatever fits the situation. For more detail, see the comment reference page.

Once you have a sense of the big picture from this page, the following order is an efficient way to work through the CSS Dictionary.

CSS (Cascading Style Sheets) = the style sheet language that defines the appearance of HTML. Proposed by Hakon Wium Lie in 1994 and published as a W3C Recommendation in 1996. Based on the design philosophy of "separating structure from presentation" — HTML handles "what to display," CSS handles "how to display it."

Three core concepts

• Cascade — when multiple rules target the same element, the later one wins (higher specificity always wins)
• Specificity — ID selectors > class selectors > element selectors
• Inheritance — color / font-* and similar properties are passed down from parent to child; margin / border and layout properties are not

Three ways to apply CSS

• Inline style (style attribute) — highest specificity; hard to maintain
• Style tag — scoped to that HTML file only
• External .css file — shared across multiple pages; most common in practice

Key layout features

• Box model — four layers: content → padding → border → margin
• Flexbox — strong for one-directional layouts (rows or columns)
• Grid — strong for two-dimensional layouts (rows and columns simultaneously)
• position — absolute is relative to the nearest non-static ancestor; fixed stays in place during scrolling
• Media queries — switch styles based on screen width. Mobile-first is the prevailing approach

Key units

• Absolute: px (pixels), pt (points, for print)
• Relative: em (parent-based), rem (root-based), % (parent-based), vw/vh (viewport-based), fr (Grid only)
• px and rem come up most often in web development

History and evolution

• Proposed by Hakon Wium Lie in 1994; CSS1 became a W3C Recommendation in 1996
• CSS2 (1998) added position, z-index, etc. CSS3 onwards uses independent modules revised on their own schedule
• There is no "CSS4." Selectors is at Level 4, Flexbox at Level 1 — each module has its own level
• Full history and lineage: IT Terms & History Dictionary "CSS"

Debugging basics

• Browser DevTools (F12 / Cmd+Option+I) let you inspect and modify CSS in real time
• Struck-through styles = overridden by the cascade. Computed tab = the final applied values
• Instead of guessing why the page looks the way it does, you can see the facts

Good Things to Know Early On

• Understanding selectors, specificity, and the cascade makes it easier to debug "why isn't my style applying?"
• The box model and box-sizing: border-box appear in almost every layout
• Mastering Flexbox covers the majority of horizontal layout needs
• CSS units: px and rem for most cases; %, vw, and vh for responsive design
• There is no need to memorize everything at once — the practical approach is to look up what you need as you build