I entitle this little parable “How the Font got its color” because the skill that you want to develop as quickly as you possibly can is how to determine which CSS selector you should use in order to affect the change that you want to affect. As you just saw in my introduction to Styling Text with CSS video, finding the correct selector can be difficult for beginners.
Main Text CSS Example
So let’s take another look at an example. Instead of this headline, let’s look at our main text here in this post that starts with “The Barking Chihuahua Cafe”. If we look at this and inspect the element, it’s selected this paragraph and it’s got a p tag, selected that paragraph, it’s this paragraph down here.
Now, the way to know what is styling this text is to come over here and look at the rule section which means you have to be in the inspector. And you have to have the element you’re looking for selected down here or up here. When you do that, all of the rules that apply to it show up over here on the right.
You can see that there’s this .grt p applies which gives it a bottom margin and a .grt which gives it a font size and a line height and then the body gives it a color. So that’s where the color of this text is coming from, it’s coming from the definition for the body.
Change the Main Font Color Everywhere
If we want to change this font color everywhere and since the body is the main tag we could go ahead and change the body color definition and it would change it everywhere. Or we could choose a more specific font and change its color. In this case though, if we want to change it everywhere we could just change that color for body.
RGB and Hex Color Values
Now something that’s interesting here is, Firefox converts all colors to RGB so it’s not using the color that hand wrote out red and it’s not using the hex color that Thesis uses, it’s converting everything to RGB value instead.
If you want to see the real color, this right here shows you the line in the file that’s controlling it. So if you click on that, it opens up the style editor showing you the rule. Here the color is 111111, that’s the actual color in the file and this is the actual line, line 61 in the css.css file where the rule exists.
So we could come back over here and we’ll just take the body selector, come over to custom CSS and instead of post_box we could do body color:green. That’s going to change everywhere where that body color was responsible for setting the color of the font.
So if we come back over here and refresh it, now all of our text is green because that body font color was responsible for the color of all of this text.
Change Font Color in a Specific Area
So let’s say that even though it is coming from there, we don’t want to change the font color everywhere. We just want to change the font color here in the content but we want it to be black everywhere else or we want it to be the default color.
So let’s inspect this again. Choose the p, now you can see that our own CSS rule here is making it green. What we can do here is say, make post_content green rather than the body green. So we could come over here and say .post_content, save the custom CSS and refresh it.
Let’s inspect the element. Now the class post_content is affecting this style. Body is being overridden so it says color: rgb (17) that color is being overridden by our new color. But our new color is only being applied inside of post_content. So it’s not being applied over here in the sidebar anymore, it’s not being applied down the footer, it’s only being applied in this one section because we used the class post_content rather than using the element body.
If we go back to body, note that this doesn’t have a period and that’s because body is not a class. Body is the element and post_content is a class. Either one or a combination of them can be the right selector but in this case, we’re choosing one or the other, either the body selector or the post_content selector.
Example: Changing Link Colors
So where do links get their colors? Right here is a link, that’s got quite a bit of color going on so where does it get its color? If we inspect the element here it’s showing us this a tag. If we come over here, the a tag is highlighted and if we come over and look on the left, you can see it’s getting its color from very simple declaration. It’s getting its color from “a”.
So we could say a color:green and that’s going to change this link color and that link color. Note how it does not change this link color or the link color is up here in the menu. That’s because these links are, in fact, being governed by “a” but there are other links that are not.
Actually, I’m going to make a new link tag here. So let’s just select that, “prospective clients”, we’re going to add a link, we’re going to say http://#bottom, add the link, update it, view the page and now it’s the green. Obviously I did that wrong, I’m missing the id=bottom, I just did something stupid with my link. Oh it’s the href, that’s right, no href just #bottom in this case. So that works.
However, let’s say that this is the one that I want to be green and not these. So then what you’re going to do is you’re going to give this link a class. So if we go find our a tag here, a class=”fishsticks” and update that then come over here and say a.fishsticks and now I’ve made my rule very specific. I’ve said make the link with the class of “fishsticks” green which at that point does not affect any of the other links, all of the other links are still controlled by the default style that Thesis has created and it’s that a tag, right?
Example: Changing the Color of Blockquotes
Now, the same kind of thing can happen with things like blockquotes. You could choose to change the color of blockquotes so if you ask yourself where does this color come from? You just inspect that element and you can see the color comes from .post_box blockquote.
So what we would do is grab that. You can see the body color has been overridden by that, right? And this is the one that covers it, .post_box blockquote. Let’s copy that, come back over here to this and now we can say .post_box blockquote and color:green. Refresh it and now it changed that.
So that’s how you determine where things like this come from. You inspect the element, make sure it’s selected. And you just look over here and see where the color is coming from. In this case, the color green was covering it and so the old grey that was part of css.css is overridden.