Support

Design, Upgrades

Custom Design »CSS Basics

CSS, or Cascading Styles 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 Customize → CSS in your WordPress.com dashboard if you have the WordPress.com Premium, Business, or eCommerce plan.

Table of Contents

Selectors
Order Matters
Testing Tip
Additional Resources

Selectors

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%;
}

HTML tag selector in action:

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;
}

Class and ID selectors in action:

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

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

↑ 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 WordPress.com 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, open Customize → 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 WordPress.com theme from scratch with CSS.

↑ Table of Contents ↑

Additional Resources

You officially have some CSS knowledge and you can get started using CSS on WordPress.com! To find out about more WordPress.com 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.

Versatile plans and pricing

  • Free

    Best for students

  • Personal

    Best for hobbyists

  • Premium

    Best for freelancers

  • Business

    Best for small businesses

Choose a plan

Not quite what you're looking for?

Get Help