{"id":5435,"date":"2020-09-03T15:43:00","date_gmt":"2020-09-03T15:43:00","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=5435"},"modified":"2021-05-06T11:01:39","modified_gmt":"2021-05-06T11:01:39","slug":"wordpress-custom-css","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-custom-css\/","title":{"rendered":"How to Deal with WordPress Custom CSS"},"content":{"rendered":"

Tiny pieces of code have the power to beautify and stylize websites and make them stand out, be it a WordPress website or a web-designer made one.\u00a0<\/span><\/p>\n

CSS styling allows you to change just about any element of your website. You can add features, colors, space, or design a whole new layout<\/a>! In fact, everything complex and interactive on the web was built with CSS (with a spice of Javascript)<\/span><\/p>\n

So, how to deal with WordPress custom CSS?\u00a0<\/span><\/p>\n

This guide is a perfect start!\u00a0<\/span><\/p>\n

 <\/p>\n

What is CSS?<\/span><\/h2>\n

Before you jump into understanding how to deal with custom CSS in WordPress, let\u2019s first cover the basics. To figure out how CSS works, we need to back up a little and say a few words about HTML.\u00a0<\/span><\/p>\n

Hypertext Markup Language (HTML) is the primary language used to develop WordPress websites<\/a>. It works by telling web browsers about the different elements of your content. For example, it tells the browser which element of your page is a heading, paragraph, image, link, and so on. <\/span><\/p>\n

HTML defines all the content, text, images, and links. HTML alone is not capable of creating complex and interactive websites. That\u2019s when CSS steps in to bring the styling to the website.<\/span><\/p>\n

We\u2019ll be covering some other aspects of HTML & WordPress in our next blog article.<\/span><\/p>\n

Cascading Style Sheets (CSS) is a web language that dictates how HTML elements appear on your web page. This includes sizes, layouts, fonts, colors, and other design characteristics of the web elements.\u00a0<\/span><\/p>\n

CSS and HTML always come in tandem. CSS can\u2019t live without HTML as there would be nothing to style without it.\u00a0<\/span><\/p>\n

<\/h2>\n

How to edit WordPress theme CSS in the dashboard?\u00a0<\/span><\/h2>\n

The easiest way to access CSS is through your WordPress dashboard. You can find the editor when you go to the menu and click <\/span>Appearance \u2192 Theme Editor<\/i><\/b>.\u00a0<\/span><\/p>\n

Sometimes, a warning will pop up, telling you not to make direct edits to your theme, but create a child theme. If you want to proceed further, click <\/span>I understand<\/i><\/b>, and it will take you to the stylesheet. \"Warning<\/span><\/p>\n

Besides style.css, you will also get access to template files, including single.php, header.php, and functions.php.\u00a0<\/span><\/p>\n

Keep in mind that any changes in the stylesheet you make through the dashboard will be global. Changing one element will impact every single page on your website. So, if you want to customize styling on specific pages, you will need to use special syntax.\u00a0<\/span><\/p>\n

Keep in mind:<\/i><\/b> Before you make any major changes to the core files, always make sure to backup your website.\u00a0<\/span><\/p>\n

<\/h2>\n

Editing theme files via FTP<\/span><\/h2>\n

If you can\u2019t access the Theme Editor or your theme or plugins disable the backend editor, you can still connect to your website through a File Transfer Protocol (FTP). FTP is a standard network protocol that allows you to remotely access and modify your website\u2019s files.\u00a0<\/span><\/p>\n

Now, let\u2019s move on to the fun part.<\/span><\/p>\n

<\/h2>\n

2 ways to add custom CSS in WordPress\u00a0<\/span><\/h2>\n

Custom WordPress CSS a<\/span>llows you to add custom CSS code snippets and modify the appearance of your WordPress website.\u00a0<\/span><\/p>\n

Here\u2019s how you do it:<\/span><\/p>\n

1. Adding custom CSS with a dedicated plugin<\/span><\/h3>\n

One way to add custom CSS is by downloading a dedicated plugin. The main benefit of using a dedicated plugin is that styles and changes usually stick even when you update or switch themes.\u00a0<\/span><\/p>\n

Also, you can enjoy the plugin\u2019s user interface or additional features. Some plugins allow you to add CSS through dropdown menus, rather than having to write it manually.\u00a0<\/span><\/p>\n

Here<\/a> are some popular plugins used for adding custom CSS.\u00a0<\/span><\/p>\n

The downside of using plugins, is that they can affect website speed…so use them wisely!<\/span><\/p>\n

2. Adding WordPress custom CSS within the Customizer\u00a0<\/span><\/h3>\n

Another way to add custom CSS is by accessing the stylesheet through the WordPress Customizer.\u00a0<\/span><\/p>\n

Here\u2019s how it works.\u00a0<\/span><\/p>\n

Go to your WordPress dashboard and click <\/span>Appearance \u2192 Customize. <\/i><\/b>Under <\/span>General Setting<\/b>s locate the <\/span>Additional CSS <\/i><\/b>box at the very bottom of this menu. <\/span><\/p>\n

\"customize<\/p>\n

When you click to open this box, you should see a new screen with a code input field and instructions. If the code is correct and doesn\u2019t contain any errors, any changes you make will automatically appear in the preview area on the right.\u00a0<\/span><\/p>\n

When you finish writing code, you can publish your new code, schedule when it will go live, or save it as a draft for further development.\u00a0<\/span><\/p>\n

This method is perfect if you want to make various changes, including removing the page or blog titles. <\/span>Check here<\/span><\/a> to learn more about how you can modify CSS to remove the page title in WordPress.\u00a0<\/span><\/p>\n

Which method is better?<\/span><\/h3>\n

When you add CSS code using either of the two methods, it\u2019s a lot easier to access and maintain CSS. There\u2019s no need to worry about putting your new CSS in the wrong place or misplacing it. Also, the code you add with these methods won\u2019t get lost when you update your theme. Yet, it may still disappear when you change themes.\u00a0<\/span><\/p>\n

So, which method is better? If you\u2019re looking to make major changes to your website\u2019s styling, consider using WordPress Customizer. On the contrary, if you want to make sure that all changes will be saved after moving to a new theme, you should go with a dedicated plugin.\u00a0<\/span><\/p>\n

 <\/p>\n

CSS syntax<\/span><\/h2>\n

CSS allows you to play with:<\/span><\/p>\n