Website Basics - Part 1 (CSS/HTML)

In order to create clean, good looking webpages, it helps to first understand the basic workings of your website.  There are two main pieces that make your site look and work the way that it does - Hyper Text Markup Language (HTML) and Cascading Style Sheet (CSS).

Hyper Text Markup Language (HTML)

HTML is a language used to describe webpages which a browser (Internet Explorer, Firefox, Safari, etc.) can then display.  Every page, including this one, is made up of plain text and HTML tags.  The plain text portion of a page is all of its content - basically everything you can see.  The HTML tags are not displayed, and are instead used by your browser to interpret the content.  It is HTML that defines a page - giving it structure, basic formatting, and its content.

Cascading Style Sheet (CSS)

CSS is a list of rules and controls the overall style or presentation of your site.  While HTML says things like "this is a paragraph" or "this is a list", CSS says things like "paragraphs should be center-aligned" or "lists should display with blue text".  CSS simply decorates, aligns, positions, etc. the basic HTML structure.

Putting it Together

If you think about a house, HTML would be the basic structure - floor, walls, roof, etc.  The house is perfectly livable and has all of the essentials, but it is rather plain.  The same concept applies if we create an HTML page and view it without any CSS applied - the page is perfectly acceptable and has all of the necessary content, but it's plain.  This is where CSS comes in.  For a house,  CSS would be like the interior design - you can paint walls, hang curtains, and add tile to one floor and carpet to another.  For an HTML page, CSS can change background colors, font colors, sizes and types.  Take a look at the following images to see an example of each.

This is how the page is rendered in a browser without CSS applied:

This is how the page is rendered in a browser with CSS applied:

Both are using the exact same HTML code which you can see here:

Even in these very simple examples you can see that CSS can have a big impact.  CSS is the reason that even though most webpages have the same basic structure (HTML), they don't all look exactly the same.