FYI: This is one of the posts that I have imported from my old blog. Even though this tutorial has screenshots from the old post, it still works!
As a blogger, you’ve probably, at some point in your blogging career, wanted to make simple changes to your site but didn’t know quite how. Hiring a designer every time would get costly so why not learn how to code yourself?
I’ve been designing WordPress sites for over 5 years now. I love to code! Yes I know I’m a geek! Not only has learning how to code given me the opportunity to build sites, but it has also given me a great sense of accomplishment.
It’s definitely a valuable skill to have if you have your own site and it also gives you the opportunity to make a little money on the side by doing work for others as a freelancer or virtual assistant.
I’m also currently in the process of working on an in-depth course to teach you how to code your own WordPress websites so if you’re interested in learning how to code, make sure you sign up down below to be on my waiting list for a launch discount!
Although this blog post might seem long, it really only covers the basics of HTML and CSS. It would be virtually impossible to go through everything in one blog post which is why I’m working on the course. With the following tips and tricks, you should still get a basic understanding of how everything fits together so let’s dive in!
Introduction to HTML
HTML stands for Hyper Text Markup Language and it consists of many different tags which describe different elements of your website. For instance, the <img> tag stands for “image” and <h1> stands for “Headline 1”.
HTML tags always contain the name (usually an abbreviation of what it represents) which is surrounded by brackets. They usually come in pairs which consist of an opening tag and a closing tag. The closing tag always has a slash before the name. Your content is between the tags.
Here’s what a very basic HTML document looks like:
<body><h1>My First Heading</h1>
<p>My first paragraph.</p></body>
This is a super basic HTML website – click here to see it in action: Basic HTML website
Create Your Own Basic Website
Now it’s your turn to create your first HTML website!
- Open up Notepad on your computer
- Copy the above HTML code and paste it in Notepad
- Change the text if you’d like – not the code, just the content
- Save it to your computer as website.html
- Locate the .html file on your computer and open it – this will open up a browser window
- BAM! Your very own basic website!
At this point, you may be thinking “do I have to know how to write complete HTML documents if I’m using WordPress?”. The answer is no – not with WordPress anyways. When you’re using a WordPress theme, the HTML document is basically already “written” for you – it’s basically already working behind the scenes.
Using Text Mode Versus Visual Mode
So why would you need to learn HTML if it’s already there? You need to know HTML for when you’re adding your own content! You use it to add links, images, headlines, quotes, bullet lists, etc…to your pages and posts.
I know what you’re thinking – “if I work in Visual Mode, then I don’t need to know HTML”. WRONG! Sure, the Visual Mode has a really cool toolbar with lots of options but it’s limited.
I make it a habit to ALWAYS work in Text Mode (and you should too!) – I do this for several reasons:
- I want to see the code I’m working with
- If I need to move something, I am copying and pasting my content + HTML
- Need to add a div (we’ll talk about this later)
You can find the Text Mode in a tab in the top right corner of the page/post you’re working on.
Another BIG reason to know HTML is to be able to use text widgets. This is a type of widget that allows you to add HTML to your sidebar or any other widgeted area. Text widgets DO NOT have a built-in Visual Mode.
Headlines are defined with the <h1> to <h6> tags – <h1> is the biggest and <h6> is the smallest.
Paragraphs are defined with the <p> tag.
<p>This is one paragraph. Marshmallow sweet roll liquorice powder ice cream. Cupcake tiramisu toffee fruitcake. Carrot cake fruitcake sesame snaps lemon drops biscuit gummies marshmallow pie. Pie chocolate cake caramels liquorice. Brownie cheesecake lollipop caramels fruitcake sugar plum toffee gummi bears.</p>
<p>This is another paragraph. Macaroon halvah jelly beans. Danish jelly bonbon dragée toffee gummies jelly-o. Carrot cake powder danish powder muffin jelly-o biscuit toffee fruitcake. Lollipop marshmallow gingerbread brownie. Pastry fruitcake sweet jelly beans dessert candy biscuit sweet carrot cake.</p>
Images are defined with the <img> tag. It is one of the few tags that works alone – no closing tag. It has to be used with the src attribute to specify the source location of the image.
By adding the alt attribute, you can specify text in case the image doesn’t display for some reason. Usually you would text that is relevant about the image.
Links are defined by the <a> tag. It has to be used with the href attribute to specify the destination (website address) – don’t forget the hyphens! The text that is between the tags is the actual link (the text that readers click on). You don’t have to use text as a link – you can also use an image as a link.
By adding the target attribute, you can specify that the link open in another window – if this is left out, the link will open in the current window.
If you want to use an image as the link, simply wrap the <a> tag around the <img> tag:
To insert a line break in a sentence, simply add the <br> tag. This tag does not have a closing tag (like the image tag).
powder ice cream.
To make text bold, use the <strong> tag:
To italicize text, use the <em> tag:
There are two types of lists: ordered and unordered. Ordered lists are numbered and unordered lists are not numbered (they have a little disc next to each line item). Also, when you are working with lists, you’re actually working with 2 different sets of tags. The first set is to “open” the list (either the <ol> or <ul> tag and then the <li> tag for each list item).
For an ordered list, use the <ol> tag and the <li> tag for each list item:
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li></ol>
- List item #1
- List item #2
- List item #3
For an unordered list, use the <ul> tag and the <li> tag for each list item:
<li>List item #1</li>
<li>List item #2</li>
<li>List item #3</li>
- List item #1
- List item #2
- List item #3
Now comes the fun part! – Assigning classes to elements within your website.
So why would you want to assign classes? To make changes to the look of that particular element. Notice how all my examples containing code all have a greyish background with a dashed line around them? I did that by assigning a class to a div container and with the help of a little CSS (which I discuss later), I was able to edit that block of text.
First things first – what is a div container?
A div container is basically a “box” that contains your content – you would create one if you wanted to edit that particular content. For example, if you had a paragraph of text and you wanted that specific paragraph to have a turquoise background and a different font, you would create a div around that block of text and assign it a class.
When you assign a class to a div container, you’re just basically “naming” that div so you can target it in your CSS code (style.css sheet)
In this example, I have a paragraph and I’m creating a div container to place around the paragraph and I’m assigning a class to it called “example”.
This is one paragraph and after I assign a class, I will add some code to my CSS code and give it a blue background, white text and a different font. Marshmallow sweet roll liquorice powder ice cream. Cupcake tiramisu toffee fruitcake. Carrot cake fruitcake sesame snaps lemon drops biscuit gummies marshmallow pie. Pie chocolate cake caramels liquorice. Brownie cheesecake lollipop caramels fruitcake sugar plum toffee gummi bears.
The CSS code that I am adding to my style.css sheet is:
font-family:”Architects Daughter”, cursive;
See how I call out the div that I created? I’m basically telling my blog to style any element with the class “example”. You do not need to always create div containers though – you can assign classes to links, paragraphs, images, etc…
Important Things To Note:
- When you assign a class to an element, your changes won’t take effect until you make changes to your CSS file (discussed later)
- You can assign the same class to multiple elements. This makes it easier to edit a bunch of elements at the same time. For instance, if you had several paragraphs within your blog that you wanted to highlight grey. You would assign the same class to each of those paragraphs, and once you add the appropriate code to your CSS, they will all change color at the same time.
- At this point, I just want you to UNDERSTAND the concept of assigning a class – it just basically means that you’re “naming” an element whatever you want so you can target that particular element in your CSS.
- HTML and CSS work together – look at it like this: HTML is where you build it and CSS is where you style it.
For more detailed information on HTML, go to W3Schools – HTML – it is an excellent resource!
Now let’s move on and see how this all fits together!
Introduction to CSS
CSS stands for Cascading Style Sheet and it is used to describe how HTML elements are displayed on your screen. You can edit your CSS by accessing your style.css which is located under Appearance => Editor.
Next, click on “Stylesheet”.
If you scroll through this file, you’ll notice that every element on your WordPress blog is styled in a certain way – if you don’t like certain colors, fonts, etc…this is where you make those changes! Pretty exciting stuff huh?
Before you go through your style sheet and start making changes, we need to discuss how the code actually works.
A CSS rule set consists of a selector and a declaration. Within the declaration there is a property and a value:
In the example above, the rule is written out on one horizontal line for demonstration purposes but in “real life”, you would actually see it like this:
A declaration block can have multiple declarations which all end with a semi-colon. The declaration block opens with a curly bracket (after the selector) and closes with a curly bracket. The properties and values within the declarations are separated by a colon.
Here is an example of a CSS rule with multiple declarations:
So this rule basically means that anything on your site assigned with the h1 tag will have the color blue, arial font and will be 16px in size.
Before I show you how to make all kinds of cool changes to your blog, we should discuss the most common properties you’ll be using.
The background-color property specifies the background color of an element.
The background-image property specifies the background of an element as an image.
This is the standard syntax for this property. Normally, the full url of the image location would be between hyphens.
By default, the background-image is set to repeat horizontally and vertically. To control this, you can use one of 3 declarations:
background-repeat: repeat-x; (repeats image horizontally)
background-repeat: repeat-y; (repeats image vertically)
background-repeat: no-repeat; (does not repeat image)
So if I wanted to repeat horizontally only, this would be my CSS rule:
When working with background images, you can specify whether or not that image will scroll with the page or be fixed.
background-attachment: fixed; (will NOT scroll)
background-attachment: scroll; (will scroll with rest of page)
So if I wanted a fixed image as a background image, this would be my CSS rule:
The color property determines the color of the text.
Note: The color code above is called a HEX code – you can find the HEX code for any color at color-hex.com
The text-align property determines how it is aligned horizontally.
text-align: center; (horizontally centers the text)
text-align: left; (horizontally aligns text to the left)
text-align: right; (horizontally aligns text to the right)
In this example, my body text will be center-aligned:
The text-decoration property is used to add or remove decorations.
In this example, I am removing underlines from all my links:
The text-transform property is used to specify lowercase or uppercase letters in your content.
text-transform: lowercase; (all letters are lowercase)
text-transform: uppercase; (all letters are uppercase)
text-transform: capitalize; (first letters of each word are capitalized)
text-transform: none; (removes any format – use to overwrite another setting)
In this example, I am specifying that all my h3 headlines be uppercase:
The letter-spacing property is used to specify the distance between each letter in a word. This amount is specified in pixels.
In this example, I am specifying that the letter spacing in all my h2 headlines be 2px:
The word-spacing property is used to specify the distance between each word in a sentence. This amount is specified in pixels.
In this example, I am specifying that the word spacing in my paragraph be 10px:
The line-height property is used to specify the distance between each line.
In this example, I am changing the line height in my paragraph:
The font-family property is used to specify the font. It is good practice to include an additional font in case the browser cannot display your chosen font. Usually you would indicate the name of the font you are using and then as a second choice, use the “generic family” of that font (serif, sans-serif, cursive). For more information on using Google Fonts, please see my tutorial How to Use Google Fonts in Genesis.
In this example, I am changing the font of the body text:
font-family: Open Sans, sans-serif;
The font-size property is used to specify the size of your font. Use this for body text, paragraphs, headlines, etc…
In this example, I am changing the font size of my h2 headlines:
You can style links the same way you would any other web element. In fact you can style links based on the state that they are in. The four states of a link are:
a:link (normal link)
a:visited (links that have been visited)
a:hover (link when you hover over it)
a:active (the color of the link the moment you click on it)
In this example, I am changing the color of my normal links to blue and also changing them to red when you hover over them:
Margins are used to determine the amount of space outside the border of an element. In this example, the image has a top margin of 200px and a left margin of 200px.
A margin can have 4 properties:
A LOT of people get margins and padding confused. Here’s the difference: a margin is the amount of room OUTSIDE of an element in relation to its surroundings. Padding is the amount of space INSIDE an element.
Padding also has 4 properties:
There’s a ton of stuff you can do with CSS and obviously I can’t cover it all within one blog post. I’ve included the most common CSS rules that you’ll be using – if you want to learn more about CSS, I would encourage you to check out W3Schools. It is a free and awesome resource to learn more about coding with CSS.
Making your Changes with Firebug
So now that you’ve learned some HTML and CSS code, it’s time to show you how to make those changes in your style.css sheet. You can find your style.css by going to Appearance => Editor.
Click on “Stylesheet” on the right of the screen.
This will bring up your stylesheet which will look like this:
Notice how mine has line numbers in the stylesheet? This makes it much easier to locate the element you want to makes changes to. In order to add those line numbers, you’ll need to install a plugin called Better File Editor. Once this plugin is installed and activated, you’ll see line numbers in your style.css sheet too.
The main tool that we need to find the code that needs to be edited is called Firebug. Firebug is an extension for Firefox (if you’re using Chrome, there is Firebug Lite for Chrome) – when enabled, it lets you inspect elements on your blog and make changes in real time to see what it looks like before making the actual changes in your style sheet.
In order to activate Firebug (once installed), simply click on the orange bug to the right of your address bar at the top of the screen. You can also activate Firebug by hitting your F12 key (Windows and Mac).
Once Firebug is activated, it will open up a window on the bottom half of your screen. On the left of this window, you’ll see the HTML of your blog and on the right is the CSS code of your blog.
Click on “Inspect Element” – now you can hover the different parts of your blog that you want to change and see the code behind it.
As you hover over different parts of your blog, this will highlight the HTML that belongs to it. In this example, I hovered over my secondary navigation – note how the navigation bar is highlighted as well as the HTML code (in the left panel of Firebug) for that navigation bar.
Here’s a closer look at the left side of the panel (HTML code). See how nav class=”nav-secondary” is highlighted? So this basically means that “nav-secondary” is the name of the navigation bar class.
When we look at the right side of the Firebug panel, we will see the CSS code pulled from that particular HTML element (nav class=”nav-secondary”). Please note that classes always start with a dot so the CSS that we see for my nav bar is:
border-bottom: 1px solid #13b99f;
border-top: 1px solid #13b99f;
Keep in mind that when you are looking at the CSS on the right panel, you may need to scroll down a bit to find the class you are looking for. Firebug takes some practice but once you get the hang of it, it will quickly become your new best friend.
So in my example, I want to try a different color for my navigation bar, so I change the hex color code in my CSS code in Firebug from #13b99f to #f2940d. You can easily do this in real time by clicking into the code and editing it. This way you can see how it will look BEFORE you permanently make those changes in your style.css sheet.
Here is a close-up of the code that I edited on the right side. I changed it for the background color, the top border and the bottom border. When you’re using Firebug to test-run CSS, you’ll see the line number where you can find that particular CSS rule in your style.css sheet. If you like how everything looks, then you simply have to go to that line number and make those changes permanent.
In my case, according to Firebug I can find this CSS rule on line 1760 so I head over to “Appearance => Editor”. Click on style.css. Here you can see that I’ve made my changes on line 1760. Don’t forget to click “Update File” if you make changes and refresh your screen to see your changes in action.
Keep in mind that you use Firebug to make changes to existing HTML elements within your blog. Sometimes you need to add your own HTML elements within your blog posts (like in the div container example earlier in this tutorial). Like I said, using Firebug takes a lot of practice but there are many Youtube video tutorials that can show you this in more depth.
I wanted to put together this tutorial because I know that a lot of bloggers struggle with the technical aspect of running their blogs. Learning how to make your own tweaks and changes is very important and will also save you money (not to mention it’s a lot of fun!).
As I mentioned at the beginning of this post, I will be developing an in-depth, hands-on blog design course. It will be a video series that will teach you everything you need to know to design your own blog from A to Z!
****This project is in the works and will be ready sometime in 2017.
If you’re interested in getting on the waiting list, just fill out the short form below. Once the course is ready, I’ll shoot you an email with all the details!