So why would you want to learn all this stuff about Cascading Style Sheets? What do you gain from it?

Plenty.

Firstly you separate out the formatting from the text, as all the formatting goes in the header. This means that the search engines have cleaner code to index, your text is more likely to be ranked higher than non CSS text.

Secondly it saves space and code. I halved the size of my front page using the simple CSS there. It also dramatically reduced the download times.

Thirdly CSS give you the freedom to play with your setup quickly and efficiently.

Fourthly CSS let you do things simply that take ages to work out in HTML, if it is possible to do it at all.

Revolutionize your webpage design with this simple easy to use system. Take all, some, or none, of this to use as you like. The final page is here and the code is easily grabbed.

It is possible to create an incredibly fast loading and easily modified site using style sheets exclusively and not using tables at all. This frees the developer to use a simple program like notepad to maintain and update the site.

Here is how we will do it……

This is the final page, note what appears to be a complex series of tables holding the data and creating the buttons.

Writing the page

To create this we will first write the body…..

Cut and paste the code if you like.

Here is the raw page

See page here

SUCU Partners
<IMG src="emea3.jpg" width=360>

<P>STCU Partners is a banking IT consulting firm created primarily to service the European, Middle Eastern, and Asian markets.

<P>Our experienced consultants understand the strategy, technology, and operation of the local and international markets.

<p>With our many years' experience you jump ahead of the game. We accelerate your progress to meeting deadlines and completing projects.

<P>We offer hands-on involvement, an internal team-building approach, the quality of people we provide, and our exceptional knowledge and experience in
core banking and specialist treasury implementations.

<P>Our assorted fruitcakes will contribute to the financial development of your company sucking of millions of dollars in consultation fees and paid
excursions to obscure conferences in exotic sunny environments.

<P> ©Copyright 2002 SUCU Partners
<P> A href="http://contactus.html">Contact Us</A>
</BODY>

</HTML>

Creating a frame

The first thing we will do is create the frame that will surround the page

First in the Head section set the style code ….

--></style>

Inside this lets set the body of the text and the page first.

 Making the font Verdana, the text color blue and the background color light blue

body {
font-family: "Verdana";   

color: #0033dd;  

background: #aabdff;}

--></style>

Once you get that working, lets look at the code for the box itself.

Note that all we are making here is a box,  (display: block), setting an outer margin, and padding on the inside.

We are making it 95% of the screen wide and giving it a yellow background color with a blue colored border

Put that in the style section, after the Body style….

(Note: the blue comments should run all the way across the page, don't break them )

Now we have to go to the body text and add the code to make it be seen….

After the body tag put the following…

at the very end of the page put

</DIV>

</BODY>

Here is the Style code so far…

This alone is a great way to make your page stand out easily and quickly without having to create a table.

See page here

body {
font-family: "Verdana";    color: #0033dd;   background: #aabdff;}
 

.mainbox {
padding: 20px;      /*Padding == the space between the line border and the content*/
margin: 10pt;  /*Margin == the space between the line border and the outside*/
display: block;    /*Display  = specifies how the element will be seen*/
width: 95%;   
background: #ffde6f;   
color: #002190;   
border: 3pt solid #0033dd;}
--></style>

Title section of the page

Lets format the title section….

Include the styles ….

The logo makes a big text (300%) that floats left, that is will be on the left and other text can be on the right.

Its bold, italic and Times.

See page here

Include in the body the classes…

These are quite straightforward, setting the formatting options for the text.

The margin in .ourname is setting the length of the underline.

SUCU

Stuff U can Use

For Internet resources and fun

Creating the Sub Headings

The subheading has a blue box around it that extends for the width of the page.

Add the following code to the body around the SUCU Partners text.

See page here

SUCU Partners

Formatting the Picture

The picture is FLOATING on the right allowing the text to fill the left side.

There is a margin on the bottom to stop text getting too close to the pic and a border is placed around the pic.

Change the code in the body to this …

See page here

(note with this code if you place another pic on the page it too will have a blue border)

Formatting the End

The text at the bottom is CLEAR of the floating picture, so will always below the float never beside it.

In the body add the following code.

Note that useful FLOAT returns to push the text either left or right.

And here is the final page.

If you go View / Source you can get all the code for it.