Cascading Style Sheets (CSS) is one of the most important languages in web design. Making CSS tweaks to your site lets you customize its appearance, layout, fonts, colors, and more. CSS offers more complete control over the way your site looks than your theme does \u2013 and it isn\u2019t that hard to work with.<\/p>\n<\/div><\/div>\n
If you\u2019re a complete newbie to CSS, you’ve come to the right place. In this tutorial you will learn the following \ud83d\udcda:<\/p>\n
- \n
- What CSS is (and how it works)<\/a><\/li>\n
- Where to add custom CSS in WordPress<\/a><\/li>\n
- How to start customizing your WordPress site with CSS<\/a><\/li>\n
- Where to learn more about CSS<\/a><\/li>\n<\/ul>\n
Let\u2019s jump right in!
\n<\/div>\nWhat CSS is (and how it works) \ud83e\udd14<\/h2>\n
First, let\u2019s back up a little and talk about Hypertext Markup Language (HTML)<\/a>. This is the primary language used to create your WordPress blog<\/a> or website, and is descriptive in nature. HTML code tells web browsers about the various elements of your content. For example, it indicates which text is part of a header, and which is part of a body paragraph.<\/p>\n
If you\u2019ve ever checked out the Text<\/em> tab in the WordPress editor, you\u2019ll have seen HTML at work:<\/p>\n
![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2018\/03\/wordpress-editor-text.png\")
<\/p>\nYou can also use HTML to dictate the style of your website’s in some ways. However, this is an unwieldy way to get the job done. For example, if you wanted to make all of your post titles purple, you would need to add HTML code containing the same instruction to every heading individually.<\/p>\n
That\u2019s where Cascading Style Sheets<\/a> (CSS) comes to the rescue. This language is used to dictate how HTML elements appear \u2013 including their sizes, layouts, colors, fonts, and so on. For example, you can change the color of all the headings on your site using a few lines of code with CSS, without altering your content’s HTML.<\/p>\n
Keeping structure and style separate this way gives you complete control over the appearance of your site and lets you easily make changes whenever you want. It also means that you can start using some basic custom CSS without knowing any HTML (although understanding the basics of HTML does help speed up the process).
\n<\/div>\nWhere to add custom CSS in WordPress \ud83c\udf0d<\/h2>\n
While you can add CSS directly to your WordPress theme’s style sheet<\/a>, we don’t recommend this method<\/strong> because it’s easy to make mistakes and any changes you make will get overwritten when you update your theme (unless you use a child theme<\/em>).<\/em><\/p>\n
Fortunately, there\u2019s an easier solution. To add CSS to WordPress, you just need to:<\/p>\n
- \n
- Navigate to Appearance > Customize<\/em> in your WordPress dashboard to open the WordPress Customizer<\/li>\n
- Select the Additional CSS<\/em> option from the menu on the left in the WordPress Customizer interface<\/a>:<\/li>\n<\/ul>\n
![\"The](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2018\/03\/wordpress-customizer-additional-css.png\")
<\/p>\nThe (currently) empty editor in this area enables you to type in lines of CSS code, without having to sort through the existing style sheet. You can add as much CSS here as you want \u2013 just include each new snippet on its own line. Plus, you can see your changes take effect in the live preview. That way, you\u2019ll know whether they look right before<\/em> publishing them to your site.<\/p>\n
Additionally, this editor will help you “validate” your CSS, which is a fancy way of saying that it will warn you if you make any obvious mistakes.<\/p>\n
If you\u2019re getting curious about what kinds of CSS tweaks you can make here, don\u2019t worry. Stay on this page in your dashboard, and we\u2019ll explore a few ways to start customizing your site\u2019s appearance with CSS.
\n<\/div>\nHow to start customizing your WordPress site with CSS \ud83d\udc31\u200d\ud83d\udcbb<\/h2>\n
As we mentioned earlier, you can change just about any aspect of your site\u2019s appearance using CSS. The sky truly is the limit here. For now, however, we\u2019ll keep things simple, and look at some basic CSS tweaks you can make.<\/p>\n
- \n
- Customize text color with CSS<\/a><\/li>\n
- Customize font family and size with CSS<\/a><\/li>\n
- Customize WordPress sidebar with CSS<\/a><\/li>\n<\/ul>\n
<\/div>\nCustomize text color with CSS<\/h3>\n
We already mentioned altering text color, so let\u2019s start there. If you really want your WordPress posts to grab your visitors\u2019 attention, you can experiment with changing the color for each post\u2019s title. This is what a basic post looks like in the Twenty Seventeen WordPress theme<\/a>:<\/p>\n
![\"A](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2018\/03\/css-basic-post.png\")
<\/p>\nNow, add this code to the Additional CSS<\/em> box in the Customizer:<\/p>\n
h1 {
\ncolor: purple;
\n}<\/code><\/p>\nAs you can see, the post title\u2019s color has changed from black to purple:<\/p>\n
![\"Changing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2018\/03\/css-header-color.png\")
<\/p>\nThis same tweak will also be applied to every other post on your site. Instead of simply naming a color, you can also use hex codes<\/a> to get the shade just right. Simply replace purple<\/em> with #9C33FF<\/em> (or whatever color you want to use). When you\u2019re happy with the new hue, select Publish<\/em> at the top of the screen to make your changes live.
\n<\/div>\nCustomize font family and size with CSS<\/h3>\n
Next, what if you want to make some alterations to the body text? Let\u2019s edit its font family and size<\/a>, by adding this code on a new line:<\/p>\n
p {
\nfont-family: Georgia;
\nfont-size: 20px;
\n}<\/code><\/p>\nAgain, you can see the results right away in the Customizer:<\/p>\n
![\"Changing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2018\/03\/css-font-change.png\")
\n<\/div>\nCustomize WordPress sidebar with CSS<\/h3>\n
Finally, let\u2019s make the sidebar stand out a little more, by adding a light blue background and a little padding. On a new line, paste in this CSS:<\/p>\n
.widget {
\nbackground: #B9EBFA;
\npadding: 25px;
\n}<\/code><\/p>\nThis places a simple background behind your sidebar:<\/p>\n
![\"Changing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2018\/03\/css-sidebar-color.png\")
<\/p>\nKeep in mind that this code will affect all<\/em> of your widget areas<\/a>, including your footer. You can also make changes to specific widgets<\/a> if you prefer. For example, you could add a background only to the search widget, by replacing
.widget<\/code> in the above code with.widget_search<\/code>:<\/p>\n![\"Editing](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2018\/03\/css-search-box.png\")
<\/p>\nAt this point, you might be starting to grasp how CSS works under the hood. The first line of a CSS snippet specifies which element you\u2019re altering \u2013 such as post titles (h1<\/em>), text contained in paragraphs (p<\/em>), or your widget areas (widget<\/em>). The following lines, enclosed in brackets, contain specific instructions about what should be changed.
\n<\/div>\nWhere to learn more about CSS \ud83e\uddd1\u200d\ud83c\udf93<\/h2>\n
There are plenty of useful guides online that will help you learn more about CSS<\/a> and the most common elements<\/a> you can affect. Until then, if you\u2019re struggling to figure out what code you need to make a particular change, a simple Google search will usually lead you to the answer. Resources like the MDN web docs from Mozilla<\/a> usually rank highly in Google and do a great job explaining various aspects of CSS.<\/p>\n
With a little practice, you\u2019ll find yourself adding CSS with ease in no time.
\nGo to top<\/a><\/div>\nConclusion \ud83c\udfc1<\/h2>\n
Working with your website\u2019s code can seem intimidating if you\u2019re a beginner. However, many of the languages your site relies on are surprisingly user friendly when it comes to making basic tweaks. Learning to use custom CSS in WordPress effectively may take a little time, but it will provide you with an unprecedented level of control over your site\u2019s look and layout.<\/p>\n
Instead of making changes directly to your theme\u2019s CSS style sheet, you should use the WordPress Customizer<\/a> to add in CSS code quickly and safely.<\/p>\n
\n\nThis process enables you to tweak the colors, sizes, fonts, and placements of various elements, without permanently affecting your active theme’s<\/a> core code. What\u2019s more, you\u2019ll be able to see your changes live, so you know exactly what effect they\u2019ll have.<\/p>\n<\/div><\/div>\n
\n\n\t\t<\/div>\n\t\t\t - Customize font family and size with CSS<\/a><\/li>\n
- Select the Additional CSS<\/em> option from the menu on the left in the WordPress Customizer interface<\/a>:<\/li>\n<\/ul>\n
- Where to add custom CSS in WordPress<\/a><\/li>\n