OneBite.Dev - Coding blog in a bite size

edit css in wordpress

Code snippet for how to edit css in wordpress with sample and detail explanation

If you have decided to take on the task of styling your WordPress website, you’re in for a fun journey. CSS (Cascade Styling Sheets) is a powerful tool that can help you bring a unique aesthetic to your website’s pages. It can even help improve user experience. In this beginner-friendly article, we will show you exactly how to edit CSS in WordPress.

Getting Started

Before we jump into the nitty-gritty of editing CSS in WordPress, you should first know where you can find the section to add custom CSS. Here are the steps:

  1. Log in to your WordPress Dashboard.
  2. Go to Appearance > Customize.
  3. This will open the WordPress customizer. Look for the ‘Additional CSS’ option and click on it. You will now see a blank area where you can write or paste your custom CSS code.

Code Snippet

Now, let’s say you want to change the color of your website text. Here’s a simple CSS snippet that you can use:

body {
     color: #000000;
}

In this example, #000000 is a hexadecimal representation of the color black. You can swap this with any color of your choice.

Code Explanation

In the above snippet, body is a CSS selector that stands for the body element in HTML. All the text in your WordPress site appears within the <body> HTML tag. Therefore, this snippet will apply to all the text that is not already styled.

color: #000000; is a CSS property and value statement. Here, the property is color, and its value is #000000 or black. This statement tells the browser to paint all the text in the body of your website with black color.

It’s important to note that if you have assigned a color to a specific text in your website, this snippet won’t change that color. This is because the CSS in WordPress works in a cascading order. That means the closest style to a specific element will take precedence.

Once you’re done adding your custom CSS, click on the ‘Publish’ button at the top of the customizer. Your CSS edits will now reflect on your live website. Using one property at a time will help you understand how CSS works and sees the changes in real-time as you experiment.

To conclude, editing CSS in WordPress is a fantastic way to put a personal touch on your website. With a bit of practice, you’ll be creating a beautiful and unique website in no time.

css