Working With Your Website Tools - FTP and CSS

So how do all these tools, the FTP Client, HTML, CSS and the like work - it all looks so difficult - and when things look difficult I generally give up!

Well let's set an exercise to use two of our new tools: CSS and the FTP Client. Let's say you want to have the ability to highlight something - a warning or some additional information - in a box contained within the text but clearly separate from the main text. So

If you are using a free open source software FTP client - I use Filezilla - then

1. Down load it - preferably from the Sourceforge site and when prompted tell the download wizard to 'run' the set up procedure.

2. A new icon should appear on your desktop, click on it then open up your internet host's site and get through to technical support. Follow their instructions to set up the FTP client and address it to your site.

If you are using an FTP client supplied as part of your Hosting Package, then open it up ready for use.

What you will see, in either case, is the file structure of your site as it stands on the Host's server. Have a look round but don't change anything.

Now start looking for files with the suffix.css. They may be in a directory /themes or /css but they will have the.css suffix.

You may find several but look for the one probably called 'style.css' or something similar.



Use the FTP to download it onto your local computer in case you make a mistake and must reinstate the original.

Click on the file and then on the View/Edit option. The text of the CSS file should open up on your screen. Don't be scared by what you find.

Now type in, right at the top:

/*****************************/

/*** Local Variations ******/

@import "local.css";

/**

Note lines starting /* mean 'this is a comment - not to be processed, and lines ending */ mean this is the end of the comment so the only active line is

@import "local.css"; - note the punctuation, which means look for another CSS file called 'local.css'.

'Save' the new version of 'style.css' and your FTP Client should ask if you want to update it on the site and you say 'yes'.

Now go back to the copy of 'style.css that you saved on your home computer, copy it and change the name of the copy to 'local.css' Open up the new file 'local.css' and strip out all the content, then use the FTP Client to upload the empty 'local.css' file to the same directory in which you found 'style.css'

Now use the View/Edit option to Edit 'local.css' Type in the following - exactly, especially the punctuation:

.floatboxleft {

position: relative;

float: left;

height: auto;

width:240px;

padding: 5px;

margin: 20px;

border: 1px solid #77b2e0;

background: #f3f3f3;

}

Now save 'local.css' and use the FTP client to upload it onto your site.

Now go onto your site, and using the HTML facilities create a new page and start the page:

Now type in your text and then end with.

Roger Webb is a retired CEO from Small and Medium Sized (SME) companies in the UK and Continental Europe. In thirty years experience at life at the top he has been instrumental in turning around and setting up a number of specialist subsidiaries in Europe, Africa and beyond, in every case producing stable profits in some of the most testing corporate environments imaginable.



Article Source: http://EzineArticles.com/6833640