Learning just a little bit of CSS could change your life and really take your websites to the next level. But it might seem a bit daunting and scary. It’s not. We are self-taught here at WP Eagle and have had no official CSS training. We’ve just picked up a few bits along the way.
What is CSS?
If you’re an absolute newbie, and have no idea what we’re talking about, read on. CSS stands for Cascading Style Sheets. Your website is written in (X)HTML, which displays and positions the content. CSS will determine what the site looks like and how the content is presented, so the design elements, fonts, colours, backgrounds, borders, text formatting, link effects, image sizes etc. By creating a stylesheet file, you can change the look of an entire website by making changes to just one file.
A lot of changes to the style and design of your website can be done through your theme options, particularly if you are using a premium theme. But there might be times when you want to change the look of an element on your page.
CSS – A Quick Introduction
We don’t want to freak you out with all the technical jargon, but we just wanted to give you a very quick overview of the basic rules of CSS. These rules have 3 parts; selector, property, and value. Written down, a CSS snippet looks like this:
selector { property:value; }
The selector represents the HTML element you want to change. The property refers to things like font family or font size or colour or text alignment. For example, you might want to style the H1 headings on your website and make them pink. So, you would add this to your CSS file:
H1 { color:pink; }
If you wanted to make all the headings on your website pink, you could group them like this:
H1, H2, H3, H4, H5, H6 { color:pink; }
You could add more than one property too:
H1 { color:pink; font-family:lato “sans serif”; font-size:150%; }
And to make it look easy to read and professional, spread it over a few lines and use indents. It does make it easier to find elements if you need to fix the code later on:
H1 {
color:pink;
font-family:lato “sans-serif”;
font-size:150%;
}
Some of the Most Useful CSS Properties
| background | font-size |
| background-color | list-style |
| background-image | margin |
| border | margin-left, -bottom, -right, -top |
| border-color | padding |
| border-width | padding-left, -bottom, -right, -top |
| color | text-align |
| float | text-decoration |
| font-family | width |
CSS – How Do You Do It?
Okay, that’s enough background. Let’s get down and dirty with CSS. You are going to need to use Google Chrome for this. There is an Inspect function within Chrome that allows you to view your website code and CSS, and to trial changes to the CSS before you actually apply them to your website. And if you’re not sure about the values you can use, delete what’s there and the Chrome tool will give you a list of options.
Go to the page you want to modify, left click and select Inspect. You’ll see a panel appear, which is split into two parts; the HTML code and the CSS.
To select the element you want to style, you click the little icon on the top left of the Inspect panel, then hover over the element you want to change on the page. That will then display the HTML code and CSS that has been applied to that element. You can then find the bit you want to change and start playing around with it.
In the video we start with two fairly simple elements, just to show you the basics. First of all, we change the border that appears under an H1 header. It is grey, a dashed line and 1px wide. We want to have a play around with it and change the colour, change the line or even hide it completely.
The element we’re looking at is .kd_featured h1 and border-bottom. To hide it we use none as a value. Or to change the thickness of the line and the colour, we change the weight to 4px and the colour to red. So it looks like border-bottom: 4px solid red;. Next play around with the H1 text. You can change the line spacing, the case, the font size, the font, text alignment and text decoration.
Practice and Play
Play around with it and have fun. It’s really hard to break your site, but maybe back it up before you start playing around, just in case! Once you’re happy with the CSS changes you have tried in Google Chrome, you need to add the CSS to your website to make the changes permanent. Remember the Google Chrome tool is just for trying your new CSS. To actually apply your custom CSS to your site you have to paste the code into your theme files.
Applying Your New CSS Code to Your Website
To apply the new CSS to your site you need to copy the CSS you’ve been working on from the Chrome Inspect tool and find the place within your theme where you add additional CSS. In this case there’s a Customize button at the top of the page, which takes you to a panel with theme customisation options on it. Find the Additional CSS tab and click. There you’ll find the file to paste your CSS code into. Make sure you click to publish, refresh your page to make sure that changes have been saved and bob’s your uncle.
Removing Your Site Search Box with CSS
In the video we also show you how to remove the search box in the website header. Again, don’t be afraid. You won’t break anything. It’s about making sure you’ve found the right element in the code.
Once we’ve found the site search in the code, we use the Google Chrome tool to add some new CSS that will hide the box. Remember, use the Chrome tool to test the CSS before you add it to the custom CSS file on your website. So to hide the search box we use the display property: .site-search { display:none; }. Don’t forget to copy your code into your additional CSS file.
Now we’ve removed the search box, it has left the secondary menu just floating about. We want it to sit in line with everything else to the right. So find the secondary menu element in the code…
You can see there is a float:left command in there so we’re going to change it to float:right and hopefully that fixes the menu position… which it does. But, if you look closely there is some padding in there, which is preventing the menu from being perfectly aligned. In this case, setting the padding to 0px still leaves it slightly off. So, we use negative numbers.
You can use your arrow keys on your keyboard to know the numbers up and down until you get to where you want to be. In this case we take the padding to -15px and that seems to make the secondary menu perfectly aligned. Remember to cut and paste your new CSS code into the theme.
Error Message in Your New CSS Code
If you watched the video you would have seen that at this point there is an error message when we paste the CSS into the additional CSS file. This was caused by the @media command. You use an @media command when setting different CSS rules for different screen sizes. That’s responsive design. In this case, there were some missing brackets after the @media command.
You need to add curly brackets after the @media command {} and insert your CSS for that screen size in between them. We then had to make sure we closed everything off with another } bracket and that fixed the error.
Adding a New CSS Command
You might want to add and test a completely new piece of CSS code. That’s easy to do with the Chrome tool. There is a plus sign in the right-hand side of the Inspect tool panel. Click that and a fresh line with curly brackets will appear in your CSS panel. You can then add your new command. And if you’re not entirely sure of all the CSS properties, the tool helps with a prompt, once you’ve typed the value in.
And That Was Your Whirlwind Tour of CSS…
There is so much to cover when it comes to CSS that it can get a bit mind-blowing. To start with, just have a play around with it. Keep it simple and introduce new properties and values slowly. It quickly becomes second nature. And by using Google Chrome, you can’t do anything to break your website.
Extra Reading and Resources
Here are some useful CSS-related resources that might help you get your head around it:
https://www.w3schools.com/css/css_intro.asp
http://learnlayout.com/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference
https://htmlcolorcodes.com/
https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent
