Test Site, Tools, & HTML/CSS Basics

Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.

Set Up A Test Site

The best way to follow along without getting lost in the abstract is to set up a test WordPress site on your own server. You will need to install Twenty Ten and Microthemer (free or premium version).

If you want to compare your progress against a completed example at any point in this tutorial, you can download a Microthemer design pack below. Installation instructions can be found on our website.

GUI method completed example: download design pack
Code method completed example. download design pack

Time to introduce the two tools that will make this responsive challenge possible.

Tool 1: Microthemer’s Visual Editing Interface

The quick start video provides the best introduction to Microthemer’s interface and possibilities. Microthemer displays a preview of your site at whatever screen size you choose and there is a toolbar above the preview for applying styles.

Microthemer also has responsive tabs for entering screen specific styles. In the above screenshot, the Large Desktop tab is active. This tab relates to a media query that specifies a min-width condition of 1200px. The width of the site preview and the shading on the horizontal ruler indicates the scope of the media query.

Tool 1 Alternative: Microthemer’s Code Editor

For those who prefer to write CSS by hand, a custom code editor with syntax highlighting can be used. This is available in the free version without any limits.

Tool 2: A Browser Inspector

At the time of writing, Microthemer’s inspection tools are not mature enough for this responsive task. I’m therefore going to use Google Chrome’s native browser inspector to supplement Microthemer. I recommend you do the same. Although Firefox, Safari, Opera, and Internet Explorer all have their own native browser inspection tools.

From your WordPress dashboard, go to the Microthemer interface.
Microthemer will display your site in a preview window below the top toolbar.
Right-click your site title at the upper left of the site preview and choose Inspect. Chrome’s inspector panel will appear at the bottom of your screen, split into two panes.

Quick tip: close the Inspector by clicking the x at the top right. Also, if you click the 3 dots just to the left of the x you can change the position of the inspector (bottom/right/separate window).

The larger pane on the left shows the HTML ‘element’ for the site title you right-clicked. It also shows the HTML for surrounding elements. HTML elements are snippets of code, not visible on the web page, that wrap around the stuff that is visible. HTML elements can also be referred to as HTML tags. The terms ‘element’ and ‘tag’ are interchangeable.

In the example above, an anchor element <a> wraps the ‘Responsive Tutorial’ text. HTML elements segment pieces of content into blocks. Different styling can then be applied to individual blocks, or groups of blocks, with CSS code.

The pane on the right corresponds to the highlighted HTML code in the left pane. It shows the CSS code affecting the site title anchor element you right-clicked:

#site-title a {
	color: #000;
	font-weight: bold;
	text-decoration: none;
}

The bit before the opening curly brace (#site-title a) is the CSS selector. CSS selectors target (select) HTML elements on the page. Click a few different lines of HTML in the left pane of Chrome’s inspector. In the right pane, watch how the CSS selector that targets the HTML changes. You might notice a relationship between the HTML and the CSS selector. I will explain this relationship in the following educational note.

HTML and CSS Basics

Although there are a few exceptions to the rule, in a well-crafted website, the HTML code describes what is displayed and the CSS code describes how the content is displayed. So the HTML describes the sections that will be displayed on the page, as well as the words inside the various sections. And the CSS targets these sections of HTML and applies CSS Properties that relate to appearance. Color, text-align, font-size, height and width etc are all CSS properties that control the appearance of elements on the page.

So HTML takes care of the what, while CSS takes care of the how. One common exception is that images can be added to web pages with either HTML or CSS. When images are added via CSS, they are applied as background images on other HTML elements.

Using Microthemer, you will generate CSS code that styles the HTML content in a particular way. As this is a tutorial on designing responsively, you will apply CSS styles that change the layout of HTML elements at differing screen sizes.

Learn How To Read CSS Selectors, Even If You Don’t Want To Write Them

Computer code may scare you. When you launched Chrome’s inspector you may have had a fright. That’s normal. But the good news is, learning to read a small amount of HTML and CSS code is far far easier than memorizing all the HTML elements and CSS properties and writing them from scratch. Microthemer can do so much more if you learn to read the CSS selectors it suggests. Relying solely on visual highlighting can take you only so far. And if you want to master responsive design with Microthemer, you’ll need to go further.

So what does #site-title a in the CSS above mean? This one selector demonstrates ¾ of everything I’m going to teach you about CSS selectors. It references an id and an HTML tag name, and separates the two with a space. #site-title a basically means: find all ‘<a>’ elements inside any other element with an id of ‘site-title’. To give you more detail:

Ids are sometimes added to HTML tags. E.g. <a id=”site-title“>Responsive Tutorial</a>. The hash (#) prefix is used in CSS to target an element with an id. The site title element has an id of site-title, and so #site-title can be used to target it. Microthemer’s selector wizard uses tag names in combination with ids and classes for clarity (e.g. div#site-title). But this is not required for the selector to be valid.
There is a space separating #site-title from the a that follows. The space dictates hierarchy. Anything that follows the space is a child of anything that precedes the space. So #site-title a targets all anchor (<a>) elements that have a parent element with an id of #site-title. In some ways it’s easier to read CSS selectors from right to left. Because it’s the last item that receives the styles. Everything that precedes the space sets the context that the last item must be in.
The a bit targets an anchor element (<a>). Other common HTML tags include <p>, <div>, <span>, <ul>, <ol>, <li>. They can be targeted with CSS using just the name (without the pointy brackets <>) e.g. a, p, div, span, ul, ol, li.
Sometimes HTML tags have classes instead of, or as well as, ids. To target a HTML element based on a class you need to use a dot (.) instead of a hash (#) such as .my-class.

That’s all you need to know for the time being. It’s enough to understand the CSS selectors Microthemer’s selector wizard generates. Don’t worry if this all seems a bit abstract right now. In the following chapters you will gain concrete experience of targeting HTML elements on the page with CSS using Microthemer.

Tutorial Note: Referencing HTML Elements Using CSS Syntax

If an HTML element has an id, like the site title div, I will often reference it using valid CSS selector syntax e.g. #site-title. This is often quicker than saying ‘div with and id of site-title’ and should make the sentences a little easier to understand.