Design, Upgrades

CSS Basics

CSS, or Cascading Style Sheets, is a way to apply style rules to HTML content. This page will cover a few basics about CSS such as selectors and ordering.

You can add custom CSS by going to My Sites → Appearance → Additional CSS in your dashboard if you have the Premium, Business, or eCommerce plan.

Table of Contents

Order Matters
Testing Tip
Additional Resources


Selectors are used to target which HTML to style. Properties and values are used to set the style rules.

CSS Selectors

There are three kinds of selectors:

TagAn HTML tag such as h1 or p.
ClassAn attribute applied to one or more elements, such as <p class="class-name">Sample text.</p>. Referenced in CSS with a “.” before it.
IDAn attribute of a unique element that is only used once, such as
<section id="intro">
. Referenced in CSS with a “#” before it.

Here are some examples.

HTML tag selector:

<p>Sample paragraph.</p>

HTML tag selector CSS:

p {
    color: red;
    font-size: 200%;

Here’s that HTML tag selector in action, with the text in red and a font size of 200%:

Sample paragraph.

Class and ID selectors HTML:

<p class="warning">This is a paragraph with a class called "warning".</p>
<p id="danger">This is a paragraph with an id called "danger".</p>

Class and ID selectors CSS:

.warning {
    background-color: #ccf;
#danger {
    background-color: #fcc;

Here are those class and ID selectors in action:

This is a paragraph with a class called “warning”.

This is a paragraph with an id called “danger”.

You can add your own CSS classes to elements on your site using the Additional CSS Classes feature in the WordPress editor.

↑ Table of Contents ↑

Order Matters

The “cascading” in CSS refers to how a browser determines which style rules will apply. Each style is applied according to how important the selector is, how specific it is, and the order of the CSS.

ID selectors are more important than class selectors, and class selectors are more important than HTML tag selectors. So, in the following example, the paragraph will show up as red because the ID selector is the most important.

#danger { color: red; }
.warning { color: orange; }
p { color: green; }

You can override importance by adding “!important” to the value, but this is not recommended unless absolutely necessary because if you start adding too many !important rules, then editing and debugging can get very confusing very fast.

#danger { color: red; }
.warning { color: orange; }
p { color: green !important; }

More specific selectors get applied before less specific ones. HTML elements that are the innermost ones are the most specific.

<p>This is a <strong><em>good</em></strong>sample paragraph.</p>

The em tag is closer to the inner HTML than the strong tag, so the em rule will get used:

strong { color: limegreen; }
em { color: tomato; }

But if you use a more specific selector like “p strong em“, it will get used because it’s more specific than just a type selector like em by itself.

p strong em { color: limegreen; }
em { color: tomato; }

Finally, the order of the rules matter. If the same rule appears more than once, the last rule is used. In the following example, only the last rule will apply and the CSS editor will remove the first two duplicates.

p { color: indigo; }
p { color: aqua; }
p { color: teal; }

↑ Table of Contents ↑

Testing Tip

To see how your theme looks without any theme CSS applied, go to My Sites → Appearance → Additional CSS, temporarily remove everything from the editor and select ‘Don’t use the theme’s original CSS‘. You should see a bare bones, HTML only, unstyled web page. This will give you a basic idea of the HTML structure of the current theme. Do not save the changes if you just want to preview basic structure. The option to start fresh and replace the theme CSS is an advanced option that can be used to completely restyle any theme from scratch with CSS.

↑ Table of Contents ↑

Additional Resources

You officially have some CSS knowledge and you can get started using CSS on! To find out about more CSS editing options and settings, go to the Editing CSS page. If you have specific CSS questions, we can also provide some CSS Support in Live Chat.

You might also like to check out these other awesome CSS resources:

The color names used in the examples above are from a list of the X11 colors supported by popular browsers with the addition of gray/grey variants from SVG 1.0. You can also see a list of basic color keywords on the same page.

Not quite what you're looking for?

Get Help