We’ve talked about styling text with inline styles and now it’s time to talk about styling text with CSS in WordPress and Genesis 2 as part of this Introduction to HTML for WordPress and Genesis 2 Users seminar.
What is CSS?
So really, any conversation like this begins with what is CSS? CSS is a language for defining what HTML elements should look like. And so in that case, it’s the style of the HTML element. CSS is an acronym for Cascading Style Sheets and style sheets are just CSS files or files with the extension .css and a style sheet consists of CSS rules.
Cascading Style Sheets
A typical WordPress web page has several style sheets added to it. Some of them are added by plugins, some of them added by fonts, at least one of them is added by the theme. Sometimes the theme adds one and a child theme adds one so you can end up with a number of style sheets that are applied to any given web page. And there has to be a system for determining which code applies in any given situation and that system is called the “Cascade”.
The “Cascade” refers to how styles are passed through style sheets to the browser and we’re going to spend a bunch of time today looking at that specifically. But the complexity that exists inside of CSS generally comes down to what CSS rule is really going to be applied to any given HTML element and the “Cascade” is the process for determining which rule has priority, which rule overrides another rule.
What Does CSS Do?
Style sheets control the look and feel of the web page. Style sheets allow you to control many HTML elements with a single style definition and this is really what matters here. If you’ve got a style that you are going to repeat over and over again, the old fashioned HTML way is to write that style over and over again for the element that’s going to use it.
The CSS way is to assign a class to that element and then style that class and you have one class definition. If you want to change the appearance of that class on the web page at some later date, all you have to do is change the style rule and it’s changed everywhere that it’s used.
Style sheets also allow you to refine the definition of individual elements. So you can style many elements but you can also narrow that style down to a single element as well making it very flexible in what it can control.
Why Use CSS?
So, why bother using CSS? The first reason for using CSS is that it separates the style from the content and that’s something that becomes evident when you look at the HTML. If you have inline styles in here then your content is broken up with lots of style rules. The old fashioned way of doing this had a lot of style rules so you might have line height and font size and color and all kinds of style rules applied to a specific element.
Increase Page Load Speed
The content section of the code was made up largely of stylistic rules and CSS solves that problem by taking all the stylistic rules and moving them off to the side into a separate file. Now also a separate file that can be cached so the typical browser caches your CSS file and doesn’t have to load it every time which means that it can speed up your page load also.
Minimizes Your Effort
The other reason why you would use CSS is that it minimizes the effort and that means it minimizes the effort to style and it minimizes the effort to change. You may be embarking on your WordPress website here and can’t imagine that it’s going to change/ But in point of fact, this stuff changes all the time and you may decide you want to have a brand new appearance or you want to change something.
The truth is you’re going to end up changing your website all the time, one way or the other. You’re going to be changing things regularly and it’s a much less effort to change if the rules are all contained in that one location and if you have one rule to many HTML elements that are affected by that rule.
If you have inline styles, stylistic rules embedded into each page, then you have to open up each page and change that information on each page. That makes it harder to write because you have to provide that information when you write it originally and it’s hard to change in the future.
Priority within the Cascade
The order of the “Cascade” goes probably like you would assume it would in that it goes from the more general to more specific.
The most general stylistic rule comes from the browser. If there’s no CSS whatsoever then every browser has a default way in which it displays HTML content and in the absence of any rule to the contrary, the browser default is the first rule and the most general rule that is applied to any HTML element.
External Style Sheets
The next most specific rules are external style sheets and in this case, we’re talking about style sheets like style.css and plugins CSS files. Those are external style sheets that are added either by the theme or by plugins and those are the CSS files that we’ve been talking about.
Those rules are in the next order of importance and then internal styles. Generally these internal styles are added by plugins but sometimes styles are added to that head of a web page and in that case, those internal styles take precedence over external style sheets.
Finally, you have the inline styles and those are the things that take final precedence which is another one of the reasons why inline styles need to be used sparingly and shouldn’t be used for the things other than I just displayed earlier. Any inline style that’s created takes precedence over all the rest of the styles.
General vs Specific Rules
So this is also why that whole conversation about parent and child relationships matters because the higher up the parent tree you go, the more general its characteristic or its rules are and the closer you get to the actual element, the more specific the rules are.
It’s this process of recognizing what general rules are being applied, what specific rules are being applied to any given HTML element that is really the heart of the problem solving process when you’re writing CSS.
This is the thing you’re going to figure out and fortunately Firefox gives you these great tools for doing it. It sounds more complicated than it really is. It’s actually going to be relatively simple as you’ll see but the philosophical underpinning of this is that the more general rules are superseded by more specific rules.
Anatomy of a CSS Rule
CSS rules essentially have two pieces to them, they have the selector and they have the declaration. So in this example, the h1 is the selector, that’s the h1, the heading tag and the declaration is color:red.
So a selector is an HTML element and/or an id or a class. So for example, the selector .headline_area h1. This is the class .headline_area and this is the element, h1 and that makes this entire thing the selector. The selector is the combination of ids and classes and the HTML element.
Now, it doesn’t have to have ids or classes and it also doesn’t have to have HTML elements. In fact, most CSS rules don’t actually specify an element, they just specify id or class but the selector is some combination of id or class and/or HTML element.
ID and Class
The id symbol starts with this hashtag (#) and an HTML element with an id can only appear once on a page. So this id can only show up one time on a page which is why ids aren’t used very much because anything that you have happening several times on a page can’t have an id, it has to have a class instead.
The class symbol is the period (.) or the dot and so this dot here in front of the .headline_area represents a class. If it had a hashtag in front of the dot, it would be the id .headline_area but it doesn’t so it’s the class .headline_area. That is the selector part of the rule, id or class plus HTML element.
You also have the declaration, that’s the second part. The declaration is a combination of property plus value. In this case, the property is color and the value is red. All declarations are a combination of property and value.
You can see a more typical CSS rule looks like this. You’ve got your element which in this case, doesn’t have any class or id so that’s the full selector. Your rule starts with the element and ends with the closing curly brace. The declaration starts with the opening curly brace and ends with the closing curly brace and has a series of declarations.
So the first declaration has this property and a value, the second declaration has this property and value, the third declaration has this property and value. The full declaration really is property, colon, values, semicolon. Missing either the semicolon or the colon usually makes it fail.
It’s theoretically possible not to have the semicolon on the last declaration but as a general rule, you’re better off just making sure you always have a closing semicolon at the end of your declaration.
So that’s the CSS rule, the CSS rules comprise of your selector and your declaration, the selector is comprised of some combination of elements and/or classes or ids and your declarations are made up of combinations of properties and values.
Where Should you Put CSS?
The traditional place that people tell you to put CSS if you are customizing something like this is style.css. They tell you to come over here to Appearance and Editor, open up style.css and scroll down here to the bottom and add your own CSS rule. That’s the typical way but I believe that’s a mistake. Genesis thinks it’s a mistake even though you see this all the time in their forums. They say, “DO NOT edit this file under any circumstances.”, but then you look at the suggestions in the forums and they say open up your style.css file and add this code.
Why You Shouldn’t Put Code in Style CSS
This is a bad idea both because you lose it every time you update the theme and also you could mess up the theme or the child theme CSS by editing this. You’re better off segregating your own CSS off some place else.
Using Genesis without a Child Theme
If you’re not using a child theme, you’re just using straight Genesis then you can create your own child theme and edit your own child theme and style.css file if that’s what you want to do but if you’re using a child theme, that’s not really an option.
Using Genesis with a Child Theme
It’s not an option because you can’t have a child theme of a child theme so you were stuck with following their advice about opening style.css and editing it until this handy little plugin that we created called BYOB Genesis Child Theme Editor. We showed how to install this our Tools of the Trade video.
BYOB Genesis Child Theme Editor – Why it’s Great
This plugin allows you to write CSS in this file editor and then manage your CSS separately from the CSS of your child theme. As I said when we installed this, you have a choice of 3 places to put it, you can put it in a custom file, that’s byob-custom.css. All of my BYOB Genesis plugins share the same custom CSS file so when you are writing CSS using those plugins or when you set settings in those plugins, it writes CSS and it writes that CSS to this file.
It can also write it to the end of the style.css and well, when you update it you automatically lose that. That is when you update your skin and normally you would lose that coding but you could easily put it back simply by saving your custom CSS. So it’s a yes, you lose it but it’s easy to recover from.
The final options is if you have just a very little bit of code, you can put it in the head of your document. You wouldn’t do this if you had a bunch of code but if you just had a couple lines of CSS, this is probably the fastest and most efficient way to serve that CSS on your site.
In any case, my strong recommendation is to use the BYOB Genesis Child Theme Editor and then use the custom CSS file editor that comes with it.
We’re going to start off by styling something and we’re going to style this main heading right here. Before we style this, let’s just inspect the element first. This says it’s an h1 so we could come along here and type in h1 and then color:red.
Using the Editor
The thing I like about this code editor is it automatically adds the braces and when you click on one brace it shows you where its corresponding brace is. This editor also provides you with a certain amount of color coding so that if you misspell the word, it gets written in bright red like this because this is no longer valid syntax and so the color changes when the syntax isn’t valid.
Review the Rule
Let’s save this here since we have an active rule now that we’ve added to Genesis. Notice that that h1 worked. H1 actually changed the style of this text; however, it also changed the style of this text and we’re going to end up changing any h1 anywhere on the site. But what we said we wanted to do was change the heading, not just change h1s.
Make the Rule More Specific
So we need our rule to be a little bit more specific. Let’s inspect this element here, we could do h1.entry-title and you can see that’s what this is saying the selector is, h1.entry-title. If we look down here, we can see that also, h1 class=”entry-title” so let’s come back over to our editor here and instead say, .entry-title. Save our custom CSS, come back over here and refresh this.
Now this h1 has changed but this h1 has not, right? What we’ve done here is we’ve limited the scope of our rule so that it applies only to the entry-title and not to anything else. Now, it might be useful for us to know, I mean we are just taking a stab in the dark right, we just inspected this element and we said, well what selector should we use to create this? So it would probably be useful for us to actually find out where the color actually comes from.
Finding the Correct Selector
Let’s scroll down here and look at the rules. You can see that byob-custom.css says that, this is the rule we just wrote. If we undo that it becomes black and then we scroll down here and try and find where the black color comes from. You can see the entry-title gives it the font size and if we scroll down here further, actually it gets its color right here.
It’s getting its color from those style rule h1, h2, h3, h4, h5, h6 and it has exactly the same color and this applies to every heading then. So we’ve decided that we don’t really want to make it apply to every heading, we really want to set aside the heading for the post title as being different than the rest.
In that case, we pretty much have our choice of what we want to use so here I think h1.entry-title was a good choice. This was sort of a simple example. We’ll explore how to choose the correct selector more in the next video, How the Font Got Its Color.