So You Want To Make A Website? HTML & CSS Tutorial

Updated on January 8, 2014

Tutorial Introduction

I myself have been doing web design for about 3 years now. I have always since I started using the internet wondered how it works. Being naturally creative I automatically wanted to design websites. I wanted to be a part of the web revolution and establish my name on the internet as a "good" web designer. One problem I had when learning web design was tutorials where authors kind of assumed that I already knew things about web design. I often got frustrated and wanted to stop learning. With that being I said I will be trying to keep this tutorial clean, simple, and full of information that even the most novice of web designers will understand.

Source

What Are HTML & CSS?

HTML and CSS are the two main languages that make up what web design is today. HTML (hyper text markup language) is the structure of the page, while CSS (Cascading Style Sheets) make up the visual aspect of the page.

HTML is used to describe a web page. Without HTML there would be no content on the page, nothing to read, nothing to describe, nothing... CSS is used to describe the presentation of a web page. Without CSS the page would be very bland and lack personality, and quite frankly would be a pain to even look at. HTML files are saved with the .html extension while css files are saved with the .css extension.

HTML & CSS Syntax Examples

HTML and CSS have very simple and straight to the point syntax's. In this section I will briefly show what the syntax for each language looks like.

HTML

<p>Hi, I am a paragraph wrapped in a paragraph element!</p>

CSS

.p { color: #000; }

List Of Important HTML Tags And Their Uses

<a> - Which is an anchor tag. Used to make Hyper.
<body> - Which makes up the body of a webpage.
<!DOCTYPE html> - Declares a document type.
<head> - Used for the heading of a webpage, not to be confused with a header.
<nav> - Used for navigation elements.
<ul> - Used for making unordered lists.
<ol> - Used for making ordered lists.
<li> - Used for list items.
<p> - Used for paragraphs.
<br> - Used for line breaks.
<code> - Used for displaying codes.
<header> - Used for introductory elements such as navigations, logos, headings, and whatever else you'd want to use to intrduce your page.
<footer> - Typically used for author credits, copyrights, or links to similar articles.

There are many more HTML tags out there and I'd suggest you get familiar with them all. At the end of this section I will provide you with a link to a good resource for just that.

https://developer.mozilla.org/en-US/docs/Web/HTML

List Of CSS Properties And Their Uses

background - This property sets a background to an element.
padding - This property sets the padding to an element. (Inner margin)
border - This property sets a border to an element.
margin - this property sets a margin to an element.
color - This property sets a font color to an element.
border-radius - This property sets a border radius to an element.
box-shadow - This property sets a box-shadow to an element.
width - This property sets the width of an element.
height - This property sets the height of an element.
text-align - This property sets an alignment for the text inside of an element.

There are many more CSS properties to be listed but it would be a pain to list all of them here. I will provide you a link where you can read up on a complete database of all of the CSS properties and the correct syntax to use each of them.

https://developer.mozilla.org/en-US/docs/Web/CSS

HTML Attributes

An attribute is a modifier of an HTML tag. Attributes usually come in name-pairs and are separated by an equal sign (=). Attributes are always written in the start tag of an HTML element.

HTML Attribute Example

<div class="" id="" style="">Content to be modified</div>

The Difference Between The Class And ID HTML Attributes

I see very much more than often the wrong use of the class and id HTML attributes. Most people do not know the difference because they basically do the same things... Think again, they are actually very different.

Class Attribute:

The class attribute unlike the id attribute can be used multiple times within an HTML document.

ID Attribute:

The ID attribute unlike the class attribute should only be used once per HTML document. You can also use the ID as a reference for anchor tags on the page to help users get to content easily.

External Stylesheets

Most professional web site designers prefer to keep HTML and CSS separate. This is good practice and very easy to do with a simple <link> tag in the <head> tag of you HTML document.

External Style Sheet Linking Example

<link rel="Stylesheet" type="text/css" href="style.css" />

Bro Tip: You may have noticed that the link tag does not come in pairs. This is because some HTML elements don't. These are called self closing tags. A few examples of HTML elements that do not have closing tags:

<br />
<input />
<link />

CSS Selectors

When styling your document you will be giving various HTML elements the id or class attribute, arguably the most used attribute you will have in your arsenal. Below I will show you the appropriate way to call and element using a CSS selector.

HTML Markup

<div class="class">This is a div tag with a class attribute.</div>
<div id="id">This is a div tag with an ID attribute.</div>

CSS Selector Example

.class { }
#id { }

To call a class you will use a period (.), to call an ID you will use pound sign (#).

Bro Tip: The name of a class or id can be anything you want it to be. As long as it is alphanumeric.

Basic Markup Of An HTML Page

<!DOCTYPE html>
<html>
   <head>
      <title>YOUR SITE TITLE</title>
      <link href="css/main.css" rel="stylesheet" />
   </head>
   <body>
   </body>
</html>

Credits: PixelBanter - Internet Technology Forum - Gaming - Graphic Design - Web Design