Change Styling with CSS

If you want to customize your theme in detail beyond the theme options, you can use CSS code to overwrite the default styling of the theme.

What is CSS?

CSS stands for Cascading Style Sheets and defines how to display HTML elements and your website’s appearance. CSS defines the colors, fonts, borders, spacing and size of all theme elements.

We do not include a CSS tutorial here, because there are lots of free tutorials available. Just google “CSS tutorial” or check out this CSS Introduction from W3 Schools.

Adding custom CSS

You can simply install a WordPress plugin which allow you to add custom CSS code. There are different plugins available. We can recommend Simple Custom CSS, which we have also introduced in our plugin section.

CSS IDs and classes

Nearly every HTML element in our themes is defined with an ID and / or a class. You need the ID or class of the HTML element to apply CSS code to it.

For example: the div container which contains the sidebar content is defined with the ID “sidebar” or every h2 element which is wrapped around a post title have the class “post-title” assigned.

<h2 class="post-title"> ... </h2>
<div id="sidebar"> ... </div>

You can access these example HTML elements and make changes in CSS with following CSS code example:

#sidebar { /* access ID's with # */
/* make your CSS changes here*/
}
.post-title  {  /* access classes with . */
/* make your CSS changes here*/
}

Therefore it is important to find out the ID or class of the element you want to change. 

A simple way to do that is by using Firebug.

CSS Snippets

If you are new to CSS, you can find some examples on our CSS Snippets section. Please be aware that these are general examples and may not work in every theme.


In case you need any help with CSS customizations, we can highly recommend these WordPress Customization Experts.