↑ BACK TO TOP

Whats CSS?

Making the internet look pretty since 1996.

Foundationalweb-apps

Last updated: April 29, 2025

Back in the 90’s, this is what every website used to look like:

a simple website

Today though, as we wade through the ocean of the internet, we’re blessed with a vibrant marine ecosystem, a veritable coral reef of colors, borders, shapes, gradients, and textures.

a more colorful website

We have one person to thank for this, and that’s Håkon Wium Lie, the inventor of **CSS **.

The TL;DR

CSS stands for Cascading Style Sheets, and it’s a language that developers use to style web pages. It helps them add color, borders, backgrounds, and more to HTML .

  • Every webpage is made of up 3 elements: HTML, CSS, and **JavaScript **

  • CSS is how you style HTML pages with color, borders, fonts, and more

  • CSS works by selecting which HTML element(s) you’re after and applying rules to them

  • You can do a lot more than basic style with CSS (including math)

Let’s get started with the basics of how web pages work in general.

Terms Mentioned

The basics of web pages: HTML, CSS, and JavaScript

Every URL that you load in your browser is made up of 3 things: HTML, CSS, and JavaScript. Haven’t read up about HTML yet? Check out part 1 of this series here.

HTML is all about order, shapes, and text – the structural elements of the webpage. CSS is how you make it look nice. To your webpage CSS lets you add colors, borders, alignment, backgrounds…pretty much anything stylistic.

the difference between HTML, CSS and Javascript

The way I like to think about the relationship between HTML, CSS, and JavaScript is sort of like building a house, for those fabricators among us.

  • The HTML is the structural elements of the house. The foundation, the floors, the walls. All the stuff that gets built first.

  • The CSS is the aesthetic elements of the house. The paint on the wall, the moldings, the type of siding and roof shingles. All the stuff that goes on top of the structural elements.

  • The JavaScript is the interactive elements of the house. The doors that open, the plumbing, the electrical, the window shades that go up and down. All the stuff that you use.

Let’s take a look at some CSS in practice and how it gets used.

CSS basics

The way CSS works is that it gets applied to existing HTML. Just like applying a coat of paint. Consider our old friend, the world’s most basic webpage:

a very basic webpage

You’ll perhaps recall that the HTML that builds this page is quite simple:

<html>

<title>A basic webpage</title>

<h1>This is a webpage.</h1>

<p>Not much more to say about it</p>

<p>Check out the <a href="https://technically.dev/">Technically website</a>

</p>

</html>

This webpage currently has no CSS applied to it at all. Let’s start with something extremely basic: adding some color to the headline text (“This is a webpage”).

The first step is to figure out which HTML element we want to apply our style to. It’s the <h1> tag, simple enough. So here’s the CSS to do the job:

h1 {
    color: blue;
}

Can’t go wrong.

a simple webpage with blue header

That h1 in the CSS is what’s called a selector. It tells the CSS which element in the HTML you want to apply your styles to. Selectors, by de...