I can ask questions faster than a whole team can answer <g>.
I have something like 11 external style sheets, about six of which I'm using on my site right now. and a nice person on the HTML forum said that would take up a lot of bandwidth. Didn't know that, but I know now!
My style sheets are getting pretty big, but most of them duplicate almost everything; the one exception being the body tag.
Reason: I have about three different body tags defined. I don't know how to make multiple body definitions in a single style sheet.
Should I put the body style definitions in the document headers? Does that work with HTML 401 Strict? I'm beginning to convert my some 45 pages (my site not even open yet) from Transitional to Strict doctype; I really want to do this, and I've validated my first (Home) page successfully, but
now need to adjust its CSS file, because the placements are
all wrong. I'm getting tons of help on the HTML forum, but this question seems appropriate for this forum <g>.
Here are the three different body tags that are particularly significant on my site - these are from my transitional pages, and perhaps they will change as I change over to Strict; I don't know! I'm breaking the background line in order to try to prevent horizontal scrolling, which I hate, but in my CSS file, it's all one line.
most main pages:
body {
color : #000000;
background: #cccccc url("images/logos/thimbleberry.gif")
repeat-y fixed top left;
font-family : arial, helvetica, sans-serif;
font-size : 100%;
z-index: 0;
}
The only part that changes in my other two main CSS files is the background image line.
I use one for some photo gallery pages, and another for others. Here are the two other versions I'm using:
background: #99ccff url("images/logos/hearts.gif")
repeat-y fixed top left;
And the third one is:
background: #99ccff url("images/logos/leaves.gif")
repeat-y fixed top left;
The only differences, then, are which image I'm using as the background image, and the pages' background colors (in the body tags, that is).
The three .gifs are all the same size; 20px wide; 40px high.
Any suggestions? Information? Places to study from?
Thanks!
Sun, 30 Jan 2005 06:59:35Try to consolidate as much as possible. First, you say you have three different body definitions. Well, I'd use either classes or id's here. Give the corresponding body's classes, say b1, b2, and b3. And then you have:
body {
color : #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
z-index: 0;
}
body.b1 {background:#ccc url("images/logos/thimbleberry.gif") repeat-y fixed top left;}
body.b2 {bbackground: #99ccff url("images/logos/hearts.gif") repeat-y fixed top left;}
body.b3 {background: #99ccff url("images/logos/leaves.gif") repeat-y fixed top left;}
Keep in mind that when a browser comes to a website using an external style sheet, it will often keep a copy in it's cache. When it comes across another page using the same style sheet, it uses the stored version instead of Download ing a new one, cutting bandwith usage. And like this you can combine all of your CSS into one file. So, for your pages with the hearts as a background, you use this:
<body class="b2">
for pages with leaves.gif, use:
<body class="b3">
and for the thimbleberry.gif, use:
<body class="b1">Originally posted by MstrBob
Try to consolidate as much as possible. First, you say you have three different body definitions. Well, I'd use either classes or id's here. Give the corresponding body's classes, say b1, b2, and b3. And then you have:
body {
color : #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
z-index: 0;
}
body.b1 {background:#ccc url("images/logos/thimbleberry.gif") repeat-y fixed top left;}
body.b2 {bbackground: #99ccff url("images/logos/hearts.gif") repeat-y fixed top left;}
body.b3 {background: #99ccff url("images/logos/leaves.gif") repeat-y fixed top left;}
Keep in mind that when a browser comes to a website using an external style sheet, it will often keep a copy in it's cache. When it comes across another page using the same style sheet, it uses the stored version instead of Download ing a new one, cutting bandwith usage. And like this you can combine all of your CSS into one file. So, for your pages with the hearts as a background, you use this:
<body class="b2">
for pages with leaves.gif, use:
<body class="b3">
and for the thimbleberry.gif, use:
<body class="b1">
It's MstrBob to the rescue, Yet Again! I've only begun to play with classes, and never yet used IDs, but now I think you've given me enough examples so I can try using the IDs as well! (You helped me on the HTML forum with that also.)
Boy, do I have a lot of editing and experimenting to do! But I think with your examples, I can do that! I'm well-set-up with my directory structure on my machine, so I can test thoroughly at home (and validate too), before posting pages, oh, happy, happy! <g>.
Thanks again, MstrBob. If I don't show up here for a time, you'll know what I'm doing!
Sun, 30 Jan 2005 08:27:43Last night, I got all my CSS stuff into one CSS file. It's a bit big (about 10K), and I think I have stuff in there I'm not using, so I need to watch for that, and take out what I'm not using. Also, I might have redundant stuff in it, and as I learn, I'll learn to take that out, too, I trust!
However, this brings me back to another question:
I'm changing from HTML 4.01 Transitional to HTML 4.01 Strict, mostly because I want my site to be as accessible as possible, but also because my poor old mind needs to keep things simple (I'm purposely ignoring the job of learning to do this <g>).
Last night, I installed the new, consolidated (and validated) CSS file into four types of pages (ones that use different parts of the file) I have up on my site (but I did so only on the copies I have on my own machine). Testing them all, they all worked, whether the pages were transitional or strict (but so far, I have only one strict page, so that's not a thorough test, and not only that, but I also need to tweak my CSS; the presentation has a few minor problems).
I think somebody suggested that if I have some transitional pages, and some strict, there isn't a problem mixing those on my site - if each type has its own external CSS.
Yet - intuitively, I wonder if in fact Transitional and Strict pages need to have different external CSS? In testing (but on my own machine only, which omits a few server-side thingys I have on each page), I can't see a problem using the same single external CSS both with transitional pages and my single strict page.
OH! I just figured out how to put up a test page online, without making it part of my normal site! I think I did. I know most of you know how to do that; I just hadn't figured it out, but I think I'll go do that, so I can test online, as well as on my own machine.
Again, all files, both HTML and CSS, are validated with W3C,
Any more comments on mixing a single CSS with both Transitional and Strict HTML 4.01?
Mon, 31 Jan 2005 07:36:56Optimizing css (<!-- m --><a class="postlink" href="http://www.websiteoptimization.com/speed/tweak/grouping/">http://www.websiteoptimization.com/spee ... /grouping/</a><!-- m -->), your header selectors would then be:
h1, h2, h3, h4, h5, h6 {
font-style : normal;
text-align : center;
margin :0 40px;
}
h1 {
font-size : xx-large;
}
h2 {
font-size : x-large;
}
h3, h4, h5, h6{
font-size : medium;
font-weight : bold;
}
h3 {
font-size : large;
}
h4 ,h5 {
font-variant : small-caps;
}Dear Fang,
Originally posted by Fang
Optimizing css (<!-- m --><a class="postlink" href="http://www.websiteoptimization.com/speed/tweak/grouping/">http://www.websiteoptimization.com/spee ... /grouping/</a><!-- m -->), your header selectors would then be:
h1, h2, h3, h4, h5, h6 {
font-style : normal;
text-align : center;
margin :0 40px;
}
h1 {
font-size : xx-large;
}
<snip snip>
I went to that site you indicated - wonderful! I bookmarked it.
And suddenly, thanks to your help, I begin to understand REASONS for optimizing code! Gosh! Why didn't I understand that before? Well, thanks for the wonderful tip and help!
<hehe - lots of work ahead of me - but I trust it will be productive!>
Mon, 31 Jan 2005 09:31:53
I have something like 11 external style sheets, about six of which I'm using on my site right now. and a nice person on the HTML forum said that would take up a lot of bandwidth. Didn't know that, but I know now!
My style sheets are getting pretty big, but most of them duplicate almost everything; the one exception being the body tag.
Reason: I have about three different body tags defined. I don't know how to make multiple body definitions in a single style sheet.
Should I put the body style definitions in the document headers? Does that work with HTML 401 Strict? I'm beginning to convert my some 45 pages (my site not even open yet) from Transitional to Strict doctype; I really want to do this, and I've validated my first (Home) page successfully, but
now need to adjust its CSS file, because the placements are
all wrong. I'm getting tons of help on the HTML forum, but this question seems appropriate for this forum <g>.
Here are the three different body tags that are particularly significant on my site - these are from my transitional pages, and perhaps they will change as I change over to Strict; I don't know! I'm breaking the background line in order to try to prevent horizontal scrolling, which I hate, but in my CSS file, it's all one line.
most main pages:
body {
color : #000000;
background: #cccccc url("images/logos/thimbleberry.gif")
repeat-y fixed top left;
font-family : arial, helvetica, sans-serif;
font-size : 100%;
z-index: 0;
}
The only part that changes in my other two main CSS files is the background image line.
I use one for some photo gallery pages, and another for others. Here are the two other versions I'm using:
background: #99ccff url("images/logos/hearts.gif")
repeat-y fixed top left;
And the third one is:
background: #99ccff url("images/logos/leaves.gif")
repeat-y fixed top left;
The only differences, then, are which image I'm using as the background image, and the pages' background colors (in the body tags, that is).
The three .gifs are all the same size; 20px wide; 40px high.
Any suggestions? Information? Places to study from?
Thanks!
Sun, 30 Jan 2005 06:59:35Try to consolidate as much as possible. First, you say you have three different body definitions. Well, I'd use either classes or id's here. Give the corresponding body's classes, say b1, b2, and b3. And then you have:
body {
color : #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
z-index: 0;
}
body.b1 {background:#ccc url("images/logos/thimbleberry.gif") repeat-y fixed top left;}
body.b2 {bbackground: #99ccff url("images/logos/hearts.gif") repeat-y fixed top left;}
body.b3 {background: #99ccff url("images/logos/leaves.gif") repeat-y fixed top left;}
Keep in mind that when a browser comes to a website using an external style sheet, it will often keep a copy in it's cache. When it comes across another page using the same style sheet, it uses the stored version instead of Download ing a new one, cutting bandwith usage. And like this you can combine all of your CSS into one file. So, for your pages with the hearts as a background, you use this:
<body class="b2">
for pages with leaves.gif, use:
<body class="b3">
and for the thimbleberry.gif, use:
<body class="b1">Originally posted by MstrBob
Try to consolidate as much as possible. First, you say you have three different body definitions. Well, I'd use either classes or id's here. Give the corresponding body's classes, say b1, b2, and b3. And then you have:
body {
color : #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
z-index: 0;
}
body.b1 {background:#ccc url("images/logos/thimbleberry.gif") repeat-y fixed top left;}
body.b2 {bbackground: #99ccff url("images/logos/hearts.gif") repeat-y fixed top left;}
body.b3 {background: #99ccff url("images/logos/leaves.gif") repeat-y fixed top left;}
Keep in mind that when a browser comes to a website using an external style sheet, it will often keep a copy in it's cache. When it comes across another page using the same style sheet, it uses the stored version instead of Download ing a new one, cutting bandwith usage. And like this you can combine all of your CSS into one file. So, for your pages with the hearts as a background, you use this:
<body class="b2">
for pages with leaves.gif, use:
<body class="b3">
and for the thimbleberry.gif, use:
<body class="b1">
It's MstrBob to the rescue, Yet Again! I've only begun to play with classes, and never yet used IDs, but now I think you've given me enough examples so I can try using the IDs as well! (You helped me on the HTML forum with that also.)
Boy, do I have a lot of editing and experimenting to do! But I think with your examples, I can do that! I'm well-set-up with my directory structure on my machine, so I can test thoroughly at home (and validate too), before posting pages, oh, happy, happy! <g>.
Thanks again, MstrBob. If I don't show up here for a time, you'll know what I'm doing!
Sun, 30 Jan 2005 08:27:43Last night, I got all my CSS stuff into one CSS file. It's a bit big (about 10K), and I think I have stuff in there I'm not using, so I need to watch for that, and take out what I'm not using. Also, I might have redundant stuff in it, and as I learn, I'll learn to take that out, too, I trust!
However, this brings me back to another question:
I'm changing from HTML 4.01 Transitional to HTML 4.01 Strict, mostly because I want my site to be as accessible as possible, but also because my poor old mind needs to keep things simple (I'm purposely ignoring the job of learning to do this <g>).
Last night, I installed the new, consolidated (and validated) CSS file into four types of pages (ones that use different parts of the file) I have up on my site (but I did so only on the copies I have on my own machine). Testing them all, they all worked, whether the pages were transitional or strict (but so far, I have only one strict page, so that's not a thorough test, and not only that, but I also need to tweak my CSS; the presentation has a few minor problems).
I think somebody suggested that if I have some transitional pages, and some strict, there isn't a problem mixing those on my site - if each type has its own external CSS.
Yet - intuitively, I wonder if in fact Transitional and Strict pages need to have different external CSS? In testing (but on my own machine only, which omits a few server-side thingys I have on each page), I can't see a problem using the same single external CSS both with transitional pages and my single strict page.
OH! I just figured out how to put up a test page online, without making it part of my normal site! I think I did. I know most of you know how to do that; I just hadn't figured it out, but I think I'll go do that, so I can test online, as well as on my own machine.
Again, all files, both HTML and CSS, are validated with W3C,
Any more comments on mixing a single CSS with both Transitional and Strict HTML 4.01?
Mon, 31 Jan 2005 07:36:56Optimizing css (<!-- m --><a class="postlink" href="http://www.websiteoptimization.com/speed/tweak/grouping/">http://www.websiteoptimization.com/spee ... /grouping/</a><!-- m -->), your header selectors would then be:
h1, h2, h3, h4, h5, h6 {
font-style : normal;
text-align : center;
margin :0 40px;
}
h1 {
font-size : xx-large;
}
h2 {
font-size : x-large;
}
h3, h4, h5, h6{
font-size : medium;
font-weight : bold;
}
h3 {
font-size : large;
}
h4 ,h5 {
font-variant : small-caps;
}Dear Fang,
Originally posted by Fang
Optimizing css (<!-- m --><a class="postlink" href="http://www.websiteoptimization.com/speed/tweak/grouping/">http://www.websiteoptimization.com/spee ... /grouping/</a><!-- m -->), your header selectors would then be:
h1, h2, h3, h4, h5, h6 {
font-style : normal;
text-align : center;
margin :0 40px;
}
h1 {
font-size : xx-large;
}
<snip snip>
I went to that site you indicated - wonderful! I bookmarked it.
And suddenly, thanks to your help, I begin to understand REASONS for optimizing code! Gosh! Why didn't I understand that before? Well, thanks for the wonderful tip and help!
<hehe - lots of work ahead of me - but I trust it will be productive!>
Mon, 31 Jan 2005 09:31:53