Stylesheet Rules
Stylesheet Rules
Over many years I used a set pattern in css stylesheets:
body
{ information }
I placed html stylesheet information normally placed in the <head> section in my stylesheet and it appears to work well and will save load time and space on a web site.
Does anyone see a problem with coding a stylesheet in this manner? It does validate with CSE Validator 8.3.
/* head */
{ information }
body
{ information }
also:
Is anyone aware that using id (#) and class (.) attributes don't always render the same outcome?
Thanks in advance for your response,
Bob
body
{ information }
I placed html stylesheet information normally placed in the <head> section in my stylesheet and it appears to work well and will save load time and space on a web site.
Does anyone see a problem with coding a stylesheet in this manner? It does validate with CSE Validator 8.3.
/* head */
{ information }
body
{ information }
also:
Is anyone aware that using id (#) and class (.) attributes don't always render the same outcome?
Thanks in advance for your response,
Bob
What can we do individually to regain Liberty & Justice?
Embedding the styles in the head certainly makes them easier to find and modify compared to using inline styles.
However, if the site is several pages and they all use the same styling, then it's more efficient to keep the styles in a separate style sheet.
That way any changes will affect all the pages, and the style information in the style sheet only needs to be downloaded once. With embedded styles the same information would have to be downloaded with each page (assuming each page is styled the same).
However, if the site is several pages and they all use the same styling, then it's more efficient to keep the styles in a separate style sheet.
That way any changes will affect all the pages, and the style information in the style sheet only needs to be downloaded once. With embedded styles the same information would have to be downloaded with each page (assuming each page is styled the same).
I haven't noticed that. You're not trying to use the same id multiple times on the same page are you?Is anyone aware that using id (#) and class (.) attributes don't always render the same outcome?
Thanks CaryD for your swift response to my question which I assume is affirmative? I'm impressed with Pure CSS "Button" code authored by Chad Jones http://www.htmlcenter.com/tutorials/tut ... m/154/CSS/.
Naturally, I made and will continue to make some changes relative to making it work for my intended use (Menu buttons on page bottom). What I inserted below is changed slightly to conform to inline useage as opposed to a colume structure. Anyone interested should check his code as written on link above. Below is the code he suggests appear in the <head> section of an <html> along with the style tags. I put mine in a styesheet above my "body" coding.
#mButton a{color:#000000;font-size:10px;font-family:verdana,serif;font-weight:bold;text-decoration:none;border:4px outset aqua;background-color:#00ffff;display:inline-block;width:80px;padding:3px 5px;margin:1px;}
#mButton a:hover{background-color:#00c0c0;color:#000000;padding-left:4px;border:4px inset aqua;}
The portion I use in an <html> is simply:
<body>
<div id="mButton">
<div><a href="sxFritzsch.htm">sxFritzsch</a><a href="Desiree's%20Suitor(strict)v6.html">Desiree's Suitor</a><a href="Menu.html">Menu</a><a href="Feb23Schumer.htm">Murdered by IRS</a></div>
</div></body></html>
giving (4) buttons in line to launch pages targeted by the four buttons.
This is what my question referred to - whether placing the intended head tags in a stylsheet. As mentioned earlier - it validates with CSE Validator 8.3 but my concern is whether it's really proper to do it this way?
Regarding the ID and Class comment, if you exchange the # for . and use Class, the buttons have a white body with enhanced borders in either IE6 or FireFox 2.03. This is the first time I've come across the change.
Again thanks,
Bob
Naturally, I made and will continue to make some changes relative to making it work for my intended use (Menu buttons on page bottom). What I inserted below is changed slightly to conform to inline useage as opposed to a colume structure. Anyone interested should check his code as written on link above. Below is the code he suggests appear in the <head> section of an <html> along with the style tags. I put mine in a styesheet above my "body" coding.
#mButton a{color:#000000;font-size:10px;font-family:verdana,serif;font-weight:bold;text-decoration:none;border:4px outset aqua;background-color:#00ffff;display:inline-block;width:80px;padding:3px 5px;margin:1px;}
#mButton a:hover{background-color:#00c0c0;color:#000000;padding-left:4px;border:4px inset aqua;}
The portion I use in an <html> is simply:
<body>
<div id="mButton">
<div><a href="sxFritzsch.htm">sxFritzsch</a><a href="Desiree's%20Suitor(strict)v6.html">Desiree's Suitor</a><a href="Menu.html">Menu</a><a href="Feb23Schumer.htm">Murdered by IRS</a></div>
</div></body></html>
giving (4) buttons in line to launch pages targeted by the four buttons.
This is what my question referred to - whether placing the intended head tags in a stylsheet. As mentioned earlier - it validates with CSE Validator 8.3 but my concern is whether it's really proper to do it this way?
Regarding the ID and Class comment, if you exchange the # for . and use Class, the buttons have a white body with enhanced borders in either IE6 or FireFox 2.03. This is the first time I've come across the change.
Again thanks,
Bob
That's strange. I'm not seeing any change in rendering with the two versions below in IE6, Firefox 2 or Opera9. I even tried them with different doctypes and without any doctypes at all.sindelar wrote:Regarding the ID and Class comment, if you exchange the # for . and use Class, the buttons have a white body with enhanced borders in either IE6 or FireFox 2.03. This is the first time I've come across the change.
Using class:
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
.mButton a{
color: #000000;
text-decoration: none;
border: 4px outset aqua;
background-color: #00ffff;
display: inline-block;
width: 80px;
padding: 3px 5px;
margin: 1px;
font: bold 10px verdana, serif;
}
.mButton a:hover{
background-color: #00c0c0;
color: #000000;
padding-left: 4px;
border: 4px inset aqua;
}
-->
</style>
</head>
<body>
<div class="mButton">
<div><a href="sxFritzsch.htm">sxFritzsch</a><a href="Desiree's%20Suitor(strict)v6.html">Desiree's Suitor</a><a href="Menu.html">Menu</a><a href="Feb23Schumer.htm">Murdered by IRS</a></div>
</div>
</body>
</html>
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
#mButton a{
color: #000000;
text-decoration: none;
border: 4px outset aqua;
background-color: #00ffff;
display: inline-block;
width: 80px;
padding: 3px 5px;
margin: 1px;
font: bold 10px verdana, serif;
}
#mButton a:hover{
background-color: #00c0c0;
color: #000000;
padding-left: 4px;
border: 4px inset aqua;
}
-->
</style>
</head>
<body>
<div id="mButton">
<div><a href="sxFritzsch.htm">sxFritzsch</a><a href="Desiree's%20Suitor(strict)v6.html">Desiree's Suitor</a><a href="Menu.html">Menu</a><a href="Feb23Schumer.htm">Murdered by IRS</a></div>
</div>
</body>
</html>
You work quickly CaryD. You must understand that my usage of the code you placed in the head tags of a HTML, I placed in the top portion of an external "buttons.css
That may be the reason for the difference in rendering? I tried it several times under separate conditions and at all times it reacted with simlar results in both browser used.
My main and primary concern was whether it was proper to placer the head elements in the manner I've done. It appears to work ok and more than likely I will upload them to my site: http://home.stny.rr.com/sindelar and see what affect it has there. As mentioned earlier, I think the savings in loading after the first page and css is loaded + the savings in bandwidth is worth the time to change hundreds of pages worth of code.
However, if there can be a problem with different browsers, and it eliminates the viewing of pages on my site, then I will stick with the standard html buttons.
presently I'm nearly out of usable space on my site, but will hopefully tonight, upload a page demonstrating the buttons and css used. The stylesheet will be named "pm.css", and the web page http://home.stny.rr.com/sindelar/silverbirds.html
With any luck (recoding and upload) by 11:30 PM New York time. If not, the old version will come up. Got to find memory space also.
That may be the reason for the difference in rendering? I tried it several times under separate conditions and at all times it reacted with simlar results in both browser used.
My main and primary concern was whether it was proper to placer the head elements in the manner I've done. It appears to work ok and more than likely I will upload them to my site: http://home.stny.rr.com/sindelar and see what affect it has there. As mentioned earlier, I think the savings in loading after the first page and css is loaded + the savings in bandwidth is worth the time to change hundreds of pages worth of code.
However, if there can be a problem with different browsers, and it eliminates the viewing of pages on my site, then I will stick with the standard html buttons.
presently I'm nearly out of usable space on my site, but will hopefully tonight, upload a page demonstrating the buttons and css used. The stylesheet will be named "pm.css", and the web page http://home.stny.rr.com/sindelar/silverbirds.html
With any luck (recoding and upload) by 11:30 PM New York time. If not, the old version will come up. Got to find memory space also.
It looks like you did everything correctly
The id/class problem was due to specificity*.
Using class would have worked better if the styling was placed at the bottom of the style sheet, below the styling for a:link, a:visited, a:hover, etc.
That way the link and hover styling of the class would override the styling from the previous rules. It still wouldn't give you quite the look you want, but it would be closer.
By using an id instead, you raised the specificity of the button style rules so they work even when they come before the a:link, etc, styling.
* The chart on the page this link points to ignores the specificity of inline styles and !important.
The id/class problem was due to specificity*.
Using class would have worked better if the styling was placed at the bottom of the style sheet, below the styling for a:link, a:visited, a:hover, etc.
That way the link and hover styling of the class would override the styling from the previous rules. It still wouldn't give you quite the look you want, but it would be closer.
By using an id instead, you raised the specificity of the button style rules so they work even when they come before the a:link, etc, styling.
* The chart on the page this link points to ignores the specificity of inline styles and !important.
I have accessed and reviewed the link you submitted in support of your comments CaryD. The swiftness and accuracy of your response to my dilemma was well worth the price I paid for CSE Validator 8.3.
Your suggestion will be further facilitated as soon as time allows this "tired old man".
Thank you so very much,
Bob Sindelar
Your suggestion will be further facilitated as soon as time allows this "tired old man".
Thank you so very much,
Bob Sindelar
-
- Rank 0 - Newcomer
- Posts: 1
- Joined: Mon Oct 29, 2007 3:38 am
- Contact:
I believe it is a good Idea to have the html and css in two separate files since this enforces the division of layout and content.
This is not really what stylesheets are about. Usually one should write the HTML without thinking about the layout but only about the semantics of the element you are writing.Embedding the styles in the head certainly makes them easier to find and modify compared to using inline styles.
Greetings from Berlin http://www.berliner-in.de
Then you are agreeing with my original post.Berlinerin wrote:I believe it is a good Idea to have the html and css in two separate files since this enforces the division of layout and content...Usually one should write the HTML without thinking about the layout but only about the semantics of the element you are writing.