CSS

CSS Basics

In the CSS landscape, you’ll work with selectors and properties. Selectors identify HTML elements, and properties dictate their style. With CSS, you can control everything from colors and fonts to layout and spacing.

CSS begins with the <style> tag or an external stylesheet linked to your HTML document. This stylesheet is usually linked in the header.php file.

This separation allows for cleaner, more organized code. This is how you could link your stylesheet in your header:

<link rel="stylesheet" type="text/css" href="/wp-content/themes/your-theme/main-css.css">

Within this file, you can store your css classes, IDs and pseudo-classes to precisely target and style specific elements. Here’s an example of how you would create a class in your stylesheet:

/* Class Example */
.container-example {background-color: grey;}

/* ID Example */
#heading {color: orange; 
text-align: center;}

/* Pseudo Class Example */
button:hover {color: blue;}

Now that this class is within the stylesheet, this is how you would call this styling into your HTML document:

<div class="container-example">
<h2 id="heading">Heading</h2>
<button>Click Here</button>
</div>

This <div> element will now have a width of 200px. The <h2> (heading) will be the color orange and center aligned. Finally, the button will be the color blue when you hover over it. This will look a little bit like this:

However, this is a little messy and the button has no styling, we can tidy this up with further styling in the stylesheet.

/* Class Example */
.container-example {max-width: 200px;  
border-radius: 15px;}

/* ID Example */
#heading {color: orange; 
text-align: center; 
text-decoration: underline;}

/* Pseudo Class Example */
button:hover {color: blue;}

/* Element Example */
button {padding: 5px;
border: none;
border-radius: 10px;
font-family: lato;
color: #707070;
font-size: 20px;
width: 100%;}

In this example, we looked at the very basics of CSS and how adding one line of styling can change the appearance of a webpage element.

Now that you know a few basics, you can move onto the next steps of learning CSS!