Welcome to Lesson 2 of the Customize Thesis Like a Pro tutorial series. The Thesis theme is a remarkably flexible and relatively easily customizable WordPress theme framework. And the easiest way to go beyond the customization that’s available to you in Thesis Design options is to learn how to edit CSS.
In this lesson, you’ll learn about some of the basic principles of customizing the appearance of your Thesis theme site using CSS. This lesson follows the website file management system explained in Lesson 1 and if you haven’t watched those videos yet I strongly suggest doing that first.
What are Cascading Style Sheets?
In the first part of this lesson, we’ll introduce CSS. CSS stands for Cascading Style Sheets. Cascading refers to how styles are passed through Style Sheets to the browser. And any given web page may have many different Style Sheets that affect certain parts of it and as we go through this process, you’ll see that web pages we work on will generally have at least 3 Style Sheets associated with them. Often, there can be as many as 10 different Style Sheets that are called when a sheet is loaded and cascading deals with how a specific style is patched through all those sheets to the point at which it gets rendered.
The Style Sheets control the look and feel of a web page. They contain the CSS code that describes the text size, the font colors, what the bullets look like, what the background images are, what the background colors are, and what list styles look like. Anything that’s associated with how the web page looks is controlled by styles which are contained within Style Sheets.
Style Sheets allow you to control many elements with a single style definition. For example, if you have a definition for what a link behavior ought to be, that style can be applied to all links on your entire site. So if you wanted to switch the link color from blue to red, in the style sheet you could simply change the color in one place and it would affect all areas.
Style Sheets also allow you to refine the definition of individual elements. Using that same example, you might have all your links red but on a specific page you might want a group of links to be blue. And Style Sheets will allow you to specify which of those links you want to be a different color.
Why Do We Use Cascading Style Sheets?
So why use CSS? The first reason is you want to separate style from content. Prior to CSS, a style for any individual element was defined inside the HTML page with that specific element. Thus, each link that you wanted to be blue would have to have a designation that it would be blue and each link that you wanted red would have to have a designation that you wanted it to be red. If you had a block of text that you want to specify a font size for, every time you wanted that font size used you would have to specify it.
And so a webpage began to look very confusing. In fact, webpages could have more style definitions than actual text. And of course, this combination of style and content then makes it very difficult to manage and maintain. This is the second reason why we use CSS because it allows us to minimize our effort. That is, you can assign a change once or you can assign a style once and then anytime you want to change it, you only have to change it once. Even if it’s used a thousand times on your website, you only have to change the definition once and in only one location.
I recently had a conversation with a web designer who must have learned everything he knew back in 1992 and never learned anything new again. And he argued that it wasn’t difficult to make those site-wide stylistic changes because all you needed to use was a word processor that had a search and replace ability. So you could tell your word processor to search for every instance of this style where it was blue and you can change it to red. And while that may very well be true, it would be horrible practice. It’s far too fraught with opportunities for error and completely unnecessary because with the advent of CSS you can make a definition once and you can change that definition once. And that definition and that change will apply to all instances of that definition. So it’s a much simpler, much cleaner method of managing the styles or managing the appearance of a site.
Basic CSS Syntax
For CSS to work properly it has a specific syntax which is fairly easy to learn. The basic syntax of a CSS statement or a CSS declaration is that it has a selector and a declaration. In this case, the selector is h1 and the declaration is :red;. So a selector consists of an HTML element plus an id or a class. In this case, the id is .headline_area and the h1 is the h1 element. And so this declaration or this selector actually only applies then to h1 elements that are inside the headline area. If you have an h1 element inside another id or class, this declaration won’t affect it because this is specifying the area in which the h1 tag is controlled. So your h1 or your heading1 tag in your headline area will have the color of red based on this definition.
An id selector starts with a pound sign and refers to an HTML element that exists only once on a page. So for example in the Thesis theme, #header is an id and it only exists once on a page as the header. The same thing is true for content and footer. Those are ids, not classes. However a class selector is something that can exist multiple times on a page or define multiple elements on a page. And a class selector begins with a period plus the descriptor. And so that’s what you have here. You’ve got .headline_area, this is a class. If there was a pound sign in front of headline area, that would be an id and that would mean that headline area could only exist one time on the page. However, as you learn, in a post page for example, where there are several posts being displayed, there are several instances of the headline area as well. And so it can’t have an id, it has to be a class.
The next half of the equation then is the declaration and the declaration consists of 2 parts. The declaration consists of the property plus its value. So we have the selector which consists of its id or its class and its HTML element and we have its declaration which consists of its property and its value. In this case, the property is the color and this stands for font color. So color and : and then the property value is red. So this will show and h1 tag that’s in the headline area will be red in color. The whole declaration ends up like this – it’s the class and the HTML element then opening brackets, then a property and a colon and a value and a semi-colon and then in closing bracket. That’s the basic CSS syntax.
What is the “Cascade” in CSS?
There can be varying definitions for any given HTML element and so the way that those definitions are resolved is called the cascade. The cascade takes information from a whole bunch of different places. For example, the first level of the cascade is the browser default. So if there’s no CSS whatsoever available, no CSS definition period, then Internet Explorer, Firefox, Chrome, all the rest of the browsers have their own different default way of displaying something. In the absence of any CSS at all, an h1 tag is likely to be displayed differently in each one of these browsers because they all display those things differently.
The next level of the cascade is the external Style Sheets. And this is really where we are going to work all the time. External Style Sheets are in this case, for example, on Thesis our style CSS, layout CSS, and custom CSS. But there may be a variety of other Style Sheets associated with a given webpage and those are all external Style Sheets.
And then further down the cascade and therefor up in priority, are internal styles. And these internal styles in WordPress are generally added by plugins. They’re usually added in the head of an HTML page but there are still some very poorly written plugins which will even place internal styles inside of the body of a webpage. It’s considered to be poor practice for a plugin to use an internal style. Good WordPress practice will be for it to create its own external style sheet. But nevertheless, from time to time, you will see internal styles and those take priority over external styles.
And then finally, you have the inline styles and generally speaking, inline styles come from poorly written plugins and from styles that you apply inside of your text editor when you’re publishing a post or page. When you select an element and you assign the style align center for example, or you increase the font size or you give it a color, those are all inline styles. And inline styles have the highest priority and they will take precedence over everything else in this cascade.
This is sort of a rough overview of the cascade. There’s actually more of a cascade inside of external Style Sheets and we will talk about that more in the future. And it will be our practice to confine all of our customization to these external style sheets and more specifically, the custom CSS.
That wraps up Part 1 of Lesson 2 of the Customize Thesis Like a Pro tutorial series.