CSE HTML Validator

by **sindelar** » Thu Apr 12, 2007 3:00 pm

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

by **CaryD** » Thu Apr 12, 2007 5:20 pm

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).

Is anyone aware that using id (#) and class (.) attributes don't always render the same outcome?

I haven't noticed that. You're not trying to use the same id multiple times on the same page are you?

by **sindelar** » Thu Apr 12, 2007 8:17 pm

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

by **CaryD** » Thu Apr 12, 2007 8:57 pm

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.

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.

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">  </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>

Using id:

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">  </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>

by **sindelar** » Thu Apr 12, 2007 9:55 pm

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.

by **CaryD** » Fri Apr 13, 2007 12:46 am

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.

by **sindelar** » Fri Apr 13, 2007 2:01 pm

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

by **MikeGale** » Sun Apr 15, 2007 4:36 pm

An excellent piece of detective work.

Thanks.

(I've always tried to keep things as simple as possible. I aim for one style sheet, external only and mostly don't use id's. This helps to avoid some unintended behaviour!!)

by **Berlinerin** » Mon Oct 29, 2007 8:06 am

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.

Embedding the styles in the head certainly makes them easier to find and modify compared to using inline styles.

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.

by **CaryD** » Wed Oct 31, 2007 7:30 pm

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.

Then you are agreeing with my original post.

CSE HTML Validator

Stylesheet Rules

Stylesheet Rules

Who is online