By signing up, you consent to receive email newsletters from me periodically.

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 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!

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

69 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!

    • Marianne says:

      Thanks so much Sascha! I’m so glad you found it easy to understand! That makes me feel good about the workshop I’ll be offering!

  • 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

  • Emma says:

    Hi Marrianne,
    Fabulous webpage however I have just subscribed and am not able to download the cheat sheets for HTML and CSS which I was really looking forward to reading to help me with my blog design

  • nas says:

    I remember when I started, I had no idea how the tags work and I struggled so much with the h1 tags and the margin/padding it automatically adds. I sure this article is the best source for the beginners 🙂

  • Kyu says:

    http://designyourownblog.com/landing/html-cheat-sheet/

    The pop up for this when I click in the field to type makes the pop up disappear. I have pop ups allowed for it so that is not the issue.

    So I cannot get the CSS cheat sheet by that method.

    Also trying tonfownload your free items seems to be difficult since no matter what I do it always takes me to pinit and never will get to download.

    I am on a Samsung Galaxy Tab A with scribe pen

    • Marianne says:

      Hi Kyu, sorry you are having issues with the popup. I never thought to test it on my tablet, but you’re right! It doesn’t seem to work, I will look into it. In the meantime, I’ll email you the cheat sheets. Sorry about the inconvenience, but thanks for subscribing anyway!

      Also, thanks for letting me know about the Pin It buttons being an obstacle on the library page. I have removed them so it should be easier to download the items now.

  • Tay says:

    Your Blog is BEAUTIFUL! I just found it and am super excited to read everything! Keep up the great work! I could only dream of having a blog a quarter as nice as this! 🙂 As well all the tips to help us little guys, thank you for that!!!

  • Great article. Too many people rely on website builders these days. You really need to learn html and css for any custom coding for your website. Too many website builders are also horrible for search engine rankings. Learning to code you can build your own website with SEO in mind.

  • Hi Marianne, this is the first time I have actually understood HTML and CSS. you made it so easy to understand thank you so much!

  • Lauren Tribbick says:

    Hi Marianne,
    I’ve been fudging my way through html and css whenever I needed to over the last few years and this is the easiest way it’s been explained to me! Thank you so much for super easy and simplified explanation… looking forward to the rest in your CSS video series!

  • Nice informative post! Thanks for sharing the beneficial points related to the HTML and CSS. It’s really helpful for the beginners. Good job!

  • raihan says:

    well job sir this is a complete post about HTML and CSS

  • Web Design says:

    I was noticing from many days that your blog is helping too many readers as your articles are easy to understand and helpful to us.

  • Lovely says:

    Thanks for sharing this useful knowledge,Impressive writing. ♦
    I appreciate you and hoping for some more informative posts like this one…

  • Mohamed Elsaid Helal says:

    thanks a lot for this fruitful tutorial ,never knew alot about coding and stuff and this article realy helped alot

  • Ahmed Gbenga says:

    When I type on the fields the pop up disappears

  • Hi Marianne,
    Thanks for sharing an interesting article, I think that your article will give me lots of useful information about HTML and CSS. It is very impressive. This will help me more confident in my job.
    I hope that I can read more of your article

  • What an article about web designing . Every beginner can easily understand the concepts of web design . It helps me a lot to understand recently i m also doing online tutorial in web design and development . You are such an awesome person keep sharing this type of informative article thanks. Regards.

  • Tushar says:

    Thanks for sharing such a piece of powerful information on HTML & CSS design.

  • Ngan Tran says:

    Thanks for your article!
    I think that people should learn about the blog to improve their job.

  • Maria Tran says:

    Useful information!
    Html and CSS are popular software in technology. Each developer should research them to design good blogs for the business.

  • trang điểm cô dâu says:

    Great article. Too many people rely on website builders these days. You really need to learn html and css for any custom coding for your website. Too many website builders are also horrible for search engine rankings. Learning to code you can build your own website with SEO in mind.

  • akujudi says:

    Thanks for sharing an interesting article, I think that your article will give me lots of useful information about HTML and CSS. It is very impressive. This will help me more confident in my job.
    I hope that I can read more of your article

  • Mind Tech says:

    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. https://mind3t.blogspot.com

  • G Coast says:

    Brief but thorough explanation! I’ve been learning HTML and CSS by watching tutorials and taking a free course, and it’s been a lot of fun. This blog is fantastic; thank you for sharing!

  • Gorish Dua says:

    This is awesome Marianne!

    This blog is clearing even those concepts which were inscrutable with videoes.

Leave a Reply

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

I accept the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.