Basic HTML and CSS Codes every blogger should know

Okay so you’ve decided to become a blogger, you don’t know the first thing about html, coding, or backend systems. Honestly I had no idea before I started my blog either, and here I am a year later, working in Digital Marketing and using html and basic coding on a daily basis (in my day job and for my blog).

Of course with CMS systems like WordPress or Blogger you can definitely get away with not knowing anything more than writing and uploading pictures but if you are looking to take your blog even one step further, it will definitely do you well to know some basics. A while ago I posted about utilizing Google Analytics for bloggers which quite a few bloggers found useful so hopefully I’ve put together a post that will also be useful to help bring the design and layout to the next level.

I’ve gotten a bit nerdy here and put a list together of some basic codes and how to’s to help you increase the layout and visual aspects of your blog. I don’t pretend to be an expert but I wish someone had have told me how to do these from the very beginning, they definitely would have come in handy. Because I run my blog through WordPress, I’m only speaking from that perspective but I’m sure Blogger and many other platforms aren’t much differently.

Use the Text Tab

You may or may not have noticed the Text tab in WordPress when you’re creating your posts. Next time you go in, click on this. Not much will change in this view. Your font will be different and you will loose the creative elements bar at the top of the post page but other than that no change right? Wrong. In this view you can actually add in basic coding to tweak some elements of your page. Obviously you won’t be able to do any major rehauling in here but there are some things you can do.

Always remember when trying to put coding in, you need to close of the coding.

<> = the basic conversation you are having with the computer and design layout you’re looking to achieve

</> = closing that conversation, almost like saying “over” in a walkie-talkie.

The way to use these is to put the <> in front of the content you are looking to change and </> at the end. By forgetting to close the conversation, the design elements won’t appear so it’s always important to remember this fact.

Headers

I’m not sure if it’s just the template I’m using on WordPress but in the basic ‘Visual’ settings, there’s no way for me to change the headings. I can’t make them bigger or smaller. By going into Text view, I can change that. One thing to remember is there are only 6 levels of headers. h1-h6. Typically I use h2, they seem to be big enough for the purpose.

Example:

<h2> This Is A Title </h2>

Line Spacing

Sometimes I want to separate my post into different categories. Maybe I have a guest blogger posting and I want to add in an introductory paragraph without it looking as if it’s part of the actual guest post, or maybe I want to change up the design and layout of the page.

Using a line space break (for sure this must be the technical term …), is the best way to do that from what I’ve found. With the line break you don’t need to open and close the conversation because you’re not framing any content, you’re giving the computer a command, simply plug in the code below and view (I’ve of course also supplied an example of this right below).

<hr/>

Blockquotes

Blockquotes  are basically just as they sound, blocks of quotes that are meant to stand out from the page and the normal content. These are really great to use at the beginning of a post, and of course when you are quoting someone but can realistically be used for whatever you want. Your template may style these a bit different so I would suggest testing this out before publishing but it’s a really cool feature that I should start using more. Because this is a conversation with content you will need to open and close the conversation like some of the examples above.

<blockquote> This is a quote </blockquote>

Example:

“This is a quote, doesn’t it look cool?

Lists

Lists are handy for all kinds of things, from listing your favourite places to visit to creating a table of contents for your privacy policy. By the way, if you’re asking what is a privacy policy as a blogger, you need to do some research. It’s important to have one if you want to protect yourself and your readers.

You can use HTML to create an ordered list (numbered) or unordered list (bullet points).

An unordered list starts with < ul > then each item in the list starts with < li >, so it will look something like this:

< ul >

< li > List item </ li >

< li > List item </ li >

< li > List item </ li >

</ ul >

For an ordered list, do the same thing but use < ol >

Adding Colours

Often I feel limited in the colours that I can use on my page, I love the default colour I have set for my website (obviously a girly pinky-purple) but there are times when another colour would look nicer. I’m really speaking only about adding the text to be different colours not anything else on the page (that’s another less I’m not all that familiar with yet). The most important thing to remember here is that colour codes are a set of numbers and letters that make up a specific colour. You can easily find whatever code you’re looking for by searching “html colour codes”. Again because this is a conversation, you will have to open and close the conversation.

Code:
<font color=”#819FF7> example text </font>

So there you have it, a few simple codes that can really change up your posts! Try it out and let me know what you think. I always find learning code fun because it’s like learning a new language, or solving a puzzle. Sometimes you don’t get it right but you keep trying until you do. Hope this helps!