HTML & CSS

Intro

HTMl and CSS are two languages that help you build websites. HTML is a markup language that allows you to specify the content in a website, while CSS is a language that helps you style a page.

Getting Started

  1. Create a project folder where you can dump all your files
  2. Make a text file titled “index.html”
  3. Start coding in file
  4. To preview the website, double click your file in Finder or force open with Chrome

HTML uses tags like <html>, <body>, and <p>. For most tags, the opening tag must have a corresponding closing tag like </html>, </body>, and </p>. Each HTML file begins with the tag <!DOCTYPE html> and has a <head> section and a <body> section inclosed in <html> tags:

<!DOCTYPE html>
<html>
<head>
	<!-- meta information -->
</head>

<body>
	<!-- website content -->
</body>
</html>

Note that lines that look like <!-- text --> is a comment that is not part of the code. The <head> section contains meta information about the document and certain “settings” that you may need later on. The <body> section contains the content that you will see on your website.

Typically the head will look like this:

<!DOCTYPE html>
<head>
	<!-- meta information -->

  	<title>
      Website Title Goes Here
	  </title>

    <link rel="stylesheet" href="styles.css">
</head>

The line <link rel="stylesheet" href="styles.css"> references a css file that is used to style the website. More on this to come later…

An example of a body would look like this:

<!DOCTYPE html>

<body>

	<h1>
    Top level header!
	</h1>
	<p>
    This is a paragraph
	</p>
	<h2>
    This is a second level header
	</h2>

  <ul>
		<li>List item 1</li>
		<li>List item 2</li>
		<li>List item 3</li>
	</ul>
</body>

And that’s about it! The rest of it is a lot of googling. If there’s anything you want to do on your website like add a link, image, or a navigation bar, chances are someone has already asked it on StackExchange.

Adding CSS

CSS helps with things like colors, sizing, and layout of different elements in HTML. For example if you want a solid border on a paragraph or a background image for the entire website, you will need to use CSS.

One way to add CSS is to do it in-line. Within your HTML tag, you can specify the style with <p style="color:blue;"> This is a blue paragraph </p>. In-line styling will modify only the element specified by the tags. On the other hand, if you would like to add styling to the entire page, you can add CSS to the head of the HTML document.

<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>

Note that doing this makes all the h1 in the document turn blue and all the p turn red. Sometimes you may want to add a lot of CSS to your website, which would make the head element way too long. To account for this problem, we simply add <link rel="stylesheet" href="styles.css"> to the head and add the exact same styling to styles.css. An example CSS file can look like:

body {
  background-color: powderblue;
}

h1 {
  color: blue;
}

p {
  color: red;
}

More Resources

HTML stands for Hyper Text Markup Language and will create the structure and content of your web page. CSS stands for Cascading Style Sheets and describes how your HTML elements look on screen. They often work together to create your page and make it pretty. Here are a few tutorials to help you get started with HTML and CSS!