Disclaimer: This tutorial contains affiliate links, which means that if you click on one of the product links and purchase the product I am recommending to you, I’ll receive a small commission which inadvertently is invested back into free tutorials such as this one. Thank you for your support. 
Customise Website with CSS Codes

Customising your WordPress website is really important for your branding. A well branded website displays a high level of quality and professionalism and visual consistency allows your customers to identify who you are. In today’s market, websites are clean, simple layouts that provide your users an easy journey through your online real estate.

Not all themes allow you to easily customise your website. Before I started using the Divi theme, many of the themes I worked with clashed with plugins, or I couldn’t easily tweak them – so the easiest, full proof way to customise your website is through your style.css (Style sheet).

The Cascading Style Sheet (CSS) is a separate file saved as an css extension (eg. style.css). Using the style sheet can make customisation and maintenance a lot faster as all your formatting and colours are contained in one file for ease of use across your website.

Some customisation examples include your body text colour, background colours, font family used, hyperlink default colours and all other hyperlink attributes and text decoration. Here’s what a CSS code looks like. Note that the spelling is in US English.

body
{
color:#000000;
background-color:#CCCCCC
font-family:arial, open sans;
}

This block of CSS is telling your website to make your body text colour black (#000000), make the background colour grey (#CCCCCC) and if the Arial font is available, display in Arial, otherwise the second option is Open Sans.

Your theme should have come with a Style Sheet. To locate it, you’ll need to go to your Domain Control Panel (CPanel) and run a search in your File Manager. The usual file path for your Style Sheet is:
wp-content/themes/YourTheme/style.css or wp-content/themes/YourTheme-Child/style.css

If you don’t have one, it’s very easy to create. You will need to add the custom codes that we will go over shortly into Notepad or a text editor. Then save it as ‘style.css’ in a txt (or Rich Text) file format. Once saved, you will need to upload the style sheet to your theme folder so that it is housed here:
wp-content/themes/YourTheme/style.css.

You will then need to link your style sheet by inserting the following HTML code with the name of your style sheet in the <HEAD> section of every web page:
<link rel=”stylesheet” type=”text/css” href=”style.css”>

…. but, I am not going to be focussing on new style sheets today.

As I mentioned earlier, people usually customise their body text colours, background colours, font families, hyperlink default colours and all other hyperlink attributes and text decoration. If you are using an existing style sheet, you will be able to identify what the block of code within the curly brackets are for as it will be labelled before the open curly bracket. Using the example I gave you above, that block of CSS was for the ‘body’.

Before you start altering your existing style sheet, make sure that you save a copy on your desktop in case something goes wrong. That way you can re-upload the original file. Once you are happy with your style sheet, always save a copy of the edited style sheet. That way when you back up or update your website you will have all your customisations in one place if the update accidentally overrides your edited style sheet.

When updating an existing stylesheet, it’s a matter of locating the code for what you are trying to customise then changing the hex colour codes (Eg. #000000) to your preferred colours, or to the font family or any other customisation you want.

If you use the Divi Theme, you can add Custom CSS in the Theme Options settings.

Go to your Dashboard, select Divi, then theme Options, then in the General Tab, scroll all the way down to Custom CSS. This is where you can add all of your custom CSS code Divi will do all the magic in the background. (One of the many reasons why I use Divi for all of my websites!)

Here are some Custom CSS Codes that I have used to customise my websites:

This CSS code tells the website to display an unvisited hyperlink in aqua.

/* unvisited link */
a:link {
color: #9DE3DB;
}

This CSS code tells the website to change the text colour of a hyperlink to dusty pink when a user hovers over it with their mouse.

/* mouse over link */
a:hover {
color: #DCBDBA;
}

This CSS code tells the website to change the text colour of a hyperlink to aqua when a user has visited that page (or link).

/* visited link */
a:visited {
color: #9DE3DB;
}

This CSS code tells the website to change the text colour of the menu link (the selected hyperlink) to aqua when a user is on that page.

/* selected link */
a:active {
color: #9DE3DB;
}

If you are using a Wishlist function like Yith’s Woo Commerce Wish List but you aren’t selling products for customers to add products into a cart, then this CSS code tells the website to hide the cart icon.

/* Hide cart icon */
.et-cart-info { display:none; }

This CSS code will remove the line under the Divi Menu. (For Divi users only)

#main-header
{ -webkit-box-shadow:none !important; -moz-box-shadow:none !important; box-shadow:none !important;
}

Pin It on Pinterest