CSS Basics of the Genesis Framework

If you are doing any work online you should have a basic understanding on CSS and how it works. Regardless of whether you are simply writing content for someone else’s website, running your own website, or looking to get into customizing and developing websites with the Genesis theme framework, the ability to fine tune how things are displayed with some CSS basics will set you apart from the crowd and make your work more professional.

CSS, which is an acronym for Cascading Style Sheets, works together with HTML to determine how a web page is displayed. HTML (or the new HTML5) tells the browsers what content to display on the page. But it is the CSS associated with that page that determines how it is to be displayed.

Style Sheets vs. Inline Styles

CSS can be styled either by what is called inline styles or via cascading style sheets.

With inline styles, the CSS code is added right “inline” with the HTML. The actual full styling code is added as part of the HTML tag. In those cases you will see code that looks like this added to the HTML tag:

• style=”margin: 0; padding: 0;”

One very big down side of inline styles is that they are very hard to override and customize. And while there are some legitimate uses for inline styles to be certain, often inline styles are used out of laziness.

Not only are inline styles difficult to customize, but they tend to be hard to change later too. Because they are scattered throughout the website code, whenever you want to make a change to the way your website looks you have to dig through the entire website to find every instance of an inline style and apply your changes to each one.

Often novice coders will use inline styles because it can be easier then sorting out which CSS selector to use to target a specific element on the page or adding a separate style sheet.

Generally speaking it is a better idea to include a separate file with your CSS rules rather than coding up your styles inline. When you look at a Genesis child theme, or any WordPress theme for that matter, the CSS is contained in a file called style.css inside the theme folder.

When you look at the source code of a web page you will see an HTML tag in the head section of the page that links to the style sheet. This method of putting the styles in a separate file has the advantage that all the styles for the entire site are in one place.

That means you can change an element in the style sheet and it will affect every instance of that element across the entire website. This is a much more efficient way to set your styles than doing it inline.

Multiple Style Sheets

Where it can get a little tricky is that sometimes you may see several different style sheets linked from a web page. This is especially true, say for example, on WordPress sites that have lots of plugins installed. Often times plugins are adding HTML elements and the plugin authors include styling for those elements they add.

Because style sheets are “cascading” that means that style sheets which are linked to later in the HTML will override preceding style sheets when they use the same CSS selectors. Sometimes this leads to unexpected results.

This is why I always recommend inspecting a web page with a tool like FireBug or the inspector built into Chrome when looking to customize CSS rather than looking directly at the style sheet itself.

Yes you may have the “correct” style in your style sheet. But there may be a plugin or something else that is styling the element on the page in a way you don’t expect.

When you inspect the code output directly with a tool like FireBug it will tell you exactly what CSS is affecting the HTML element you want to change along with a link to the applicable style sheet so that you can choose a selector that will get the job done.

Doing it that way often eliminates tons of frustration.

CSS Classes, ID’s & HTML Tags

That brings us to the CSS selectors. When you look at the underlying code behind a web page, one of the things you should notice is that many of the HTML elements have classes or ID’s associated with them. For example, in the code this may look like either

• class=”css-class”
• id=”css-id”

These selectors tell the style sheet what elements in the website to apply your styles to. Inside the style sheet itself classes are designated with a period and ID’s with a hashtag like this:

• .css-class { [styles go here] }
• #css-id { [styles go here] }

Keep in mind that you can apply CSS styles directly to the base HTML tags too. For example you might want to have a bottom margin on every single paragraph tag throughout your site. So you could style the p HTML tag without a class or an ID with it. However when you do so you are telling the CSS to apply that style to every instance of that element no matter where it occurs in the website.

When you apply the style to a class or an ID you are saying, only apply this style to every instance of that class or ID.

So by applying classes and ID’s you can style the same HTML elements found in different sections of your website differently.

As we’ve already mentioned, because it is cascading, CSS displays the last rules it finds in the first and works backwards. So if you have the same selector listed twice in your style sheet, the one that comes last will be applied last and can override the previous one. Likewise, a style sheet that is linked to lower down in the code of the web page will overwrite the same element in a previous style sheet.

Also it is important to note that ID’s have precedence over classes. Valid code will only list an ID once in the HTML of a page. Classes can be listed multiple times.

Because ID’s are only supposed to be listed once they are considered more “specific” CSS selectors than classes, which is why they are given precedence. That’s why when you look through a style sheet you will see many more styles for classes than for ID’s. Most CSS uses classes rather than ID’s to give more flexibility in the HTML.

Choosing the Right CSS Selector

Probably the biggest challenge with CSS, especially when first getting started, is choosing the right CSS selector to get the job done. It can be just plain confusing for folks when they are first starting out.

CSS classes and ID’s can be strung together to make the selector as specific as needed. Sometimes you may want to target an element just in one part of your web page. Or maybe you only want to change an element on one specific page, leaving other instances of that element unaffected by your CSS rules.

This is exactly the kind of thing CSS is designed to do.

Let’s talk examples. I’m going to use our Lisa Marie theme demo for these examples. Specifically let’s look at the About page of that theme demo.

Say you want all the majority of the hyperlinks on your site to be blue. Specifically you want them to be a light blue with the hex code #50A4CE. So you can set the ‘a’ HTML element to that color like this:

a {
	color: #50A4CE;
}

But the thing is, you want some of your links to be a different color. For example there are those great calls to action in the right sidebar. We want those to be a golden color so they stand out better.

We can apply a more specific CSS selector to target those links. In the case of our example that code looks like this:

.cta li a {
	color: #fdd910;
}

Notice that we have a class, .cta (for our calls to action), followed by an li list tag followed by an a hyperlink tag. When strung togehter like that we’re specifying exactly which element on the page to make yellow. All other hyperlinks remain unaffected and stay light blue.

Say we want to style several different elements exactly the same way. We can do that by separating the selectors with commas. In the case of our yellow links the code actually looks like this:

.cta li a,
.call-to-action .widgettitle,
.home-cta .widgettitle,
.home-cta h2 a:hover,
.home-cta a:hover {
	color: #fdd910;
}

The commas separate the selectors and say “apply the following rules to all of these elements.”

Notice that we can have multiple classes in each selector. When the classes (or ID’s) are separated by a space that means the classes are viewed as a nested hierarchy with the ones on the right being inside the ones on the left.

So in our example, the only times the .widgettitle class will be affected by that CSS rule is when it is found inside an element that has either a .call-to-action or a .home-cta class. Every other instance of the .widgettitle class is unaffected by that rule.

That means the order we list our classes in our selectors is important. One common mistake is to put the classes out of order and then they aren’t actually targeting the element we intend. This is especially true in cases when we have to list several classes in a selector to target the specific element we want.

One last thing I want to mention about selectors is that some elements have multiple classes associated with them. For example WordPress can apply multiple classes to the body tag. With the Genesis theme framework we can tap into this and apply different body classes for our different color schemes.

For example if you click on the “Green” color scheme link in the sidebar of the Lisa Marie demo about page you will see the home page in that different color scheme.

Inspecting the body tag will show you several classes. One of them is lisamarie-green-blue to designate that color scheme.

There are several instances where we use the .home class from the body tag to style elements on the home page of the theme. But how do we designate just the home page of that color scheme? Both classes are on the same element, the body tag, so we can’t nest them like we’ve talked about.

Fortunately we can do that with CSS. By leaving the space out from between two classes you tell CSS that those classes apply to the same element instead of nested elements.

So for our color scheme home page we can do this:

.lisamarie-green-blue.home (with no space between them) to target the color scheme home page and leave the default home page unaffected.

So you can start to see how powerful CSS is because we can mix and match all of these concepts together in our CSS selectors to target exactly the elements we want when customizing our themes.

Is It Really !important

There are rare occasions when there is a need to override an existing style with one in your style sheet. CSS has a way to do this by adding !important to the end of a particular rule. Using our previous example it might look like this:

.cta li a {
	color: #fdd910 !important;
}

The !important declaration overrides CSS rules that have more specific selectors. It’s basically saying “I don’t care what other ways this element is ever styled, I want it done this way dagnabbit!”

Using !important in this example means the second CSS rules I listed above to change our links to yellow would be ignored and those Calls to Action links would still be blue.

It’s a very powerful tool in our CSS arsonal.

But like Spiderman’s uncle Ben said:

With great power comes great responsibility.

Just because we can do something doesn’t mean we should do it. Unfortunately it is a tool that gets abused very regularly, often by lazy coders.

The trouble is, using the !important declaration can have unintended results in your style sheets. Because CSS is “cascading” !important declarations can cascade through and affect significantly more elements than the person applying it to one rule intends.

Not only that, when you use the !important declaration you can make life difficult for everyone who comes behind you. I see this abuse from time to time by plugin authors. They’ll sometimes use the !important declaration in an effort to get their plugin’s stylesheets working with a wide variety of themes.

Unfortunately the only real way to override an !important declaration is by adding a more specific selector and applying a second !important declaration.

That can start a downward spiral of competing !important declarations, which can snowball and cause other problems needing even more !important declarations to fix.

One use case I can see (and there are others for sure) where using the !important declaration may be a reasonable alternative is this. Say you are hired to create a new theme for an existing website. And throughout the life of that website the website owner has been adding in-line styles to elements in his website’s copy.

But now the website owner wants all those elements on all those thousands of blog posts to look differently than he styled them.

You have two alternatives. You can spend hours upon hours going through each of the thousands of blog posts and removing all of the inline styles. Or you can spend a minute or two coding up a little CSS with some !important declarations to override those inline styles.

The !important declaration is also useful for overriding plugins that produce inline styles in their output.

But unfortunately most of the time I use !important in my work is to override someone else’s use of !important that I can’t get around another way.

So remember, most of the time it probably isn’t as !important as you think. 😉

CSS Resources

The biggest CSS tool I use on a regular basis is FireBug. Chrome has a fantastic code inspector built right into the browser too. Since I switch back and forth between FireFox and Chrome all day long in my work I use both about the same amount for inspecting code and working with CSS.

Not only will tools like FireBug allow you to see what CSS is affecting a specific element on a web page, but you can also test out what CSS changes will affect the element as well live in the browser. All you have to do is click on the CSS in FireBut (or the Chrome inspector) and edit it right there in your browser.

Doing this makes it much faster to find the right CSS to get what you want done. When you see what works, you can then go and apply those changes to your style sheet and upload it to your website.

One of the best resources for finding out what properties work with what CSS selectors is w3schools. As far as I can tell they have every CSS property allowed in CSS3 listed on their website along with what rules can be applied to that property.

If I do a Google search for a CSS property to see what rules can be applied, I’ll look for the w3schools links because I trust that site to give me the info I need very concisely.

Another fabulous resource to learn how to do things with CSS is CSS-Tricks. Their Snippets section has tons of very useful code examples. Basically that’s another site that I know I can trust for solid info when I see their URL in my Google search results.

Conclusion

I know this CSS basics post is crazy long. Even so we’ve just barely scratched the surface of what there is to know about CSS. Hopefully it’s enough info to get you started moving in the right direction.

When it comes to Genesis theme customizations, a good grasp of CSS, how it works, and what you can do with it will go a long way towards making your site look more professional than your competition. CSS may even be the single most powerful tool in your customization arsenal.

---

This is the sixth in our series of articles on Best Practices for Genesis Theme Customization.