CSS Layout & Responsive Design
Educational Notes (Quick Links)
- HTML and CSS Basics
- Floating Elements
- Nested Elements
- Negative Margin & Float Layout
- ‘Float’ Over ‘Position’ Sometimes
- The ‘Position’ Property
- Adaptive Images
- Use Media Queries Sparingly
- CSS Inheritance
- Source Order, Specificity, And !important
- Display (Inline vs Block)
- Pseudo Elements
- Pseudo Classes
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.
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.
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:
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:
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.