How to use CSS in WordPress

There are several ways to add CSS to your WordPress Theme, but the best way is still the style sheet (style.css). If you like to make changes in the style sheet then make a child theme. The child theme is made in 15 minutes and will not be overwritten when the theme is updated.

I am working with professional themes from StudioPress. Although you can add directly inside the style.css, I normally upload another stylesheet into the root, so that I can keep track on my changes and use several ones when changing a theme.

 

Style-sheets versus on-page styling

The biggest advantage of a style sheet is consistency. For example, you like to give  a heading a certain look. To give it the same look over all your pages will give the user a signal of consistency.  Consistency is part of good user design. Consistency makes it more easy to understand that the user is still on the same website.

Besides the advantage of consistency, it saves a lot of typing. As soon as you type your blog, all the basic elements already looks as you want them to be.

The on page styling can give some additional accents.

The additional accent can be a Call to action Button,  more space around a specific picture, making blocks with another background color. So basically additional accents to attract the consumers attention.

Third way is in the head

This is probably the oldest way to change colors of pages. The problem is of course that you will need a plugin to add style to the header. So my conclusion for this option: possible but not really advisable anymore.

Browser speed tip

Normally when you update the style sheet in a browser, this should have immediate effect. I use often Chrome and this browser has lately an enormous memory. Updating in the style sheet can sometimes last forever . Now I use chrome to make changes and keep an IE browser open. In this browser the effects are seen immediately.

Another way is the use of Ctrl+F5 for resetting the browser.

WordPress CSS

The WordPress CSS is not much different then normal CSS, only it is a bit stricter. This is both for on page style as in the style sheet. For example the space issue.

Example: margin:<space>10px 10px; –> margin: 10px 10px; and NOT margin:10px 10px;

In the style sheet it is expected to write everything on their on line as follows:
img  {

box-shadow: 5px 5px 10px #888;

}


 

The philosophy is to keep the CSS file as short and clean as possible.  So the color black #888888 is even written with the short code #888. Colors should be written in lower-case. Background-color is just background.

Selectors are ‘class’ written with a dot ‘. ‘ and ‘id’ written as ‘#’. (this is also in normal CSS, but it is not always so clear written in books).  Most of the time only the class is used. ID is mostly used to name the large DIV’s.

WordPress also promotes a class to be called as it is. So the class .adlongleft160X600 is the Adsense advertisement on the left side with the dimensions 160 x 600

Responsive CSS in a WordPress Child Theme

Responsive means that the content can be read on different devices. As we only adjust the CSS, the content remains the same.

For a lot of businesses the mobile site page has far less content then the same page a desktop. This is just another page and belongs also under the category responsive but this is not discussed here.

If the original theme is responsive then the child theme should also be responsive .

Using the code @media (max-width: 1069px) {

between the brackets the changes will come, and ONLY the changes to keep your file as small as possible

}

For screens below 1069px the margin from the class .gilles changed a bit. I used this class to name my picture on the right hand top side of the page. When the screen gets smaller, the picture and the text collide.

So in the end, the style sheet of the Child Theme is not long. Only the responsive part will make it long (beside the 1069px there are 4 more sizes). The responsive part is a bit long but it is worth it. Your site will shine on a lot of devices.

CSS coding is simple and will probably give no problems. If you want to learn even more about CSS in a WordPress style sheet: visit the WordPress CSS handbook