Even if you are most happy with your website at the moment, it is very likely that someday you might want to change something – e.g. the color of a button, the font size of your titles, a background color or anything else that might be worth tweaking for you. With this beginner’s CSS tutorial we want to show you some CSS basics which should help you to modify the styling of your website by yourself. A website’s structure is built with HTML – and CSS is responsible to style and shape this structure – so in this quick tutorial we will also mention some HTML.

The most commonly tweaked HTML elements

This is a beginner’s tutorial where we will only mention a few of the most common HTML elements which are being modified most frequently. Those are for example links, list elements, headlines, paragraphs, divs and others. But if you just understand how to tweak the CSS of one element, you will be able to modify every other element on your website as well. To inspect which elements to tweak, we recommend you to use your browser’s web developer tools browser’s web developer tools.

How to change CSS of an element

To understand the syntax of CSS and in order to modify your styling, please see the following examples. First comes the HTML element that should be modified (a = link, h1 = headline from type h1, li = list element etc.), inside the curly brackets is the CSS rule that applies to this element. The CSS rule consists of a property name (color, background-color, font-size etc.) and a value (#CCCC55, 12px etc.).

Example 1: Changing the link color

a { color: #FF0099; } => after change: a { color: #CCCC55; }

This is the link before change

This is the link after change

Example 2: Changing the font size

h1 { font-size: 16px; } => after change: h1 { font-size: 24px; }

This is a h1 headline with 16px

This is a h1 headline with 24px

How to change CSS of a class or an ID

It is a very common coding practice, that most important HTML elements on a website are given classes or IDs. This is in particular useful to be able to style elements in a more efficient way, e.g. if a group of related elements should look the same. This can apply to menus, containers, lists or else. Using a class or an ID to change CSS does not much differ from using HTML elements – but there are some important differences. Classes start with . and IDs start with #. Please see the examples below:

Example 3: Changing link color of a menu item by using a CSS class

=> before change: .main-nav li a { color: #fff; }

=> after change: .main-nav li a { color: #900; }

Example 4: Changing inner background color by using a CSS ID

=> before change: #mh-wrapper { background: #fff; }

=> after change: #mh-wrapper { background: #570; }

How to apply CSS to your WordPress Website?

We recommend you to first preview custom CSS changes prior to applying these changes to your WordPress websites. With the use of browser’s dev tool browser’s dev tool, you may preview CSS modifications in real time. To permanently apply custom CSS to your WordPress websites, you can either create a child theme (recommended for larger customizations) or you could use the following plugin for example: Simple Custom CSS.

Simple Custom CSS – a WordPress plugin to apply custom CSS

With Simple Custom CSS you are able to implement custom CSS changes. To install this WordPress plugin, you have to go to Plugins in your WordPress dashbord and click on Add New. Now you can search for the Simple Custom CSS plugin and install/activate it. After activation, you can go to Appearance => Custom CSS in your WordPress dashboard and add the custom CSS to apply the changes. Please also see the plugin’s support forum for more information.