I have been teaching small business owners and entrepreneurs how to build and optimize WordPress websites since 2010. One question I often get is “how to edit WordPress CSS.” For brand new WordPress beginners, I usually tell them to ignore it until they are comfortable with the basic WordPress settings and the default template. Once you pass the beginner level, you definitely want to know some basics about CSS and use them to customize the look and feel of your WordPress website to your desire.
Before you start to edit WordPress CSS on your website, let’s have a basic understanding of CSS.
CSS stands for Cascading Style Sheets. It is a style sheet language that controls the design and presentation of your website. For example, the font size, font color and anything that is related to how the content looks on your website. It works together with HTML which handles the content of web pages. You create CSS rules to tell your website how you want it to display the content.
Here is a HTML example:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Here is a CSS example:
p {
color: red;
text-align: center;
}
It means all <p> elements will be center-aligned and the text color is red.
There are 3 ways to insert CSS style sheets.
An external style sheet is applied to many pages of a website. It controls the design of a website. Each WordPress theme has a file called style.css. You can change the look of your WordPress website by editing style.css. Before you make any changes to your WordPress style.css file, make sure you create a backup of this file.
An internal style sheet is only applied to one page on your website. It should be used when a single page has a unique style. For example, if you need to design a landing page. You define internal styles in the head section of an HTML page, inside the <style> tag.
In this example, the background color of this page is light blue and the headline is yellow. The margin to the left is 40px.
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: yellow;
margin-left: 40px;
}
</style>
</head>
An inline style sheet is applied to just one element of a single page. It mixes content with presentation by adding the style attribute which contains any CSS property into HTML elements.
For example,
<h1 style=”color:blue;margin-left:30px;”>This is a heading.</h1>
It means the color of this heading is blue and the left margin is 30px.
To learn more about CSS, check out W3schools.com’s easy-to-follow tutorial.
With this basic understanding of CSS, it is time to edit your WordPress CSS.
Peter from Tips and Tricks HQ has made two great videos on how to edit your Wordrpess CSS using Firebug. It is very simple and easy. Anyone can do it.
You see, editing WordPress CSS is not as intimidating as it sounds. It is easy and fun. Go ahead to edit your WordPress CSS. If you need personal help with your WordPress website, please email me at info@goldenvisiontraining.com.
