What is CSS and How Do You Use it in WordPress?

As an experienced web developer who‘s been working with WordPress for over 15 years, I‘ve learned that CSS is an essential skill for customizing the design of your website.

In this beginner‘s guide, I‘ll explain what CSS is, how it works, and the various ways you can leverage CSS to style your WordPress site exactly how you want it.

What is CSS?

CSS stands for Cascading Style Sheets. It is a stylesheet language used for controlling the appearance and layout of web pages.

With CSS, you can dictate colors, fonts, spacing, sizing, positioning, and many other visual styling aspects of HTML elements on your site.

For example, you can use CSS to turn paragraph text green and bold:

p {
  color: green;
  font-weight: bold;
}

CSS works by pairing selectors like HTML tags, classes, or IDs with declarations that define styling rules:

This separation of content from presentation is the key benefit of CSS. It allows you to completely change the visual styling of a site without altering the underlying HTML or editorial content.

According to StatCounter, CSS usage has grown rapidly over the years and it‘s now the most popular language on the web.

Ways to Use CSS in WordPress

There are several ways to implement CSS styling on your WordPress site:

1. Main Theme stylesheet

Every WordPress theme comes with a main style.css file that controls the core visual styling. This is where you‘ll find CSS rules for elements like:

• Headings (h1 to h6)
• Paragraphs (p)
• Lists (ul, ol, li)
• Links (a)
• Images (img)
• Buttons (.button)

For example:

/* Headings */
h1 {
  font-size: 32px;
}

h2 {
  font-size: 28px;
} 

/* Links */
a {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: purple;
}

So if you want to change your theme‘s default styling, the style.css file is the place to do it.

2. WordPress Customizer

Many themes allow you to tweak certain CSS values like colors, fonts, and spacing via the WordPress Customizer without touching code.

For example, you can change link colors, set a site-wide font, and control padding/margins for design elements.

The Customizer publishes those changes as CSS overrides to your main styles.css file.

3. Page Builder Plugins

Plugins like Elementor, Beaver Builder, and SiteOrigin enable building pages via a visual drag-and-drop interface.

Their styling gets output as CSS classes on the front-end site. This allows styling individual pages, templates, or page sections differently than your overall theme.

4. Custom CSS Code Snippets

Some themes like GeneratePress allow adding custom CSS code snippets which get appended to the main style.css file.

This is useful for inserting CSS that augments but doesn‘t override your core theme styles.

5. Child Themes

Child themes provide a way to override a parent theme‘s style.css file by enqueuing a child theme stylesheet after the main one.

This allows modifying CSS rules while keeping the parent theme intact through updates.

So in summary, WordPress provides a few different avenues for implementing CSS — through your main theme file, customizer tweaks, page builders, code snippets, or child themes.

CSS Selectors, Properties and Values

Now that you know how to add CSS to WordPress, let‘s look at how CSS rules are structured:

• Selectors – HTML elements, classes, IDs, etc. to target
• Properties – Style attributes like color, size, position
• Values – Settings for those properties

For example:

/* Selector */
h1 {

/* Properties */
  color: blue;
  font-size: 36px;

/* Value */  
}

Here are some common CSS selectors and properties you may use:

Selectors

• HTML tags – p, h1, div, etc.
• Classes – .intro, .button
• IDs – #header, #footer
• Universal – *

Properties

• color – text color
• font-size – text size
• width – element width
• height – element height
• background – background color
• display – block, inline, etc.

And values like:

Values

• blue, #05678, rgb(255,255,0) – color values
• 12px, 2em – size units
• bold, italic – font styles

With just CSS selectors, properties and values alone, you can accomplish a ton of custom styling!

CSS Specificity and Inheritance

When multiple CSS rules target the same element, CSS uses specificity and inheritance to determine which styles get applied:

• Specificity – Rules with more specific selectors get precedence
• Inheritance – Elements inherit styles from ancestor elements

For example, an ID selector is more specific than a class or tag selector:

/* More Specific */
#header {
  background: black; 
}

/* Less Specific */  
.nav {
  background: blue;
}

The #header styles override .nav because IDs have higher specificity.

For inheritance, inner elements adopt properties like font and color from outer containers:

body {
  color: black;
}

p {
  color: blue; /* Overrides inherited color */
}

So the <p> tags inside will be blue since they inherit the body‘s black text by default.

Understanding the cascade, specificity and inheritance allows greater control over your CSS.

CSS Box Model

All HTML elements have a box model which impacts layout:

It consists of:

• Content – The element content
• Padding – Space around content
• Border – Border around padding
• Margin – Outer space around element

You can control the box model in CSS with properties like:

• padding
• border
• margin
• width
• height

For example:

p {
  margin: 20px; /* Outside space */
  padding: 10px; /* Inside space */
  border: 1px solid gray;
}

Mastering margins, padding and borders is key for spacing out elements in CSS.

Responsive CSS Units

For responsive sites, you need to use CSS units that scale with screen size, rather than fixed units like pixels.

Relative CSS Units

• em – Relative to font-size of the element
• rem – Relative to font-size of the root element
• % – Percentage of parent element size
• vw – Percentage of viewport width
• vh – Percentage of viewport height

For example, you can size headings responsively using em or rem:

h1 {
  font-size: 2.2rem; /* Scales up/down */
}

h2 {
  font-size: 1.8em; /* Relative to parent */ 
}

Whereas fixed units like px don‘t adapt to different viewports:

h1 {
   font-size: 32px; /* Stays 32px */
} 

So using flexible CSS units allows creating truly responsive designs.

CSS Frameworks and Preprocessors

When building sites, CSS frameworks like Bootstrap provide pre-built layout grids, UI components and styling to save time.

You can use frameworks as a foundation and customize them via CSS overrides. This gives you faster development vs coding everything custom.

Additionally, CSS preprocessors like Sass add features like variables, nesting, inheritance to help you write CSS more efficiently:

// Sass file

$brand-color: blue;

.button {
  background: $brand-color;

  &:hover {
    background: darken($brand-color, 20%); 
  }

  /* More code */
}

The Sass gets compiled into regular CSS the browser understands.

Real-World Examples and Tips

Through my 15+ years of building WordPress sites, I‘ve refined my CSS skills to be able to customize designs quickly.

Here are some examples of the CSS techniques I‘ve used on client sites:

Ecommerce Site Redesign

• Used CSS Flexbox to improve product grid layout for mobile
• Customized Bootstrap styles for unique look and feel
• Optimized CSS animations for faster performance

Portfolio Site Design

• Developed custom CSS grid layout for masonry gallery
• Added CSS hover effects for interactive elements
• Implemented vertical rhythm and consistent spacing through CSS

Magazine Site Development

• Created a responsive multi-column article layout in CSS
• Styled modular site sections (sidebars, headers, etc.) for consistency
• Implemented fluid typography and spacing with relative units like REM

Here are a few tips I‘ve learned along the way:

• Use CSS custom properties (variables) for easier updates
• Minify CSS for faster page loads
• Optimize browser rendering with CSS will-change
• Load CSS asynchronously to boost performance
• Follow BEM naming convention for clearer CSS

The possibilities with CSS are endless. With some knowledge of selectors, properties, and responsive values, you can craft beautiful designs and lay them out exactly how you want.

Hopefully this gives you a great starting point for learning CSS and customizing your WordPress site‘s design! Let me know if you have any other questions.