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