HTML Wrap Up and Intro to CSS

So by this point you are familiar with the major HTML elements and you have a pretty solid understanding for how HTML works. But looking at the sites that we have made, and then looking at the Apple website or Amazon.com, we see that there is a huge difference in appearance. So what is the deal there? Well there are still two more HTML elements to go over and then we will move into the world of CSS. First we need to go over some new terminology, INLINE vs. BLOCK level elements. Now while these do not sound familiar, we have already been working with them. Inline elements are those that when used do not cause a line break and have the same paddings and margins as those elements on either side, like the <b> or <font> tags. Block level elements are rectangular eements that have their own margins and paddings, which can be different from those around them, like the <p> or <h>.

<div> tag and the <span> tag

There are two more HTML elements, the <div> tag and the <span> tag. The <div> tag is a block-level element and the <span> tag is an inline element. These are elements that have no characteristics associated with them and are meant to be used and assigned properties as needed. The characteristics are assigned using CSS!

CSS stands for cascading style sheets. What does that mean? Well a style is what something looks like and it is called a sheet because it is all written down in a document. There are three places that CSS can be placed.

  1. External: Is in a separate document ending in the .css extension.
  2. Internal: Is in the HEAD section of your HTML document.
  3. In-line: Is in an actual HTML element with in the "STYLE" attribute.

It is called cascading because the order of the styles listing matters. What ever is closest to the actual HTML element being targeted is what will be applied. Thus External is overridden by Internal, which is overridden by inline. Similarly within any one of those sections, the first CSS rule listed is overwritten by the second, which is then overwritten by the third, and so on. Well that may seem a little weird, but by strategically arranging your rules, you can achieve all sorts of really cool effects...but more on that later.

More coming soon...