Everything You Need to Know About CSS and WordPress

There are plenty of reasons why WordPress is the preferred content management system (CMS) of so many people around the globe. Much of it lies in the fact that you can make functional and creative websites using WordPress themes and plugins, while having limited coding knowledge or, even, none at all. However, to make your website look really stunning, you will often need to make small design tweaks which go past the functionalities your theme or plugins may provide. To perform those style-altering changes to your website, you need a bit of CSS knowledge.

As many WordPress users might not be familiar with it, we have decided to create this comprehensive guide to CSS in WordPress. We will go over what CSS is and how you can add CSS to WordPress. Furthermore, we will explain the CSS syntax in detail, starting from the basic examples to the more complex ones. This way, you will get a deep understanding of how CSS is created and will be able to apply it in order to style your website accordingly. With that being said, let us begin.

Here’s what we’ll be covering:

What Is CSS And When to Use It

Before we delve into the coding examples, let us clarify what CSS is. First of all, it is one of the languages developers use to create WordPress themes and plugins, alongside HTML, PHP, and JS. While the other three are used for defining website markup, server-side and client-side functionalities, CSS is used for design purposes. It is the reason why you don’t see pages like these anymore:

More precisely, CSS, or Cascading Style Sheets, is a language web designers use for styling web pages. It was developed in 1994 by Håkon Wium Lie and is maintained by the CSS Working Group. The language can be used for defining website layouts, giving basic designing properties to specific HTML elements, as well as handling responsive design versions of your website. Furthermore, as CSS has evolved over the years, it can also be used to add interactivity to your website using animations, much of which was previously done with JS (JavaScript) only.

But, while the advanced CSS takes a bit of time to get accustomed to, it doesn’t mean all WordPress users should shy away from using CSS code to style small parts of their websites according to their needs. Small adjustments, like changing the color of a certain item, adding padding and margin around it, changing its typography properties, hiding it, or even changing all the previously mentioned properties variably for different screen sizes often requires limited CSS knowledge past the basics of CSS and some CSS selectors.

In this article, we will try to give a comprehensive overview of what it takes to understand and create such snippets of CSS code. Furthermore, we will touch on some of the more advanced CSS properties and point to some helpful resources you can review afterward. Let us begin.

How CSS Works

In this, the main part of our guide, we will discuss how CSS works, starting from the basics of syntax to its more advanced properties. As this topic is quite long, we have tried to structure it into several subsections, which are of increasing difficulty. Additionally, even though we have tried our best to convey a comprehensive overview of CSS, some things might be left out. As such, we have included a list of resources at the end which you can peruse to learn more on the topics we might have missed, as well as to get a deeper understanding of the things we have covered.

We begin with the basics.

The Basics of CSS

To start creating CSS code, it is important to get a deep understanding of the basics of CSS, i.e. CSS syntax. A typical CSS rule uses the following form:

css-selector {
property: value;
}

These are the 3 most important parts of every CSS rule in those names. The CSS selector is a piece of code that is used to identify an HTML element or a group of HTML elements on your page to which you wish to apply certain styling options. The property is the aspect of that HTML element (or elements) that you wish to change (e.g. color, padding, margin, etc.), while the value is what you assign to that property. Together, these two form a declaration, which is the technical term for the property: value; part in the example above. Furthermore, both the colon(:) after the property and the semicolon(;) at the end of the declaration are mandatory, whereas the blank space after the colon is optional and used to make the CSS declaration more readable. For example, the color: blue; is a declaration in which the blue color is assigned to the color property as its value.

However, a declaration is meaningless unless placed within curly brackets({ }) and assigned to an appropriate CSS selector. The whole snippet of code is, then, referred to as a CSS rule, while the part with the curly brackets and the declaration within is referred to as the declaration block of a said CSS rule.

Example:

h1 {
color: #1f1f1f;
}

This CSS rule shows how you can assign a certain color to all H1 HTML elements on your website. The color value was specified using a hexadecimal code, which is just one of the color codes you can use. Additionally, notice that we have added white space between the CSS selector and the declaration block, as well as put some indentation before the declaration. Both things are commonly done to increase the readability of the CSS code.

With that being said, it is often required to specify multiple declarations to a single CSS selector to achieve the desired styling of that HTML element. This can be easily done by placing additional declarations within the declaration block assigned to that CSS selector. Meaning, you can use the following syntax to assign multiple CSS rules to a single CSS selector.

css-selector {
property1: value1;
property2: value2;
…
propertyN: valueN;
}

In this case, the coding snippet is referred to as a CSS ruleset. Let us now observe one of the ways how the example of a single CSS rule we gave previously can be expanded to become a CSS ruleset.

Example:

h1 {
font-family: “Times New Roman”, sans-serif;
font-size: 35px;
line-height: 1.2em;
font-weight: 700;
color: #1f1f1f;
margin: 25px 0px;
}

With this CSS snippet, we can specify various typography settings for the H1 HTML element on the website, as well as the margin around this element. The margin was set using the shorthand margin property expressed by two values. The first value specifies the top and bottom margin of 25px, while the second specifies the left and right margin of 0px. Additionally, the value we have used for the line-height property is specified in em, which is one of the relative length units you can use.

This concludes the section on the basics of CSS syntax. By now, you understand the purpose of some simple CSS rules and rulesets that you can apply to your website. However, to put this to full use, you will need to know a bit more about CSS selectors and how you can inspect your website to find the most suitable one. We will cover this in the following section.

Additionally, it is worth noting that, apart from CSS rules and rulesets, there are other types of rules called at-rules that CSS accepts. As these concepts are slightly more advanced, we will cover them in one of our later sections.

CSS Selectors

Choosing the appropriate CSS selector for your CSS rules is integral to the process of styling any website element. But, as there are many selector types and rules that you can apply to them, we decided to make a detailed CSS selector overview. We advise you to read this section carefully, even multiple times, to understand all the nuances of CSS selector creation. We have also covered how you can inspect your website, which is the prerequisite for creating CSS code.

To figure out the proper CSS selector which you are going to use to style a specific HTML element on your website, you will need to know how to inspect it first. This is done by opening your website in a preferred browser and right-clicking somewhere on the page, ideally on the element you wish to style further.

This will open the developer tools of your current browser and the Elements tab active on the HTML element you right-clicked previously.

From there, you can navigate through the HTML structure of the page to find the perfect CSS selector. As you go through the HTML structure, the part of the code that you have positioned yourself on or hovered over it will be highlighted on the screen as a visual aid in the search for the most suitable CSS selector.

To help you further with this task, we will show you a brief list of selector types you can use.

The easiest selector that you can use is the so-called type selector. This means using the tag of an exact HTML element as a CSS selector. To clarify, if you find an HTML element in the code of your page, either in the form <element></element> or simply <element>, you would only use the element part, without surrounding signs. Examples include div, h1, p, span, a, li, and others.

Following the type selectors, the CSS selectors that are often used also are classes and IDs. These can be found as attributes of HTML elements within the page’s HTML markup. Both are used to target specific HTML elements. The difference is that the ID attribute is unique and is used to target the specific HTML element that has it, while CSS classes are used to select an array of HTML elements that all share that class attribute.

Therefore, an HTML element can have multiple classes, each used to add a different CSS ruleset to the array of elements that hold it, but only a single ID, for adding specific CSS rules that apply to that element only. The name of the ID and class(es) can be read within the markup, after the id=” and class=” parts of the HTML code. Then, to target a specific element, use the # sign for the ID and the dot sign(.) for the class(es) followed by the name of that ID or class, respectively.

Example:

This code shows an empty div element that has the ID of unique and two CSS classes called custom-item and info.

<div id=”unique” class=”custom-item info”></div>

To target this element using its ID, use #unique as the CSS selector, while if you want to target it using its classes, use either .custom-item or .info as a CSS selector. Furthermore, you could also use both classes as a single selector in the form .custom-item.info, which is a selector of higher specificity than using either of the singular class selectors. However, we will discuss the topic of specificity of CSS selectors later on.

Additionally, we will mention the so-called universal selector, which can be used to target all HTML elements of any type. It is denoted by an asterisk(*).

Following these selector types, we go into ones that are slightly more complicated. The attribute selectors represent an array of arrays of possible selectors that target HTML elements based on the existence or value of specific CSS attributes. As these selectors are quite advanced, we advise reviewing the official MDN documentation for specific examples of attribute selectors.

We will also mention the pseudo-class selectors, which target a specific state of an HTML element or a group of elements. They are denoted by a colon(:) followed by name of that state. The most known examples are the :link, :visited, :hover, and :active states of a link element. Additionally, there are also pseudo-element selectors, which let you style a specific part of the select HTML element. They are denoted by a double colon(::), followed by the name of the specific part of the element. The most commonly used are the ::before and ::after, which allow you to insert a piece of content inside the HTML of your page, directly before or after a specific HTML element, by assigning a value to the content property within the declaration block.

Before we conclude this section, there is another type of CSS selectors we must discuss –combinators. These represent the rules that you can apply to 2 CSS selectors in general to make a new, more precise CSS selector. With these selectors, you can target only specific CSS elements that satisfy a certain condition. There are 4 subtypes: descendant, child, adjacent sibling, and general sibling combinator. We will cover them briefly below.

The descendant combinator, denoted by a single blank space( ), allows you to target all HTML elements that match the second selector as long as they are contained within the HTML markup of the element that is matched by the first selector. They can be contained within the HTML markup on any level, i.e. a child of the first selector, child’s child, child’s child’s child, and so forth.

– CSS rule syntax:

selector1 selector2 {
/* property declarations go here*/
}

The child combinator, denoted by the more than sign(>), allows you to target all HTML elements that match the second selector which is the child of the HTML element that matches the first selector. Meaning, they are located directly below the first selector in the HTML markup.

– CSS rule syntax:

selector1 > selector2 {
/* property declarations go here*/
}

The adjacent sibling combinator, denoted by the plus sign(+), allows you to target all HTML elements that match the second selector, as long as it is placed directly after the first selector in the HTML markup of the web page and both are children of the same, containing HTML element.

– CSS rule syntax:

selector1 + selector2 {
/* property declarations go here*/
}

The general sibling combinator, denoted by the tilde sign(~), allows you to target all HTML elements that match the second selector that is the sibling of the first selector, while both of them being a descendant of a common parent HTML element.

– CSS rule syntax:

selector1 ~ selector2 {
/* property declarations go here*/
}

With that being said, there are two additional things we will mention regarding the creation of complex CSS selectors. First, all four combinators can be applied multiple times to create very specific CSS selectors. In doing so, all sub-selectors can be of any CSS selector type we previously discussed. We will touch on this a bit more in the section on specificity.

Example:

.wrapper > div + h2 > a[itemprop=”url”]::before{
/* property declarations go here*/
}

Finally, if you want to apply the same set of CSS rules to 2 or more separate CSS selectors, there is no need to apply it separately, creating redundant code. In those cases, you can group them using the comma sign(,) and insert the rules with a single declaration block. That way, the rules will be applied to all CSS selectors with a single code block.

Example:

selector1, selector2, …, selectorN {
/* property declarations go here*/
}

This concludes our section on CSS selectors. And, while CSS properties and their potential values are equally important for creating CSS code, they are vastly more numerous compared to the list of selectors we outlined above. As such, we can’t possibly cover them all in a single article. Instead, we suggest reviewing the CSS properties index on the MDN Web Docs website for more info on specific CSS properties you might need. In the remaining sections of this article, we will cover some of the more advanced CSS rules and concepts, as well as how you can add CSS code in WordPress once you create it. Having said that, let us proceed.

How to Add CSS In WordPress

In the previous sections of the article, you have learned how CSS works and the basics of coding in CSS. As you get more acquainted with intermediate and advanced CSS properties and selectors, the range of HTML elements on your website which you could style will grow. But, to make full use of this knowledge, you also need to know where you can place the CSS code once you create it so that it affects the styling of your website. This is what we will be covering in this section.

The default location which WordPress users can use to store created CSS code is the WordPress Theme Customizer, i.e. in the Appearance > Customize > Additional CSS section. You can navigate to Appearance > Customize > Additional CSS, insert the CSS code you created and press the “Publish” button to save it.

As you can see, we have inserted a comment line above the example code, denoted by the /* … */ syntax. Adding comments to your code is a generally good principle that improves the readability of the code, especially if it is well-structured.

For those whowant to know more, the CSS inserted this way is placed directly inside the <style> section of the <head> tag of your web page, with the ID of wp-custom-css. This can be ascertained by inspecting the website and navigating up the HTML markup to the <head> tag, which is near the beginning of the markup.

This way of inserting CSS code inside the HTML markup, i.e. inside the <head> tag by using the style section, is called internal CSS.

But, there is another way that is currently better accepted within the coding community, and that is placing the created CSS code inside a separate file, i.e. css stylesheet, which is then uploaded to the server and referenced, externally, using the <link> element that is placed within the <head> tag of your web page. This way of inserting CSS code inside the HTML markup is called external CSS. In WordPress, the referencing part of this process is done by enqueueing the uploaded stylesheet.

This might seem very complicated to the average WordPress user. Nevertheless, there is no reason to worry, as there are several methods that you can utilize. These include placing the created CSS code inside a CSS plugin or the style.css file of your child theme. In that case, the technical part of the process is already done by your plugin or theme authors, respectively, so you have nothing to worry about. To learn more about how you can insert your CSS code inside a CSS plugin or style.css file, we suggest perusing our article on adding custom CSS.

Finally, advanced WordPress users can opt to upload their CSS stylesheet to the server and enqueue it using the wp_enqueue_style() function. To learn more on how this is done, we suggest reading our article on enqueuing scripts and stylesheets.

CSS Inheritance And Specificity

Having gone over how CSS code is created and added to WordPress, there are still two important aspects of CSS code that must be discussed – the inheritance and specificity of style rules. If you ever wondered why your styles were applying to some inner elements as well even though you have created them for outer ones only or why some of your styles aren’t applying at all, understanding these concepts might answer your questions. We will warn you, however, that these concepts are intended for intermediate and advanced WordPress users, so additional research might be needed to fully grasp them, as well as reviewing this section several times. Let us begin.

The inheritance concept in CSS simply states that some properties and their values, which are applied to a parent element, can be inherited by their child elements. Meaning, if not directly specified otherwise by CSS rules targeting child elements only, the child elements will use the same CSS rules by default. Of course, this parent styling code might be coming from your plugin or theme stylesheets, or even from some CSS code you have inserted previously into your WordPress website.

Let us illustrate this concept with a simple example. If you were to use the following code:

body {
color: red;
}

to set the color of the whole <body> tag to red, the paragraphs within the <body> tag will inherit this property, unless other conflicting styling rules are set for that paragraph element.

Furthermore, the CSS declaration which was inherited can be seen by inspecting the paragraph element, after scrolling through the Styles tab in the right section of the developer tools. For the Chrome browser, the inherited styles will have a label “Inherited from”, followed by the CSS selector of the HTML element which contains those styles.

But, in the case of conflicting styles set for various HTML elements, this might not be true. The same could be said if you were to try to apply the following code:

body {
color: red;
}
p {
color: green;
}

As a result of this code, the paragraph would be colored green, unless the website contains other CSS rules of higher specificity. Meaning, even such a simple example requires a deeper understanding of both the inheritance and specificity to be able to figure out what will be the resulting style of a specific element. As such, we strongly suggest rereading this example after thoroughly reading the specificity subsection below.

Having said that, the inheritance principle only applies to some properties and their respective values, as we have stated above previously. The easiest way to figure whether a certain property you wish to use in your CSS code can be inherited is to investigate the Formal definition section for that property on MDN. The answer will be found next to the Inherited keyword within that section.

Example:

The color property is inherited, which can be seen by navigating to the related Formal definition anchor link for the color property on MDN.

By now you understand why some CSS rules are applied to your items by default, i.e. without any explicit CSS code that targets them.

Additionally, four property values allow you to control the inheritance concept. These are inherit, initial, unset and revert.

The specificity concept is simply a way how browsers determine which CSS rules get applied and which don’t. More specifically, in the case of multiple CSS rules that target the same HTML element, the CSS rule that gets applied is the one of the highest specificity. For that process, CSS selectors are sorted into four categories, each with a different specificity measure attached to it. More precisely, they are sorted into thousands (specificity of 1000), hundreds (specificity of 0100), tens (specificity of 0010), and ones (specificity of 0001).

The remaining selectors (the universal selector, the combinators, and the negation pseudo-class selector) are excluded from this categorization and have no impact on specificity calculation.

Examples of specificity calculation:

For the purposes of calculation, we have excluded the leading zeros.

Now that we understand how the specificity of a complex CSS selector is measured, let us explain how the browser decides which complex CSS selector takes precedence. While it is true that one with the higher specificity is used, simply comparing the total specificity sums is oversimplifying the process.

Instead, the total specificity sums for two complex CSS selectors are broken into partial sums for thousands, hundreds, tens, and ones, respectively. Then, the respective partial sums are compared, starting from the ones of the highest order (thousands) and moving to the ones of the lowest order (ones), if necessary. Lower-tier sums are compared in case of a tie while comparing higher-tier sums.

This means that hundreds are only compared if there was a tie when comparing thousands, tens are compared if there was a tie when comparing hundreds, and ones are compared if there was a tie when comparing tens. This avoids creating needlessly long CSS selectors to overcome existing specificity levels of CSS code which is already found on the website, and that in turn leads to a lot of unnecessary and difficult to read code.

We will examine what happens in the case of CSS selectors which have the same specificity across all levels a bit later on. For now, we will mention that there is a way in CSS to override the existing specificity levels, by making a property and its value, i.e. a declaration, be of the highest possible specificity. This is done by adding the !important part after the value that was used and before the semi-colon that ends the CSS declaration. Meaning, the CSS declaration is written in the following form:

property: value !important;

with both the property and value being properly replaced.

And, while this feature might seem useful, it is a piece of CSS code that should be used very sparingly, if ever. The reason is that by hard-coding a CSS rule, which is what this piece of code essentially does, you make it very hard to debug a potential styling issue which may arise in the future because of it. As such, it is generally advised to avoid using this feature as much as possible or to use it only if there is no other way of applying your desired styling.

Let us briefly explain what happens in cases of CSS rules with equal CSS specificity, which we purposefully left out above. Assuming that you haven’t used !important in either code, the CSS rule that gets loaded last is that which gets executed, i.e. applied to the website. Of course, this implies a much deeper question regarding the order in which WordPress files are loaded. But, as this is a very advanced subject which goes well beyond the scope of this article, we will disregard it. Instead, we will focus on a more simplified case – having your CSS rules at a single place, one below the other, as mentioned in the section on adding CSS code to WordPress. Meaning, your code would be placed similarly to the pseudo-example shown below.

css-selector1 {
/* some property declarations go here*/
font-size: 16px;
}
css-selector2 {
/* some property declarations go here*/
font-size: 2em;
}
…
css-selectorN {
/* some property declarations go here*/
font-size: 40px;
}

In the above example, if all the CSS selectors are of the same specificity, the property which gets repeated across all or some CSS rules will use the value that was last specified. This is because as every CSS rule of equal specificity gets loaded, the older declarations get overridden by newer ones, until the last declaration, which then becomes valid. For our example, it means that, in the end, the font-size property will have a value of 40px. This concept is called cascading styles and it is an essential property of CSS. It is also one of the reasons why our inheritance example worked. Having said that, we conclude this section.

Some Advanced CSS Rules

We will now briefly cover some of the more advanced rules we previously foreshadowed – the at-rules. At-rules represent CSS statements for instructing CSS on how to behave. They come in two general forms – regular and nested, with their general syntax outlined below.

/* Structure of regular at-rules. */
@IDENTIFIER (RULE);
/* Structure of nested at-rules. */
@IDENTIFIER {
/* Nested Statements */
}

However, since there are quite a few at-rules, each with an elaborate syntax and use, in this article we will only focus on the two nested at-rules – @media and @keyframes. The former is used to apply certain CSS styles on a web document which matches a certain list of media queries regarding the device, browser, and environment a user is using to review your website.

Using the @media rules you can manipulate the various aspects of your website’s responsive design. As for @keyframes, it is used to define custom animation sequences that can be used alongside other advanced CSS rules to add animation to your website.

The @media can be used regularly, as a singular expression block, using the following syntax:

@media <a-list-of-media-queries> {
<group-rule-body>
}

or as a nested rule inside another conditional at-rule: @supports or @media. The syntax in the latter case is the following:

@supports <supports-condition> {
@media <a-list-of-media-queries> {
<group-rule-body>
}
}

Of course, all the parts of the code which are placed inside the less than(<) and more than(>) signs follow a rather elaborate syntax. As this is rather hard to explain in theory, we will leave you with a few examples which will explain the syntax properly. Note that this code shouldn’t be copy-pasted, as it is meant to illustrate how the @media rule is used.

Examples:

@media all {
body {
background: blue;
} 
}

@media only screen and (min-width: 600px) {
.content-wrapper {
padding: 1rem;
}
}

@supports (display: grid) {
@media only screen and (min-width: 30em) and (orientation: landscape) { 
.test {
display: grid;
}
}
}

Furthermore, the @media rule is nested inside a @supports rule, ensuring that this code is only applied to browsers that support the display: grid declaration. The browser compatibility of a specific property can be seen within the Browser compatibility subsection on the specific property’s MDN page.

The @keyframes at-rule allows you to control the intermediate steps of a custom animation sequence by setting styling declarations for each of those steps. Then, they are used in conjunction with the animation CSS property to create complex animation patterns. As such, it gives slightly more control than using the transition CSS property for defining animations. The syntax used follows:

@keyframes <identifier-name> {
<keyframe-block-list>
}

with both the identifier and keyframe block list parts properly replaced. As for steps it uses, it accepts the percentage notation, as well as the

from { … }
to { … }

notation, with the former being interpreted as 0%, and the latter as 100%. These two notations will be clear from the examples we have included below. And, additionally, this at-rule is an exception to the !important property we previously discussed. More precisely, any declarations within the @keyframes declaration block that are superseded by !important aren’t interpreted as of highest importance. Instead, they are ignored.

With that being said, let us observe the examples we have prepared for this article, which will make the creation of @keyframes rules a bit more clear.

Examples:

@keyframes moving-block {
0% { top: 0px; left: 0px; }
25% { top: 0px; left: 200px; }
50% { top: 200px; left: 200px; }
75% { top: 200px; left: 0px; }
100% { top: 0px; left: 0px; }
}

@keyframes typing-animation {
from { width: 0; }
50% { width: 100%; }
to { width: 0; }
}

The second example was taken from our article on creating custom typeout effects, which we advise you to consult for a more detailed overview of CSS code and CSS animations in particular. With that, we conclude this section on advanced CSS rules.

Learning More About CSS

There is a lot of resources available online which you can use to learn more about CSS or expand the knowledge you have gained reading this article. As mentioned throughout the article, we strongly advise consulting the MDN web documentation from Mozilla.

Apart from it, we advise you to examine the documentation and courses on W3Schools and especially the part on CSS, as well as specific CSS guides and articles on CSS Tricks. But, generally, as there is an abundance of resources available, a simple Google search will often lead you to new and helpful resources which you can use to learn more about CSS.

Final Thoughts

Using CSS code, you can make all kinds of styling changes to your WordPress website and further improve the parts which might not be covered by the options of your theme and plugins. However, doing so often requires a basic to intermediate understanding of CSS code, which is why most WordPress users shy away from it.

However, with this comprehensive overview of CSS, we hope this will no longer be the case with you. In this article, we have discussed various topics regarding the creation of CSS code, how it can be inserted into WordPress, as well as some topics which go into its more advanced principles. These include an overview of CSS selectors and general CSS syntax, website inspection using developer tools, as well as an overview of inheritance, specificity, and cascading principles of CSS which are essential for troubleshooting CSS-related issues on the website.

We have also covered some of the more advanced CSS rules which are well-suited for aspiring WordPress developers. This article is recommended reading for all WordPress users, since it explains the core of CSS coding, while also providing some insight on the advanced functions of CSS through examples and additional research material. We whole-heartedly advise bookmarking this article and rereading it, or its specific parts, whenever you need help creating some CSS or are in doubt and looking for additional CSS-related info.