Audience: anyone who wants to learn more about HTML and CSS

This post is intended for anyone who wants to learn more about the basics of HTML and CSS. It will consist of 5 sections, which are as follows:

1. What is HTML?
2. What is CSS?
3. The Div Element and the Class Attribute
4. HTML Structure and Hierarchy
5. Putting it All Together: Towards a Simple Template

My goal is to a give a conceptual overview of HTML and CSS, including their purposes and how they are used together. To acheive this goal of conceptual understanding, I purposely omit specific “implementation details”. For example, in our discussion of CSS, I do not mention the differences between inline styles and internal/external stylesheets.

At the end of the post, I will provide links that will help fill in the gaps of any omitted details.

Whoa, what is going on here?

Your eyes aren’t playing a trick on you - the page looks like this for a reason. If you are still reading this, you presumably want to learn more about HTML and CSS, and I want to walk you through the basics of HTML and CSS by starting with a page that has none. As we explore the basics, we will gradually build the site back up into something more modern - and easier on the eyes. At the end, we will have created a simple blog template that will hopefully illustrate the fundamentals of HTML and CSS, and how they relate to each other.

What is HTML?

Let’s first think about a typical blog post. A typical blog post will have distinct components: a title, headers, paragraphs of text, lists, tables, images, etc. As these components serve different purposes, they are displayed differently. Titles and headings are big and bold to make them stand out, items in lists are bulleted to imply some form of grouping. In other words, these components have visual meanings.

This leads us to HTML, which stands for Hypertext Markup Language. A markup language (from Wikipedia) is a “system for annotating a document in a way that is syntactically distinguishable from the text”. The parts of the document that are “syntatically distinguishable from the text” are known as HTML tags, and are important to browsers, as they give the plain text visual meaning. HTML tags bracket the plain text they annotate, like this:

<u> Underlined Text </u>

Note: <u> is the opening tag, and </u> is the closing tag.

HTML tags, combined with the plain text they enclose, are known as HTML elements. Browsers have a pre-defined notion of how HTML tags should change the plain text they enclose. For example, when it sees “Underlined Text” surrounded by the <u> HTML tag from above, it will render it like this:

Underlined Text

By using HTML tags to create HTML elements, I can tell the browser to:

• create a bulleted list, and have this be the first item
• link this item to a list of HTML tags and their meanings

What is CSS?

CSS is a language that lets users customize the “style” of webpages. Style can be an ambigious term, so to set the proper context , we will begin by noting that the above paragraphs have no styling (which is why they look like they come from the 1990s). This is another way of saying they were rendered by the browser’s default interpretation of what HTML tags look like. We can change those defaults through a series of declarations called CSS rules.

Let’s say I want to emphasize an important sentence by underlying it. Like we saw above, I would first give my sentence visual meaning by wrapping it in a <u> HTML tag. But say that’s not enough - I now want to make my sentence stand out more by making it red. To do so, I need to write a CSS rule to tell the browser what exactly underlined text should look like.

This is an important sentence. Notice it.

This short example illustrates the fundamental relationship between HTML and CSS. CSS rules apply to groups of HTML elements, and provide precise control over their visual representations.

A CSS rule consists of two parts, a selector and one or more declarations. Not coincidentally, these two parts map nicely to our fundamental relationship. Selectors are how we specify the group of HTML elements that will be styled. The declaration(s) are what precisely control the style, and apply to all the elements matched by the selector (we will refine this definition shortly)

We now know enough about CSS to add styling to our blog post. We’ll use the most basic of CSS selectors, which simply mirror HTML tags. After such a “tag-based” CSS rule is established, whenever browsers encounter HTML elements annotated with such a tag, they will render it according to the delcared style.

An example will help make this concept clear. Click on the CSS rule below to center the text on all section headings on this page.

h2 { text-align: center; }

The Div Element and the Class Attribute

While we’re making progress, our current capabilites are a bit limited. We can target specific groups of HTML elements by their tags, but what if we want to style arbitrary sections of our blog - say, all the text from here until the end of the page?

The <div> tag exists for this very reason. Unlike the HTML tags we have encountered so far, like headings or links, a <div> has no visual meaning. Instead, the <div> allows for generic grouping of HTML elements, all of which can then become the targets of CSS selectors and custom styling declarations.

Because of its grouping capabilities, the <div> is the most commonly used HTML tag. A simple “div-tag” CSS selector would therefore match almost every single element on the page. And while we gain a way to define groups of HTML elements, we also lose control. We combat this loss of precise control by adding attributes to our HTML tags. The most important attribute is the class attribute, and a HTML element with a class attribute specified looks like this:

<div class="myClass">Text</div>

Class attributes let us refine our selector queries. A special CSS selector exists for selecting all HTML elements belonging to a particular class - it involves pre-pending a “.” in front of the class name. To illustrate this, I’ve wrapped the rest of this post in a <div>, and I’ve given this <div> a class attribute called addStyle. Click on the CSS rules below to apply styling to the rest of this post from here on out - it will make the rest of the blog much more readable, I promise.

.addStyle {
    width: 80%;
    margin: 0 auto;
    line-height: 1.6em;
    font-size: 20px;
    font-family: Georgia;
}

<div>
  <h1> I am h1, the child of div. </h1>
</div>

<div class="content-container">
  BLOG CONTENT HERE
<div>

.content-container {
    width: 80%;
    margin: 0 auto;
    line-height: 1.6em;
    font-size: 20px;
    font-family: Georgia;
}