So, you’ve got a website template, but it’s just not quite 100% the way you want it.
Maybe you want the color of links to stand out, or maybe the paragraph font-size is too small, or maybe you want your headlines to be bolder.
All of these changes can be done easily, if you know the shortcuts. Not to worry, in just few minutes you’ll be able to change any of your web pages at will.
A Quick Overview of HTML/CSS
Basically, if code were a person HTML would be the bones and CSS would be the skin. In order to add an extra arm, you need to add HTML. In order to change the hair color, you need to add CSS.
HTML
It looks like this:
<div class="black-box" id="black-box-1"></div>
By itself, this code will do nothing. Without CSS, HTML is essentially useless.
CSS
It looks like this:
.black-box {height:100px; width:100px; background: black;}
Without HTML, CSS is useless as well.
The Important Part
In order to make style changes, you need to figure out 1) the CSS Selector and 2) the CSS Declarations.
The CSS Selector is how the HTML element is named and the CSS Declarations are the customizations you want to make. In the above example, our CSS Selector can be one of the following:
- div {…} – this is known as an element selector
- .black-box {…} – this is known as a class selector
- #black-box-1 {…} – this is known as an id selector
There are many other ways to use selectors, but these three are the basics. They give you multiple ways to target an HTML element and make your changes.
How to Find the Right CSS Selector
Here’s the cool part. Modern browsers have built in tools that allow you to peer into the HTML of any webpage. Just right-click on this page and click ‘Inspect Element’.
It will open up a fancy toolbox window and select the HTML element you’ve clicked on. You’ll be able to see the HTML element and it’s ID and Class, if it has any. This paragraph is using the <p></p> HTML element to display. Inspect a few elements to get the hang of how the tool works.
How to Use the CSS Selector
Now that you know how to target an HTML element, it’s time to customize! It takes practice to know all the different CSS Declarations that you can use to modify a webpage, but here’s a few to get you started.
To change the color, font-size, line-height, and add a border with some padding to our paragraphs, add this code to your CSS stylesheet or Custom CSS box:
p {
color: #0088CC;
font-size: 30px;
line-height: 1.2;
border: 1px solid #333333;
padding: 5px 10px 15px 5px;
}
If you wanted to target all of the links inside a paragraph, you can use CSS Selectors like so:
p a {...}
You can add more CSS Selectors to give a more specific change, so sometimes selectors can be long:
body .header .nav ul li a {...}
As long as you add selectors in descending order, your code should be ok!
How to Add Your CSS Code
Most modern web templates, especially those built on WordPress, will support a Custom CSS box for your code. You can simply add it there and the changes will appear. If you do not have this option, you’ll need to open up the stylesheet that your site uses. Usually called style.css, the main css stylesheet will have a .css filename. Simply open the file with a text-editor (not Word) and add your new codes to the bottom of the document.
You can even add your CSS code to the HTML files by using Inline Styling. If you want to make a change to only one element, you can use this method, otherwise it becomes too much of a hassle to add the code to every element. For any HTML element, add a style=”…” attribute to it like so:
<div class="black-box" id="black-box-1" style="height:100px; width:100px; background: black;"></div>
^ try inspecting the black box to see the code!
That’s All Folks
This is the basic guide for customizing HTML elements using CSS. For a more in-depth tutorial, I highly recommend taking the free courses at Codecademy or reading all of the documentation at W3schools. Hope this helps!