What is HTML?

HTML - Hypertext Markup Language - describes all of the content on a page. It goes inside of an .html file.

index.html

<h1>This is a #1 header</h1>
<h2>This is a #2 header</h2>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<div id="image-holder">
	<img src="an-image.png">
	<p class="caption">Here is an image</p>
</div>

See? A few headers, a couple paragraphs, and an image. HTML is easy.

The only interesting parts are id and class, which allows you to describe different kinds of content.

If you look at the example, the div has an id of image-holder, which is basically a name that is unique to that element.

You can do the same thing and assign classes, except they don’t need to be unique.

What is CSS?

CSS - Cascading Style Sheets - take the boring plain HTML content and spice it up with colors, fonts and particular sizes.

In order to specify these colors, fonts, etc, you need to put your CSS into your web page! It can go in three different places

  1. In a lt;style&gt; tag in the HTML page
  2. In a separate .css file, linked to by a &lt;link&gt; tag in the HTML page
  3. Attached to a specific element (h1, p, etc)

(If you don’t like my description maybe try this one)

1. In a style tag

The second-worst way you can include your styles in a page is just put them right into the page.

index.html

<style>
h1 {
	color: red;
}

p {
	background: blue;
	font-family: Helvetica;
}

/* 
	Take the element with an id of 'image-holder'
	and give it 30 pixels of padding
*/
#image-holder {
	padding: 30px;
}

/* 
	Take the element with a class of 'caption'
	and make the font smaller
*/
.caption {
	font-size: 10px;
}
</style>
<h1>This is a #1 header</h1>
<h2>This is a #2 header</h2>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<div id="image-holder">
	<img src="an-image.png">
	<p class="caption">Here is an image</p>
</div>

2. In a separate .css file

Otherwise, you can take all of the content that’s inside of the &lt;style&gt; tag and put it into a separate file (do NOT include the style tags!). Then you just link to it like this:

my-stylesheet.css

h1 {
	color: red;
}

p {
	background: blue;
	font-family: Helvetica;
}

/* 
	Take the element with an id of 'image-holder'
	and give it 30 pixels of padding
*/
#image-holder {
	padding: 30px;
}

/* 
	Take the element with a class of 'caption'
	and make the font smaller
*/
.caption {
	font-size: 10px;
}

index.html

<link rel="stylesheet" href="your-stylesheet.css">
<h1>This is a #1 header</h1>
<h2>This is a #2 header</h2>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<div id="image-holder">
	<img src="an-image.png">
	<p class="caption">Here is an image</p>
</div>

3. With each element, a.k.a “inline”

Never do this.

index.html

<h1 style="color: red">This is a #1 header</h1>
<h2>This is a #2 header</h2>
<p style="font-family: Helvetica;">This is a paragraph</p>
<p style="font-family: Helvetica;">This is another paragraph</p>
<div id="image-holder">
	<img src="an-image.png">
	<p style="font-size: 10px;" class="caption">Here is an image</p>
</div>

My eyes bled just typing that. It isn’t reusable, it isn’t maintainable, it’s easy to have typos, and it’s just plain garbage. Don’t do it.