Cascading Style Sheets (CSS) is the language of visual design on the web. While HTML is used to create the structure of websites, CSS is used to style those HTML elements.
For example, things like fonts, colors, borders, shadows, and more are typically created and modified using CSS.
WordPress themes, by default, come with some CSS, but too much CSS can hurt site loading speeds.
This is why the fastest WordPress themes use minimal CSS. If you’re using one of these themes, which you should, you’ll likely need to apply additional styling another way.
You could use a page builder, but that’s not always the most efficient solution. Page builders often increase page file size and can slow down your site. If you’re just making a few moderate changes, the trade-off might not be worth it.
Without using a page builder, you’ll need some custom CSS to make significant design changes to your web pages.
So how does it work?
The good news is that you don’t need to be a programmer to use CSS.
A quick Google search will turn up just about any specific CSS rule you might need. You don’t even need to memorize any code.
All you need to know is what CSS is used for and where to add your CSS code in WordPress.
How to Write CSS – A Few Basic Rules
CSS is simple to write. But before you begin adding custom CSS to your WordPress website, here are a few basics to understand.
CSS Syntax
Each line of CSS code is called a rule. A rule contains instructions that affect how specific HTML elements appear.
A CSS rule typically contains a selector, a property, and a value:
- The selector tells the browser which HTML element to target.
- The property tells the browser what aspect of that element to change.
- The value tells the browser how to change it.
A property and value together form a declaration, and declarations are always enclosed in curly brackets after the selector.
For example:
h1 { color: blue; }
Here:
h1is the selector,coloris the property,blueis the value.
This rule will apply the color blue to all <h1> elements on the page.
Types of Selectors
There are different kinds of CSS selectors.
1. Element Selectors
These apply styles to all HTML elements of a given type.
Example: p { color: red; } will turn all paragraph text red.
2. ID Selectors
ID selectors target one specific element that has a unique id attribute.
In CSS, ID selectors begin with a #.
Suppose you want to style the background of a single paragraph yellow. You could use this HTML and CSS:
HTML:
htmlCopyEdit<div id="yellowp">
<p>Random paragraph</p>
</div>
CSS:
#yellowp { background-color: yellow; }
Note: id is an attribute, not a “tag,” and quotation marks in HTML should always be straight ("), not curly (“”).
You can also add multiple declarations within one rule. Just separate each declaration with a semicolon:
#yellowp { background-color: yellow; color: red; }
3. Class Selectors
If you want to style multiple elements similarly, use a class.
Class selectors begin with a period (.) in CSS.
For example, if you want to color three out of five <h2> headers blue, you could assign a class to them like this:
HTML:
<h2 class="blueheading">Header One</h2>
<h2 class="blueheading">Header Two</h2>
<h2 class="blueheading">Header Three</h2>
CSS:
.blueheading { color: blue; }
Using classes avoids the need to assign a unique id to each element you want to style similarly.
Reminder: Class and ID attributes serve different purposes—classes can be reused, while IDs must be unique on a page.
Types of CSS and How to Use Them
There are three main types of CSS you should know about:
1. External CSS
External CSS means writing all your CSS in a separate file and linking that file to your HTML or theme.
This file is called a stylesheet and should have a .css extension (e.g., style.css). In WordPress themes, this is typically named style.css.
You include it in your HTML using a <link> tag in the <head> section:
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Random paragraph.</p>
</body>
</html>
style.css (the CSS file):
cssCopyEditp { color: red; }
The rel="stylesheet" attribute tells the browser that the linked file is a CSS stylesheet.
2. Internal CSS
Internal CSS is added inside the <style> tag in the <head> of the HTML document.
Example:
htmlCopyEdit<!DOCTYPE html>
<html>
<head>
<style>
p { color: red; }
</style>
</head>
<body>
<p>Random paragraph.</p>
</body>
</html>
This method is useful when you’re only styling a single page.
3. Inline CSS
Inline CSS is applied directly within an element’s style attribute.
Example:
htmlCopyEdit<p style="color:red;">Random paragraph.</p>
While this works, it’s not recommended for most use cases because it makes code harder to maintain.
Why Is External CSS More Widely Used?
External CSS is the most scalable option. You can create one rule that applies across your entire website, making it easier to manage and update your design consistently.
In contrast, inline and internal CSS often result in repeated declarations, which can clutter your code and slow you down in the long run.
However, external stylesheets can also slow your site slightly, especially if the CSS file is large. That’s because browsers must download and process the entire external stylesheet before rendering the page. This is known as render-blocking CSS.
When a browser loads a page, it starts by parsing the HTML. If it encounters a link to an external CSS file, it must pause rendering until that file is fully downloaded and applied.
To reduce this delay, some lightweight WordPress themes, like Astra, use minimal or even inline CSS to improve speed. While this might require more work from developers, the performance gains are often worth it.
Final Thoughts
CSS is a simple yet powerful tool that gives you full control over how your website looks. Whether you’re using WordPress, HTML, or a page builder, knowing how CSS works, even at a basic level, can make a huge difference in the design and performance of your site. You don’t have to memorize it. You just need to understand how to use it, and where to place it, and we’ve broken this down in the article.