User:Austi tanki/Soh1337's Website: An in-depth look/The CSS

In this chapter, we are going to look at the CSS file in parts. The full CSS file can be found here. @charset "utf-8";

This first line just declares the character encoding of the CSS file to be utf-8 or UCS Transformation Format — 8-bit. body {

These lines of code tell the browser that we are going to define how to display the body tag, which is basically the whole web page. The technical term for the first line is a selector. background-image: url(assets/background.jpg); background-attachment: fixed; font-family: Calibri, Verdana, Helvetica, Sans-Serif; font-size: 1em; }

These lines are declarations that change properties of the selector tag (the body tag).

The first line gives the page a background image of that image defined in the parentheses. The second line tells the browser to make the background move when the user scrolls the page.

The font-family property defines which fonts to use on the page. First it checks if the user has the first font. If so, it uses that font for the page. If not it checks the next font, until it reaches the font "Sans-Serif". That just tells the browser to use the defined Sans-Serif font.

The font-size element tells the browser to use the browser's current font size. The default for that is normally 16px, so the text size is 16 pixels. div#centre {    margin-left: auto; margin-right: auto; margin-top: 40px; width: 800px; background: #FFF; }

These lines of code defines how a div tag with an ID of centre should look. On all of my pages, the div tag that has the id of centre is a div tag that encompasses all of the content of the page. This div tag is used to create a sort of text box in the middle of the page.

Setting the margin-left and margin-right to auto tells the browser to split up the available margin equally on both sides of the "text box". The margin-top property tells the browser how much whitespace to leave at the top of the "text box". In our case, it tells the browser to move the "text box" down by 40 pixels, so as to leave 40 pixels of whitespace at the top of the "text box".

The width property shows how wide the "text box" is going to be. This also tells the browser how much space can be split up between the two margins.

Finally, the background property defines the colour of the background of the "text box". The value here is an RGB value displayed in hexidecimal. RGB values come in three numbers. How much red, green and blue there is in that colour. These amounts are from 0 (none) to 255 (full). Hexidecimal is base 16, which goes from 1 - F (16). So #FFF is white, or 255 red, green and blue. You may be thinking that this is a mistake, as F in hexidecmal is 16 in decimal. However, if there are only 3 values, it duplicates each one, so #FFF becomes #FFFFFF, with each group of 2 representing how much red, green and blue there is. If you wanted 16 of each red, green and blue, you would have to do #0F0F0F. If you don't get this now, don't worry, as it is not explained well and you can either search online for a better explanation, or wait until I update this one.

The Navigation Bar
ul#navbar {    list-style-type: none; padding: 0px; margin: 0px; height: 40px; }

These declarations apply to a ul tag (unordered list) with an id of navbar. An unordered list is like bullet points in MS Word. A ul tag with the id of navbar is placed on all pages, in the "text box" we created earlier.

Setting the property of list-style-type to none means that there will be no bullet points visible. Padding is like margin, but sets how much whitespace there is inside the element. So we set both to 0 to make sure there is no whitespace in or outside the element.

The height property should be self-explanatory - it defines the height of the element. ul#navbar li { margin: 0px; float: left; }

The selector means to apply the declarations to each li tag (list element) in the ul tag with an id of navbar. A list element is basically one bullet point and the content it contains.

By now, you should know what margin does. Setting the float property to left basically pushes the element left as far as it can go. So the first list element is pushed left until it hits the left side of its containing element, then the second one is pushed left until it hits the right edge of the first list element and so on. ul#navbar a { display: block; width: 199px; height: 30px; background-image: url("assets/navButton1.png"); background-repeat: no-repeat; text-decoration: none; text-align: center; padding-top: 10px; color: #00F; }

(Under Construction)