Crash Course

HTML and CSS

Dive into HTML

What is HTML?

HTML (Hyper Text Markup Language) is the language used to tell computers how to structure webpages. HTML stands for Hyper Text Markup Language. Here’s a really simple web page:

I can <em>hear</em> you!

Because the word is wrapped in what we call tags, this page displays as a single line of text with the word “hear” italicized. The <em> tag tells the computer to emphasize anything inside of it. If a blind person were listening to the webpage, a computerized voice would place emphasis on the word “hear”.
Elements are the building blocks of a webpage.

The combination of an opening tag — in this case, <em> — its corresponding closing tag — </em> — and the content in between is called an element. There are many kinds of elements. Aside from the <em> element, one of the most useful elements is <a>, which can be used like this:

<a href=“http://wikipedia.org”>Wikipedia</a> is cool.
Attributes add meaning to elements.

This element is slightly more complex because it includes an attribute, or piece of information that adds meaning to the element’s content. In this case, the href attribute tells a computer that “Wikipedia” is associated with — or hyperlinked to — the website wikipedia.org. That means clicking (or tapping) on the word will take the reader to Wikipedia’s website.Some elements don’t actually contain any content, and hence have no closing tag, but represent special kinds of content themselves. One example is the <img> tag:

This is serious! <img src=“http://seriouscat.com/serious_cat_is_serious.jpg”>
Nesting Elements

Finally, it’s also possible to put elements inside each other, also known as nesting them:

<a href=“http://en.wikipedia.org/wiki/Lolcat”> <img src=”http://seriouscat.com/serious_cat_is_serious.jpg”> </a>
This links the picture of a cat to the Wikipedia entry on Lolcat.
There is a complete list of all HTML elements here:
https://developer.mozilla.org/en/HTML/Element

Dive into CSS

What is CSS?

HTML gives a page structure and meaning, but it’s still quite abstract because it’s meant to be consumed by all kinds of people using all kinds of media. When you want to give a page style that’s specific to a particular medium, you use a different language called CSS.

One easy way to tinker with CSS is by adding a style attribute to elements in your HTML. The contents of this attribute are CSS properties that tell a computer how to style the element. For example, we can use the color CSS property to set text color:

I can <em style=“color: red”>hear</em> you!

This will cause the word “hear” to be red. We can add more properties by separating them with semicolons, like so:

I can <em style=“color: red; background: pink;”>hear</em> you!

This will cause the word “hear” to be red and have a pink background. Playing with CSS properties can be lots of fun.
You can see a full list of them here:
https://developer.mozilla.org/en/CSS_Reference
But what about when you want to make all <em> elements be styled this way? It sure is tedious to add the same style attribute to every occurrence, and this approach also makes it hard to change all the styles at once when you want to tinker. This is where CSS stylesheets come in, and they’re actually what most webpages use — but they’re also out of the scope of this tiny guide.