back to contents

Web Dev: HTML and CSS, the basics

view source

HTML and CSS are the basics. The basic basics. The very basics.

Right-click on this page right now and click on View Source or View page source or whatever. Just do it and take a look at that. I'll wait. Come back to me when you're confused enough.

what is this nonsense with the <s and the >s

excellent question! you're on the right track. we'll start out with HTML and worry about CSS later.

HTML, if you care, is HyperText Markup Language. That's neat; you should get used to acronyms and abbreviations. It's a standardized way of building something for display in a browser.

And the beautiful thing is that it's all actually just plain text! Nothing special about it. Just text. That's why you can right-click on this page and view the HTML source.

Right now you're in a web browser viewing this page, whether it's Firefox or Chrome or Safari (let's hope not IE). All those browsers really do is render HTML.

What does that mean? Rendering HTML? It means your browser takes this page, which is just a text file, reads it, and constructs the page as it is described with the HTML. The HTML is a set of instructions that the browser follows.

it's like a cooking recipe that only the browser understands. think of all those things between the < >s as ingredients! when the browser is done following the instructions, it shows you the webpage.

This text is bold because it has <b> tags around it. You don't see those tags because they were interpreted by the browser and taken out. All you see is the bold text, not the tags. But you can see the tags when you view source.

Try to find this text right here you're reading right now in the Source for the page. DO IT! (but come back when you have.)

HTML is tags

The letters/words you see between those < > are called tags. Here are some tags:

There are a lot of tags and each is interpreted differently by a browser.

Tags surround that which they work upon. What does that mean? Here's an example:

<b>This text is bold.</b>

The <b> tags surround the text that will be bold! There is a starting tag, <b>, to tell the browser where the boldness should begin, and there is a closing tag, </b>, where the boldness should end.

It's really that simple at the foundational level.

Make Something

All you need to make a web page is a plain text editor and a web browser.

Open up a text editor. If you're on a PC, NotePad will work great. If you're on a Mac, TextEdit will work great. (However, in TextEdit, make sure when starting a new document that you go to the Format menu and select Make Plain Text.)

Before you now is the simple, blank canvas of HTML. All of it will be here. There are no secrets. It's all just text! You're going to write the recipe that the browser will follow to make your page.

So to start an HTML document, you must remember that this will be read by a browser, so you're writing something for a machine to understand.

The first thing it needs to know is that this is HTML! Put this into the text file:

<html>

</html>

Hah! Congrats, that'll tell the browser that everything between the html tags is html! Pretty straightforward so far. Everything from now on will be written between the html tags.

There are two main sections of any HTML document. They are the head and the body. When you look at a webpage in a browser, you are looking at the body. The head section is for the browser to worry about. Take a look at this simple example:

<html>

<head>
<title>this is where the page title would go!</title>
</head>

<body>
<p>this is just a paragraph on the page</p>
</body>

</html>

Notice the following, just to be clear:

Inside the head section you would put things like the page's title, any javascript you want to load, and the CSS style for the page. But don't worry about that yet; just understand that the head section contains things that nobody will really see but the browser.

Inside the body section you would put the things you actually want a person to see when they open this HTML page. Actually, try it! Save this document to your desktop or wherever as awesome.html and then right-click on it and open it with Safari or Firefox or whatever. You should see just the paragraph text.

You should also see that the title of the page in the browser window is what's within the title tags. Magic!

CSS makes this thing look gooood

We are really early in the game in terms of learning HTML, but I want to inject you with some more knowledge while the iron is hot.

HTML tells the browser how to show you things... CSS tells the browser what style those things should have.

CSS stands for Cascading Style Sheets, or it'll frequently just be called the page's style. It typically will exist inside the HTML page's head tag. Let's put some simple CSS into the basic page you just made:

<html>

<head>
<title>this is where the page title would go!</title>
<style>
p {
  color: blue;
}
</style>
</head>

<body>
<p>this is just a paragraph on the page</p>
</body>

</html>

Don't panic! All we did was add another section, within the style tags, inside the head section. And between the style tags we put some CSS instructions.

Can you guess what it does? I'll just tell you: It tells the browser that the text inside the p tag should be colored blue! If you save this file and open it in a browser, you'll see that I'm so totally right.

Here's the syntax, as it's called. You first have a selector, in this case the tag name p. Then you have some curly braces { }. Inside those curly braces you put the description of how you want that selected item to look! After each attribute and value (the color is an attribute with blue as its value) you need to put a semicolon!

And that rule we wrote will apply to every p tag we put in this HTML document... unless we say otherwise. First let's demonstrate this. I'm not going to show you the code; I'm going to tell you to do this and I want you to do it.

Add another paragraph to the page inside the page's body. It can say whatever you want. Save the file, open it in a browser, and make sure you now have two lines of text.

Did you figure that out? I hope so.

You should notice that both paragraphs are blue! How do we make only one of them blue? How do we color other parts? What other parts are there to add!?

more about HTML

HTML is made up of tags; you know this now. But that's just the first step. There's more to HTML than just that.

Tags can have attributes in them. For example, take a look at this:

<p style="color:red;">this will be a red paragraph</p>

The only thing new here is that style="color:red;" part. What does that mean? Well, that's an attribute and a value.

style is the attribute name and color:red; is its value!

If you add this to your HTML file in the body section, you'll notice that the paragraph will indeed be red.

Almost every tag has attributes you can use. The best example of this is making a link on a page. This is how you make a link:

<a href="http://www.google.com/">clicking this text will take you to google</a>

The a tag means link! (Really, it means anchor, but that's outdated.) But it needs the href attribute to know where to go.

All attributes go within the < > of the opening tag. Check this out:

<a href="http://www.google.com/" target="_blank">clicking this text will take you to google</a>

That link has two attributes, the first being where the link goes and the second being how to open the link. The target attribute, when set to _blank, opens the link in a new window or tab.

HTML and CSS standards: classing up the joint

So now you should have a good grasp of basic HTML and basic CSS and how they work together. You know the grammar of it; you just need to learn some more vocabulary, and you'll be fluent in no time!

An important development of the last five to ten years has been the idea that there are web standards everyone should conform to, or at least do their best to conform to. There are technically a huge number of ways you can write a webpage in HTML, but there are a few best practices I'll teach you at the get-go.

One of the most important ones is that HTML makes up the structure and CSS tells the browser the look of that structure. So you'll always have HTML in one place and CSS in another, never really mixing together.

So all your CSS will be in between those style tags instead of being in the HTML tag's attributes as I showed you above. I'll explain this by showing you two HTML pages that do the same thing, but in different ways.

Let's say we want every p tag to be blue. Here's one way:

<html>

<head>
<title>this is where the page title would go!</title>
<style>
p {
  color: blue;
}
</style>
</head>

<body>
<p>this is just a paragraph on the page</p>
<p>this is just another paragraph on the page</p>
</body>

</html>

That's the way I showed you before, and it's the standard way of doing it. Here's another way:

<html>

<head>
<title>this is where the page title would go!</title>
</head>

<body>
<p style="color:blue;">this is just a paragraph on the page</p>
<p style="color:blue;">this is just another paragraph on the page</p>
</body>

</html>

First of all, it's entirely valid to do it this way, and sometimes you might want to. But you'll have to keep adding those style attributes to every p tag if you want them all to be blue. Very inefficient.

The reason the standard exists is to reduce repeating yourself and to separate structure from style. Two things to keep in mind.

But what if we want one paragraph to be another color? Say we have three, like this:

<html>

<head>
<title>this is where the page title would go!</title>
<style>
p {
  color: blue;
}
</style>
</head>

<body>
<p>this is just a paragraph on the page</p>
<p>this is just another paragraph on the page</p>
<p>a third paragraph. insanity!</p>
</body>

</html>

We want the second paragraph to be red! How do we do that in a standards-friendly way? Well, the answer is to give it a class. Check it out:

<html>

<head>
<title>this is where the page title would go!</title>
<style>
p {
  color: blue;
}
.redtext {
  color: red;
}
</style>
</head>

<body>
<p>this is just a paragraph on the page</p>
<p class="redtext">this is just another paragraph on the page</p>
<p>a third paragraph. insanity!</p>
</body>

</html>

See what I did there? We did two things: added the class attribute to the second p tag and set it to redtext. Next, in the CSS, we added a selector aimed at anything that is the redtext class.

The period is a special character within CSS. When you put it before something, in this case redtext, it denotes that the text after the period is a class name. If there was no period there, the browser would assume it's a tag name, but no such tag name (redtext) exists. So it just wouldn't do anything and the browser would ignore it.

The pound character (#) is also special within CSS. It means id, which is another HTML attribute. The difference between a class and an id is that ids are unique. There can only be one HTML tag with a certain ID. So if you wanted to, you could also write the above problem this way:

<html>

<head>
<title>this is where the page title would go!</title>
<style>
p {
  color: blue;
}
#redtext {
  color: red;
}
</style>
</head>

<body>
<p>this is just a paragraph on the page</p>
<p id="redtext">this is just another paragraph on the page</p>
<p>a third paragraph. insanity!</p>
</body>

</html>

But in that case, you can't use the redtext id again anywhere else! A class you can use over and over, so if you want to make just a couple paragraphs red, you can apply the redtext class where you see fit.

However, just as a teaser, the id attribute is one commonly used by javascript. So don't dismiss it just yet.

where oh where do we go from here?

Honestly, you now have the basics of HTML and CSS. You should have a good understanding of the syntax of HTML and CSS. I'll give you a few more tips here, but this is now your best resource:

the coolest HTML tags

a quick but important note

So I told you that all tags have a starting and ending tag... well that was kind of a lie.

Some tags close themselves! Images are the best example. An image, in HTML, you'd think would be added to a page this way:

<img src="some_image.jpg"> </img>

But it's actually done this way:

<img src="some_image.jpg" />

That's it! But see, it doesn't have a closing img tag. It just closes itself. Why is it this way? I don't really know. Probably because what could you put inside an image tag?

Anyway, that's important to remember, but only a few tags do this. When you look them up in a reference guide, it'll let you know if it's a self-closing tag. Most are not.

the coolest CSS tips

<body>
  <div>
    <div>
      <p>hello!</p>
    </div>
  </div>
</body>

I've indented it to make it a little easier to see. There's a body tag that holds a div tag. That div tag holds another div tag. That div tag holds a p tag. This is a tree of information! It's a hierarchy.

The first div is a child of the body tag. The body tag is the parent of the first div tag. The second div tag is a child of the first div tag.

So, in CSS, if you wanted to select just the first div tag and make its text red, you could write this: body > div { color: red; }. That would select all div children of the body tag. Get it?

Anyway...

colors! #FFFFFFFFFFFuuuuuu

Yes, so far, I've been using keywords for colors. In CSS, you can indeed say red and it'll be valid. But what about a darker shade of red? You can't write darker red in CSS.

You should know right now about hexadecimal color notation... seems strange, but let me explain. It looks like this: #00FF00. That's a hex color. It's a basic way color is described in HTML and CSS.

It's made up of six characters which can be 0-9 and A-F... that makes up hexadecimal stuff. Think of the A-F as if they're numbers beyond 9. Count with me:

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

That's the hex number scale. The lowest value is 0 and the highest value is F.

Okay so let's bring that back to colors.

Hex colors in HTML/CSS are broken up into three bits of two-digit values, signifying red-green-blue. Let's look at the example I just gave you: #00FF00.

So you put all that together and what do you get? Just green. Bright neon green. Here's how you'd use it in CSS:

<style>
p.greentext {
  color: #00FF00;
}
</style>

That code would make every p tag with the greentext class have gaudy green text.

This hex-based color representation is a red-green-blue additive color model. You start at #000000 (black) and end at #FFFFFF (white). In between, to create individual colors, you have to add red green and blue in different amounts.

Here's a good hex color wheel to help you get the feel for it. I use that all the time.

NOTE! You may notice a lot of places talk about "web-safe" hex color codes. This is definitely something you should keep in mind. Every computer and browser renders color differently! Even though it can be very subtle, it's true. A very specific shade of green may look a little different in firefox over safari. There are certain web safe colors which work 99.9% of the time across all browsers. For the most part you don't have to worry about it, though.

a bigger example

<html>

<head>
<title>this is where the page title would go!</title>
<style>
body {
  background-color: #000000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: white;
}
h1 {
  font-size: 2em;
}
a:hover {
  color: #cccccc;
}
p {
  color: blue;
}
.redtext {
  color: red;
}
p.redtext {
  width: 100px;
}
</style>
</head>

<body>
<h1>a header!</h1>
<p>this is just a paragraph on the page</p>
<p class="redtext">this is just another paragraph on the page</p>
<p>a third paragraph. insanity! <a href="http://google.com">with a link!</a></p>
</body>

</html>

Save that in your text editor and open it with a web browser and have a look.

Notes about this example:

The most important note is that this example clearly illustrates the separation of style from structure. You have your CSS up top and your HTML down below. They don't mix as long as they don't need to.

Removing the CSS even further

While I've been showing you how CSS should live in the head tag, in practice we actually remove it even further.

Most of the time in an actual webpage, you'll see this:

<head>
<title>this is where the page title would go!</title>
<link rel="stylesheet" href="page.css" />
</head>

No style tag there. Just that self-closing link tag which points to another file which holds all that CSS. That CSS file is just another plain text file called page.css, it could look like this:

body {
  background-color: #000000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 14px;
}

h1 {
  font-size: 2em;
}

a:hover {
  color: #cccccc;
}

Just all the CSS instructions moved to another file. Nothing too crazy.

Don't worry! All of those instructions will be read by the browser as if you had left them in the same file as the HTML.

But again... this further reinforces the idea of separating style from structure! So much so that the style itself lives in a different file.

what "HTML5" is and why you shouldn't care

There's a lot of buzz going on in the web about HTML5... you've probably heard some of it. About video and no more Flash and so forth.

It's all just hype. What's actually happening is the same thing that always happens: there are new features in the HTML langauge. No big deal.

Nothing is really changing that much. Just now you also have a <video> tag you can use alongside your <div> tags. I mean, it's cool, but it's not earth-shattering.

What they are really talking about when you hear HTML5 is the fact that over the past five years or so, developers are gaining more control over the web, and we're trying to make it a better place to work.

Ten years ago, there were two major corporations controlling how the web looked: Microsoft and Macromedia. More specifically, Internet Explorer and Flash.

Both are proprietary, closed, volatile systems that require you to make sacrifices just to use them. You will always hear designers and web developers complain about Internet Explorer because it does not play by the rules. Firefox, Chrome, and Safari are committed to playing by the rules so that you, as a web developer, don't have to worry about whether your CSS style will work across all browsers.

The HTML5 revolution is mostly about making sure everyone plays by the rules so that we can have a better internet. It's about enabling web developers to be more confident about the way they develop.

The reason you should not care is because you are entering a world that is this way. I can tell you war stories of how the web used to be, but that's not the way it is anymore. Enjoy the fact that you can write HTML and CSS and it'll work for 99% of users. Five years ago, it might've only worked for 50%.

That having been said... many of the new features in HTML version 5, like the aforementioned video tag, don't work half the time depending on what browser you're using. But we're moving in the right direction at least. Internet Explorer and Flash aren't in control of it anymore; we are.

So don't worry about HTML5. Here's a kitty, think about that:

conclusory

So that's the basic-basics. You might have to re-read this a couple times to really let it sink in. But more important than that, you need to build something in order to truly understand it.

I'll keep repeating myself on this point, too: learn how to read documentation and reference guides. No web designer knows 100% of HTML and CSS, but what they do know is how to look it up. Learn that skill early.

So please, make a webpage for yourself! Make it look cool! Go to a website you really like and look at it's HTML code and try to visualize how it all works. It takes time and practice.