Cascading Style Sheets and the body of your page in HTML-Kit
Before we start, you need to set up HTML_Kit like I have it. You need to get sample one by clicking on the link that follows. It will look like a blank page, but View Source, either from the View Menu or by right-Clicking on the page and choosing View Source. Now copy everything on the page(Ctrl-A, then Ctrl-C). Return to HTML_Kit and paste everything into a new blank document. Click on: Sample One
It should look like this:
We talked about the head in the previous lesson, so the top of the page should look familiar.
The open body tag is on line 14, so what follows will be the bones of the site. It is a two column setup, with a header a left navigation column, a main column and a footer. It is all within a container that I called Pagewidth, for lack of a better name. It is a division, with it's end tag on line 30. The other divisions start and end in order.
Cascading Style Sheets are a great way to change the appearance of all of your web pages easily.
A great way to learn about them is at W3School. This link will take you away from this site, but you know how to get back.
Head off to W32School and bookmark that site, you will be using it, as it is a great reference:
W3School
The page background and the body have Cascading Style Sheet elements that define their style. That first segment of the Cascading Style Sheet is listed below. The element begins with what is called a Selector, in this case html and body. That is followed with a { that can appear right behind the object on on the line below. There are six properties here, followed by a semicolon, with the whole thing ending with curly bracket. The syntax is: Selector{property: value}
html, body{ --this is the Selector
margin:0; --Sets the Margins to 0
padding:0; -- Sets the Padding to 0
text-align:center; --Centers the Text
background-image: -- This is the background-image property
url('http://www.tumbleweedglass.com/images/black_grdnt.gif'); -- the value
background-repeat: repeat-x; -- this repeats my small background image
background-color:#000000; -- the rest of the background is black
}
There is no need to start building your Cascading Style Sheet now, because I will have the whole thing available on Sample Two. Just go to that page and copy the coding by drag clicking across it. Don't copy from the source file, as it will have other HTML mixed in with it. Get the code: Sample Two Then open a new blank sheet in HTML_Kit, paste the code into it then save it to your computer as yourstylesheet.css
The next thing on the Cascading Style Sheet is the pagewidth Selector.
#pagewidth{
width:90%;
text-align:left;
margin: 0 10px 10px 10px;
background-image:
url('http://www.tumbleweedglass.com/images/black_grdnt.gif');
background-repeat: repeat-x;
background-color:#000000;
}
This gives you plenty to do and read, but before heading off, type something into the maincol right after <div id="maincol"> and before the </ div> tag, on line 24, then preview.
If you like my site please vote for it by clicking the Digg button. It only takes a minute and it is important to us.
Thanks, Steve