HTML and CSS - THE BASICS Session FIVE with Codehead -archive - Virtual Assistant Forums

Tess · #1 (**permalink**) 07-06-2008

NOTE: These archives, as well as ALL posted material on Virtual Assistant Forums, is copyrighted and may NOT be copied to another site under ANY circumstances unless otherwise noted. Please respect this free community feature!

Codehead: Hi and welcome to Session Five! It is required that you've studied all four of our previous sessions in order to continue with this session - unless you have a good understanding of basic HTML.
You can find the previous sessions in the archive here:
http://www.virtualassistantforums.co...splay.php?f=78

I promised before that we would work with real world examples rather than going on and on with theory etc. So today I'm going to show you how to make centered pages that work on all browsers. This is something a lot of people ask questions about and many websites are set up this way.

This design is called a FIXED or FROZEN DESIGN because in this method you specify a certain width for your pages and make the page in such a way that it appears in the middle of the screen. Here is an example: http://www.virtualassistantforums.co...css_fixed.html
As you can see in this simple example the actual content area has a fixed size (750 pixels here) and it's positioned precisly in the middle of the screen.

Now if you make your browser window smaller in width, you will notice that the page will adjust its right and left margins to stay in the middle of the page.

Now, follow these simple steps:
1 - open this page: http://www.virtualassistantforums.co...css_fixed.html
Then right click and click "View Source" and copy all the code
2 - Open your Notepad (or similar text editing application)
3 - Paste the code into your Notepad and save the document on your desktop - call it fixed.html
4 - Go to your desktop and double click on fixed.html and you will see the page in your browser

There are two things that make this happen and I will start with the first one which is the STYLE RULES for the page.
If you look at the source code in your Notepad document, you will find a section that starts with <style type="text/css"> and ends with </style>
These are the STYLE RULES that the browser will apply to the page.

The first one is:

body {
min-width:750px;
text-align:center;
}

The "body" selector will find the <body> tag in your HTML document and apply the rules you defined to it, here the rules are:

min-width:750px;
text-align:center;

This means that you want the body of your document to be 750 pixels in width minimum and also you want the browser to align the text in the middle of the view. text-align property will also apply to everything else other than text - the browser will display text and images and everything else in the middle.

There is an element in HTML called DIV and it's general form is:

<div>
HTML code goes here
</div>

DIV is short for 'division' and it's basically a "box" (or a section) in your HTML page.

A box (a section) that can contain text, images and other boxes.
To make our centered page, we need to wrap all the content in a box and use CSS to center this box in a user's browser.

You can find this box in your source code right after the <body> tag:
<div id="main-wrapper">

You can also find the closing tag for this box near the end of your source code right before the closing body tag:
</div>

To add STYLE to this DIV ELEMENT, we need a way of accessing it in our CSS and since we can have more than one DIV on one page we can't just use:

div {
Some style
}

Because this will find ALL of the DIVs on the page and change ALL of their styles and we don't want this. What we do want is to apply styles to this specific DIV *only* so that's why we have

<div id="main-wrapper">

The ID is short for 'identifier' and it lets us select this DIV in our stylesheets like this:

#main-wrapper {

The ampersign "#" before this SELECTOR means that you want to 'select an ID' so this rule will find and affect the element with the ID of main-wrapper - this is exactly what we want.
The whole RULE looks like this:

#main-wrapper {
margin-left:auto;
margin-right:auto;
width:750px;
text-align:left;
border:1px solid #000000;
}

Again, this means that you want the browser to find the element with the ID of "main-wrapper" and apply these styles to it.

Now let's look at the different properties we are manipulating:

width:750px;
margin-left:auto;
margin-right:auto;
text-align:left;
border:1px solid #000000;

width:750px; tells the browser that this DIV (box) has to be 750 pixels in width.

margin-left:auto; & margin-right:auto; will tell the browser that you want the browser to compute the margin-left & margin-right of this box. This will make the box a centered box.

text-align:left; will tell the browser to display the text inside this box on left, this is because we set the text-align property of the "body" element to "center" and because the "body" element is the parent of all elements, some of it's properties will apply to it's children and this is what we call inheritance. Inheritance means that our DIV will inherit some properties from it's parent element and text-align is one of them - that's why we have to "overwrite" this by text-align:left;

border:1px solid #000000; just adds a 1 pixel, solid (a solid line) black border to the DIV so we see where it is on the page exactly.
#000000 is the color code for black - here is a great article about color codes: http://en.wikipedia.org/wiki/Web_colors

The size of the page is 750 pixels in width because some users are on smaller screen sizes (resolutions) and if you make it bigger like 1000 pixels then your page will look odd for users with smaller screens and it will have a horizontal scroll bar (NOT pretty!) and users with smaller screens have to scroll to the right and left in order to view your full page - that's why I always choose 750 pixels because it will cover most of the users on the internet.

This simple example we've just looked at was the *standard way of creating centered pages with HTML and CSS*.

Now, let's make a simple fixed page together, it will be a short article about CSS.

1 - Open this page http://www.virtualassistantforums.co...ss_fixed_1.php
2 - Open a new Notepad document and copy and paste all the code from http://www.virtualassistantforums.co...ss_fixed_1.php into it and save is as about_css.html on your desktop
3 - Double click on about_css.html and you should be able to see something like this: http://www.virtualassistantforums.co...about_css.html
OK now find #main-wrapper { in your code and add these lines to it:

margin-left:auto;
margin-right:auto;

So your code should look like this: http://www.virtualassistantforums.co...ss_fixed_1.php
This is a very basic example of our FIXED HTML page.

Let's add some content to our page, we will start with a heading, go ahead and copy and paste this line in between <div id="main-wrapper"> and the closing </div>:

<h1>About CSS</h1>

Save your document and refresh your browser.
Does it look like this?: http://www.virtualassistantforums.co...bout_css2.html
Your code should look like this: http://www.virtualassistantforums.co...ss_fixed_2.php

If you remember from the previous sessions an H1 tag is a first level heading - it's considered the most important heading on the page and here it's the title of our article.
Now, let's add some more content to the page, add these lines after

<h1>About CSS</h1>
<p>Cascading Style Sheets, or CSS, is a stylesheet language that adds style to HTML pages.</p>
<h2>Benefits</h2>
<p>You can use CSS to style an entire website from only one place in your code, no matter how many pages that site might be. For example, you can change the color of all the headings in only one place, rather than editing 10 pages.</p>
<h2>How to Apply CSS</h2>
<p>There are two methods of applying CSS to an HTML page, one is on the same page and one is in an external file. Styles that are applied on the same page are called EMBEDDED STYLES and the ones that are on a separate file are called EXTERNAL STYLESHEETS.</p>
<h2>External Stylesheets vs. Embedded Styles</h2>
<p>Embedded styles are good for a simple single-page example like this one, but if you want to style a whole website you should use external stylesheets. If you had blocks of embedded styles on every page of your website, you would then have to edit many pages in order to change a simple color (defeating the purpose of the stylesheet!) but if you have the styles on an external stylesheet, you will have to edit it in only one place.</p>

Your code should look like this: http://www.virtualassistantforums.co...ss_fixed_3.php
And your page should look like this: http://www.virtualassistantforums.co...bout_css3.html

(Cont'd in next post...)

Tess · #2 (**permalink**) 07-07-2008

Now notice how our border is touching the text, it doesn't look good, to fix this we can add some PADDING to our main-wrapper DIV. To do this, go back to your source code and find:

#main-wrapper {

And add this line *after* all the lines of this style rule:

padding:10px;

Your style rule should look like this:

#main-wrapper {
margin-left:auto;
margin-right:auto;
width:750px;
text-align:left;
border:1px solid #000000;
padding:10px;
}

Refresh your page and notice the nice padding - much better!
Your code should look like this: http://www.virtualassistantforums.co...ss_fixed_4.php
And your page should look like this: http://www.virtualassistantforums.co...bout_css4.html

Member: Does it ever matter about the order?

Codehead: No, you can have them in any order you want. The browser will apply them one by one!

padding:10px; means that you want the browser to add 10 pixels of padding to all the sides inside the main-wrapper DIV - on the top, right, bottom and left.

If you wanted to add different paddings to different sides, you could use:

padding-top:5px;
padding-right:10px;
padding-bottom:0px;
padding-left:20px;

Or a better way to do the same thing would be:

padding:5px 10px 0px 20px;

The order in the second example is: top, right, bottom and left. So only here the order of numbers in padding is important.

Member: Like clockwise?

Codehead: Exactly.
There is also another thing to remember about padding - when we add 10 pixels of padding to our main-wrapper DIV the browser *stretches* the DIV to apply the padding. So our DIV is actually 750 + 10 + 10 pixels in width now, 10 pixels more on the right and 10 pixels more on left.

Now, let's add a background color to our page, to do this find this style rule:

body {

And add this line *after* all the lines of this style rule:

background-color:#CCCCCC;

Save the file, refresh your page, and you will see that the background color of the whole page is now grey.

Your code should look like this: http://www.virtualassistantforums.co...ss_fixed_5.php
And your page should look like this: http://www.virtualassistantforums.co...bout_css5.html
Not very pretty is it?

To make everything look nicer, we can apply a white background to our main-wrapper DIV, so find:

#main-wrapper {

And add this line after all the lines on this style rule:

background-color:#FFFFFF;

Save the file, refresh your page, and notice the difference.
Your code should look like this: http://www.virtualassistantforums.co...ss_fixed_6.php
And your page should look like this: http://www.virtualassistantforums.co...bout_css6.html

Now, let's change the color of our headings to a dark shade of grey, to do this we need to add a NEW CSS rule. Add these lines *after* all of your current CSS rules:

h1 {
color:#555555;
}
h2 {

Member: Got it, so the background colour has to be the last?

Codehead: No not necessarily...

Again, add these rules:

h1 {
color:#555555;
}
h2 {
color:#555555;
}

Save the file and make sure that your code looks like this: http://www.virtualassistantforums.co...ss_fixed_7.php
Now refresh your page and your page should look like this: http://www.virtualassistantforums.co...bout_css7.html

Now, two things:
1 - I will post a link to a page with sample color codes to get you started
2 - About the order, I asked you to add it to the end to prevent any confusion, you could reorder those property listings in style rules and the browser will still render the page the same way.

As you can see your h1 and h2 headings are now a dark shade of grey.
How this works is pretty simple:

h1 {
color:#555555;
}

Finds all the h1 elements and changes their color to #555555 (which is a color code for a dark shade of grey).

h2 {
color:#555555;
}

Finds all the h2 elements and changes their color.

Note that "color" property refers to the color of the text inside that particular tag.

Now, let's change the color of the text to a dark shade of grey (but a little lighter that the headings). To do this, edit your code and add this STYLE RULE to the rest of your styles:

p {
color:#777777;
}

Save your page and refresh your browser, you should see something like this: http://www.virtualassistantforums.co...bout_css8.html
Your code should look like this: http://www.virtualassistantforums.co...ss_fixed_8.php

Similar to styling your headings:

p {
color:#777777;
}

Will find all the PARAGRAPHS or 'p elements' and change the color of their text to #777777 - another shade of grey.

Before I finish this session, I want to give you two great references that you can use to experiment with your CSS.

First one is a list of valid properites that you can manipulate using CSS: (like color, background-color, text-align etc.)
http://htmldog.com/reference/cssproperties/
Click on each property and you will see an example.

You can also find a great list of color codes here: http://www.pagetutor.com/pagetutor/m...s/net216-2.gif

I'm going to end this session here and I suggest that you experiment with what you have learned so far. Reorder things, change the colors, change the paddings etc.

Member: Should I choose not to have a border for the text, I could put in 0px instead of 1 px?

Codehead: You can just remove that property and that's it - the border is gone, so your rule will look like this:

#main-wrapper {
margin-left:auto;
margin-right:auto;
width:750px;
text-align:left;
padding:10px;
background-color:#FFFFFF;
}

And that's it, you could say border:0px; but why write more?

Member: And I'm assuming that if we want a thicker border, we can increase the px number?

Codehead: Yep, you can have border:2px solid #000000; or even 20px !
There are also more options for the style of your border for example you could have: border:1px dashed #000000; or border:1px dotted #000000;

('px' = Pixels)

We'll continue in Session Six with our real-world examples of CSS - things you can use as soon as you learn them to make changes to your own site!
In the meantime, you can post any questions directly to the Coding section of the boards - just note in your post title that it's about Session 5, etc. Or - you can post your question to the archived session itself (as soon as it's online

)

deannatroupe · #3 (**permalink**) 07-12-2008

This is really awesome! I'm so glad you guys are offering this. I've been kind of baffled by CSS. I can't wait to try some of these things with my own site. It should make things so much easier when I get creative and want to change things around.

Office Support Online · #4 (**permalink**) 11-06-2008

I have had this bookmarked for months and I am finally going to get a chance to read it while I'm on two weeks holiday at the beach. Of course, I may be so relaxed that I won't absorb it - but at least I will finally get to it!! Thanks for posting all of these - they are invaluable!

Cheers,
Marie