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.
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:
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
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!
- Five Free Tools to Monitor your Site - Jul 27, 2011
- #SITSpics First Monthly Photo Challenge! - Jul 7, 2011
- Using Google Analytics to Find Blog Topics - Jun 22, 2011
- #SITS31DBBB: What Did a Calendar Ever Do For You? - Jun 15, 2011
- #SITS31DBBB: Monitoring Content with Google Alerts! - Jun 12, 2011
- Spring into Action Photo Challenge Wrap-Up - Apr 14, 2011
- 5 Ways to Protect Photos on Your Blog - Apr 13, 2011
- HTML and CSS Photo Basics: Learn How to Style Your Blog Photos - Apr 11, 2011
- Photo Lines and Repetition Tips - Apr 10, 2011
- Spring into Action: Your Photo Tips! - Apr 7, 2011