Welcome to our CSS crash course designed specifically for non-developers who want to customise their WordPress websites. With a little patience and some basic understanding, you can make a lot of small but impactful changes yourself, saving money in the process (although it might take a bit of time!).
CSS stands for Cascading Style Sheets. It is a language used to describe the presentation of a web page, including colours, layout, and fonts. Learning some essential CSS skills is incredibly useful for tailoring your site to better fit your brand and vision. This guide will walk you through the basics, from the tools you’ll need to practical examples of making changes.
main.css file (not recommended for non-developers).HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of the page using elements like <div>, <h1>, <p>, etc.
<div class="redbox"></div>In this example, we have a <div> element with a class of redbox. Classes are reusable and can be applied to multiple elements, while IDs are unique to a single element.
CSS (Cascading Style Sheets) describes how HTML elements are displayed. We will create a simple red box.
.redbox {
background-color: red;
width: 100px;
height: 100px;
}Here are some common CSS properties. ChatGPT-4 (and above) is an excellent resource for coding. You can ask it how to change an element, and it will suggest the CSS for you.
/* Determines the size of the font, can be in px, em, etc. */
font-size: 20px;
/* Sets the background color of an element. */
background-color: #ffffff;
/* Adds padding inside an element. */
padding: 10px;
/* Adds margin outside an element. */
margin: 15px;
/* Sets the width of an element. */
width: 50%;
/* Sets the height of an element. */
height: 200px;
/* Changes the text color. */
color: #333333;
/* Aligns text to the center. */
text-align: center;
/* Makes text bold. */
font-weight: bold;
/* Sets the font family. */
font-family: Arial, sans-serif;
/* Adds a border around an element. */
border: 1px solid #000000;
/* Sets the display type of an element. */
display: block;
/* Sets the maximum width of an element. */
max-width: 100%;
/* Changes the cursor when hovering over an element. */
cursor: pointer;
/* Sets the position of an element. */
position: relative;
/* Sets the top position of an element. */
top: 10px;
/* Sets the left position of an element. */
left: 5px;
/* Sets the float property of an element. */
float: left;
/* Adds a shadow to an element. */
box-shadow: 2px 2px 5px #aaaaaa;
/* Sets the z-index of an element. */
z-index: 10;
/* Changes the line height of text. */
line-height: 1.5;
/* Adds a background image to an element. */
background-image: url('image.jpg');
/* Sets the overflow property of an element. */
overflow: hidden;
/* Adds a transition effect to an element. */
transition: all 0.3s ease;
/* Sets the opacity of an element. */
opacity: 0.8;Let’s use the browser console to target and manipulate a text title.
1. Open your webpage in a browser (Chrome is recommended).
2. Right-click on the element you want to change and select ‘Inspect’.
3. The console will open, and the selected element will be highlighted in the HTML structure.
4. You might see something like this:
<h2 class="what-we-do__heading">Our Services</h2>5. In the console sidebar, you can see the CSS that is affecting this element. The order of CSS matters: parent styles can override child styles, and later styles can override earlier ones.
You can copy the existing CSS from the console into your CSS editor and make changes.
Original CSS:
.what-we-do__heading {
font-size: 30px;
margin-bottom: 32px;
}Edited CSS:
.what-we-do__heading {
font-size: 40px;
margin-bottom: 32px;
}
@media (max-width: 600px) {
.what-we-do__heading {
font-size: 25px;
}
}This example changes the font size to 40px on desktop and 25px on mobile devices. You can repeat this process to target and change any CSS.
By the end of this guide, you should be able to make basic CSS edits on your WordPress website. Remember, always backup your website before making any changes, and we do highly recommend ChatGPT-4 (onwards) for basic coding information. Happy customising!
