A Blogger’s Guide to HTML and CSS Design

Learning how to design your own blog can be fun yet frustrating at the same time.

It’s fun picking out colors and fonts and designing images in Photoshop* or PicMonkey!*

But then sooner or later you learn that in order to make certain changes to your blog’s theme or template, like changing colors, customizing a form, fitting your header in correctly, etc. it becomes necessary to alter a bit of code in something called a Style Sheet.

That’s when you either say “Cool! I’ve always wanted to learn CSS!” or “Huh? This just got way too complicated.”

If you happen to fall in the latter camp, this post is for you.

I want to help you understand this anomaly they call CSS and it’s counterpart HTML once and for all, because honestly, they’re really not as complicated as they seem. REALLY!

Ready to dive in?

First, download this free HTML just for Bloggers Cheat Sheet!

*These are affiliate links which will earn me a small commission if you purchase with this link. I thank you for your support. Read my disclosure here.

HTML and CSS Design: Say What?

Ok let’s start with what the heck HTML and CSS are exactly

HTML and CSS are programming languages for the web. Wait! Don’t get scared off yet! They’re not like complicated programming languages.

They are separate languages that work together. HTML + CSS = BFFs if you know what I mean.

HTML stands for Hypertext Markup Language which, at it’s most basic definition, means Interactive Text. It is the code that’s used to build the structure of a web page.

CSS stands for Cascading Style Sheet, which is used to define the styles that format the web page.

How HTML and CSS and work together:

• You can have HTML without CSS (that would be really ugly!), but you can’t have CSS without HTML.
• CSS is applied to the HTML.
• HTML is the content of a webpage. So think of it like a Word document where you have all of your content (headings, subheadings, paragraphs, bullet points, etc).
• CSS is the style or appearance of that content. So CSS is kind of like the editor that tells what color, font and size each bit of text should be and also where to place it. We can also use CSS to actually place things around the page.
• HTML and CSS should always be kept in separate files. While there are ways to include CSS in an HTML document, the best practice is to keep it in its own separate document that the HTML document links to.

Before we can talk about CSS, we first have to understand HTML

Let’s see HTML in action.

A Word Document vs. an HTML Document

Let’s take this Word document.

Notice how it’s formatted with titles and paragraphs, bulleted lists, bold text, etc.?

Watch what happens when we copy and paste the content of our Word document as is into an HTML document…

…and view it in the browser.

All the formatting is gone, right? So how do we add this back in?

With HTML tags. HTML tags will help us to structure the content on the page.

Let’s look at our HTML document in the browser again, now with tags added in:

Starting to look a little better right?

Browsers add default styles to certain tags

Did you notice that the headings are automatically bigger and bolder than the rest of the text? And that the paragraphs automatically have line breaks and margins added after them?

Without any CSS style definitions added to an HTML document, a browser will automatically add some styling to certain elements to give the content some sort of structure. I think we can agree that although some styling is better than none (see first screenshot up above), it still has a long way to go. More on that when we talk about CSS another time.

HTML TAGS

So let’s take a moment now to talk about HTML tags and how we can format our HTML documents to be visually more appealing and interactive. Take a look at the HTML document we created above:

Notice that:

• Tags surround each separate element on the page: like the headings, paragraphs, bulleted list, etc.
• A tag has an opening bracket: < and a closing bracket: >
• There’s also an opening tag <tag> and a closing </tag>
• Content goes in between the tags
• Tags literally surround each piece of content on the page, otherwise the browser will have no idea what to do with it

The tags we used in the example above

Notice that:

We used the H tags for headings, of which there are six:

<h1>Title</h1>
<h2>Subtitle</h2>
<h3>Sub-subtitle</h3>
and so on…

The <p> tag defines paragraphs.

The <ul> tag defines a bulleted (or unordered) list and the <li> tags define each item in the list. If you wanted to show a numbered list instead, you would simply use <ol> for ordered list instead of <ul>.

Additional HTML Formatting

If you compare our Word document to our HTML page in the browser again, you may notice that we missed a few things like bolded text in the second paragraph, italicizing in the third, two hyperlinks, and some right-aligned text at the bottom.

To add bold text anywhere in an HTML document, you simply surround the text with <strong> tags like this:

Since 1967, <strong>PAWS has united more than 130,000 companion animals with loving families</strong>, cared for 115,000 injured and orphaned wild animals, and made the world a better place for countless others through advocacy and education.

To italicize, we simply add <em> tags like this:

<em>PAWS is recognized as a 501(c)(3) non-profit. Our tax ID number is 91-6073154.</em>

To add a link to something, we surround the clickable text with <a> tags:

PAWS is a private, non-profit organization that relies on generous donations from individuals and corporations. <a href="http://www.paws.org/about/paws/others/">Are we the PAWS you’re looking for?</a>

The href stands for hypertext reference and is an attribute added to the a tag. It defines the URL that you want your link to go to. The URL must be between double quotes as shown above.

One more thing to format in our page is the right aligned text. We can easily do that by adding another attribute to the <p> tag like so:

<p align"right"> This text is right aligned.</p>

How About a Free CSS Workshop?

If you enjoyed this post, be sure to join me for my free 4 part video series on learning CSS. It’s tailored just for bloggers!

Ready for CSS?

Then click right on over to CSS 101 for Bloggers .

✕

Hey friend, want free DIY design stuff?

I’ve got an entire library of FREE goods just for you! Join the 10,000+ others and get instant access now!

Hooray!! Thanks for subscribing friend! Now go check your email for your VIP Library access. (You may have to check spam or another tab in your gmail).