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;”

cakes

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.

I used the CSS3 Generator site to produce some code to give my next image a different look:

“-webkit-border-radius: 10px; border-radius: 10px;

-webkit-box-shadow: 4px 4px 15px 5px #808080; box-shadow: 4px 4px 15px 5px #808080;”

 

watercolour letters CSS

 

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.

 

 

 

Leave a Comment