Project 3 – Website Production – Task 1- The difference between HTML and CSS

For this project I have to write a short analysis of HTML and CSS and how they affect web design.

The difference between HTML and CSS:
HTML is a language that makes a webpage. It stands for Hyper Text Markup Language. It basically is a set of markers placed inside of text to define it’s structure.
HTML will say things like:

  1. this is a paragraph
  2. or this is a list item
  3. or this is a link

CSS defines the styles of these markers. It stands for Cascading Style Sheets, which pretty much describes it! CSS will say things like:

  1. the paragraph font is Verdana
  2. or the list item has this image as the bullet
  3. or the link has this colour and is/is not underlined.

When you write a web page, this is a html document. In the head of the document you can either link to a style sheet (for the css) or write the css inline in the head section of the HTML page. Best practice is linking to a style sheet, so you do not have to rewrite the styles for each page.
This is an example of the head area of a page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>This is a HTML page with CSS Styling</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

As you can see it starts of with a Doctype, this must be the very first thing you start of with, even before the html tag. This is because it is an instruction to the web browser, what version of HTML it is written in. It refers to a Document Type Definition (DTD) which specifies the rules, so that the browsers render the content correctly. In the above code, the Doctype refers to XHTML version 1.

Te next tag is the html tag. The html tag tells the browser that this is an HTML document and is the container for all other HTML elements (except for the Doctype).

After the html tag you will see the head tag. This is where you see the reference to the style sheet. it also must contain a title (which you will see in the browser) and can also contain scripts, meta information, and more.

This is an example of a Body section:

<body>
<div id="wrapper">
  <div id="header">This is the header, it can contain an image, a logo, a graphic or the title of your website</div>
  <div id="navbar">This is the 'navbar' where the navigation for the website will be such as links to  Home . About . Contact .</div>
  <div id="sidebarleft">This is the left sidebar<br />
  It can contain images, text, forms or even the navigation menu<img src="images/skating2.png" width="150" height="83" alt="this is an image in the sidebar" /></div>
  <div id="sidebarright">This is the rightsidebar, it can contain the same information as the left sidebar, although usually the main navigation would be kept on the left as people tend to read from left to right</div>
  <div id="maincontent"><center><h1>This is the h1 tag of the main content of the website.</h1>
  <p> This is an example of paragraph text within the main content. Usually the main content contains all or a combination of:</p>
  <ul><li> text</li>
  <li><a href="#">links</a></li>
  <li>images</li>
  <li>videos</li>
  <li>forms</li>
 <li>the list is endless!</li></ul></center> </div>
  <div id="footer">This is the footer, this usually contains copyright information and can contain navigation menu (usually a duplicate) specifically links to a sitemap, contact page and T&C's or privacy statements</div>
  </div>
</body>
</html>

In the above example I included ‘div tags’ which are divisions or sections in an HTML document which are used to group block-elements to format them with styles.
Within Dreamweaver you can choose to have some of these included within your document, I have written these from scratch in one of the workshops from college.
The div tags start off with a wrapper, this wraps all the content together. This means that the ‘closing div’ , the same as an opening one, but with a / preceding it, is at the end of the document, just before the closing body tag. Within the wrapper, there is also a header, a navbar, two sidebars, main content and a footer.

The resulting page looks like this: ( I have added a background colour to each div so you can distinguish them easier)

CSS Syntax:

The 2 parts of a CSS rule are a selector and one or more declarations.
A selector is usually the html tag that you want to style, and the declarations are what you want to change and what you want to change it to. These are called ‘properties’ and ‘values’
W3 Schools explain it really well in this image:

I have created a style sheet for the above HTML page and styled the p and h1 tags.
The p tag has these styles:

  • Font family Verdana
  • Font size 12 pixels
  • Colour black
  • Line height 20px

The h1 tag has these styles:

  • Font family Verdana
  • Font size 20 pixels
  • Colour blue
  • font weight bold

The code looks like this:

p {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	line-height: 20px;
	color: #000;
}

h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 25px;
	font-weight: bold;
	color: #06F;
}

As you might notice, to change the colour, the world colour is spelled the American way (without the u) ‘color’, otherwise it does not work
Here is what it looks like when you are applying this code in Dreamweaver:
dreamweaver
This is what the above styling does to my web page 🙂
css applied to layout

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>