Websites, Part II — the power of CSS

This post follows up on the tech tip I recorded for Episode 258 of the Just the Books podcast. This continues the series about websites and how they’re made. This series is not intended to deeply explore the topic, the primary goal is to build a foundation for understanding how websites are put together, the tools that can be used, and how innovation is changing and advancing this topic.

CSS, Cascading Style Sheets, are used for the formatting and presentation of webpages. They allow for these details to be described separately from the content of the webpage, which allows for flexibility and a range of presentation options. There’s a lot more that CSS can do than is explained below. This example is chosen for its simplicity and similarity with concepts you may already be familiar with.

For example, to make the formatting change described in my tech tip: display a company name formatted as bold, in a larger font size, with small caps, and green in colour. We still need to use some style definitions, but just defining it at the HTML tag, it would look this:


Company Name

If we define a class in either the header part of the webpage or as a separate document, that same code could look like this:

in the style sheet:

.CompanyName {
font-size: larger;
font-weight: bold;
color: green;
font-variant: small-caps;
}

then the html would look like this:

Company Name

Much cleaner, right?

CSS is also used to work on the layout of webpages. While this introductory article is a decade old, it does a nice job explaining how CSS works and differs from tables. Layout will be discussed in-depth in the future. It’s a complex topic.

Next week I’ll cover some basics of databases.