CSS Controls Your Site’s Appearance

A WordPress theme includes a style sheet containing CSS (Cascading Style Sheets) code that determines the appearance of the elements of the website – from the size and colour of the text, to the way the images line up on the page.

For example, if I want to add a blue dashed border around my images, as shown below, then I could do it by adding this CSS to the style sheet:

“border: dashed 2px #4c5ea0;”

Modern browsers support CSS3 which provides more sophisticated options such as box shadow and border radius (for rounded corners). A website using CSS3 will still work on an older browser but the effects won’t show up.

As you can see from the examples above, CSS code can be used to customise a website. It is possible to directly edit a theme’s style sheet but this isn’t recommended since the changes will be lost if an updated version of the theme is installed. This could happen if the theme’s developer brings out a new version to fix some bugs or add improvements.

There are plugins available that enable you to add lines of CSS to a site in a way that will not be overwritten if the theme is updated. Alternatively, the extra CSS can be added to a child theme. I used a child theme when I worked on the website for Sara Smile Photography as described in my blog post.