CSS: telling the browser how your page should look
← Back to Web CodingYour pages so far have used the browser's own taste: black text, blue links, Times New Roman. CSS is how you override that. It stands for Cascading Style Sheets, and a rule looks like this:
h1the selector — which elementscolorthe property — what about themcrimsonthe value — how it should beRead it as a sentence: every h1 on this page has crimson text at 40 pixels.
Put your rules inside a <style> tag, up in the <head>:
<style>
h1 { color: crimson; }
p { color: #2c6e49; font-size: 18px; }
</style>
<h1>Styled at last</h1>
<p>And this paragraph is green.</p>
Try it — this is live
Write p { color: green } once and every paragraph turns green — ten of them, or a thousand. That is the whole reason CSS is separate from HTML: say it once, apply it everywhere.
Three ways to name one, and they all work:
<style>
.one { color: tomato; }
.two { color: #1a5490; }
.three { color: rgb(46, 139, 87); }
</style>
<p class="one">A name — about 140 of them exist</p>
<p class="two">A hex code — # then red, green, blue</p>
<p class="three">rgb() — three numbers from 0 to 255</p>
Try it — this is live
Names are easiest to start with. Hex codes turn up everywhere once you start copying colours from designs, so it is worth knowing that #1a5490 means 1a red, 54 green, 90 blue.
h1 selects every h1. But often you want this one particular thing. Give it a class:
<style>
.warning { color: white; background: crimson; padding: 8px; }
.calm { color: white; background: seagreen; padding: 8px; }
</style>
<p class="warning">Dragon loose in the building</p>
<p class="calm">Dragon has been given a biscuit</p>
<p>An ordinary paragraph, untouched.</p>
Try it — this is live
In the HTML you write class="warning". In the CSS you write .warning with a dot in front. The dot means this is a class name, not a tag name.
Twenty elements can all be class="warning". That is the point — name a kind of thing once, then apply it wherever it belongs.
Every element is a rectangle, whether it looks like one or not. Four properties control the rectangle:
<style>
.card {
background: #eef6fb;
border: 3px solid #1a5490;
padding: 14px;
margin: 10px;
border-radius: 10px;
}
</style>
<div class="card">
<h2>A card</h2>
<p>padding is space INSIDE the border.</p>
<p>margin is space OUTSIDE it.</p>
</div>
Try it — this is live
background — the colour behind itborder — thickness, style, colour, in that orderpadding — breathing room inside the bordermargin — space pushing other things awaypadding is inside, margin is outside. If your text is squashed against its own border you want padding. If two boxes are touching each other you want margin.
Sometimes you need a container that means nothing at all, just so you can style a group of things. That is <div> (a block, on its own lines) and <span> (inline, inside a sentence).
<style>
.box { border: 2px dashed #888; padding: 10px; }
.shout { color: crimson; font-weight: bold; }
</style>
<div class="box">
<p>Everything in here is grouped.</p>
<p>I can move or style the whole lot at once.</p>
</div>
<p>And you can highlight <span class="shout">just these words</span> mid-sentence.</p>
Try it — this is live
<style>..name) styles the ones you choose.#hex, or rgb().padding is inside the border, margin is outside it.div and span are containers with no meaning — handy for grouping.