CSS Style Sheets

[Rob]

To quote from Rod (CID Couriers) in another thread:

"Just sneaking a peek at your source code, have you thought of using CSS coding for your menu buttons ... it's all done with code in a separate file so I only have to make one change for the whole site."

I had thought about this in the past but it all sounded too complicated. Last week (to coincide with the launch of this forum) I completely change the SBS site but page-by-page - probably 400+ pages ... took me best part of two weeks!

I kept thinking how css would have made all the nav button changes so easily but just couldn't get beyond the thought it was complicated.

So my questions... Is it complicated? For all the new pages I add from now should I start with css? What's my first step?

[CIDCouriers-dot-com]

Hi Rob,

It all looks a bit complicated to start with, but once you get the hang of it (bit like anything else) and try things out on a test page to see what/how it works it's not too hard at all.

There's quite a few helpful websites with plenty of examples on how to use CSS - in my mind the one of the best for learning CSS is www.w3schools.com/css

For your first step, I would have a read on the site mentioned above, start with something simple such as setting the background and text colours, and then try positioning etc - from there just refer to the tutorials until you get it the way you want it.

You mention changing your nav buttons on your site, as an example, to change them on my site using CSS, all I have to do to change the text that appears on the buttons is simply edit the text to what I want them changed to, and likewise the colour schemes and sizes - not a single image is used, it's all code in the CSS file - see below.



// This bit tells the browser the overall size and position on the page

div.buttonscontainer {
position:absolute;
top: 190px;
left: 100px;
width: 790px;
}


// This will draw the blank black buttons and sets the text to white
// no buttons appear until they have been defined in the HTML - example below

div.buttons a {
color: #FFFFFF;
background-color: #000000;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
display: inline;
font: 12px Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: center;
}


// This part changes the colour of the buttons while the mouse is over them

div.buttons a:hover {
background-color: #0033FF;
color: #FFFFFF;
text-decoration: none;
text-align: center;
}


On the web page the HTML code is this (I've left out the email address button as I have this encrypted so web-bots can't grab it) - this code will create 5 buttons:



<div class="buttonscontainer"><center>
<div class="buttons">
<a href="index.shtml">Home</a>
<a href="prices.shtml">Pricing</a>
<a href="quote.shtml">Request A Quote</a>
<a href="faq.shtml">F A Q's</a>
<a href="terms.shtml">T &amp; C's</a>
</div></center>
</div>



Hope that's not too confusing for you Rob, have a play and see how you get on, I'm far from an expert but I'm always willing to help...

[Rob]

Rod,

Many thanks for that. I will start experimenting!

[jerryshy]

Select the text with their cursor and select a "style" from the list which appears to the left of the text options, or they will.
Select the text with their cursor and change the font size, color and/or font face.

[Natewood]

Once you get the hang of that, try using CSS sprites to keep your page load times down. A CSS sprite is one large image that can be used for all of your buttons, rollover and selected states, etc. Google and Amazon use them a lot. Check out css-tricks.com/158-css-sprites for more info.
____________________________
Business security is a serious issue. Find the best deals on fire data safes (http://www.thesafesupermarket.com/category_fire_data_safes_122352.aspx) and security safes (http://www.thesafesupermarket.com/category_security_safes_122353.aspx) at The Safe Supermarket.

[boybawan]

if you want to make a change to your layout, you do this just once in the existing style rules, which saves you a lot of time. Using your computer's text editor, create styles inside your existing HTML document to design your web page with a style sheet..