Category Archives:
WordPress for Beginners Archives

You want your WordPress website to look great on every device and for every visitor but your out-of-the-box WordPress theme only gets you about 90% of the way there.

There are still a few things you’re concerned about — things that CSS could help you fix.

This beginner’s guide to WordPress CSS will give you a walk-through on how to edit CSS in WordPress to help you build a more beautiful, intuitive, and better-performing website. Most CSS classes for WordPress would take you through these same steps.

An Introduction to WordPress Editing

When using WordPress, you can customize CSS using one of three different editors that the service provides. 

Visual Editor

The visual editor is a post and page edit feature of the platform. It has been described as WYSIWYG (what you see is what you get). That means everything on the page, as you can see it, is exactly the way it will look to a website visitor.

This is an editor that will allow you to create content without coding. There is a toolbar at the top of the page that is similar to familiar programs like Microsoft Word. You can use the tools found there to alter your text and the appearance of the site. 

There is also an Add Media button which enables you to include images or videos in your post. WordPress plugin developers can also add buttons on your visual editor toolbar to help you create more features and styles for your live site. 

Drag-and-Drop Editor

A Drag-and-Drop Editor is one of the simplest ways to edit your site. It uses an elementary concept as the basis of its platform. You grab something, you pick it up, and you place it somewhere else. 

While drag-and-drop is not a standard WordPress feature, there are several editors that can be installed that will give you this easy-to-use editing platform. 

When using the Drag-and-Drop Editor, you can select an element of your site and drag it to a new location. You effectively drop the element in the desired location. If you’re unhappy with how that looks, you can start over again and move it somewhere else. 

Theme Editing

Theme editing refers to your ability to edit the theme or template of your WordPress website. 

There are two different kinds of themes that you would edit: Parent Theme and Child Theme. The Parent Theme is a full and complete WordPress theme, with all of the proper elements in place. A Child Theme has the look and feel of its Parent Theme, but it can be modified. 

The way you will edit your CSS WordPress theme differs based on which theme you’re using. Visual themes use the Visual Editor while drag-and-drop themes use the Drag-and-Drop Editor. 

For more on editing your WordPress theme, check out “Understanding the WordPress Theme Editor.”

What Does CSS Mean in WordPress?

Your WordPress website is built with a variety of languages including HTML, PHP, CSS, and MySQL. 

For now, we’re going to focus on HTML/CSS.

HTML acts as the content structure for your website (text, images and other media, hyperlinks, etc.) and CSS dictates how that content looks (e.g., colors, fonts, positioning of elements, margin, and padding). 

Let’s use a quick example. 

A simple line of text in HTML might use a <span> tag. But to change the visual characteristics you must use CSS. The <span> only defines the content, not how it should look. 

Here are some examples of visual properties we could change with CSS.

• Font color
• Font size
• Font family
• Background colors

Imagine it like a house. HTML represents the rooms, layout, and architecture. CSS represents the paint, choice of trim, and flooring. 

CSS gives the house its “look.” Every house has floors, rooms, and walls, but how you paint and arrange those floors, rooms, and walls is what makes the house uniquely yours. CSS can be used to add elements or take others away. You can hide page titles on WordPress with CSS.

Where Do I Find CSS in WordPress?

To find the CSS files for your WordPress theme, look under Appearance then select Editor and select the file marked style.css. 

From this window, you can edit the files directly and then Save. 

An Introduction to CSS Syntax and Selectors

CSS is comprised of style rules that are interpreted by the browser, and then applied to the elements of your document. 

The Parts of a Style Rule

• Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table>.
• Property − A property is a particular characteristic of an HTML tag that can be changed. An example of this might be “color” for text elements. 
• Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1. View the complete Mozilla CSS reference to view all properties and possible values for each property.

Syntax

The syntax of CSS is a series of rules consisting of a selector and a declaration block. 

The selector block points the code toward an HTML element. The declaration block changes the property of that selector based on a series of values. 

selector { property: value }

To add more rules (as many as you want), it is standard practice to give each property, value, and declaration its own line. That would look something like

selector {
  property1: value;
  property2: value;
}

Selectors

There are many different selectors you can identify through syntax in order to change the properties of an HTML element. 

Some of them include:

• Type selectors
• Universal selectors
• Descendant selectors
• Class selectors
• ID selectors
• Child selectors
• Attribute selectors

How Do I Use CSS in WordPress?

You can use CSS in WordPress to control

• Color, size, and style of text,
• Spacing between paragraphs and headers,
• How images and other media look,
• How your site looks on different screen sizes, and more. 

1. Control the Color, Size and Style of Text

First, you would want to decide on a HEX or an RGB color value that matches the color you want. You can use a free tool like Canva to see a number of different values for colors on the spectrum.

To target all paragraph tags (<p>) we need to write the CSS rule so that the selector targets those <p> elements.

p {
  color: value-will-go-here;
}

Let’s pick a nice red out from a color wheel. We’ll use #ea1520. 

That would mean the rule is

p {
  color: #ea1520;
}

And we’re good to go! 

Add that to your theme stylesheet (style.css) and all the <p> tags should be red once you reload the page.

Now, what if we also want to change the size and the font style adding elements like bold or italics? We just need to write rules for all of those properties on their own lines in the same target above. 

p {
  color: #ea1520;
  font-size: 26px;
  font-style: bold;
}

The documentation for the font-size and font-style CSS rules can be found on their appropriate documentation pages at developer.mozilla.org

2. Control Spacing Between Paragraphs, Headers, and More

The colors and sizes all look great — but what about the spacing? 

Is everything too cluttered? Or worse, is everything way too far apart and making the website hard for people to navigate?

This is where you want to embrace the use of the margin property. 

The margin is the space around an element, including the top, bottom, left and right. 

If you want more space between headings and the paragraph that comes after them, you would want to increase the bottom margin on that heading tag.

The Mozilla documentation for the margin property has an interactive example that lets you test several margin rules on a particular element to see how it reacts on the page. 

Once you understand the margin property well, let’s write a rule that adds margin-bottoms to every heading.

h3 {
  margin-bottom: 25px;
}

Now our H3 headings should have at least 25 pixels (px) of empty space below them for all screen sizes.

3. Control How Your Images Look

Through CSS you can affect the placement of your images along with the borders around them, how tall and wide they are, and more. 

Here are some examples of coding that you can use for the borders, scaling, and centering of your images.  

Border:
img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}

<img src="http://blog.nexcess.net/paris.jpg" alt="Paris">

Image scaling:
img {
  max-width: 100%;
  height: auto;
}

Image centering:
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

4. Control How Your Site Looks on Different Devices and Screen Sizes

You’re able to control the look of your site across various devices. That’s important in today’s climate with users accessing web content through their computers, cell phones, and tablets. 

Below is an example of CSS code that can rearrange your page for a device with a maximum page width of 480 pixels. 

@media only screen and (max-device-width: 480px) {
        div#wrapper {
            width: 400px;
        }

        div#header {
            background-image: url(media-queries-phone.jpg);
            height: 93px;
            position: relative;
        }

        div#header h1 {
            font-size: 140%;
        }

        #content {
            float: none;
            width: 100%;
        }

        #navigation {
            float:none;
            width: auto;
        }
    }

How Do I Edit CSS in WordPress?

You can edit CSS in WordPress manually via an FTP client or with the assistance of a plugin.

Adding CSS to WordPress Manually

In order to manually add CSS to WordPress, you’d have to be using a Child Theme which is more malleable than a Parent Theme and can be changed easily. Custom CSS that you add to a Child Theme will override the styles set down by the parent. 

Here’s how to add custom CSS to a Child Theme:

• Use an FTP client like FileZilla to connect to the site. 
• Locate the root folder. Usually, it’s called “www” or features your site’s name
• Once there, navigate to the wp-content/themes directory where you’ll find folders for all of your themes. Select the Child Theme you set up. 
• Right-click on the file and select View/Edit. The file will open with your text editor. 
• Add your WordPress custom CSS directly to the theme. 
• Save the changes and close the editor.

Adding CSS to WordPress With a Plugin

There are a number of plugins that you can use to add additional CSS to your WordPress site or defer unused CSS from WordPress. 

The Top 5 CSS Plugins for WordPress

1. Yellow Pencil
2. SiteOrigin CSS
3. Simple CSS
4. Theme Junkie Custom CSS
5. Custom CSS Pro

Using any of these options, you’ll be able to gain access to the backend of your site and add your custom CSS WordPress code. Other plugins are able to complete advanced functions like optimize CSS delivery on WordPress using style.css files. 

In Conclusion

This walk-through to CSS for WordPress provides a simple guide for beginners much like early WordPress CSS classes would. 

With CSS, there’s always more to learn and more exciting ways you can use it. Our recommendation is to start small. For instance, make a simple change to your WordPress theme which defines the color of your footer’s background. If you find your WordPress CSS not updating, go back and re-read these sections to get a better handle on what went wrong. 

If you have any questions along the way, feel free to reach out to our CSS experts!