[EMAIL PROTECTED] wrote:
I completely concur Kornel.
Also, I prefer to use one master.css file to control my entire site, and
create additional stylesheets that based on a pages specific requirements
(i.e. print-friendly, forms, etc.).
In addition, I use comments in my master.css file extensively and divide
my master file into homepage rules and rules for interior pages.
Please see attached for review...
Respectfully sibmitted,
Mario S. Cisneros
> On Sat, 28 May 2005 17:10:14 +0100, Bruce Gilbert <[EMAIL PROTECTED]>
> wrote:
>
>> is there any "standard" way to set up the flow of a style sheet? I
>> usually try and use just one style sheet and start with global
>> elements such as body, p, table, li etc. followed by elements as they
>> flow on a page from header to footer. I use one stylesheet even though
>> with a large site, this can become quite large. Looking for
>> suggestions/thoughts on what others do such as multiple stylesheets
>> vs. one big one, layout of styles, etc.
>
> Typical mistake is just to split that one huge stylesheet into several
> by rules' function, not pages where they're used.
>
> If you make separate stylesheets for: layout, colors, widgets, etc --
> you'll have to attach all of them every time, so you won't save a bit
> and clients will have even more files to download.
>
> It's wiser to find minimal set of rules that are used on home page (and
> maybe 1-2 other most used pages on your site) and make it main
> stylesheet.
>
> Then add secondary stylesheet(s) on pages, which need them (styles for
> forms, gallery and alike).
>
> Stylesheets compress wonderfully. Enable gzip transfer encoding for them
> (but if you do it in PHP or alike, you'll have to send cache headers
> and implement cache validators, otherwise clients will re-download
> stylesheets).
>
> --
> regards, Kornel Lesi�ski
> ******************************************************
> The discussion list for http://webstandardsgroup.org/
>
> See http://webstandardsgroup.org/mail/guidelines.cfm
> for some hints on posting to the list & getting help
> ******************************************************
/*STYLE RULES FOR HOME PAGE...*/
html
{height: 100%;
margin-bottom: 1px;}
body
{margin: 0 auto;
padding: 0;
text-align: center;
background: #DCD8CF;}
#container
{position: relative;
width: 760px;
margin: 0 auto;
font: normal 12px/14pt verdana, arial, sans-serif;
background: #fff;}
.grad-cap
{background-image: url(../images/grad-cap.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 120% 43%;}
/*global tab navigation bar*/
#tabnav
{font: bold 12px "trebuchet ms", serif;
text-transform: uppercase;
text-align: center;
color: #7B012A;
background-color: #DCD8CF;
border-top: 1px #000 solid;
border-bottom: 1px #7B012A solid;
padding: 5px;
margin-top: -4px;
margin-bottom: 15px;}
#tabnav a:link, #tabnav a:visited
{color: #000;
text-decoration: underline;
padding: 5px;}
#tabnav a:hover
{color: #7B012A;
text-decoration: none;
padding: 5px;}
h1
{font: bold 14px helvetica, arial, sans-serif;
text-align: left;
text-transform: uppercase;
color: #7B012A;
border-bottom: 1px solid #000;
margin: 0;
padding: 0;}
/*2 column layout*/
#leftcolumn
{width: 150px;
float: left;
font-size: 10px;
background: #fff;
padding: 0px 5px;}
#rightcolumn
{width: 585px;
float: right;
text-align: justify;
padding: 0 5px;}
#clear
{clear: both;
height: 1px;
overflow: hidden;}
.img
{border: 1px solid #000;}
#article
{width: 140px;
border: 1px solid #000;
padding: 5px;
text-align: left;
margin-top: 5px;
background-color: #ddd;}
#article p
{margin: 5px 0 0 0;
padding: 0;}
/*bullet items in services section*/
.programs ul
{float: left;
text-align: left;
width: 260px;
height: 95px;
margin: 20px 0;
padding: 0 15px;
background: #EBE9E2;
border-left: 1px dashed #7B012A;
border-right: 1px dashed #7B012A;}
.programs ul li
{display: block;
list-style-type: square;
list-style-position: inside;}
a.programs:link {color: #000; background-color: transparent; font-weight: normal;}
a.programs:visited {color: #000; background-color: transparent; font-weight: normal;}
a.programs:hover {color: #00f; background-color: transparent; font-weight: normal; text-decoration: none;}
/*homepage footer*/
#footer
{font: normal 10px verdana, arial, helvetica, sans-serif;
text-transform: uppercase;
color: #fff;
margin-top: 15px;
padding: 5px 0px;
background: #7B012A;
width: 100%;}
a.footer:link { color: #fff; background-color: transparent; font-weight: normal;}
a.footer:visited { color: #fff; background-color: transparent; font-weight: normal;}
a.footer:hover { color: #DCD8CF; background-color: transparent; text-decoration: none; font-weight: normal; }
#webnet
{padding-left: 30%;}
/*STYLE RULES FOR INTERIOR PAGES...*/
#content
{margin: 10px;
text-align: justify;}
h2
{font: bold 14px "trebuchet ms", serif;
text-align: left;
text-transform: uppercase;
color: #000;
margin: 0;
padding: 2px 5px;
background-color: #ddd;}
/*rules for sat page*/
#sat ul
{width: 152px;
margin: 30px 0 20px 0;
padding: 0;
text-align: left;}
#sat ul li
{font-size: 12px;
line-height: 16pt;
list-style-type: none;
margin-top: 5px;
padding: 5px;
background-color: #ddd;}
#special
{width: 140px;
border: 1px solid #000;
padding: 5px;
text-align: left;
margin-top: 5px;
background-color: #DCD8CF;}
#special p
{margin: 5px 0 0 0;
padding: 0;}
.location
{float: left;
margin: 15px 35px 0 0;
border: 1px solid #000;}
/*bottom navbar for interior pages*/
#btmnav
{font: bold 12px "trebuchet ms", serif;
text-transform: uppercase;
text-align: center;
color: #fff;
width: 760px;
background: #7B012A;
margin-top: 10px;
padding: 5px 0;}
#btmnav a:link, #btmnav a:visited
{color: #fff;
text-decoration: underline;}
#btmnav a:hover
{color: #DCD8CF;
text-decoration: none;}
a:link { color: #7B012A; background-color: transparent; font-weight: normal; }
a:visited { color: #7B012A; background-color: transparent; font-weight: normal; }
a:hover { color: #0000ff; background-color: transparent; font-weight: normal; text-decoration: none; }
Do You Yahoo!?
Yahoo! Small Business - Try our new Resources site!
