Whats CSS?

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

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.

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

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.

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 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.