With WP SuperGeek, one of my missions is to demystify how WordPress and website work, so nontechnical people can grasp technical concepts. I feel that it’s important to have an understanding of how your website works, even if you don’t want to change any of the code yourself.
With that in mind, for this Ask a SuperGeek I want to continue the theme of coding languages. We’ve already talked about HTML, so next I’m going to delve into CSS.
CSS stands for “Cascading Style Sheets.” It’s a coding language used to style a website, determining its colours, fonts, layout, and many other elements. CSS is probably the easiest coding language for novices to read, because much of it is written in plain English. But don’t be fooled! There are still strict rules about syntax that, if not followed, can create problems on your website.
Every WordPress site has an individual file, called style.css, in which all the styles for the website are written. An example of a snippet of CSS code is:
Each CSS selector (those are h1, h2, h3, h4, h5, and h6 in the example above) corresponds to an HTML tag. So the CSS tells the website how to style the text or image that is encased in the HTML tag.
For example, if your website has the markup <h1>Heading here</h1>, you can use the h1 selector in style.css to tell the browser how to style the text between those h1 HTML tags. In the example above, h1 would be styled with a dark grey colour, in a bold Open Sans font, at the size of 36px.
To learn more about the available CSS styles, a great place to start is W3 schools.
How to change the style of an element
First, use your browser’s web inspector to inspect the element you want to change. For more information on how to do that, check out this article.
Once you’ve come to a style that you like in the inspector, you can copy these lines into the style.css file. The preferable method to edit your style.css file is via FTP, because if you make a mistake you can easily fix it. If you change the file in your WordPress admin (by going to Appearance>Editor), you risk breaking your website. And if that happens, you’ll need to log in via FTP anyway, so you may as well just start there!
Once you have the style.css file open, do a search for the tag you want to edit. Then, copy and paste in the new lines of code from the web inspector, and save. Once you refresh your website (make sure to hold down the Shift key as you refresh to flush the cache!), you should see the changes applied.
Did this article inspire you to change some CSS on your website? Comment to let me know!