A Brief Intro to HTML, CSS & WordPress

A few weeks ago, I released a free mobile-first starter theme for WordPress called Go Mobile First. To help you use it, I’m writing a series of tutorials on how to make some common changes.

For people who are new to web development (or just new to WordPress), I thought I’d start with a brief intro to HTML, CSS and WordPress.

A Brief Intro to HTML

HTML is like the materials that go into a building.

It’s the content that makes up a webpage, but by itself, it’s mostly without shape or form. You can build a webpage with just HTML and it will be entirely usable… though not necessarily all that nice to look at.

Simply put, HTML is the content.

A Brief Intro to CSS

CSS is like the blueprints that tell the construction team (in this case, the web browser) how to assemble the building materials.

How big should the letters be? What about headings? What color are the links? What do they do when you hover over them? Where should this section of content be located, relative to the other pieces of content?

In the earlier days of the web, these instructions were added directly to the content on the page. If you wanted a header to be orange, you would type color=“orange”. As you could imagine, on sites with a lot of content, this was an unrealistic amount of work.>

Today, we use CSS, or cascading style sheets.

Using Stylesheets

The “blueprints” for a site are kept in a separate file, and referenced in the header of each page by including something like <link rel=“stylesheet” type=“text/css” href=“http://your-website.com/assets/stylesheet.css">.

In the stylesheet, you can apply styles to elements directly, for example:

h2 {
    color: orange;
}

You can also specify classes that get used by multiple HTML elements, such as:

.orange {
    color: orange;
}

Any element tagged as class=“orange” in your HTML will be orange. You can change .orange to color: blue; in your CSS, and everything with that class in your HTML will now be blue.

IDs work similarly, but are applied to just one element, and cannot be reused. For example:

#logo {
     font-size: 24px;
}

Would make <h2 id=“logo”>My Blog</h2> 24 pixels in size. You would not be able to use id=“logo” on any other HTML element.

Specificity & the Cascade

As the name implies, the styles in a stylesheet cascade. That means that if you write:

h2 {
   color: orange;
}

h2 {
   color: blue;
}

Your h2 elements will be blue. The last specified style takes precedence.

To complicate this slightly, styles that are more specific take precedence, even if they happen earlier in the stylesheet. General elements, like h2 and a, are the least specific, then classes, then IDs.

So this code:

.orange {
    color: orange;
}

h2 {
    color: blue;
}

Would cause <h2 class=“orange”> to be orange, because classes are more specific than general elements.

To further complicate things, you can nest elements, classes and IDs (#logo .orange, for example) to provide more specificity. This can cause a world of hurt when things don’t work right and you can’t figure out why, so you should try to write your stylesheets with the least amount of specificity possible.

In Go Mobile First, I only use general HTML elements and classes.

A Brief Intro to WordPress

If you’re writing a basic HTML webpage, you need to manually code the content on each page.

For content that shared across pages, like navigation links, this is a bit annoying. And if you make an update - for example, adding a new page to your site - you need to manually update the navigation links on every page.

WordPress (and other content management systems) provide templates for commonly shared content - the header, footer, blog posts, and so on. Using a programming language called PHP, WordPress pulls page content from a database, adds it to the templates, and compiles it into HTML dynamically when someone tries to access it.

This lets you update shared content once instead of repeatedly.

What Now?

This article is by no means a comprehensive look at HTML, CSS and WordPress. Hopefully, the general concepts here will bring a little clarity to some of the topics and exercises we’ll explore in future tutorials.

If you’re still a little unsure, or would just like to learn more, here are some great resources you should check out: