Don’t put off learning HTML + CSS! Here’s what you need to know

HTML and CSS design for bloggers. Download a free HTML cheat sheet just for bloggers at DesignYourOwnBlog.com!

Take control of your blog's design with HTML + CSS! HTML and CSS design for bloggers. Download a free HTML cheat sheet just for bloggers at DesignYourOwnBlog.com!

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?

*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.
HTML and CSS design for bloggers. Download a free HTML cheat sheet just for bloggers at DesignYourOwnBlog.com!

Notice how it’s formatted with titles and paragraphs, bulleted lists, bold text, etc.?
HTML and CSS design for bloggers. Download a free HTML cheat sheet just for bloggers at DesignYourOwnBlog.com!

Watch what happens when we copy and paste the content of our Word document as is into an HTML document…
HTML and CSS design for bloggers. Download a free HTML cheat sheet just for bloggers at DesignYourOwnBlog.com!

…and view it in the browser.
HTML and CSS design for bloggers. Download a free HTML cheat sheet just for bloggers at DesignYourOwnBlog.com!

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.
HTML and CSS design for bloggers. Download a free HTML cheat sheet just for bloggers at DesignYourOwnBlog.com!

Let’s look at our HTML document in the browser again, now with tags added in:
HTML and CSS design for bloggers. Download a free HTML cheat sheet just for bloggers at DesignYourOwnBlog.com!

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:
HTML and CSS design for bloggers. Download a free HTML cheat sheet just for bloggers at DesignYourOwnBlog.com!

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

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 Cheat Sheet?

I want to give you some time to let this sink in so I won’t bombard you with too much today. We’ll get into a bit of CSS next week.

But I have a free gift for you: an HTML cheat sheet that’s just for bloggers that you can download and save to your desktop so you have it for quick reference at any time. There are more tags in there than we talked about here so I’ve got you pretty much covered for whatever you might need.

HTML and CSS design for bloggers. Download a free HTML cheat sheet just for bloggers at DesignYourOwnBlog.com!

I’m also super excited to announce that I am developing a live workshop coming up soon that’s just for bloggers who are total beginners to HTML and CSS! Download your free cheat sheet now and I’ll keep you updated on when that launches.

HTML and CSS Design Questions

Now tell me, isn’t that a lot easier to understand than you thought it would be? Let me know below if you thought this was easy to get or not. It’ll help me form the workshop to make it the best it can be for you!

Hey friend, want free DIY design stuff?

I've got an entire library of FREE goods just for you! Just sign up here for instant access!

Powered by ConvertKit
Mariannes signature for DesignYourOwnBlog.com

33 Comments

  • BARLEO says:

    o wow thanks so much! i was just looking into online classes on learning HTML and Css. You are so right when you get started you feel like you can get along with out it but as you get more serious you realize i will never get the look i want if i don’t learn how to code myself.

    • Marianne says:

      Thank you Barleo, I think a lot of bloggers realize that and some think it’s just too difficult to learn so they never do it. I want to show people how easy it is to understand! Glad I could help and hope you enjoy the next couple of posts!

  • Do you have a link to a css generator free basically you put in content put the settings as you want then it makes it done with the css coding to go with it?

  • Jenni says:

    Awesome! Even though I’ve had my blog for 3 years, I’m still scared of HTML and CSS. This will help so much. Thank you, thank you!

    • Marianne says:

      I think you are not alone Jenni and I can’t wait to show everyone how simple and straightforward it really is! Thanks for your comments 🙂

  • Sarah says:

    Is the cheat sheet download working for everyone else? The pop up looks grey and when I click to type in the fields the pop up closes 🙁

    • Marianne says:

      Hey Sarah, sorry about the issues. Are you on a computer or phone? I’ll look into why that’s happening. I went ahead and emailed you the cheat sheet. Let me know if you don’t get it 🙂

      • Sarah says:

        That’s very kind of you. I emailed you back. It’s all working now 🙂

      • Sascha says:

        Do you mind also sending me the cheat sheet via email. I’m also experiencing the same problem. Thought it was because I was on the phone/tablet, but tried on my computer and it still didn’t work. 🙁

        • Marianne says:

          Hi Sascha! I’m showing that it was sent to you on 3/14 but you haven’t opened it yet. Try checking your spam folder if you don’t see the email in your inbox with the following subject line: ‘Here’s your FREE HTML cheat sheet access.’ If you don’t find it, let me know!

          • Trebecca says:

            Hi Marianne,

            I really love your blog, but I’m having the same problem! I subscribed to download the cheat sheet, but the landing page still tells me to subscribe. Am I missing something? I went on and entered my email again to subscribe, but nothing happened.

  • Karen Olson says:

    This was very easy to understand and I am confident to move on and work at it more. Great job!

    • Marianne says:

      Oh yay! That’s exactly what I wanted to hear Karen! Thanks so much for letting me know. I’m working on the next post now which will go out Tuesday 🙂

  • Great post. I think it’s important that all bloggers learn at least a little bit of CSS and HTML. When I first started working with code, HTML terrified me even more than CSS. Once you get the hang of it, it’s not so scary at all. 🙂

    Pinning this post. I think a lot of bloggers will find this guide handy!

    • Marianne says:

      You’re absolutely right Tiffany! I just want people to give it a chance because it really is quite intuitive and not that hard to pick up. This is going to be a fun series I can tell already!

  • Great post. Marianne. I always know when you send an email that it’s going to be well worth it. Sometimes in your case less is more!

  • First off, I love your website. The design is absolutely beautiful.

    Second, I am so happy that you covered this topic. As a graphic designer, it’s so hard for me to get other artists to see how to take control of their brand by learning design basics like css and html. I know it is intimidating but it really is necessary if you want to take your brand to the next level as hiring a designer can usually get expensive. What makes this post so wonderful, is not alot of people want to walk through the basics because it ends up being a super long post. Thank you for taking out time to write this. Will definitely have to share this!

    • Marianne says:

      Thank you so much Natasha! I’m so glad you think so, especially knowing it yourself already. I do want to make learning it as clear and simple as possible because it really is so important, like you said, for designers and bloggers to know!

  • Sascha says:

    The best explanation thus far!!!!!! So easy to understand! Thanks for sharing!

  • Theresa says:

    I’m also having problems with the pop up. It stays shaded & disappears when I try to enter my info.

    • Theresa says:

      Marianne, it finally worked – thanks.
      T

      • Marianne says:

        Oh good! I’m not sure why it’s doing that. Not sure if it’s something on my end or ConvertKit’s, will have to do a bit more research. Of course it doesn’t help that I can’t seem to recreate the issue! sigh….. thanks for letting me know though!

  • Florence says:

    Finally! Something that explains it in terms I can understand. I’m so grateful to have seen this post!

  • It’s really interesting to see how the tags work. Although I’m wordpress self-hosted and so it’s all done for me, it’s always good to know in case of a hiccup! Thanks.

    • Marianne says:

      Hey Carol, I’m glad it makes sense! I’m on self-hosted WP too but I still use HTML to do custom layouts on some of my pages and also to build my own landing pages. It also helps to understand when things don’t look right and you can’t figure out why. Knowing what to look for in the page inspector is super helpful!
      Thanks for reading!

  • Lenze says:

    I can’t download the link.

    • Marianne says:

      Hi Lenze, the PDF download is sent via email once you subscribe and then confirm your email address. Can you be more specific about what’s happening when you try to subscribe?

  • Alice says:

    Thank you so much for making these posts. I am starting out making my blog and its pretty overwhelming so this was so helpful. I’m excited to learn now! Thank you. Alice x
    http://www.aliceadventures.co.uk

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge