Welcome to Advanced Potions!

This is a sample page that uses CSS. If you view the source of this page, you will see that I have only written out the applicable color codes once - in the header of the document. These "styles" get applied to all instances of whichever tag they apply to.

Before I delve more into the details of CSS, let me first explain what CSS is. The acronym CSS stands for Cascading Style Sheets. The Cascading part doesn't mean much until you're dealing with some pretty complex stuff, so we'll ignore it for now. But the stylesheet bit is nifty. Looking at the top of this document's source, you'll see a bunch of stuff enclosed by the <style></style> tags. That is the stylesheet. For every instance of any tag, your browser looks up at the stylesheet to see what styling (color, size, alignment, etc) should be applied. For example, the paragraphs on this page are enclosed in <dd></dd> tags. So for each of these, your browser sees that it's supposed to color it white, as denoted by the p {color: #ffffff;} section of the header.

CSS can be used to do all the formatting on an HTML page - from background, font colors and types to positioning content and creating layouts (though layouts won't be covered this year). With a good understanding of HTML, you may write up a page of content, and depending on the changes in the style sheet, change the appearance and layout of the page completely.

Now that you know what CSS is, we can move on to the juicy content of Advanced Potions! For this year, we will be covering syntax, formatting backgrounds, text and links.

Page 2 >>