Learn HTML And CSS Basics Online–For Free

Learn HTML And CSS (For Free!) To Better Your Blog

I’ll be the first one to admit that HTML and CSS scared me when I first started my blogging venture. I got a glimpse of it in the text editor of my free WordPress.com blog. Then, when I moved into a self-hosted WordPress.org blog, even more HTML and CSS sections showed up.

It’s not 100% necessary to learn HTML and CSS to be able to run a self-hosted blog on WordPress. But it does open a variety of new and exciting options.

Learn HTML and CSS hand. Image. [flickr. f-l-e-x/ Creative Commons]

The power of HTML is with you. [flickr. f-l-e-x/ Creative Commons]

You can learn HTML and CSS–for free. It may sound too good to be true, but it’s not.

What are HTML and CSS?

“As an overview, HTML is a hyper text markup language created to give content structure and meaning. CSS, also known as cascading style sheets, is a presentation language created to give content style and appearance.”–Shay Howe

Although they are frequently referred to together, HTML and CSS each have their own, unique style and syntax. They’re different languages. To learn HTML and CSS, it’s important to look at what they stand for, what they are used for and what they actually look like.

HTML: The Basics.

HTML stands for HyperText Markup Language.

It is used to create documents on the World Wide Web. HTML can be seen as the body of your webpage or website. Here is a simple example of what HTML looks like:

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

From the example above, you can see that HTML tags are written between angle brackets < and >. They also frequently occur in pairs, with <> beginning and </> ending the tag. The above example features tags for the body, first heading and first paragraph of a webpage. You can actually see the HTML text of your WordPress posts by switching over to the text editor tab.

CSS: The Basics.

CSS stands for Cascading Style Sheets.

It gives users more control over how webpages are displayed. If HTML creates the body of a webpage or website, then CSS is used to give that page or site a unique fashion sense. This can be done through HTML as well, but CSS allows you to apply changes to multiple tags rather than rewriting the commands with each tag. Here is a simple example of what CSS looks like:

body{
background-color:#d0e4fe;
}

h1{
color:orange;
text-align:center;
}

p{
font-family:”Times New Roman”;
font-size:20px;
}

From the example above you can see the different styles set for the body, first header and paragraph text. CSS looks visually different than HTML. It makes use of the curly brackets { and }. CSS is a bit more difficult to find in your WordPress blog. It’s accessible through the different files associated with your theme.

There are great resources to learn HTML and CSS online.

Learn HTML and CSS and make it beautiful origami crane. Image. [flickr. simonpow/ Creative Commons]

Turn your HTML and CSS skills into something beautiful. [flickr. simonpow/ Creative Commons]

My Top Online Resources.
Codecademy.

In order to learn HTML and CSS (or any other skill for that matter) practice helps the newly learned skills sink in. Enter Codeacademy.

It not only teaches coding basics, it provides interactive exercises for you to put those new skills to use.

It even has 12 HTML and CSS courses for you to learn HTML and CSS basics and see if that type of thing is for you.

A Beginner’s Guide to HTML & CSS.
Need a to-the-point website to help you learn HTML and CSS terminology? A Beginner’s Guide to HTML & CSS takes away the distractions and gives you all the terminology you need–without becoming overwhelming.
w3schools.com.

Like the Beginner’s Guide, w3schools.com gives you HTML and CSS information in an easy-to-navigate website. Topics are broken into multiple subtopics, which makes finding the specific information you are searching for quick and easy.

The site also has a Try-It-Yourself section. There you can put what you learned to use and see what your code would actually look like online. Each topic’s home page includes a link.

The HTML Color Picker is also a pretty awesome feature available on the site. You can use it to find the different Hex values (a specific letter and number sequence given to identify different colors on the web).

WordPress Codex.

The Codex is basically your own WordPress dictionary. It is a great wealth of information for all things WordPress. Beginners can find sections upon sections of WordPress basics, and more advanced users can find more advanced WordPress topics.

What I’ve found is that the Codex is best used to search for specific answers to specific problems. Once you get to learn HTML and CSS basics, it’s a nice place to look for support from fellow users.

Learn HTML and CSS online robot. Image. [flickr. jimsef/ Creative Commons]

Learn HTML and CSS online. It’s painless, really. [flickr. jimsef/ Creative Commons]

Ready to learn HTML and CSS for yourself?

Remember that theory is great, but too much theory can lead to Information Overload. For your average HTML and CSS beginner, it’s important to mix theory with practice. If you decide to step into the wonderful world of HTML and CSS, then balance the reading with the doing.

Do you think it’s important to learn HTML and CSS when you have a blog?

[Featured image via flickr. f-l-e-x/ Creative Commons]

Leave a Reply

%d bloggers like this: