Ask the Expert: Learning HTML and CSS Coding

Today we’re tackling tough questions about learning HTML and CSS coding, such as what is HTML, what is CSS, and where you can find the tools you need for learning HTML and CSS. And we’re doing so by answering the questions we’ve received from our community members!

Lindsay from Lindsay Blogs asks:

Where can a beginner go to learn the basics of CSS and all of those scary coding languages that are everywhere now?

Answers Your HTML and CSS Questions

Does your heart quicken and throat close when you accidentally see code? Is your immediate instinct to close the window and run away because it looks so technical?

Take a deep breath!

HTML and CSS are a lot like high school Spanish, but a whole lot easier. They’re also languages, but based on English so you’ll find you recognize most of the words in the “code”. Instead of being used to communicate between people, they tell web browsers how to display text and images in a nice, pretty order.

Any blogger will benefit by knowing at least some of the basics. You may not have any interest in creating your own site design or theme, but understanding code can give you a powerful advantage to be able to customize your blog design or posts.

learn html and css

What is HTML?

HTML stands for HyperText Markup Language. To “markup” something, you just need to put a tag around it. An HTML tag is placed within angle brackets and contains an element and possibly attributes for that element. A common markup might look like this:

<strong>Bold Me</strong>

You can see above that the element “strong” is placed in a tag before and after the words “Bold Me”. It closes with a backslash in front of the second tag.

There are elements tags which aren’t paired up and exist on their own, like line breaks and images. In that case, the backslash is placed at the end of the tag like this:

<br /> or <img src=”url” />

What is CSS?

CSS stands for Cascading Style Sheet. Its sole purpose is to style the elements in your web page. Any HTML element can be styled with one or more CSS properties and each property needs to have a value. The property tells the browser what type of style you’re applying and the value tells the browser how to display that property.

Frequently, most of a page’s CSS will exist in a stylesheet, which is either linked or embeded into the page’s <head> </head> tags. HTML elements in the webpage are named and then the CSS style with the matching name is applied.

How Can I Learn HTML and CSS?

There are thousands of resources and tutorials out there and it really depends on your personal learning style. If you’re a visual learner, try searching YouTube for HTML and CSS video tutorials, like this one on HTML Colors:

I strongly feel most tech savvy people can learn HTML and CSS without ever spending a dime on it. There’s a plethora of books and classes you can pay for to teach you, but I promise you can find all that information and more online for FREE.

Tips for Learning HTML and CSS Coding

learning html and css coding If you’re starting from scratch, learning a new web language can feel daunting and overwhelming. I’ve cried over code more than I care to admit. There are some things I’ve found generally help when trying to pick up something new or apply a new design.

1. Take a Break

This is rule number one for a reason.

If you’re starting to get stressed or emotional or you keep trying and it’s just not working, it’s time to take a break and recharge. The human mind is complex and it’ll start fizzling out if you make it concentrate on one specific thing for too long. Go to sleep. Go take a walk. Go play with your kids.

No mater what, get off the computer and spend at LEAST 15-30 minutes doing anything else.

2. It’s Okay to Learn from Others’ Code

Whether or not a person can copyright HTML and CSS code that makes up their site is a topic of debate. Regardless if it’s legal, it’s certainly not considered good web etiquette to take the HTML and CSS coding that makes up even a large chunk of the page and use it yourself.

However, the individual HTML and CSS tags and attributes are tools and materials a designer uses to achieve their desired look. It’s impossible for these individual building materials to be copyright by a designer just as it’s impossible for a knitter to copyright yarn and needles or a single stitch. So if you find yourself thinking, “How do they DO that!?”, it’s not wrong to view the source code to find out and learn from it.

3. Preview, Preview, Preview

As a blogger, you probably already preview your entries for typos, spelling mistakes and editing opportunities. Especially if you’re adding code to your entries, it’s critical to preview your entry inside your site’s design. Your visual editor cannot be trusted and something that looks GREAT in your dashboard might look like trash when applied to your site.

If you’re changing your site’s design, check your site in as many of the major browsers as possible to see if it looks as expected. You can also use a free website like Browser Shots which takes screen captures of your page in a wide variety of web browsers and lets you view them.

4. Keep Your Favorite HTML/CSS Resources Close

I find myself coming back to W3Schools.com time and again. They have comprehensive CSS tutorials and HTML tutorials that take you through all the basics, whys and hows step-by-step. There’s even a nifty, “Try it yourself” feature for each lesson which gives you a place to apply what you’ve learned and see for yourself how it functions without ever leaving the tutorial or endangering your website.

Perhaps the biggest secret to learning HTML and CSS is that you don’t really need to learn it. You just need to know what it does and what can be done with it!

How to Guest Post: 8 Must-Have Strategies For Success
Oscar Fashion

SUBSCRIBE

We always have a ton happening that you don't want to miss.
 

 
Subscribe to our newsletter for blog tips, conference updates, & sponsored post opportunities now!
 

Comments

  1. Lynda – this is a fantastic post! I love it. I always thought HTML and CSS were choices, not two things that could be used together. I’ve been playing around with small things on my site and was even able to fix formatting errors galore yesterday by reviewing the code slowly.

    I totally agree with “take a break.” It can be so frustrating. I’d like to play around with a page on my site (create a new one and see what I can do) just to get the practice.

    Thanks again for directing me to this post!

  2. Ummm, huh? You lost me at What’s CSS. LOL

    • Before CSS, most HTML design was done in tables inside the page’s source code. Not sure if you’ve ever used MS Word or Excel, but it’s exactly the same as those types of tables. Now that most of the internet has embraced CSS, the majority of the page’s style is done through it. For example if you see a big rectangle on a page like this one with a sidebar to the right and content on the left, that style is exclusively done with CSS.

      Basically it’s a bunch of code saying “make a box this wide. put a border around it. make the text pink. make the background this image.” Each element or aspect of the page has its own style assigned to it. CSS usually lives outside the HTML page itself, in its own stylesheet, hence the name.

      I hope this helps a little. :)

      • Thanks for giving me some more info. I have a feeling this is one of those things I have do actually do. I’m a hands on learner. Although, as you referenced it being like tables in Excel, there’s something about all that I can’t wrap my brain around. Not really even sure how to explain it. I think because it’s somewhat like a formula. Just one of those things that are hard for me to grasp.

        In other news, I’m afraid I might get sucked into your blog. =) Photography, another thing I need to take a class about. I love taking photos, but want to learn so much more. I’ve tried reading about it and nope, gotta do it hands on.

        • I hear ya on being a hands-on learner. I am too. The link I gave to W3Schools.com above is a good place to dig into examples with your hands. I also have an article planned for the future with more practical, immediately applicable CSS tips which may help. (Basically, copy and paste to get this result!)

          Not sure how familiar you are with Excel, but you can “fill” a worksheet white so the graph doesn’t show, then “draw” in big boxes by putting borders around them. You could make an Excel worksheet look a lot like a webpage in that way and it would all be done with tables.

          Thanks for your compliment of my site. :)

          • I need to visit that site when I have the day off. LOL There is A LOT of stuff there! It looks really good. It’s been forever since I used Excel.

  3. html and css are very foreign to me! thanks for taking time in giving us a background about these!

    http://www.theblogforbrides.com
    http://www.journeyofawoman.wordpress.com

  4. I’m so excited to have found SITS! I love everything I’ve read so far and can’t wait to apply it to my own fledgling blog. Thanks Lynda!

  5. I know just enough to be dangerous….. ;)

  6. I’m saving this post as a resource! Thank you!

  7. Ok, I have a question. And I am not sure if this is the best place to post the question since I am kind of changing the topic from html but the question does have to do with education. Could we have a post/lesson on memes? What are they and how they work? I know they probably seem pretty obvious to a lot of people but I still don’t quite understand how they work (there seems to be a lot of different varieties of memes) and how can we build a linky party if we want to start one, etc.

  8. WOWWWWWW! AWESOME topic! I had a great time sifting through this and figuring out which parts I could apply the most. Thank you SOOO much!
    I remember one time when I was *thinking* about maybe attempting wordpress, I googled html cods and CSS like crazy but nothing came close to explaining the basics like this post!!! Thank you SO much for the leads on more information and the amazing support and free-sharing!!!
    -CK

  9. Thank you so much for this! I’ve been asking these questions and not finding the answers. Can’t wait to check out these links.

  10. This is just the post I needed to read! I’ve wanted to change a few things with my blog design but have been too intimidated. The ridiculous thing is I did programming as part of my uni degree and really enjoyed that it was just logic and understanding the rules. Time to have a play (after backing up my template)!

    • Aweseome! Yeah, I think if you’ve done programming before, HTML/CSS is a piece of cake. Good luck! :)

  11. Very helpful info. Thanks for sharing.

  12. I LOVED this post! Thanks so much.

  13. Great advice…. I’ve definitely been wanting to learn more about how to do this….

  14. Love, love, loved reading this. As someone who just recently moved herself to WordPress and is *hoping* to break into Graphic Design at some point, this was extremely helpful and informative. I had NO clue you could view the coding for a website by right clicking. It definitely makes it easier to understand when you can SEE what seasoned pros have done. This might be my new favorite post. Haha :)

    • Fabulous! I couldn’t imagine learning HTML and CSS without being able to see it in action! Viewing the source is incredibly valuable. :)

  15. I’ve bookmarked all these resources. I can feel my GeekFu building as we speak. :-)

  16. LOL – Love the illustration :) Great info!!

  17. Thanks! I had a feel for HTML basics (took a while to get there), but CSS was a mystery. I think I’ll try some of those resources you mentioned. Thanks again :)

  18. Thank you so much for this. I have been wanting to learn html for awhile now. I very much appreciate the links to the resources.

  19. Great post – I’ve been thinking more and more about learning html etc and this was a great little push.

  20. Great post. HTML is scary, but now I feel like it is much more doable.

  21. When I first started blogging 9 months ago, I had NO CLUE about html and had never heard of CSS. I am getting the hang of html, not that I have it memorized, there is no need for that, but I understand how it works. If you write your posts in visual mode and then go look at the html mode, you can get an understanding for a lot of the code as well.
    I am going to go look at these resources you recommend, especially since I still have NO CLUE about CSS, lol!
    Bernice

  22. I think this is one of the most helpful posts I’ve seen at SITS. Thank you to Lynda for helping me understand things better and also pointing to some sources that could assist me in learning more.

  23. That head-body picture is awesome!! LOL

    • I love it! I’m half tempted to get a tattoo like that, but I’d want it to be somehow prettier…

  24. Even this post was too confusing and I was forced to faze out before the end.

    I fear I’m too computer-illiterate to ever know anything. Except – that one I got.

  25. Yep.. that’s how I taught myself to design… search the web! There’s all kinds of great information out there to learn html/css. Great post!

  26. Thank you! Just having some resources that I know I can trust to break it down for me really makes a difference. Without knowing the coding terminology it’s often hard to search for a specific problem since I don’t know what keywords would get me where I need to go!

    • My tip for that would be to look at one page resources like the cheat sheet for things that look interesting to you. For example, you may see there’s a text-decoration property in CSS and want to learn how you can use it to decorate your text. :)

      It also helps me if I see something new and interesting on a blog to view and study the source code to see what CSS properties they’re using to accomplish it. HTML is really basic nowadays and designs mostly exist in the CSS.

  27. It all goes over my head and boggles my mind but I think I should try to learn it someday.

  28. Thank you so much for these resources. I really want to be able to design my own b log and this will hopefully get me started! I can’t afford to shell out money for a designer every time I change my mind about my design!

  29. Oh this is one world that spells scary all the way around! I do see hope now though! I will definitely have to visit W3schools and educate myself a little. Thank you so very much!

  30. Oh, this is SO wonderful. I have long wanted to make the move to WP, but have been scared from the horror stories I’ve heard.

    This, this is getting bookmarked and I am going to STUDY it. I want to move to the BIG girl’s table.

    Thanks for all you do SITS

    Can’t WAIT to see you all at BloggyBootCamp Chicago!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  31. Very interesting post. I learned a lot and actually understood what I was learning. Yeah me. :)

  32. html… is not my forte.. LOL

  33. Thank you so much for the resources. I understand basic HTML but had no idea about CSS. You have made it easier and I am going to bookmark your links to keep them handy :)

  34. HTML and CSS is no problem for me it’s when they keep coming out with new code is when I go nuts. Cause then I have to go and find it then read about then try and get it to work… *dies*

    • Jenny, I totally feel you there. I’m not as into everything new as I used to be, but it’s undoubtedly constant work to keep up. :)

  35. Thanks so much for providing these resources for us! And I love this new feature where we learn from our fellow SITSahs!

  36. Oh, an awesome post! Thanks for decoding for us non-coders!

  37. Ugh, html code scares the bejeezes out of me. But I will definitely look into the recommended resources to learn it. I’m up for a challenge…I think.

Trackbacks

  1. [...] looking to build a better blog in 31 days, don’t where to start when it comes to learning HTML and CSS, desperate for advice on working with PR companies and brands, or clueless when it comes to SEO [...]

  2. [...] many other things, I was busy polishing up my article over at The Secret to Success is Support: Ask the Expert: How Can I Learn HTML and CSS. Go check it out and while you’re at it, join up with SITS. They are a fabulous [...]

Our Story - Privacy Policy - Website Terms & Conditions