Welcome back. Our created page is a dark background with light text. In the top CSS, we changed the font color with the 'color:#', and the background color with the 'background-color:#'.
So, we can see that these css values are labeled similar to what they change. The beginning part of the css tag tells us where the objects are on the page, like the 'body'. To put the location, and the object being changed, together, we'll have:
body {background-color:#333333;color:#eeeeee;}
The curly brackets contain the changes of whatever is being changed, inside the 'body' part of the page. The six digit number after the colors are a hexadecimal code for digital coloring (2 numbers each for Red, Green, and Blue). The Hexadecimal range is 0123456789abcdef.
Just change the numbers and save, then refresh your browser. You'll see how the color changes. Closer to zero is darker, and closer to 'f' is lighter. If the RGB values are close together, it'll come out grayer. RGB values that are further apart are a more saturated hue.
Also, we changed the size and look of the font (text). The part of the tag that contained 'font-size:1em;' changed the size to 1em (unit). The 'font-family:Verdana, Arial, Helvetica, sans-serif;' part of the css changed the look of the font to what style the browser would display first, probably Verdana. The 'sans-serif' means a font without special decoration, but probably still the Verdana font (just without decoration).
We can tell that there are default colors and text fonts that are already there, even before we change them. So just know that when we see text that isn't changed, even though we changed the css, the browser isn't reading our code correctly.
This happens if we forget curly brackets, forget a semi-colon at the end of a value, omit a proper dash -, or have misspelled tags. That's an easy fix, since we can Google for our particular tag's attributes.
Remember our CSS format for tags is tag{element:value;}. That's pretty simple, if we understand where and what to change.
We'll need to tell all browsers how to read our css/html code, since all browsers are different. If we don't, the browsers will go into what's called 'quirks mode', which will display our code according to old standards that are not part of a single web standard.
The way we tell our browser this information is through a Doctype, or document type. It goes first in our page, before anything else, which makes sense, as browsers read from top to bottom of the document.
Use this Transitional Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Paste it above the <html> tag at the top of our document.
Next, we may want to move our text around the page. This is called positioning. We need to know from where to move the object, text, etc. Do we move it from the edge of the browser, or from another object?
We can differentiate the position with the terms, 'absolute' and 'relative'. Also, we can move things within other things. That would be 'padding'. Moving things away from other things is called 'margin'.
So we don't get confused with all the terms, let's slowly change our code. Let's add a class to change the style of a box (division):
.one {position:absolute;}
Paste this right above the closing </style> tag. We're telling the browser we want to position a box (division) from the side of the browser (absolute position). We can see the box better if we put a visible, solid one pixel border around it:
.one {position:absolute; border:1px solid;}
Just add the border part where I have in the code. We also need to tell our HTML code where, in the document itself, to put this box. So, we can see that our position in the code also affects our position in the browser. Put the html division around our text:
<div class="one">main stuff (content) here</div>
The class="" part is telling the html to look in the css for a period with a name after it, like '.one'. That way, html knows what that division is supposed to look like, and positions it according to css. The name of our class is 'one', and the css symbol for class is the period.
Next, go back to the '.one' class in css, and add a margin (outside) around the box, 1em wide:
.one {position:absolute; border:1px solid; margin:1em;}
Paste the margin where it goes in the css; save document, then refresh browser. Our new box should have moved right and down from where it was. The margin pushed it 1em from the top and side of the browser. Let's move it even more:
.one {position:absolute; border:1px solid; margin:20em;}
After saving and refreshing, the box should now be much farther from the top and sides of the browser. How about giving some space inside the box (padding)?
.one {position:absolute; border:1px solid; margin:20em;
padding:10px;}
The division box is now wider around the text (if it's not, save document and refresh browser). The padding placed a ten pixel width all around the text, inside the box.
Therefore, margins move the box around (outside), and padding moves the content (inside) of the box. Think of the browser as a box, and the division as a box inside of that. Boxes within boxes is mostly the idea of CSS positioning.
