Build Your Own Business Website header image

Introduction to HTML for WordPress & Genesis 2 Users – Part 11 – How the Font Got its Color

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.

We’ve begun the conversation about how to find the correct selector for your CSS rule and now we’re going to delve into that further while talking about how the font got its color. So this is a continuation of the video Styling Text with CSS in Genesis 2.

Where the most General Rule for Color is Applied

We’re going to start that off by looking just at the standard font. Let’s inspect this element here and look at our standard font, it’s just a p tag but if we look over here at the right hand side, you can see it gets its color from the body.

The body tag has this color of rgb (102, 102, 102) which is that dark grey and it’s #666 here. This is a very, very general rule. It is the rule for the body, color #666, meaning that all fonts everywhere on the site start off with the color of #666. Anytime this color is changed, anytime that color is different, it’s because this very general rule has been superseded.

How to Change Font Color in a Specific Area

Let’s take a look over here at this section of text and inspect that element. Now, you can see that it’s getting its color from the class .sidebar. So if we wanted to change this text color that is the text color in the content but we don’t want to change it in the footer or anywhere else, what we could do is identify where this content text is contained.

In that case, we’re saying okay we’ve got p and it’s inside of “entry-content”. We could just choose “entry-content” and let’s try that, let’s see if “entry-content” changes that for us. We’ll say .entry-content color:blue. Note that we have changed all the typical content here to this blue color.

It has not changed the blockquote and it has not changed the font color in the sidebar and it has not changed the font color down here in the footer widgets, all we did was changed the font color here.

Style Different Parts of the Text

Now, had we added the HTML element p to our rule, it would not have applied to our list.

Paragraph Text

So if we say .entry-content p, it will style all the paragraph text that color but will not style the lists that color which is one of the main reasons why we often do not include the element in the selector when we’re doing something like setting a color for a section.

Unordered Lists

We could add a second element to this rule by putting a comma here and a space and pasting that. Then we’ll say ul, so now the unordered list will also have the color blue and that’s fine. It gives us the unordered list but it doesn’t change the ordered list. You can see why there’s benefit in saying a specific section or class without actually specifying an HTML element. It can be the most efficient way to specify things like color here.

Headings

This can also be the case for things like entry-title because in fact, if we come over here and look at our blog page, each one of these is an entry-title. It’s an h2, it’s not an h1. So what we really want to do here is get rid of the h1 tag and just make all of the content in the entry-title section red.

Let’s come back over to our Headings & Lists and you can see that actually worked just fine, right? This became red. It’s not applied to the heading at all any longer, it’s just applied to the area that the heading exists in. Now we have .entry-title color:red without the reference h1.

Links

That’s not actually going to work over here under Articles because this is a link and this link gets its color actually from its link itself. You can see .entry-title a gets this rgb (51, 51, 51). So it’s definitely getting its color not just from .entry-title and not just from h1 but the h1 color is being superseded by this .entry-title a.

This is where we would add a second select to this rule. We copy that a, pardon me it’s this one here we want to change, a, and now the a tag is taking that red.

Refining the Specificity of the Selector Example

Now interestingly, this featured page widget also has an .entry-title and so this is also becoming red. It could be that we really only want the entry titles in the content area and not in the sidebars. You can see that that heading is inside of this class “widget-wrap” so what we want to look for then is for example main.

We could decide that “main” is an element that we use to limit the style of the h1 tag. So you’ve got a side which is the sidebar and you’ve got main which is the main content and we could use the HTML5 element called main or we could use the class. I would probably use the class of content just to see whether or not that would work first.

So we could have .entry-title color:red and then .content .entry-title a color:red and we’ve now made this rule somewhat more specific. It no longer applies to the sidebar which is inside of the container called sidebar and it only applies to the heading when it’s inside of a container with a class of “content”.

This is a way in which the characteristics of the parent are passed down to the children without passing on to siblings because in this case, a side class=”sidebar” is a sibling of main class=”content”. We’ve limited the color of the font to the container with a class of content and thus the rule does not apply over here to the sidebar any longer.

Changing Links in Different Areas Example

There’s one other thing I want to look at here and that is this blockquote. Let’s put a link to the structural HTML in that blockquote. Hit update and refresh this, there we go. Notice that this link color here looks very much like this link color, right? Even though this link is in regular content and this link is in the blockquote.

Let’s see where that color comes from. Inspect that, it’s saying a and what this thing says is, .entry-content a has this border and this color. Now, if we wanted to change this link color everywhere in the .entry-content then we could use this selector. Let’s do that just for a second.

Note the syntax error here. You can see why I really like this tool here. It’ll show you how this control+space works for code completion but at the moment, if we had a syntax error it would be the wrong color which is much better than using a standard text editor.

Let’s refresh that, now that’s pink and that’s pink. So if you don’t want to affect all of the links but you only want to affect the link in the blockquote, then we would add the blockquote element to this rule. Now what we would say is .entry-content blockquote a.

This is an instance where we strung together two different classes and an HTML element. Here we are using one class and stringing together two HTML elements because what we’re saying is, every a inside of the blockquote inside of .entry-content should have its color of pink.

Let’s also say border-color: and I’m going to hit ctrl+spacebar. Notice how I have a choice of things here to choose from now. If I double click on that, so this is border-bottom-color and then pink again. Save custom CSS, refresh this now and now our border-bottom-color is pink and this didn’t change at all. This still has this reddish color with the grey underline.

What we’ve done is we’ve worked on making rules specific, going from general rules to more specific rules to affect the color of text. This process of deciding which HTML element to use or more specifically which selector to use, is really 75% of the game.

Once you can figure out which selector you want to style, picking up the style rules is really simple. First there’s a limited number of style rules and they all behave very similarly. So as I said the tricky bit is figuring out which selector to use.

0 Comments… add one
0 comments… add one

Leave a Comment