Content
Links
CSS: Cascading Style Sheets | MDN
MDN, as is custom.
Another ASMR introduction from Laurel.
CSS is the standard language/format for styling web pages, which specifies what the page’s HTML will look like in the browser.
In our ongoing analgy, CSS is the skin of the web. Just like HTML, at its most basic it is still just text, in a file, on a computer. It can live inside HTML documents themselves, but is more commonly seen on its own with the extension .css
CSS came after HTML, first proposed by Håkon Wium Lie in 1994—who was working with our friend Tim Berners-Lee at CERN and wanted more control over the presentation of web pages. (Tim was against the idea, thinking it should be up to each user.) It’s had three major revisions that have grown the vocabulary:
For the past decade or so, features have been added incrementially “within” CSS 3.
Before we get into CSS itself, let’s talk about how it is incorporated with HTML. There are three ways it can be added: inline on HTML tags, via <style> elements in HTML documents, and as separate/external files via <link> elements.
style=This is the original and most straightforward way to add styles, directly as *attributes* in HTML tags:
<p style="color: red;">This text will be red!</p>
Seams obvious. However this has some downsides—imagine you want to style all of your paragraphs in the same way, and with multiple properties:
<p style="color: red; font-family: sans-serif;">This text will be red!</p>
<p style="color: red; font-family: sans-serif;">I’d also like this to be red.</p>
<p style="color: red; font-family: sans-serif;">And they are all sans-serif, too.</p>
It makes it hard to read, and hard to change—you’d have to update every single instance.