In this case the whole page is treated normally. The example with the five HTML tags and five CSS properties is contained inside a div (stare into the page source to see what I mean). Outside of this special div I am going to use all kinds of other things.

In addition to properties, CSS also allows to define states for HTML tags. This states allow for HTML tags to exhibit different behaviors based on user input. In this example I will introduce the :hover state, which will change the appearance of a tag when the cursor is positioned over it. Most of the web will tell you that these states are special for link tags (represented by the letter a), but in fact they can be used on any tag, as we are about to see.

This example also illustrated two different ways to embed an image on a webpage, one using the HTML img tag, and the other using the CSS background property. Both of them have their advantages.

The HTML tags I choose for this example are: div, img, a, p, strong.

The CSS properties I choose for this example are: background, width, height, float, margin.

Move your cursor over the images and see what happens. Then try to drag the images into your desktop. What's the difference? Why are they different?

HTML

• img: The img tag is used to embed an image in a webpage. It comes with it's own http request, which means that your browser will send a new query to the browser every time it finds an img tag. It is literally like loading many pages in sequence, one per image. For this reason, some image-heavy websites use a technique called sprites to package multiple images into a single file, and then arrange them through the whole page using CSS properties. As an example go to yahoo.com and use the chrome developer tools to inspect one of the icons in the left sidebar. When you do this, the chrome developer panel should highlight the following src url: http://l1.yimg.com/a/i/ww/met/pa_icons_18/20101213/spr_apps_us.png. You see what I mean?
• div: The div is the anonymous HTML tag. Think of it as a faceless token that is ready to wear any mask and adopt any identity. It has some default properties like most HTML tags do, but it's the one that comes with less baggage, since no specific role has been attributed to it.
• a: The link tag serves to delimit a hyperlink. By using the href HTML property to pass a url string to the browser, clicking on the content delimited by this a tag will take the user to the linked page that corresponds to this url. Here is an example with a surprise link.
• p: P stands for paragraph.
• strong:The strong tag serves to accentuate a portion of a phrase. It is the common replacement to the deprecated bold tag. Look at the source to see how heavily I use it here.

CSS

• background: This property assigns a background to the tag attached to it. The background can be an image or a color. This color can be specified by name, hexadecimal code or RGBA.
• margin: The margin property will set up margins AROUND a HTML element. It will take an input of up to four numbers and it will assign the first number to the top, the second to the left, the third to the bottom and the fourth to the right.
• width: The width property will simply set up the width of a specific HTML element. In this example, we had to give divs a fixed width and height because we were using an empty div to feature an image as it's background. If the div did not have a width and height it would have collapsed to a point because there is no content in it to determine it's dimensions.
• height: The width property will simply set up the height of a specific HTML element. We had to use this property for the reason expressed in the previous item.
• float: Floats are tricky. They are used to force a horizontal flow on a set of divs. They are very popular in combination with the ul and li tags (lists) to define and lay out contextual tabs. The correct use of floats requires the mastering of other layout CSS properties, such as overflow, clear, and position.