Styling Headings with CSS in WordPress Themes

In my last post, we looked at how to find a theme’s style.css sheet.   In this post, we’ll investigate how to manipulate the typographic elements with Additional CSS customization. We’ll focus on the header styles.  They’re a good basic element are easy to customize–if you know the ins and outs of WordPress theme coding.  This is part 2 in the series on Investigating Your Theme.

More on Investigating Your Theme

Good style sheets for WordPress themes should have a table of contents at the top of the style sheet that look something like this:Screen Shot 2018-04-01 at 10.13.10 AM.png

I’ve highlighted the “chapter” or section we’ll be looking at today, 5.0. If you have your theme style sheet, you can just page down to the appropriate section–and you can use “find text” in whatever editor you’re using to find the 5.0 section, just like an ordinary document.

Deciphering the CSS content

The first part of the 5.0 section shows that the default font-size is 16px in the first declaration (html { font-size: 16px}.  Next, a whole bunch of elements are put into a kind of “group style” — that is, ALL of those elements, body, button, input, optgroup, select, etc. (we’ll cover those some other time) and the text area (textarea) of the blog posts are all assigned the default fonts that the original designer chose.

Screen Shot 2018-04-01 at 10.18.17 AM.png

This is kind of hard to see, so I’ve cut it off here–to give you a better view:

That’s a little better.  Hmm.  I’ll try to find a more legible post later. Apologies.

The body.rtl  is put in there so that people CAN choose to write in this theme uses languages that go from right-to-left (Hebrew, Arabic, for example) rather than left to right (like Western languages) — is certain font-sets are selected.   This allows the theme to be used for non-Western languages.  As we look through the style sheet, we’ll see a great deal of .rtl stuff — it’s nice to know what we can safely ignore (or what we need to hone in on if you’re blogging in those kinds of languages.)

If you’re unfamiliar with CSS syntax, this W3 school page will get you up to speed very quickly in the terms, to help you read CSS declarations more easily. It also has a handy list of all the CSS codes with authoritative explanations on the left column.  W3 school is THE authoritative source on HTML and CSS — they’re part of the organization that determines the standards for hypertext, globally.

Professional Themes Have to Be Usable by Most Everyone

WordPress themes have a global audience, with lots of needs and requirements. That’s why there is a lot of CSS code that you or I may never use (like formatting text that is right-to-left, instead of left-to-right).   I’m not going to go over every line of code–just the ones we’re interested in at the moment.

Styling Header Tags (H1 – H6)

We’re going to start with some easy examples of manipulating the Additional CSS code–code we can add–to override the style.css code that exists in the style sheet.  First we have to understand what’s THERE already.  Here’s a portion of the default style sheet.

Screen Shot 2018-04-01 at 10.43.34 AM.png

H1 tags are used for our blog posts.  They’re set a size that is 2.125 “ems”  An em is the height of the text being used (usually 12 points).  “Em” is a printer’s measure, commonly used in HTML documents to describe text in terms of size.   The developer also set the line height and margins. Developers often use development packages like Bootstrap or other editors that can calculate these measurements of margins and line height to this very high degree of specificity.   We don’t necessarily need to be that  precise when we’re hand-coding, but being able to know what the current values are may help us as we define different styles.

Styling Groups of Elements and Classes All At Once

Note that the H2 and H3 tags are styled in the very same way: declaring a font-size, line-height and margin.  But H4 is different.  When we get to H4, we’re styling a BUNCH Of different things with the exact same style:

  • h4 — the fourth level header tag
  • big — a value that browsers and coders use for defining text as to what “big” text actually means, in terms of font-size.)
  • AND .widget-title–this is a declared class found elsewhere in the text that styles widgets –like my navigation widget which may appear at the top right on a post.

H5 is styled in a similar method as H1, H2, and h3. But then H6 shares the same styling as “small” text.

You’ll see these kinds of group stylings all through the code, to create a consistent look.

For example take this code, just a little bit down the page of the stylesheet. It defines the code not only for the unordered list (ul),  but also for unordered list in the COMMENT sections of the blog:

Screen Shot 2018-04-01 at 10.58.22 AM.png

Here you can see that the list style for an unordered list in the blog AND for an unordered list in someone’s comment both receive the list style: “disc”  (the little  dot).

In the next declaration, NESTED unordered lists are all receive the open circle as a style.  So do nested unordered list in the comment sections.

Nested unordered list up to the third level of nesting, in both the blog posts themselves and in the comments, all go back to the disc  setting.

Some style sheet elements are easily over-ridden by new CSS, others–not so much.

If an attribute is NOT set by the original style-sheet,  then additional CSS changes it with little problem.

Here I’ve changed the H1 properties of Impractical Advice to GREEN.   Color is not an attribute that is specified in the parent  (style.ccs)

Here’s the additional CSS:

Screen Shot 2018-04-01 at 11.18.05 AM.png

And here’s the result:

Screen Shot 2018-04-01 at 11.16.01 AM.png

All the headers using H1 –including the title, would change to green, if I “published”  the Additional CSS theme customization using that code.

When we try to “monkey” with the values already set,  then we begin to see that SOME things may work, but others DON’T.   In this example, I set the size of the H1 font to a much larger size.

Screen Shot 2018-04-01 at 11.23.29 AM.png

The code specifies a much larger value the the parent (which was 2.125em) but only the headers in the blog posts were affected. The TITLE of the blog was not.

Screen Shot 2018-04-01 at 11.23.22 AM.png
Here’s the code.

This is where the investigation begins.

I knew that I needed to find the words “title” (most likely). As I had the stylesheet downloaded, I could simply use the search function to find all instances of the word “title” — and within about ten minutes, I found this:

Screen Shot 2018-04-01 at 11.29.10 AM.png

“Site-title” is the class we need to target!

Now let’s see what happens when we add this class to our additional CSS code for H1.
Screen Shot 2018-04-01 at 11.34.16 AM.png

Hmm. This doesn’t quite work! This is what we get:

Screen Shot 2018-04-01 at 11.34.34 AM.png

The green color is gone! Oh, NO! — well, we’re missing something. What have we done?!

The very important COMMA

Our previous examples are NESTED examples. When we’re styling several things, we need to make sure we include a COMMA between elements. This is an easy fix–and a very common mistake!

Screen Shot 2018-04-01 at 11.39.05 AM
Here we add the comma

And here’s what we get:

Screen Shot 2018-04-01 at 11.34.56 AM

That’s all for today.  We’ll delve into some trickier examples soon.

Have a great day ~Lola

 

 

Author: Lola

Recovering academic, real-life, honest to cornflakes anthropologist (Ph.D. and fieldwork and everything), tech-head and social media researcher.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.