If you‘re diving into WordPress development, you‘ve probably heard the term "CSS" thrown around a lot. But what exactly is CSS, and how does it fit into the world of WordPress? In this post, we‘ll take a closer look at the fundamentals of CSS and how it powers the design and layout of WordPress sites.

Navi.

CSS Definition & Basics

Let‘s start with a technical definition. CSS stands for Cascading Style Sheets. It‘s a stylesheet language used to describe the presentation of a document written in HTML or XML.

If you think of a web page like a house, HTML is the foundation and structure, while CSS is the paint and decor that makes it look nice. CSS instructs the web browser how elements on the page should be displayed – everything from colors and fonts to size, spacing, and layout.

One key thing to understand about CSS is that it‘s separate from HTML. This separation of concerns allows for more flexibility and maintainability as a site scales.

A Brief History of CSS

CSS was first proposed in 1994 by Håkon Wium Lie, who was working with Tim Berners-Lee, the inventor of the World Wide Web. The first CSS specification, known as CSS1, became a W3C recommendation in 1996.

CSS2 followed in 1998, adding concepts like absolute, relative, and fixed positioning of elements. Media types were also introduced, allowing developers to specify different styles for screen and print.

The most recent major revision, CSS3, began development in 1999 and reached recommendation status in 2011. CSS3 added a ton of new features like flexible boxes, grids, animations, and more.

Today, CSS is an essential web standard supported by all major browsers. According to W3Techs, 95.5% of all websites use CSS – second only to HTML in usage (Source).

How WordPress Themes Use CSS

Now that we‘ve covered the basics of what CSS is and where it came from, let‘s look at how it powers the design of WordPress themes.

Every WordPress theme includes a style.css file that controls the appearance of everything on the site – from the header and navigation down to the footer. If you want to customize the look of a theme, the style.css file is where you‘ll spend most of your time.

Anatomy of a WordPress style.css File

The style.css file in a WordPress theme has a specific structure. It starts with a special block of comments at the top known as the "stylesheet header." This section contains metadata about the theme, like its name, author, version, and so on. This info is used by WordPress to display the theme details in the admin area.

Here‘s an example stylesheet header:

/
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush.
Version: 1.3
Requires at least: 5.3
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
/

After the stylesheet header, you‘ll find all the CSS rules that style the theme. A typical WordPress style.css file will include a few key sections:

Global styles: Default styles for the tag and other top-level elements.
Layout styles: CSS for the main structural elements of the theme like the #header, #content, #footer, etc.
WordPress core classes: Styles for the classes output by WordPress template tags, like .wp-block, .alignleft, .bypostauthor, etc.
Typography: Font styles for headings (
,
, etc.), paragraphs, lists, links, blockquotes, etc.
Navigation: Styles for the header and footer navigation, like dropdown menus.
Widgets: Styles for the various widgets output by WordPress in the sidebar and other widget areas.
Comments: Styles for the comments section, including the comment form, avatars, etc.

The organization and naming of these sections will vary from theme to theme, but in general, a WordPress style.css file will include CSS for all the main template files and template tags used in the theme.

Customizing a WordPress Theme‘s CSS

If you want to make design tweaks to a WordPress theme, editing the style.css file directly is one approach. Let‘s look at a real-world example of customizing the blog post title and meta section in a theme.

Here‘s some sample HTML output by a WordPress theme‘s single.php template file:

Sample Post Title

Posted on March 1, 2023
by Jane Doe

To style the post title and meta information with CSS, we could add the following rules to our style.css file:

.entry-header {
margin-bottom: 2em;
}

h1.entry-title {
font-size: 2.5em;
font-weight: bold;
color: #333;
}

.entry-meta {
font-size: 0.875em;
color: #999;
}

.posted-on,
.byline {
margin-right: 1em;
}

This CSS targets the .entry-header, .entry-title, and .entry-meta classes to:

Add a bottom margin to the header for spacing
Increase the font size of the post title and make it bold
Decrease the font size and lighten the color of the meta text
Add spacing between the "posted on" and "by" elements

With these style rules in place, our single post template will be more visually appealing and easier to read.

Of course, this is just a tiny example – a real WordPress style.css file will include styles for every element used in the theme templates. The style.css file for the popular Astra theme has over 3,000 lines of CSS! But the basic principles are the same.

Styling for Gutenberg Blocks

With the introduction of the block editor (Gutenberg) in WordPress 5.0, themes have an additional stylesheet to manage: blocks.css.

The blocks.css file contains CSS specific to the default Gutenberg blocks, allowing theme developers to customize the appearance of blocks like paragraphs, headings, images, quotes, and so on.

Some key classes to target when styling Gutenberg blocks include:

.wp-block-button
.wp-block-cover
.wp-block-image
.wp-block-quote
.wp-block-gallery

If you‘re building a WordPress theme from scratch, you‘ll want to make sure your blocks.css file includes styles for all the common blocks to ensure a consistent design across your site.

Using a CSS Preprocessor in WordPress

While writing plain CSS gets the job done, professional WordPress developers often use CSS preprocessors to speed up development and create more maintainable stylesheets.

A CSS preprocessor is a tool that extends the basic functionality of CSS with features like variables, mixins, functions, and more. You write styles in the preprocessor‘s language (SASS, LESS, Stylus, etc.) and then compile it into regular CSS.

SASS (Syntactically Awesome Style Sheets) is the most popular CSS preprocessor, and it plays nicely with WordPress. With SASS, you can:

Use variables for repeating values like colors, fonts, sizes, etc.
Write mixins to group reusable styles
Nest selectors for more readable code
Use math operators and functions for dynamic sizing
Split your code into partials for better organization

Here‘s an example of using SASS variables and nesting to style our WordPress post header:

$primary-color: #333;
$meta-color: #999;

.entry-header {
margin-bottom: 2em;

.entry-title {
font-size: 2.5em;
font-weight: bold;
color: $primary-color;
}

.entry-meta {
font-size: 0.875em;
color: $meta-color;

.posted-on,
.byline {
 margin-right: 1em; 
}

}
}

When compiled into CSS, this SASS will output the same styles we wrote earlier – but with the added maintainability of variables and the readability of nested selectors.

To use SASS in a WordPress theme, you‘ll need to set up a build process using a tool like Gulp or webpack to compile the SASS into CSS. This is an advanced topic, but one worth learning for serious WordPress developers.

Learning WordPress CSS

If reading this post has piqued your interest in WordPress CSS, you might be wondering how to go about learning more. Here are some tips and resources to get you started:

Get comfortable with the basics of CSS first. If you‘re brand new to CSS, start with a general beginner tutorial like the freeCodeCamp Responsive Web Design course.
Practice, practice, practice. The only way to get good at CSS is to write a lot of it. Set up a local WordPress development environment and experiment with editing your theme‘s style.css file.
Use the browser developer tools. Most modern browsers have built-in developer tools that let you inspect and edit a page‘s HTML and CSS. This is an invaluable resource for learning how CSS works in the wild.
Study other WordPress themes. When you come across a WordPress site with a design you like, peek under the hood and see how it‘s styled. The WordPress.org theme repository is a great place to browse and download themes to study.
Read CSS blogs and tutorials. There are a ton of great resources out there for learning CSS, both WordPress-specific and general. Some favorites:
Get involved in the WordPress community. The WordPress community is full of friendly, knowledgeable folks who are happy to help you learn. Attend a local WordPress meetup or WordCamp, or join the WordPress StackExchange.

Conclusion

We covered a lot of ground in this deep dive into CSS for WordPress! To recap:

CSS is a stylesheet language that describes the presentation of HTML. It‘s one of the core technologies of the web.
WordPress themes use a style.css file to control the design and layout of the entire site. Editing this file is how you customize a theme‘s appearance.
CSS preprocessors like SASS can help you write more efficient and maintainable stylesheets in WordPress development.
To truly master CSS for WordPress, you need to practice writing it, study other themes, and immerse yourself in the wealth of educational resources available.

I hope this post has given you a solid foundation in the basics of CSS and how it works in WordPress. Armed with this knowledge, you‘re well on your way to building beautiful, custom WordPress sites.

What questions do you still have about using CSS in WordPress? Let me know in the comments!