CSS stands for Cascading Style Sheets. While HTML describes the structure of a page, CSS describes how it looks: colours, fonts, sizes and spacing. Keeping structure and style separate makes pages easier to build and change.
The shape of a CSS rule
A CSS rule has a selector and a block of declarations. The selector chooses which elements to style. Each declaration is a property and a value, separated by a colon and ended with a semicolon.
p {
color: blue;
font-size: 16px;
}Here the selector is p, so every paragraph is affected. The property color has the value blue, and font-size has the value 16px.
Three ways to add CSS
- Inline: a style attribute on one element. Handy for a quick test but hard to manage.
- Internal: a <style> block inside the <head>, used for a single page.
- External: a separate .css file linked with a <link> tag. This is the best choice because one file can style many pages.
<link rel="stylesheet" href="styles.css">Common selectors
A type selector uses the tag name, like p or h1. A class selector starts with a dot and matches any element with that class attribute, like .warning. An id selector starts with a hash and matches one unique element, like #header.
Why cascading?
If two rules target the same element, the browser decides which wins based on how specific the selector is and its order. This ordering of styles is the cascade in the name.
Remember
- HTML is structure; CSS is style.
- A rule is selector plus declarations in curly braces.
- Each declaration is property colon value semicolon.
- External stylesheets are the tidiest way to add CSS.