Custom Design »CSS Basics

Contents

• Selectors
• Order Matters
• Testing Tip
• Get Started!

Related

• Custom Colors
• Custom CSS
• Custom Fonts
• Editing CSS
• How to Find Your Theme’s CSS

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

You can add custom CSS to the Appearance → Custom Design → CSS page in your WordPress.com blog dashboard once you have purchased the Custom Design upgrade.

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	A class attribute of one or more elements, such as <p class="class-name">Sample text.</p>. Referenced in CSS with a “.” before it.
ID	An id attribute of a unique element, should only be used once, such as <div id="header">Sample header.</div>. 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 selector HTML:

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

Class selector CSS:

.warning {
	background-color: #ffc;
}
#danger {
	background-color: #fcc;
}

Class selector in action:

This is a paragraph with a class=”warning”.

This is a paragraph with id=”danger”.

ID selector HTML:

<div id="header">
<h1 id="site-title">Sample Blog Title</h1>
<h2 id="site-description">Just another WordPress.com blog</h2>
</div>

ID selector CSS:

#site-title {
	font-size: 3em;
}
#site-description {
	font-size: 2em;
	color: #777;
}

ID selector in action:

Sample Blog Title

Just another WordPress.com blog

↑ Table of Contents ↑

Order Matters

The “cascade” 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 it’s not recommended unless absolutely necessary because if you start adding too many 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 your Appearance → Custom Design → CSS page, temporarily remove everything from the editor, select the radio button option to replace the theme CSS, and click Preview. 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. Don’t save the changes, just preview.

↑ Table of Contents ↑

Get Started!

All right then, 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 any questions, please stop by the CSS Customization forums and say hello. :)

Note: Color names 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.