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.
[Tweet “HTML + CSS = BFF’s! If you’re a blogger, you NEED this free HTML cheat sheet”]
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.
[separator type=”thin”]
[separator type=”space”]
Notice how it’s formatted with titles and paragraphs, bulleted lists, bold text, etc.?
[separator type=”thin”]
[separator type=”space”]
Watch what happens when we copy and paste the content of our Word document as is into an HTML document…
[separator type=”thin”]
[separator type=”space”]
…and view it in the browser.
All the formatting is gone, right? So how do we add this back in?
[separator type=”space”]
[separator type=”thin”]
[separator type=”space”]
With HTML tags. HTML tags will help us to structure the content on the page.
[separator type=”thin”]
[separator type=”space”]
Let’s look at our HTML document in the browser again, now with tags added in:
[separator type=”space”]
Starting to look a little better right?
[separator type=”space”]
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.
[separator type=”space”]
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:
[separator type=”space”]
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>.
[Tweet “You should know the basics of HTML. Learn it quick with this free cheat sheet just for bloggers!”]
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 .
68 Responses
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.
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?
Hey Michelle, there are a few CSS3 generators out there and this one is perhaps the closest to what you’re asking for: http://enjoycss.com/ Let me know what you think of that one.
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!
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 🙂
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 🙁
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 🙂
That’s very kind of you. I emailed you back. It’s all working now 🙂
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. 🙁
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!
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.
This was very easy to understand and I am confident to move on and work at it more. Great job!
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!
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!
Thank you Rena! That’s so sweet of you to say! I can’t wait to show you more next time! 🙂
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!
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!
The best explanation thus far!!!!!! So easy to understand! Thanks for sharing!
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!
I’m also having problems with the pop up. It stays shaded & disappears when I try to enter my info.
Marianne, it finally worked – thanks.
T
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!
Finally! Something that explains it in terms I can understand. I’m so grateful to have seen this post!
Awesome Florence, that makes me so happy to hear!
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.
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!
I can’t download the link.
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?
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
You’re welcome Alice. I understand how overwhelming it can be to start a blog. It was for me too and I’m a seasoned web designer/developer!! So glad you found DYOB and let me know if there’s anything I can do to help. And be sure to join the Facebook group if you haven’t already: http://designyourownblog.com/blog-beautiful-facebook-community-guidelines/
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
Hi Emma, can you try it again and see if it works now?
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 🙂
Thanks Nas!
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
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.
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!!!
Awww Tay, thank you so much, that means a lot!
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.
Definitely a good skill for anyone to have in their back pocket!
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!
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!
Hi Lauren, I am so glad you found it so easy to understand. Thanks for watching the 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!
well job sir this is a complete post about HTML and CSS
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.
Thanks for sharing this useful knowledge,Impressive writing. ♦
I appreciate you and hoping for some more informative posts like this one…
thanks a lot for this fruitful tutorial ,never knew alot about coding and stuff and this article realy helped alot
I’m so glad it helped you Mohamed, cheers!
When I type on the fields the pop up disappears
Hi Ahmed, I cannot recreate this issue. What type of device are you using? Which browser are you using?
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.
Thanks for reading and your sweet comment Raheel.
Thanks for sharing such a piece of powerful information on HTML & CSS design.
Thanks for your article!
I think that people should learn about the blog to improve their job.
Useful information!
Html and CSS are popular software in technology. Each developer should research them to design good blogs for the business.
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.
good points Trang, thanks for weighing in!
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
That’s great Akujudi, thanks for letting me know your experience!
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
knowledge is power 🙂 thanks for reading and sharing your thoughts.
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!
Glad to hear it, thanks for sharing your thoughts with me.