CSS Basics

Editing the style of your website through CSS is probably the most common type of customization people dive into first. These will be customizations you’ll most often be saving with your child theme’s style.css file, in order to style the HTML that your website is outputting.

It’s probably one of the most basic languages to understand in the web development world, and is generally not considered a “programming” language by those, snoody know-it-all developer types. Simple put, CSS is the gateway drug to becoming a WordPress developer. Don’t fight it. Just go with it.

This is a fairly long article, that will cover all the silly things about CSS, you’re too embarrassed to ask about. But that means there’s probably some stuff here, you already do know. So, feel free to skip through the different sections.

  1. Inclusion — Know how CSS is included in your website.
  2. Syntax — Know the pieces involved, and terminology.
  3. Understanding HTML — Know what you’re styling.
  4. Selectors — Know how to target the HTML you’re styling.
  5. Units — Know the units of your values.
  6. Cascading Order — Know what overrides what.
  7. Properties and Values — Know your properties and their values.
  8. Conclusion — Know what’s next.

Inclusion

Know how CSS is included in your website.

CSS can be included several ways within a website, but generally when working with your WordPress-based website, most of your CSS will included through external stylesheets. If you’ve ever worked with creating a static HTML website, you may have manually done this before, something like the following.

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Well in WordPress, we include external stylesheets by enqueuing them, and WordPress takes care of actually printing them where they need to go. But we don’t really need to get into that, though.

In working with our themes, your child theme’s style.css is already included in your website by the framework, in a way so that it’s printed after all CSS of the theme — which is important for allowing you to override styles of the theme easily.

So, you can simply activate your child theme, and start putting your CSS customization in its style.css. You don’t need to worry about doing anything from your child theme’s functions file, to include a stylesheet.

Syntax

Know the pieces involved, and terminology.

In working with CSS, it’s important to understand the basic syntax and terminology used to describe things. This will help you in learning, so that when you read articles, you know what’s being described. It’ll also help you to have logical conversations with others about CSS.

But don’t worry, this is easy. Let’s get you squared away. There are three main terms you want to understand to build the basic syntax of a block of CSS — (1) comment, (2) selector, (3) property and (4) value.

First, comments can be placed anywhere and are there for our own organization and sanity; they don’t actually run on your website. Next, the selector is how we target the specific HTML element we’re styling. And within our styling block, we’ll use property/value pairs. The property is the styling attribute we’re changing and the value is what we’re changing it to.

Consider the following basic block of CSS, which adjust the color and font size of an HTML element with class “something-cool” —

/* Example */
.something-cool {
    color: #1c7cdc;
    font-size: 16px;
}

Now, here’s what we’re looking at. — The comment is just there to keep us organized; CSS comments start with /* and end with */. Then, the selector starts the CSS block. Next, we enclose our property/value pairs within brackets {}. And we separate each property/value pair with a semi-colon ;.

Understanding HTML

Know what you’re styling.

Knowing the syntax for a basic CSS block is a good, but before you can start writing CSS, you need to have a basic understanding of HTML, in general. After all, the HTML markup is what we’re actually styling.

Consider the following block of HTML, that being printed on our website:

<div id="cool-element" class="foo bar">
    <h1>Hello World</h1>
    <p>I'm just wanted to say hi.</p>
    <p class="highlight">And now I need to say goodbye.</p>
</div>

In the above HTML block, there are various HTML elements:

  1. <div> tag (container) with ID cool-element and classes foo and bar.
  2. <h1> tag (header) with no class or ID.
  3. <p> tag (paragraph) with no class or ID.
  4. <p> tag (paragraph) with a class highlight.

For writing CSS, it’s important to understand both the hierarchy of the elements, and when an class or ID is used on an HTML element. By hierarchy, I mean that <h1> and <p> are both contained within the <div>. And also, it’s important to spot when an HTML element has a class, ID, or neither.

What’s the difference between a class and an ID? — Classes are used to style multiple elements; that means the same class can be used across multiple HTML elements within the page. Alternately, an ID will only be (should only be) used on single HTML element on the page.

Selectors

Know how to target the HTML you’re styling.

Now, keeping with our HTML block, we’ll be using the tag names (i.e. div, h1, p, etc) along with the classes and ID’s, to build selectors to target the different elements.

<div id="cool-element" class="foo bar">
    <h1>Hello World</h1>
    <p>I'm just wanted to say hi.</p>
    <p class="highlight">And now I need to say goodbye.</p>
</div>

Remember to keep looking back to the above HTML block, as you browse through the examples below in building selectors in different ways.

Target Elements by ID

When targeting an HTML element by its ID, you need to prefix the ID with a pound sign #.

#cool-element {
    /* properties and values */
}
Target Elements by Class

When targeting an element by its class, you need to prefix the class with a period .. 

.foo {
    /* properties and values */
}

Because our HTML element has two classes, foo and bar, we could use either.

.bar {
    /* properties and values */
}

And what if we wanted to style only elements that have both classes? We can combine them, with each class, still prefixed with a period.

.foo.bar {
    /* properties and values */
}
Important! Note that there is NO space above between the two classes because they are on the same element — .foo.bar.

And we can also target our <p class="highlight"> in the same way, using its highlight class.

.highlight {
    /* properties and values */
}
Targeting Elements Within Elements

What if we don’t want to target all instances of the highlight class, but only when it’s within our element with ID cool-element? We separate the two elements by a space in our selector, moving inward.

#cool-element .highlight {
    /* properties and values */
}

Or, we could target elements with the highlight class, within any elements with class foo.

.foo .highlight {
    /* properties and values */
}

Or class bar.

.bar .highlight {
    /* properties and values */
}

Or both classes foo and bar.

.foo.bar .highlight {
    /* properties and values */
}
Important! Again, notice that there is NO space above between .foo and .bar because they are classes on the same element. However, there IS a space separating it from .highlight, which is a separate element — .foo.bar .highlight
Target Elements by Type

Always try to use classes or ID’s, if available. However, you can also target certain types of elements in a general way.

For example, we could target all paragraph generically tags like this.

p {
    /* properties and values */
}

Or, we could target all paragraph tags within our container like this.

#cool-element p {
    /* properties and values */
}
Grouping Selectors

We can also group selectors, that share the same styling, into the same CSS block to avoid redundancy. To do this, simply separate your selectors with commas.

For example consider the following.

.foo {
    color: #1c7cdc;
    font-size: 16px;
}
.bar  {
    color: #1c7cdc;
    font-size: 16px;
}
.highlight {
    color: #1c7cdc;
    font-size: 16px;
}

Now, instead we can do this:

.foo,
.bar,
.highlight {
    color: #1c7cdc;
    font-size: 16px;
}

Units

Know the units of your values.

I won’t bore you with a long list of all CSS properties and accepted units, but it’s important to understand that some CSS properties — like width, height, padding, margin, font-size, and many others — allow you to specify numerical values. And in order to specify these values, you’ll need to understand the most common units of measurement.

Percentage (%)

Usually, you’ll use a percentage value when working with the width property, if you’re wanting to add responsiveness to it. For example, here’s how’d we make our #somthing-cool element fifty percent the width of its container.

#something-cool {
    width: 50%;
}
Pixels (px)

Many, many CSS properties allow you to specify an exact value in pixels px, and it’s probably one of the most traditional ways to set a value.

Using pixels is usually the least messy to work with, because you can specify an exact value without having to worry about any other outside factors (as you’ll see later with ems, rems, vh, and vw). 

#something-cool {
    font-size: 20px;
}

However, the tradeoff is that in many cases, this removes an automated responsive element from your styling. For example, the above CSS block specifies that the font is always 20px, no matter how other elements around it change, with the browser’s current viewport size or zoom.

Em’s

Em is a unit of measurement, that allows you to style relative to the parent element(s). They are most commonly used with designating a font size, but in recent years have also trended towards other fancy, responsive layout uses.

Remember our original HTML block?

<div id="cool-element" class="foo bar">
    <h1>Hello World</h1>
    <p>I'm just wanted to say hi.</p>
    <p class="highlight">And now I need to say goodbye.</p>
</div>

Now, consider the following CSS block.

#cool-element {
    font-size: 20px;
}
#cool-element h1 {
    font-size: 1.5em;
}
#cool-element p {
    font-size: 1em;
}

For our parent container, we’ve set the font size as 20px. And within we’ve set the other elements relative to that, using em. The result is that the h1 will be 35px — 1.5 x 20px — and the p will be 20px — 1 x 20px.

A benefit of styling in this way, using ems, is that it adds some responsiveness to your website. For example, using media queries (covered in another article), we could write a new rule when the website is displayed at a certain viewport to change the container’s font size to some other pixel value. And now, the other elements within will automatically adjust, and recalculate, relative to that new parent value.

Rem’s

Ems are all well and good, when used in my little, isolated example. However, you may find in the real context of your complicated WordPress website, that using ems isn’t always easy. So, say hello to rem.

Rem is another relative unit of measurement, often used in responsive design. Many people confuse it with em, but there is one factor, that makes it very different. Em is relative to its parent container, while rem is always relative only to the main html element of the page.

So, in your CSS, or your parent theme’s CSS, you may have the following.

html {
    font-size: 16px;
}

Now, anything you style throughout your site, using rem will be relative to that.

#cool-element p {
    font-size: 1.25rem;
}

Now, the paragraphs of our #cool-element will display font at 20px — 1.25 x 16px.

Viewport Width (vh) and Viewport Height (vh)

This is a fancy, newer unit of measurement that isn’t supported in older browsers, but has quickly become widely supported. The viewport width vw and viewport height vh units allow you to style, relative to the current viewport size — i.e. browser window size.

A really common use for this unit is to style element height. For example, if you wanted an element to match the height of the current browser window, you could do the following.

#something-cool {
   height: 100vh;
}

Note how this unit is used similarly to a percentage. — 100vh is 100% of the viewport height, 50vh is 50%, 25vh is 25%, etc.

Cascading Order

Know what overrides what.

Let’s face it. If you’re creating a child theme for any commercial WordPress theme, the CSS has already started to get complicated. And as the CSS gets complicated, it’s really important to understand what styling rule takes precedence over another.

Did you know CSS actually stands for Cascading Style Sheet? So understanding how one rule cascades into the next, and so on, is going to help you tremendously. This topic can actually get quite complex, but to simplify things, I’ll break it down into two primary factors, (1) order and (2) specificity.

Order

When dealing with identical CSS rules, the order is what determines which gets applied. Consider the following, where the same selector is written three times, designating three different font colors.

.foo {
    color: red;
}
.foo {
    color: green;
}
.foo {
    color: blue;
}

Now, which color will be the text of this .foo element be? It’ll be blue, because the latter takes precedence. This is why we make sure to include your child theme’s style.css after the rest of the parent theme’s CSS for you. This allows you to simply copy CSS selectors directly from the theme, and use them in your stylesheet to take precedence.

Specificity

Of course, things soon become messy and much more complex. As you’re trying to override styles of the theme, you’ll see that CSS rules are generally not as simply written as the examples in this article.

This brings us to specificity. Basically, when targeting an HTML element, the most specific CSS selector will take precedence, no matter the order.

For example, take note of our HTML snippet, again.

<div id="cool-element" class="foo bar">
    <h1>Hello World</h1>
    <p>I'm just wanted to say hi.</p>
    <p class="highlight">And now I need to say goodbye.</p>
</div>

You could target the .highlight element in the following way.

.highlight {
    color: red;
}

However, the following is more specific, and will always take precedence over the previous example.

.foo .highlight {
    color: blue;
}

Also note that when two rules seem equally specific, a selector targeting the ID will be more specific than one targeting a class. So the following will take precedence, over our last example.

#cool-element .highlight {
    color: blue;
}

Properties and Values

Know your properties and their values.

After understanding how to build proper selectors to target the HTML elements you want, and how to override other styles, it mainly comes down to just knowing the CSS properties available to you, when styling from your child theme. That will come with time.

Luckily, working through this is easier than ever. This isn’t a closed book test. Any time you want to change a style and you can’t remember the property to use, just Google it.

How can I give an element rounded corners again? — Simply search Google for “CSS rounded corners” and the first result will tell you, in seconds. Before you know it, you’ll be friends with w3schools.com and css-tricks.com. And soon after that, you’ll realize you’re leaving your stylesheet less and Googling less, because you’re starting to remember the different CSS properties you use often!

Conclusion

Know what’s next.

In this article, we covered many basic concepts of CSS. I did my best to provide you with what I felt were the most important aspects of CSS, from my years of providing customer support to others, also diving into all this for the first time.

Moving past the simplified examples and rules of this article, and diving into real-world challenges of child theme CSS customization, there are a couple of topics I would strongly suggest you take on next.

First, be neat and organized. — At this moment, you’re thinking that’s not important. But trust me, as you start to fill up your child theme’s stylesheet, you’re going to quickly see what a mess it becomes if you don’t format and organize neatly. When everything breaks in your 5,000-line stylesheet, and you’re able to actually find that one bracket that was out of place, you’ll thank me.

Second, become an expert at using your browser’s developer inspector. — If you’ve been digging around physical CSS files of the theme, trying to figure out what to override, you’re doing it wrong. Learning to use your browser’s developer tools to inspect and instantly find CSS rules to override, will be like flipping the lights on in the room, when you can’t find the flashlight.