Build Your Own Business Website header image

Introduction to HTML for WordPress & Thesis 2.1 Users – Part 10 – Styling Texts with CSS in Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

This is the way in which HTML and CSS for WordPress and Thesis should be taught together. First you get a handle on the HTML tags and then you get a handle on the CSS and that’s what we’re going to do next.

What is CSS?

So what is CSS? CSS is a language for the defining what HTML elements should look like and this is generally referred to as the style of the HTML element. CSS actually stands for Cascading Style Sheets, that’s what the acronym stands for. We’re going to talk about what cascading sheets are but a style sheet ,which is essentially a CSS file, consists of CCS rules. So the primary unit of a style sheet is a CSS rule.

Cascading Style Sheets

Cascading style sheets or the “cascade” refers to how styles are passed through style sheets to the browser. The style sheets control the look and feel of the web page and they allow you to control many HTML elements with a single style definition or with a single rule but they also allow you to refine the definition of individual HTML elements so they don’t just apply to many at once. They can also drill down all the way to apply to just one.

Why Use CSS?

The reason why you would use CSS as opposed to those inline styles that we looked at earlier is two-fold.

Separating Style from Content (Best for Search Engines)

One of them is it’s just much better programming practice to separate style from content and as a beginner you may not really care what good programming practice is but if you clutter your page with style rules then what you’re doing is making Google and other search engines sort through non-content related code to get to your content.

So you may have a whole bunch of content and lots of it being style-based or your content itself being broken up with style-based rules and it makes it more difficult for search engines to identify what the actual content of your site is.

Minimizes Your Effort

The second reason is that it minimizes the effort that you have to go to. For example, I do have a class that I use all the time called BYOB Emphasis. Anytime I want to apply that style to some text on a page all I have to do is add class=”byob-emphasis” to that and it takes that style.

We’re in the process of a redesign of the site right now, converting the site over to Thesis 2.. Ad in the process of redesign, we’re probably going to change that style. Well, I have hundreds and hundreds of pages that use that style and when we have to change that style rule I’ll just have to change once and it will change all of those hundreds of times I’ve used it. Had I use inline styles, I would have to go to hundreds of posts and pages and change it in all those places so this is the main reason why you use CSS.

One of them is to get the style rules out of the content so that all the search engines have to really look at is the content and the second one is to just minimize the effort. You write the code once and you use it hundreds of times.

Style Rules go from Most General to Most Specific

Now, the reason why they refer to this as “The Cascade” is because these style rules go from the most general to the most specific.

Browser Default Styles

What that means is if you don’t have any style sheets at all, your browsers nevertheless have their own default styles and in the absence of any style sheet, the browser default and all of the browser defaults come first.

External Style Sheets

Next, you have external style sheets and the browser defaults can be overridden by external style sheets. With Thesis that’s your css.css file plus any other style sheets or CSS files that may be added by other plugins. And as you may know lots of plugins add their own CSS files to your site. By the time your site is loaded it may have loaded 5 or 10 CSS files that your browsers have to manage in order to figure out how something should be displayed.

Internal Styles

Next, in order of priority or more specific are internal styles and again, internal styles are often added by plugins. You can actually physically add your own internal styles but again it’s not good practice because every place you add an internal style you’re going to have to change it when you want to change your styling.

But nevertheless, internal styles can be added and those are usually added to the head of a document. So a plugin that adds styles to your site usually will. That is if it doesn’t add its own style sheet it generally adds them to the head of the document.

Inline Styles

Finally, you have these inline styles which is what we’ve just been talking about and inline styles are added in the text editor. It’s the only place inline styles can be added. The browser styles are the most general and the most often superseded, the inline style is the most specific and therefore the less likely to be superseded or overridden and the order of precedence is shown here from most general to most specific.

Parent-Child Relationships in CSS

This is the way in which this parent-child relationship thing kicks in because in the same way that this whole cascade is built on the parent-child relationship of HTML elements. So a style that is applied to a parent is passed on to its children and if it’s got two children and child A has another style, child A’s style is also applied to its children although its style doesn’t get applied to child B. So this is the way in which we talk about CSS as inheritance and specificity.

We’ll talk about that more at length in another seminar because it’s definitely important to get wrap your mind around the concepts of inheritance and specificity and we’ll see that a little bit here in this next hour. We have two videos from Lesson 6, Inheritance and Specificity in Thesis that you can watch from our Customize Thesis 1.8 like a Pro series. The concepts are the same and still apply so if you want to wrap your mind around the concepts watch the CSS Inheritance and Thesis and CSS Specificity and Thesis videos.

Anyway, child elements inherit their styles from their parents and the most specific rule is the rule that takes precedence over the most general rule.

Anatomy of a CSS Rule

A CSS rule has essentially two parts. It has a selector and it has a declaration. The selector can be made up of an HTML element as in our example here the h1. It can be made up of an HTML element plus an id or a class or it can be made up of one or the other. You don’t actually have to have the element defined. The rule doesn’t have to have an HTML element. The rule can just be an id or a class instead of an HTML element or it can be a combination of the two or it can be a combination of multiple ids and classes with an HTML element.

Selector, ID and Class

The id symbol is a hashtag (#) so if a specific HTML element has an id attribute then the symbol that you use for that is the hashtag (#). If it has a class attribute then the symbol that you use is the dot (.). For example, .headline_area versus #headline_area. You would use a hashtag (#) if headline_area was the id of the element and you use the dot (.) if headline_area was a class of the element. So that’s the selector, it’s some combination of elements and/or ids or classes.

Declaration

The declaration is a property plus a value. So in this case, the property is color and the value is red and there are lots and lots of different properties and values. Really, the rest of learning how to use CSS is going to be made up learning the properties and their appropriate values and learning how to identify the right selector.

Review our CSS Rule Example

A more complex CSS rule starts off with the selector which is some combination of element and class or id. Then it has an opening curly brace and then it has a series of properties and values. Where the property and the value are separated by a colon and each individual property value pair is ended with a semicolon.

So in this example you’ve got the h2 and then color: #333; font-size: 150%; margin: 5px 0 10px 15px. What I’ve highlighted in red here is the selector and this whole thing is the declaration. Declarations can be quite large where you can have lots and lots of lines of your declarations. It’s not just a single thing. There’s no limit actually to the number of declarations that exist inside of a rule.

Priority within a Rule

To the extent that the rule has conflicting declarations, the further down the list the higher the priority is. So if you’ve got color: #333 here and then color red, the color is going to be red. Now, you wouldn’t do that on purpose but nevertheless, that is the way it works and this entire thing from selector to closing curly brace is called the rule.

Where to put your Custom CSS

In Thesis, you place your CSS in custom CSS. Here in Thesis 2.1 you have custom CSS either from here or from here. In Genesis, I have a plugin that I will be presenting in the class on Thursday that will provide a similar kind of CSS Editor for Genesis because Genesis does not have a native CSS Editor.

For a user of a theme other than Thesis and Genesis, the default place that you would add your own custom CSS is here under Appearance. You go down to the Editor and in that case, what it brings up is style.css file and the style.css file is the main theme file. Now, it’s not the main theme file in Thesis so you don’t have to worry about it. Any edits that you made to this wouldn’t show up on your site because this is not the way to do it in Thesis.

However, if you’re working in TwentyThirteen for example, then if you come over here to Appearance and Editor. It’s going to bring up your style.css file and that is where you would enter your style rules. But it’s also very poor practice and the reason it’s poor practice is because you’ll lose that customization every time you upgrade the theme. Whereas the system I’m going to teach for Genesis and in the Thesis system, you’ll never lose that customization. It always is there.

A Custom CSS Heading Example

Anyway, this is where we’re going to put our custom CSS and what we’re going to do here quickly is style this main heading, the main page heading here. In order to style this main page heading you need to be able to identify its selector, right?

How to Identify the Correct Selector

The rule is selector plus declaration so we need some kind of a selector here. Then our opening curly brace and then say color: red. This is almost a real CSS rule except we don’t have a selector so we have to figure out what our selector is for this. So we’re going to come over here and inspect the element using Firefox.

First, I want to make the point that you place your cursor where in the thing you want to know about is, right? I want to know about this line right here so I’ll put my cursor there and then click and inspect the element and it’s going to inspect the element where my cursor was.

So here, you can see it’s showing me, it’s h1.headline and it’s put a little box around it and if I look down in the inspector side, I can see this h1 class=”headline” has been highlighted. If I click this little arrow, I can see the content of that tag, h1 “headline” like that. So I can come over here and say, my selector is h1 and that’s the HTML element. So I’ll add h1 and save my custom CSS. Then let’s come over and refresh this and it hasn’t changed. So why hasn’t it changed?

Well, let’s inspect that again so you can see. And it’s because it’s not just a generic h1 and in fact, if we look over here on the right you can see that the rule that is specifying its color is .post_box .headline. So calling it h1 isn’t specific enough for that situation.

Let’s see if we have some generic h1 tag around on the page some place. In fact we do, Test HTML. I’ll scroll down here and this is a generic h1 tag. You can see our rule changed this h1. If we inspect that element you see it’s an h1 and it’s getting its color red from my rule but this one is not and this one isn’t because it’s actually getting its color from something else.

Now, we can come along here and say h1.headline and see if that works. But that didn’t really work and it didn’t because there is a rule out there that’s more specific. Even though we’ve got h1.headline, this h1.headline is also inside of a div element called “headline_area”. So let’s try adding that one to this as well.

Now we’ll say .headline_area h1.headline, save the custom CSS, reload it and let’s see what happened there and now it is red. You’ll note down here this is no longer red, right? This is no longer red because this h1 tag is not inside of the container with the class of headline_area and does not have the class of headline assigned to it.

Let’s review our rule. Our rule says .headline_area h1.headline so it’s an h1 tag that has a class of headline that’s contained inside of some sort of a container with a class of headline_area. That is what’s going to be red, everything else is going to stay the same.

I want to suggest though to you that this is not really the right way to do this. There’s all kinds of rules that we could write to make this work because all we really have to do is try to be specific. So we could choose a different one, we could come along here and say “content”, “headline_area”, “headline” and use that as the selector for the rule.

Finding the Most Efficient Selector

But what you really want to do is you want to use the most efficient selector and the most efficient selector generally is the one that was used by the theme in the first place. In this case, the .post_box .headline is the rule that’s being used to choose its color. So what we’re probably better off doing, rather than doing what we just did, is using the selector that the skin already uses.

So instead I use .post_box .headline color:red. And now we aren’t even specifying the fact that it’s an h1 anymore. What we’re saying is for all text in a container called “headline” that is also in the container called “post_box” make all of that color red. That’s what we’re saying with this rule which means that when this is an h2 tag, it’s also going to be red.

Let’s come over here to our News. If these weren’t links, it would count but in any case, what we have here is whatever this is, whether it’s h1, h2, p doesn’t really matter as long as it’s inside of headline_area and inside headline, it’s going to be red.

And actually I’m going to show you that. Come over here to our template editor and we’ll open up Headline Area and we’ll open up Headline and instead of an h1, let’s make it an h4. Refresh this, now it’s an h4 but it still has the class of headline and it’s still inside the headline area. So regardless of whether it’s an h1 or an h4, it has that class and it’s inside the headline area and therefore it takes that rule.

Obviously, the crux of everything when you’re styling CSS is learning how to identify what the correct selector is for the element or area you are styling.

0 Comments… add one
0 comments… add one

Leave a Comment