Home › Web Design › WordPress: A Minimalist Guide to CSS

WordPress: A Minimalist Guide to CSS

CSS stands for Cascading Style Sheets. Styles within CSS define how HTML elements display on a web page — font, color, size, spacing, and much more. CSS provides consistency across an entire website: define how you want all your headings to look once, and every heading on every page follows that rule automatically. It's an incredibly efficient way to manage the presentation of your site.

You don't need to become a CSS developer to manage a WordPress site — but knowing the basics makes a real difference. Here's the minimum you need to know, with real examples drawn from actual WordPress sites.

Editing CSS in WordPress

The safest place to add your own CSS in WordPress is Appearance > Customize > Additional CSS. Any CSS you add here overrides your theme's default styles without modifying the theme files directly — so your changes survive theme updates.

Important: Don't edit your theme's main stylesheet directly (via Appearance > Theme Editor). Your changes will be wiped out with the next theme update. If you need more significant CSS control, use a child theme instead — it inherits everything from the parent theme but keeps your edits safe from updates.

Some themes (like Genesis) have their own Edit CSS option in their dashboard menu. If your theme has that option, use it instead of the Theme Editor.

Structure of a CSS Rule

A CSS style consists of a selector (what you're targeting) and one or more declarations (property: value pairs inside curly braces):

h1 {
  color: #333;
  font-size: 24px;
  margin-bottom: 12px;
}

The selector (h1) targets all H1 headings. The declarations set the color, size, and bottom margin. Declarations can be in any order.

Removing Default Browser Styles

The first style in most stylesheets removes the default spacing and formatting that browsers apply to HTML elements. Here are two real examples from WordPress sites:

body, h1, h2, h3, h4, h5, h6, p, input, select, textarea {
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

This removes the default padding and margin from common elements like paragraphs and headings, and sets consistent font defaults across the entire site. Setting margin: 0 and padding: 0 gives you a clean slate to set your own spacing intentionally.

Formatting the Body Tag

The body tag sets default parameters for the whole page — most commonly the background color:

body {
  background-color: #593F12;
}

This is the color that shows in the browser window outside your content area. If your content area is 1000px wide and the browser is 1300px wide, the extra 300px on either side will be this background color.

Formatting Lists

ol, ol li, ul, ul li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ol li { list-style-type: decimal; }
ul li { list-style-type: square; }

The first rule removes default list spacing and bullets. The second and third rules then add back the specific bullet style for each list type. Other options for list-style-type: disc, circle, none, decimal, lower-alpha, upper-roman, and more.

Styling Links

a, a:visited {
  color: #70160e;
  text-decoration: none;
}

a:hover {
  color: #fff;
  text-decoration: underline;
}

a img {
  border: none;
}

These three rules set the link color for default and visited states, define the hover color change, and remove the default border that appears when an image is used as a link. See Basic CSS for Links for a full breakdown of link styling.

Setting Page Layout

A CSS ID defines a unique section of a page. Most sites start with an outer wrapper that contains all the page content:

#wrap {
  background-color: #fff;
  border: solid 1px #ddd;
  margin: 40px auto 40px;
  width: 980px;
}

The width sets the content area width. The margin: 40px auto adds space above and below, and centers the content horizontally within the browser window. The border visually separates the content from the browser background. See Creating a Box in CSS and Creating Nested Boxes in CSS for more.