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 My Sites → Design → 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.
There are three kinds of selectors:
Tag | An HTML tag such as h1 or p . |
Class | An attribute applied to one or more elements, such as <p class="class-name">Sample text.</p> . Referenced in CSS with a “.” before it. |
ID | An attribute of a unique element that is only used once, such as . 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”.
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; }
Testing Tip
To see how your theme looks without any theme CSS applied, go to My Sites → Design → 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.
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:
- CSS Beginner Tutorial by HTML Dog
- Hands-on Codecademy CSS Lessons
- An Intro to CSS, or How to Make Things Look Like You Like
- An Intro to CSS: Finding CSS Selectors
- Intro to CSS: Previewing Changes with the Matched Rule Pane
- Should I Learn CSS?
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.