Hogwarts Magic :: Where Anything is Possible!

Home
About Us
Affiliates
Job Openings
Contact Us
History of HM
Affiliation
Privacy Policy
Editorials
Trophy Hall
HM Forums
HM Galleries
HM Reviews
HM Awards
HM Email

Socerer's Stone
Chamber of Secrets
Prisoner of Azkaban
Goblet of Fire
Order of the Phoenix
Half-Blood Prince
Deathly Hallows
Other HP Books
Book Mistakes
Name Origins
Recipes

Socerer's Stone
Chamber of Secrets
Prisoner of Azkaban
Goblet of Fire
Order of the Phoenix
Contact the Cast
OoTP Trailer Page

Biography
Wizard of the Month
Official Site

Magical Decrees
Founders
Ghosts
Houses
Staff

Social Order
History of Magic
Quidditch
Ask Merlin
Wizard Money
Dumbledore's Army

Communication
Creatures
Transportation
Dark Arts
Animagus
Horcruxes
Spells
Wands

Azkaban
Diagon Alley
Leaky Cauldron
St. Mungos
Hogsmeade Village
Other Places

Ask the Webmaster
Helpful Websites
CSS Tutorial
PHP Includes
Hosting Guide
Photoshop Tutorials
HTML Tutorials

CSS Tutorial

Cascading Style Sheets (CSS) are one of the great features of websites. They help to achieve an overall image and feel to your website. Basically, a Cascading Style Sheet is a piece of code that sits in the on your page, telling the browser how to display information.
Now, there are various ways to use CSS, and it has practically endless possibilities, but for this purpose of this tutorial, I’m only going to specify the technique that is most commonly used – the most advanced. However, CSS is not a hard technique to learn. In fact, it’s surprisingly simple. If you visit any fairly large website, I can guarantee that they will be using CSS. In general terms, you specify how each tool is to be used, and when you use, the browser simply looks at what you have specified, and does the alterations. Ok, I know this is confusing, but it’s really easier to learn by example when investigating CSS.
The type of CSS I’m going to refer to is is a style that is placed in the <head> tag of your page. Basically, you list the CSS commands you want to use.
All CSS tags make use of the <style>…</style> tag.

Therefore, somewhere in your <head> section, you need to include this code:

<style type="text/css">

This tells the browser that you are using CSS as a type of style.

Next, you simply list the commands you want to use. You can practically classify every style in your website through Cascading Style Sheets. However, lets not get carried away. Say you want to simply change the colour of your font, or you want to see the style of your font, etc, then this is how it is done.

<style type="text/css">

body {
color: blue;
font-face: verdana;
}

</style>

Now, let’s analyse this. You will see I have entered the body command. This is telling your browser that the following commands will appear in the body of the site. Now, next thing to notice is the { brakets. All of your CSS commands must go in these type of brakets. Now, I’ve spaced out the commands on different lines. This is not necessary, however, it’s far easier when reviewing. The on the next two lines, I’ve told the browser how it should display the font of the document. I’ve said that the colour of the font will be blue, and it will use Verdana font style. You will also see I have seperated each command by a semi-colon. This is also necessary, as it informs the browser that that particularly command is done.

Now, I know this is probably confusing at the moment. However, the best way to learn CSS is to simply use it and practice it. Search the web, as there are infinte CSS guides and term lists. I’m only going over the basics here.

However, there are other features which you can do in CSS. Here is what I would do for changing links:

<style type="text/css">

a:link {
color: blue;
}

a:visited {
color: red;
}

</style>