{"id":31213,"date":"2021-10-27T15:00:18","date_gmt":"2021-10-27T13:00:18","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=31213"},"modified":"2021-11-03T12:03:59","modified_gmt":"2021-11-03T11:03:59","slug":"wordpress-css-guide","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-css-guide\/","title":{"rendered":"Everything You Need to Know About CSS and WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]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 <strong>make functional and creative websites using WordPress<\/strong> themes and plugins, while having <strong>limited coding knowledge<\/strong> 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, <strong>you need a bit of CSS knowledge.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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<strong> deep understanding of how CSS is created<\/strong> and will be able to apply it in order to style your website accordingly. With that being said, let us begin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we\u2019ll be covering:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-css-and-when-to-use-it\">What Is CSS And When to Use It<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-css-works\">How CSS Works<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-css-in-wordpress\">How to Add CSS In WordPress<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#css-inheritance-and-specificity\">CSS Inheritance And Specificity<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#some-advanced-css-rules\">Some Advanced CSS Rules<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#learning-more-about-css\">Learning More About CSS<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-css-and-when-to-use-it\"><\/a>What Is CSS And When to Use It<\/h2>\n<p>[\/vc_column_text][vc_column_text]Before we delve into the coding examples, let us clarify what CSS is. First of all, it is <strong>one of the languages developers use to create WordPress themes and plugins<\/strong>, alongside HTML, PHP, and JS. While the other three are used for defining website markup, server-side and client-side functionalities, <strong>CSS is used for design purposes<\/strong>. It is the reason why you don\u2019t see pages like these anymore:[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Plain-HTML.jpg\" class=\"attachment-full size-full\" alt=\"Plain HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Plain-HTML.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Plain-HTML-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Plain-HTML-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Plain-HTML-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]More precisely, CSS, or Cascading Style Sheets, is <strong>a language web designers use for styling web pages<\/strong>. It was developed in 1994 by <a href=\"https:\/\/en.wikipedia.org\/wiki\/H%C3%A5kon_Wium_Lie\" target=\"_blank\" rel=\"noopener\">H\u00e5kon Wium Lie<\/a> and is maintained by the <a href=\"https:\/\/www.w3.org\/Style\/CSS\/members.en.php3\" target=\"_blank\" rel=\"noopener\">CSS Working Group<\/a>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But, while the advanced CSS <strong>takes a bit of time to get accustomed to<\/strong>, it doesn\u2019t 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 <a href=\"#basics-of-css\">the basics of CSS<\/a> and some <a href=\"#css-selectors\">CSS selectors<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-css-works\"><\/a>How CSS Works<\/h2>\n<p>[\/vc_column_text][vc_column_text]In this, the main part of our guide, we will discuss <strong>how CSS works<\/strong>, starting from <strong>the basics of syntax<\/strong> to its <strong>more advanced properties<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We begin with the basics.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"basics-of-css\"><\/a>The Basics of CSS<\/h3>\n<p>[\/vc_column_text][vc_column_text]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:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">css-selector {\r\nproperty: value;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]These are the 3 most important parts of every CSS rule in those names. The <strong>CSS selector<\/strong> 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 <strong>property<\/strong> is the aspect of that HTML element (or elements) that you wish to change (e.g. color, padding, margin, etc.), while the <strong>value<\/strong> is what you assign to that property. Together, these two form a <strong>declaration<\/strong>, which is the technical term for the <strong>property: value;<\/strong> part in the example above. Furthermore, <strong>both the colon(:) after the property and the semicolon(;) at the end of the declaration are mandatory<\/strong>, whereas the blank space after the colon is optional and used to make the CSS declaration more readable. For example, the <strong>color: blue;<\/strong> is a declaration in which the blue color is assigned to the color property as its value.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <strong>CSS rule<\/strong>, while the part with the curly brackets and the declaration within is referred to as the declaration block of a said CSS rule.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">h1 {\r\ncolor: #1f1f1f;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/www.w3schools.com\/colors\/colors_picker.asp\" target=\"_blank\" rel=\"noopener\">color codes<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">css-selector {\r\nproperty1: value1;\r\nproperty2: value2;\r\n\u2026\r\npropertyN: valueN;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">h1 {\r\nfont-family: \u201cTimes New Roman\u201d, sans-serif;\r\nfont-size: 35px;\r\nline-height: 1.2em;\r\nfont-weight: 700;\r\ncolor: #1f1f1f;\r\nmargin: 25px 0px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/margin\" target=\"_blank\" rel=\"noopener\">margin property<\/a> 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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/Values_and_units#relative_length_units\" target=\"_blank\" rel=\"noopener\">relative length units<\/a> you can use.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, it is worth noting that, apart from CSS rules and rulesets, there are other types of rules called <strong>at-rules<\/strong> that CSS accepts. As these concepts are slightly more advanced, we will cover them in one of our later sections.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\"><a id=\"css-selectors\"><\/a>CSS Selectors<\/h3>\n<p>[\/vc_column_text][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Inspecting a website<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <strong>opening your website in a preferred browser<\/strong> and <strong>right-clicking<\/strong> somewhere on the page, ideally on the<strong> element you wish to style further.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"555\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspecting-a-Website.jpg\" class=\"attachment-full size-full\" alt=\"Inspecting a Website\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspecting-a-Website.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspecting-a-Website-300x172.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspecting-a-Website-768x440.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspecting-a-Website-620x355.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This will open the developer tools of your current browser and the Elements tab active on the HTML element you right-clicked previously.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"658\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspecting-a-Website-Elements.jpg\" class=\"attachment-full size-full\" alt=\"Inspecting a Website Elements\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspecting-a-Website-Elements.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspecting-a-Website-Elements-300x204.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspecting-a-Website-Elements-768x522.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inspecting-a-Website-Elements-620x421.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]From there, <strong>you can navigate through the HTML structure of the page to find the perfect CSS selector.<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To help you further with this task, we will show you a brief list of selector types you can use.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Basic CSS Selectors<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The easiest selector that you can use is the so-called <strong>type selector<\/strong>. This <strong>means using the tag of an exact HTML element as a CSS selector<\/strong>. To clarify, if you find an HTML element in the code of your page, either in the form &lt;element&gt;&lt;\/element&gt; or simply &lt;element&gt;, you would only use the element part, without surrounding signs.<strong> Examples include div, h1, p, span, a, li, and others.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Following the type selectors, the CSS selectors that are often used also are <strong>classes and IDs<\/strong>. These can be found as attributes of HTML elements within the page\u2019s HTML markup. <strong>Both are used to target specific HTML elements.<\/strong> The difference is that <strong>the ID attribute is unique<\/strong> and is used to target the specific HTML element that has it, while <strong>CSS classes are used to select an array of HTML elements<\/strong> that all share that class attribute.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Therefore, <strong>an HTML element can have multiple classes<\/strong>, each used to add a different CSS ruleset to the array of elements that hold it, but <strong>only a single ID<\/strong>, 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=\u201d and class=\u201d parts of the HTML code. Then, to target a specific element,<strong> use the # sign for the ID and the dot sign(.) for the class(es)<\/strong> followed by the name of that ID or class, respectively.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This code shows an empty div element that has the ID of <strong>unique<\/strong> and two CSS classes called <strong>custom-item<\/strong> and <strong>info<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;div id=\u201dunique\u201d class=\u201dcustom-item info\u201d&gt;&lt;\/div&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To <strong>target this element using its ID, use #unique<\/strong> as the CSS selector, while if you want <strong>to target it using its classes, use either .custom-item or .info<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, we will mention the so-called <strong>universal selector<\/strong>, which can be used to target all HTML elements of any type. It is <strong>denoted by an asterisk(*).<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>More Advanced CSS Selectors<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Following these selector types, we go into ones that are slightly more complicated. The <strong>attribute selectors<\/strong> 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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Attribute_selectors\" target=\"_blank\" rel=\"noopener\">attribute selectors<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will also mention the <strong>pseudo-class selectors<\/strong>, which target a specific state of an HTML element or a group of elements. <strong>They are denoted by a colon(:) followed by name of that state.<\/strong> The most known examples are the <strong>:link, :visited, :hover,<\/strong> and <strong>:active<\/strong> states of a link element. Additionally, there are also <strong>pseudo-element selectors<\/strong>, which let you style a specific part of the select HTML element. <strong>They are denoted by a double colon(::), followed by the name of the specific part of the element.<\/strong> The most commonly used are the<strong> ::before<\/strong> and <strong>::after<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Before we conclude this section, there is another type of CSS selectors we must discuss <strong>\u2013combinators. These represent the rules that you can apply to 2 CSS selectors in general to make a new, more precise CSS selector.<\/strong> With these selectors, you can target only specific CSS elements that satisfy a certain condition. There are 4 subtypes: <strong>descendant, child, adjacent sibling,<\/strong> and <strong>general sibling<\/strong> combinator. We will cover them briefly below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The<strong> descendant combinator, denoted by a single blank space( )<\/strong>, 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\u2019s child, child\u2019s child\u2019s child, and so forth.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<span style=\"font-weight: 400;\">&#8211; CSS rule syntax:<\/span>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">selector1 selector2 {\r\n\/* property declarations go here*\/\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>child combinator, denoted by the more than sign(&gt;)<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]- CSS rule syntax:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">selector1 &gt; selector2 {\r\n\/* property declarations go here*\/\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>adjacent sibling combinator, denoted by the plus sign(+),<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]- CSS rule syntax:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">selector1 + selector2 {\r\n\/* property declarations go here*\/\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>general sibling combinator, denoted by the tilde sign(~)<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]- CSS rule syntax:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">selector1 ~ selector2 {\r\n\/* property declarations go here*\/\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.wrapper &gt; div + h2 &gt; a[itemprop=\u201durl\u201d]::before{\r\n\/* property declarations go here*\/\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, if you want to<strong> apply the same set of CSS rules to 2 or more separate CSS selectors,<\/strong> there is no need to apply it separately, creating redundant code. In those cases, you can <strong>group them using the comma sign(,)<\/strong> and insert the rules with a single declaration block. That way,<strong> the rules will be applied to all CSS selectors with a single code block.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">selector1, selector2, \u2026, selectorN {\r\n\/* property declarations go here*\/\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019t possibly cover them all in a single article. Instead, <strong>we suggest reviewing the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference#index\" target=\"_blank\" rel=\"noopener\">CSS properties index<\/a> on the MDN Web Docs website for more info on specific CSS properties<\/strong> 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-css-in-wordpress\"><\/a>How to Add CSS In WordPress<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The default location which WordPress users can use to<strong> store created CSS code<\/strong> is <a href=\"https:\/\/qodeinteractive.com\/magazine\/ultimate-guide-to-wordpress-theme-customizer\/\">the WordPress Theme Customizer<\/a>, i.e. in the <strong>Appearance &gt; Customize &gt; Additional CSS section.<\/strong> You can <strong>navigate to Appearance &gt; Customize &gt; Additional CSS<\/strong>, insert the CSS code you created and <strong>press the \u201cPublish\u201d button<\/strong> to save it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"597\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Customizer-Additional-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Customizer Additional CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Customizer-Additional-CSS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Customizer-Additional-CSS-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Customizer-Additional-CSS-768x473.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Customizer-Additional-CSS-620x382.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see, we have inserted a comment line above the example code, denoted by the \/* \u2026 *\/ syntax. Adding comments to your code is a generally good principle <strong>that improves the readability of the code<\/strong>, especially if it is well-structured.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For those whowant to know more, the CSS inserted this way is placed <strong>directly inside the &lt;style&gt; section of the &lt;head&gt; tag<\/strong> of your web page, <strong>with the ID of wp-custom-css<\/strong>. This can be ascertained by inspecting the website and navigating up the HTML markup to the &lt;head&gt; tag, which is near the beginning of the markup.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"625\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Customizer-Inspect.jpg\" class=\"attachment-full size-full\" alt=\"Customizer Inspect\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Customizer-Inspect.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Customizer-Inspect-300x193.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Customizer-Inspect-768x495.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Customizer-Inspect-620x400.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]This way of inserting CSS code inside the HTML markup, i.e. inside the &lt;head&gt; tag by using the style section, is called <strong>internal CSS<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But, there is another way that is currently better accepted within the coding community, and that is <strong>placing the created CSS code inside a separate file<\/strong>, i.e. css stylesheet, which is then uploaded to the server and referenced, externally, using the &lt;link&gt; element that is placed within the &lt;head&gt; tag of your web page. This way of inserting CSS code inside the HTML markup is called <strong>external CSS<\/strong>. In WordPress, the referencing part of this process is done by enqueueing the uploaded stylesheet.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <strong>placing the created CSS code inside a CSS plugin or the style.css file of your child theme.<\/strong> 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<strong> insert your CSS code inside a CSS plugin or style.css file<\/strong>, we suggest perusing our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-add-custom-css\/\">adding custom CSS<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, advanced WordPress users can opt to <strong>upload their CSS stylesheet to the server and enqueue it<\/strong> using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/wp_enqueue_style\/\" target=\"_blank\" rel=\"noopener\">wp_enqueue_style()<\/a> function. To learn more on how this is done, we suggest reading our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-enqueue-scripts-wordpress\/\">enqueuing scripts and stylesheets<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"css-inheritance-and-specificity\"><\/a>CSS Inheritance And Specificity<\/h2>\n<p>[\/vc_column_text][vc_column_text]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 \u2013 the <strong>inheritance and specificity of style rules<\/strong>. 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\u2019t 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.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Inheritance<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The inheritance concept in CSS simply states that <strong>some properties and their values, which are applied to a parent element, can be inherited by their child elements<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Let us illustrate this concept with a simple example. If you were to use the following code:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">body {\r\ncolor: red;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]to set the color of the whole &lt;body&gt; tag to red, the paragraphs within the &lt;body&gt; tag will inherit this property, unless other conflicting styling rules are set for that paragraph element.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Furthermore, <strong>the CSS declaration which was inherited can be seen by inspecting the paragraph element<\/strong>, 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 \u201cInherited from\u201d, followed by the CSS selector of the HTML element which contains those styles.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"649\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-1.jpg\" class=\"attachment-full size-full\" alt=\"Inheritance\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-1.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-1-300x201.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-1-768x514.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-1-620x415.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-2.jpg\" class=\"attachment-full size-full\" alt=\"Inheritance\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-2-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]But, <strong>in the case of conflicting styles set for various HTML elements, this might not be true<\/strong>. The same could be said if you were to try to apply the following code:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">body {\r\ncolor: red;\r\n}\r\np {\r\ncolor: green;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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<strong> investigate the Formal definition section for that property on MDN<\/strong>. The answer will be found next to the Inherited keyword within that section.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Example:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>color<\/strong> property is inherited, which can be seen by navigating to the related <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/color#formal_definition\" target=\"_blank\" rel=\"noopener\">Formal definition anchor link<\/a> for the color property on MDN.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"640\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-Formal-Definition.jpg\" class=\"attachment-full size-full\" alt=\"Inheritance Formal Definition\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-Formal-Definition.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-Formal-Definition-300x198.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-Formal-Definition-768x507.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Inheritance-Formal-Definition-620x409.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Additionally, four property values allow you to control the inheritance concept. These are<strong> inherit, initial, unset<\/strong> and <strong>revert<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">The <strong>inherit<\/strong> value sets the property value for the selected child element to be the same as it is on his parent element explicitly.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">The <strong>initial<\/strong> value sets the property value of your selected element to its initial state. The initial state of a specific property can also be seen in the Formal definition section on MDN, next to the Initial value keywords. For some properties, their initial value might be precisely stated, while for others, it might vary based on the browser (see screenshot above).<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">The <strong>unset<\/strong> value resets the inheritance back to its natural value, i.e. if the property is inheritable, it behaves as inherit, otherwise, it behaves as initial.<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">The <strong>revert<\/strong> value reverts the property to the default styling of the current browser.<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Specificity<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The specificity concept is simply a way how browsers determine which CSS rules get applied and which don\u2019t. More specifically, in the case of multiple CSS rules that target the same HTML element,<strong> the CSS rule that gets applied is the one of the highest specificity<\/strong>. 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 <strong>thousands<\/strong> (specificity of 1000), <strong>hundreds<\/strong> (specificity of 0100), <strong>tens<\/strong> (specificity of 0010), and <strong>ones<\/strong> (specificity of 0001).[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Thousands<\/strong> \u2013 CSS declarations that are inserted directly inside HTML markup using the style property of an HTML element, i.e. so-called <strong>inline CSS<\/strong>,<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Hundreds \u2013 ID selectors,<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Tens \u2013 class selectors, attribute selectors, pseudo-class selectors except the negation pseudo-class selector<\/strong> (:not) and<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Ones \u2013 type selectors<\/strong> (i.e. HTML element tags) and <strong>pseudo-element selectors.<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>Examples of specificity calculation:<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>#content<\/strong> has the specificity of <strong>100<\/strong> (one ID selector),<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>ul li<\/strong> has the specificity of <strong>2<\/strong> (two elements, 1+1=2),<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>div.summary &gt; p::first-line<\/strong> has the specificity of <strong>13<\/strong> (in total: 2 elements, one pseudo-element and one class, in order of selectors, 1+10+1+1=13) and<\/span>        <\/div>\n            <\/li>\n<\/ul><ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>.wrapper &gt; div + h2 &gt; a[itemprop=\u201durl\u201d]::before<\/strong> has the specificity of <strong>24<\/strong> (in total: 3 elements, one class, one attribute and one pseudo-element, in order of selectors: 10 + 1+1+1+10+1=24)<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the purposes of calculation, we have excluded the leading zeros.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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. [\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <strong>!important<\/strong> 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:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">property: value !important;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]with both the property and value being properly replaced.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And, while this feature might seem useful,<strong> it is a piece of CSS code that should be used very sparingly<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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\u2019t used <strong>!important<\/strong> 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 \u2013 having your CSS rules at a single place, one below the other, as mentioned in the section on <a href=\"#how-to-add-css-in-wordpress\">adding CSS code to WordPress<\/a>. Meaning, your code would be placed similarly to the pseudo-example shown below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">css-selector1 {\r\n\/* some property declarations go here*\/\r\nfont-size: 16px;\r\n}\r\ncss-selector2 {\r\n\/* some property declarations go here*\/\r\nfont-size: 2em;\r\n}\r\n\u2026\r\ncss-selectorN {\r\n\/* some property declarations go here*\/\r\nfont-size: 40px;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the above example,<strong> 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<\/strong>. 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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/CSS\/Building_blocks\/Cascade_and_inheritance\" target=\"_blank\" rel=\"noopener\">cascading styles<\/a> 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"some-advanced-css-rules\"><\/a>Some Advanced CSS Rules<\/h2>\n<p>[\/vc_column_text][vc_column_text]We will now briefly cover some of the more advanced rules we previously foreshadowed \u2013 the <strong>at-rules<\/strong>. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/At-rule\" target=\"_blank\" rel=\"noopener\">At-rules<\/a> represent CSS statements for instructing CSS on how to behave. They come in two general forms \u2013 <strong>regular<\/strong> and <strong>nested<\/strong>, with their general syntax outlined below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/* Structure of regular at-rules. *\/\r\n@IDENTIFIER (RULE);\r\n\/* Structure of nested at-rules. *\/\r\n@IDENTIFIER {\r\n\/* Nested Statements *\/\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 &#8211; <strong>@media<\/strong> and <strong>@keyframes<\/strong>. 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Using the @media rules you can manipulate the various aspects of your website\u2019s 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@media\" target=\"_blank\" rel=\"noopener\">@media<\/a> can be used regularly, as a singular expression block, using the following syntax:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">@media &lt;a-list-of-media-queries&gt; {\r\n&lt;group-rule-body&gt;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]or as a nested rule inside another conditional at-rule: @supports or @media. The syntax in the latter case is the following:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">@supports &lt;supports-condition&gt; {\r\n@media &lt;a-list-of-media-queries&gt; {\r\n&lt;group-rule-body&gt;\r\n}\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, all the parts of the code which are placed inside the less than(&lt;) and more than(&gt;) 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\u2019t be copy-pasted, as it is meant to illustrate how the @media rule is used.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Examples:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Setting the background of the body tag to blue for all media types and all screen sizes<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">@media all {\r\nbody {\r\nbackground: blue;\r\n} \r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Setting the padding for a specific HTML element (.content-wrapper) only for screen sizes which are larger than or equal to 600px<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">@media only screen and (min-width: 600px) {\r\n.content-wrapper {\r\npadding: 1rem;\r\n}\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><strong>Setting the display of a specific HTML element (.test) to grid for screen sizes which are more than or equal to 30em and for landscape screen orientation only<\/strong><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">@supports (display: grid) {\r\n@media only screen and (min-width: 30em) and (orientation: landscape) { \r\n.test {\r\ndisplay: grid;\r\n}\r\n}\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Furthermore, <strong>the @media rule is nested inside a @supports rule<\/strong>, ensuring that this code is only applied to <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/grid#browser_compatibility\" target=\"_blank\" rel=\"noopener\">browsers that support the display: grid declaration<\/a>. The browser compatibility of a specific property can be seen within the Browser compatibility subsection on the specific property\u2019s MDN page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"540\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Browser-Compatibility.jpg\" class=\"attachment-full size-full\" alt=\"Browser Compatibility\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Browser-Compatibility.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Browser-Compatibility-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Browser-Compatibility-768x428.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/10\/Browser-Compatibility-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@keyframes\" target=\"_blank\" rel=\"noopener\">@keyframes<\/a> 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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/animation\" target=\"_blank\" rel=\"noopener\">animation<\/a> CSS property to create complex animation patterns. As such, it gives slightly more control than using the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/transition\" target=\"_blank\" rel=\"noopener\">transition<\/a> CSS property for defining animations. The syntax used follows:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">@keyframes &lt;identifier-name&gt; {\r\n&lt;keyframe-block-list&gt;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">from { \u2026 }\r\nto { \u2026 }<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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, <strong>any declarations within the @keyframes declaration block that are superseded by !important<\/strong> aren\u2019t interpreted as of highest importance. Instead, they <strong>are ignored.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Examples:[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">A @keyframes rule which moves an HTML element along side a 200px square in a clockwise direction<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">@keyframes moving-block {\r\n0% { top: 0px; left: 0px; }\r\n25% { top: 0px; left: 200px; }\r\n50% { top: 200px; left: 200px; }\r\n75% { top: 200px; left: 0px; }\r\n100% { top: 0px; left: 0px; }\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\">A @keyframes rule which expands an HTML element to its full width and shrinks it back<\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">@keyframes typing-animation {\r\nfrom { width: 0; }\r\n50% { width: 100%; }\r\nto { width: 0; }\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The second example was taken from our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/create-custom-typeout-effect\/\">creating custom typeout effects<\/a>, 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"learning-more-about-css\"><\/a>Learning More About CSS<\/h2>\n<p>[\/vc_column_text][vc_column_text]There is <strong>a lot of resources available online<\/strong> 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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\" target=\"_blank\" rel=\"noopener\">MDN web documentation from Mozilla<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Apart from it, we advise you to examine the documentation and courses on <a href=\"https:\/\/www.w3schools.com\/\" target=\"_blank\" rel=\"noopener\">W3Schools<\/a> and especially <a href=\"https:\/\/www.w3schools.com\/css\/default.asp\" target=\"_blank\" rel=\"noopener\">the part on CSS<\/a>, as well as specific <a href=\"https:\/\/css-tricks.com\/guides\/\" target=\"_blank\" rel=\"noopener\">CSS guides<\/a> and articles on <a href=\"https:\/\/css-tricks.com\/\" target=\"_blank\" rel=\"noopener\">CSS Tricks<\/a>. 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.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>The nuts and bolts of WordPress CSS at your fingertips! Check out our handy guide to cascading style sheets in WordPress &#8211; all you need to know in one article.<\/p>\n","protected":false},"author":11229,"featured_media":31243,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[20,135,4,13],"class_list":["post-31213","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-css","tag-customization","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/31213","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=31213"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/31213\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/31243"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=31213"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=31213"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=31213"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}