Whats CSS?

Making the internet look pretty since 1996.

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

Loading image...

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.

Loading image...

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.

Loading image...

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:

Loading image...

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:

Can’t go wrong.

Other fun stuff you can do with CSS

Access the full post in a knowledge base

Knowledge bases give you everything you need – access to the right posts and a learning plan – to get up to speed on whatever your goal is.

Knowledge Base

Building Software Products

How to make positive contributions to your product roadmap.

$199.00/one-time