< Back

Lecture 3: HTML and CSS Elements


CSS is a mechanism for adding more detailed formatting to the HTML elements we discussed on Tuesday. Typically we don't actually use tables to format our pages. Instead we use CSS to get the formatting to be what we get the right format that we want. Today, we will go over a few more HTML elements, and start talking about CSS formatting.


New HTML Elements

For the following elements, we will discuss them in class today.

  1. Hyperlinks
  2. Lists
  3. Images
  4. Divs and Spans

The Developer Console

Most of the browsers we are going to be using in this class include what is known as the developers console. By default this just lets you inspect the HTML elements, but most of them also let you change the page as it is displayed. This can be a HUGE deal, especially if you are trying to figure out what certain CSS commands actually do.


Inline CSS

The easiest way to start playing around with CSS styling is to perform the styling inline. This not only allows you to play with elements individually, but knowing this style of CSS lets you effectively use the developer console to modify pages on the fly.


CSS Styling

For today, I want you to take a look at the potential styles for the following HTML elements:

Play around with your CS website table structure that you started on last lecture. Rework your page so that it uses the new HTML elements and looks closer to the original page. You may need to rework your Table structure to successfully accomodate some of these.