[WSG] style sheet set up
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. thanks in advance, -- ::Bruce:: ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up
I tend to divide my style sheets into smaller files. For example, I usually put only basic layout in one file, i.e. layout.css, the general text formatting styles in another, and then the colors for the entire site in a colors.css file. On 5/28/05, 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. thanks in advance, -- ::Bruce:: ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up
I tend to clear all the browser defaulted styles at the top in one
large grouped rule.
I then set out all the divisions with their ID's, in the order they
appear in the xhtml eg:
div#top {
}
div#middle {
}
div#bottom {
}
Underneath this I would work though all the rules focusing within one
specific division eg:
div#top h1 {
}
div#top p {
}
div#top ul {
}
div#top li {
}
It's a neat order, keeps the cascade flowing and easy to change the
visual layout of the page relatively quickly
--
Dave O'Brien
Venting my spleen at:
http://www.ventingspleen.co.uk
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] style sheet set up
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 Lesiski ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up
Hi Dave,
Quick question. Is there a reason for naming your selector div#top instead
of #top?
Please advise...
Kind regards,
Mario S. Cisneros
I tend to clear all the browser defaulted styles at the top in one large
grouped rule.
I then set out all the divisions with their ID's, in the order they
appear in the xhtml eg:
div#top {
}
div#middle {
}
div#bottom {
}
Underneath this I would work though all the rules focusing within one
specific division eg:
div#top h1 {
}
div#top p {
}
div#top ul {
}
div#top li {
}
It's a neat order, keeps the cascade flowing and easy to change the
visual layout of the page relatively quickly
--
Dave O'Brien
Venting my spleen at:
http://www.ventingspleen.co.uk
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] style sheet set up
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;
Re: [WSG] style sheet set up
Hi Kornel, 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). How do you do that? Kim ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] style sheet set up
http://www.scriptygoddess.com/archives/2003/03/28/compressing-webpages-for-fun-and-profit/ On 5/28/05, Kim Kruse [EMAIL PROTECTED] wrote: Hi Kornel, 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). How do you do that? Kim ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
