An introduction to CSS
CSS (Cascading Style Sheets) controls how HTML looks on screen. What it does, how to add it to a page, and the core ideas you will use throughout the series.
What CSS does
CSS is a stylesheet language. It describes the presentation of a document written in HTML – colours, layout, fonts, and so on. A simple way to think about it: HTML is the structure, CSS is the styling on top.
Why CSS matters
Early websites mixed styling into HTML, which made pages hard to maintain. CSS separated content from design. That makes pages easier to update, more accessible, and often faster to load.
Getting started with CSS
CSS attaches to HTML in one of three ways: inline on an element, in a <style> block in the <head>, or via a linked external file. Here is a plain HTML page to start from:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph.</p>
</body>
</html>Now add some CSS. You can put it in the <head> with a <style> tag, or link to an external stylesheet. For simplicity, we will keep it in the same file:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
h1 {
color: navy;
margin-bottom: 20px;
}
p {
color: #333;
}
</style>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph.</p>
</body>
</html>The body selector sets the font and background for the whole page. The h1 and p selectors target the heading and paragraph.
CSS syntax
CSS rules have two parts: a selector (which element to style) and a declaration block (the properties and values). Each declaration is a property, a colon, and a value, separated by semicolons.
selector {
property: value;
}The cascade, inheritance, and specificity
Three ideas explain most CSS conflicts:
- The cascade decides which rule wins when several apply to the same element.
- Inheritance passes some properties from parent elements to their children.
- Specificity is the scoring system that picks the winning rule when selectors overlap.
These three come up constantly when something does not look the way you expect.
The CSS box model
Every element on a page is a box. Layout in CSS is largely about controlling those boxes – their margins, borders, padding, and content area.
Responsive design and media queries
Sites need to work on phones, tablets, and desktops. Media queries let you apply different styles based on screen width, height, or orientation.
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}Here the body background turns light blue when the viewport is 600 pixels wide or less.
Flexbox and Grid
Modern layout relies heavily on Flexbox and Grid. They handle alignment and multi-column layouts without the float-and-clear hacks older CSS needed.
Later articles in this series go deeper into each of these topics. For now, the main point is simple: CSS controls presentation, and the cascade, box model, and layout tools are the foundations everything else builds on.