CSS Presentation

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility

Message

Nicole -> CSS Presentation (3/29/2005 23:30:36)
Hi everyone, Can anyone tell me if there is a standard way that a CSS should be presented, i.e. what order thing should appear in? I've completed some templates and have just added to the style sheet whenever something needed styling, but if the template has say 4 pages, should all the styles applicable to page 1 appear first, page 2 second etc. If a page uses includes, should the CSS be presented in the order styles occur within the page? Or, should all table styles appear together, all link styles together, all paragraph styles together etc. Or should they appear alphabetically? I realise it probably doesn't matter, but i was wondering if is good practice to present a style sheet in a certain way? Thanks Nicole

d a v e -> RE: CSS Presentation (3/30/2005 8:04:53)
as far as i know you only have to take into account the cascade/inheritance so for e.g. if you make all headings blue h1,h2,h3,h4,h5,h6 {color:blue; font-weight:bold; ... } but all h1 red h1 {color:red;} then obviously you would put the h1 later in the sheet otherwise it ain't going to be red! i usually define my html and body bits first, then any 'structural' divs/tables (e.g. wrappers) then global styles such as <p>, links, etc. but you couls of course do it however it seems logical to you e.g. by header area, navigation, main content area, footer and put comments in like /* nav */ a:link {colour:yellow;} a:visited {color:purple;} etc (obviously link order is important as well!)

Nicole -> RE: CSS Presentation (6/13/2006 1:54:04)

...Something's been bugging me for over a year now, and I've just realised!

I didn't thank Dave for his response in this thread![:D]

Seriously though, I stumbled upon this thread today while searching Google for different ways to present CSS as in how it actually looks when you write it. For instance:

h1 { 
color: #7a052c; 
text-decoration: none; 
font-size: 1.75em; 
letter-spacing: 0.15em;
font-family: arial, verdana, helvetica, sans-serif; 
font-weight: normal; 
text-align: left; 
margin: 0; 
}

As opposed to:

h1 { color: #7a052c; text-decoration: none; font-size: 1.75em; letter-spacing: 0.15em; font-family: arial, verdana, helvetica, sans-serif; font-weight: normal; text-align: left; margin: 0; }

Anyway, I "think" I've finally gotten it through my thick head why things were inheriting where they shouldn't have been. I had specific things styled like a <p> in a <div> but I also had an overall style for <p> which wasn't "part" of any particular <div>

I've totally re-written the CSS for a project today where I was experiencing such problems, and I'm now happy with my CSS, can read and understand it at a glance and also work out why I was experiencing those inheritance problems.

My new CSS file now looks like this: (okay so it doesn't want to quite display here as I have it, needless to say that I've spaced things out a lot)

body 				{ margin: 0; padding: 0 0 0 0; background: #9baabf; text-align: center; }

span.aaavanish 		{ display: none }



/******************** General Div Positioning ********************/

#top 				{ font-size: 0px; background: url('../images/top.gif') no-repeat; margin: 0 auto; width: 740px; height: 18px; padding: 0; }

#middle 			{ background: #fff url('../images/content.gif') repeat-y; margin: 0 auto; width: 740px; padding: 0; }

#container 			{ width: 716px; margin: 0 auto; background-color: #fff; overflow: hidden; }

#bottom 			{ clear: both; background: url('../images/bottom.gif') no-repeat; margin: 0 auto; width: 740px; height: 18px; padding: 0; }

#skip 				{ width: 716px; background-color: #fff; margin: 0 0 0 0; padding: 0 0 0 0; }

#banner 			{ width: 716px; height: 100px; background: #fff url('../images/banner-image.gif') no-repeat top center; }

#content 			{ width: 516px; background-color: #fff; float: right; }

#heading 			{ width: 100%; background-color: #fff; float: left; }

#page-numbering 	{ width: 100%; background-color: #fff; float: right; }

#previous 			{ width: 50%; background-color: #fff; float: left; }

#next 				{ width: 50%; background-color: #fff; float: right; }

#disclaimer 		{ clear: both; }

#menu 				{ width: 200px; height: 100%; background-color: #fff; float: left; }

#footer 			{ background-color: #9baabf; width: 740px; margin: 0 auto; }



/******************** Skip Div Styles ********************/

#skip p 				{ font-family: verdana, arial, helvetica, sans-serif; font-size: 0.675em; font-style: normal; font-weight: normal; text-decoration: none; color: #444; 
						background-color: #fff; text-align: left; margin: 0 0 0 0; padding: 0 0 8px 16px; }

#skip a:link, a:visited { font-family: verdana, arial, helvetica, sans-serif; font-size: 1em; font-style: normal; font-weight: normal; text-decoration: none;
						color: #444; }

#skip a:hover, a:focus 	{ color: #000; text-decoration: underline; }



/******************** Banner Div Styles ********************/

#banner span 			{ display: none }



/******************** Content Div Styles ********************/

#content h1 			{ color: #7a052c; text-decoration: none; font-size: 1.75em; letter-spacing: 0.15em; 
						font-family: "times new roman", arial, verdana, helvetica, sans-serif; font-weight: normal; text-align: left; margin: 0 16px 0 16px; }

#content h2 			{ color: #7a052c; border-bottom: 1px solid #ccc; text-decoration: none; font-size: 1.25em; letter-spacing: 0.15em; line-height: 1.5; 
						font-family: "times new roman", arial, verdana, helvetica, sans-serif; font-weight: normal; text-align: left; margin: 24px 16px 12px 16px; }

#content h2.maps 		{ text-align: center; }

#content h3 			{ color: #7a052c; text-decoration: none; font-size: 0.9em; letter-spacing: 0.075em; line-height: 1.5; 
						font-family: verdana, arial, helvetica, sans-serif; font-weight: normal; text-align: left; margin: 16px 16px 8px 16px; }

#content p 				{ color: #444; font-size: 0.75em; line-height: 1.5; font-family: verdana, arial, helvetica, sans-serif; font-weight: normal; text-align: left;
						background-color: #fff; margin: 16px 16px 0 16px; }

#content p.content 		{ font-size: 0.75em; line-height: 1.5em; font-weight: normal; font-family: verdana, arial, helvetica, sans-serif; color: #444; 
						background-color: #fff; margin: 16px 16px 0 16px; }

#content p.maps 		{ margin: 32px 0 0 8px; text-align: center; }

#content a:link p.content, a:visited p.content { color: #444; font-size: 1em; line-height: 1.5; font-family: verdana, arial, helvetica, sans-serif; font-weight: normal;
						text-decoration: none; margin: 0 0 0 0; }

#content a:hover.content, a:focus.content { color: #444; font-size: 1em; line-height: 1.5; font-family: verdana, arial, helvetica, sans-serif; font-weight: normal;
						text-decoration: underline; text-align: left; margin: 0 0 0 0; }

#content img.maps 		{ margin-bottom: 16px; }

#content span.glossary 	{ color: #444; font-size: 1em; line-height: 1.5; font-family: verdana, arial, helvetica, sans-serif; font-weight: bold; text-align: left; 
						background-color: #fff; margin: 16px 0 0 0; }	

#content table 			{ font-family: arial, verdana, helvetica, sans-serif; font-size: 0.75em; width: 480px; border: 0px none; color: #444; border-collapse: collapse;
						background-color: #fff; text-align: left; float: right; margin: 0 12px 16px 0; }

#content th.data1 		{ width: 33%; padding: 5px; vertical-align: bottom; border-bottom: 1px solid #333; }

#content td.data1 		{ width: 33%; padding: 5px; vertical-align: top; border-bottom: 1px solid #ccc; }

#content th.data2 		{ width: 67%; padding: 5px; vertical-align: bottom; border-bottom: 1px solid #333; }

#content td.data2		{ width: 67%; padding: 5px; vertical-align: top; border-bottom: 1px solid #ccc; }

#content caption 		{ color: #7a052c; text-decoration: none; font-size: 1.2em; letter-spacing: 0.075em; line-height: 1.5; 
						font-family: verdana, arial, helvetica, sans-serif; font-weight: normal; text-align: left; padding: 16px 0 8px 0; }		

#content ul 			{ color: #444; text-decoration: none; font-size: 0.75em; line-height: 1.5; font-family: verdana, arial, helvetica, sans-serif; font-weight: normal;
						text-align: left; list-style-type: square; }

#content ol 			{ color: #444; text-decoration: none; font-size: 0.75em; line-height: 1.5; font-family: verdana, arial, helvetica, sans-serif; font-weight: normal;
						text-align: left; }
						
#content li 			{ margin: 0 16px 16px 32px; }

#content .tooltip		{ color: #444; border-bottom: 1px dotted #666; line-height: 1.5; cursor: help; }

#content dfn.tooltip 	{ font-family: verdana, arial, helvetica, sans-serif; font-style: normal; cursor: help; }

/* this identifier is requied for the tooltip  */

#tooltip				{ width: 20em; font-size: 11px; color: #000; background-color: #eee; border: 1px solid #7a052c; padding: 5px 8px 8px 8px; cursor: help;
						line-height: 1.5; font-family: verdana, arial, helvetica, sans-serif; font-weight: normal; text-align: left; }

#content noscript 		{ color: #555; font-size: 0.75em; line-height: 1.5; font-family: arial, verdana, helvetica, sans-serif; font-weight: bold; text-align: left;
						background-color: #fff; margin-top: 1em; margin-bottom: 0; margin-left: 0; margin-right: 0; }

#content a.noscript 	{ color: #555; font-size: 1em; line-height: 1.5; font-family: arial, verdana, helvetica, sans-serif; font-weight: bold; text-align: left;
						background-color: #fff; margin-top: 1em; margin-bottom: 0; margin-left: 0; margin-right: 0; }

#content span.glossary 	{ color: #444; font-size: 1em; line-height: 1.5; font-family: verdana, arial, helvetica, sans-serif; font-weight: bold; text-align: left;
						background-color: #fff; margin-top: 1em; margin-bottom: 0; margin-left: 0; margin-right: 0; }
						
#content .right 		{ float: right; width: 200px; margin: 10px 16px 10px 10px; padding: 10px; border: 1px solid #ccc; 
						font-family: arial, verdana, helvetica, sans-serif; font-size: 0.7em; font-weight: bold; }




/******************** Heading Div Styles ********************/

#heading h1 			{ color: #7a052c; text-decoration: none; font-size: 1.75em; letter-spacing: 0.15em; 
						font-family: "times new roman", arial, verdana, helvetica, sans-serif; font-weight: normal; text-align: left; margin: 0 16px 0 16px; }

#heading a:link.main, a:visited.main { color: #7a052c; text-decoration: none; font-size: 1em; font-family: "times new roman",arial, verdana, helvetica, sans-serif;
						font-weight: normal; text-align: left; }

#heading a:hover.main, a:focus.main { color: #7a052c; text-decoration: none; font-size: 1em; font-family: "times new roman", arial, verdana, helvetica, sans-serif;
						font-weight: normal; text-align: left; }



/******************** Page Numbering Div Styles ********************/

#page-numbering p.pages { color: #808080; text-decoration: none; font-size: 1em; line-height: 1.5; letter-spacing: 0.25em; 
						font-family: arial, verdana, helvetica, sans-serif; font-weight: bold; text-align: right; margin: 0 16px 0 0; }

#page-numbering a:link.pages, a:visited.pages { color: #808080; text-decoration: none; font-size: 0.875em; font-family: arial, verdana, helvetica, sans-serif;
						font-weight: bold; text-align: center; margin: 0; }

#page-numbering a:hover.pages, a:focus.pages { color: #7a052c; text-decoration: none; font-size: 0.875em; font-family: arial, verdana, helvetica, sans-serif;
						font-weight: bold; text-align: center; margin: 0; }

#page-numbering span.pages { color: #7a052c; text-decoration: none; font-size: 1.25em; line-height: 1.5; font-family: arial, verdana, helvetica, sans-serif;
						font-weight: bold; text-align: right; margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; }



/******************** Previous Div Styles ********************/

#previous p 				{ color: #808080; text-decoration: none; font-size: 0.875em; line-height: 1.5; letter-spacing: 0.1em; 
							font-family: arial, verdana, helvetica, sans-serif; font-weight: bold; text-align: left; margin: 16px; }

#previous a:link, a:visited { color: #808080; text-decoration: none; font-size: 1em; font-family: arial, verdana, helvetica, sans-serif; 	font-weight: bold;
							text-align: left; margin: 0; }

#previous a:hover, a:focus 	{ color: #7a052c; text-decoration: none; font-size: 1em; font-family: arial, verdana, helvetica, sans-serif; 	font-weight: bold;
							text-align: left; margin: 0; }



/******************** Next Div Styles ********************/

#next p 					{ color: #808080; text-decoration: none; font-size: 0.875em; line-height: 1.5; letter-spacing: 0.1em; 
							font-family: arial, verdana, helvetica, sans-serif; font-weight: bold; text-align: right; margin: 16px; }
							
#next a:link, a:visited 	{ color: #808080; text-decoration: none; font-size: 1em; font-family: arial, verdana, helvetica, sans-serif; 	font-weight: bold;
							text-align: right; margin: 0; }

#next a:hover, a:focus 		{ color: #7a052c; text-decoration: none; font-size: 1em; font-family: arial, verdana, helvetica, sans-serif; 	font-weight: bold;
							text-align: right; margin: 0; }



/******************** Menu Div Styles ********************/

#menu ul 					{ font-family: arial, verdana, helvetica, sans-serif; font-size: 0.8em; margin: 0 0 0 16px; padding: 0; list-style-type: none; }

#menu li 					{ margin: 0 0 .3em 0; }

#menu p 					{ font-family: verdana, arial, helvetica, sans-serif; font-size: 0.675em; font-style: normal; font-weight: normal; text-decoration: none;
							color: #555; background-color: #fff; text-align: center; margin: 0 0 0 0; padding: 8px 0 8px 16px; }

#menu p.resize 				{ text-align: center; margin: 0 0 0 0; }

#menu a.nav 				{ color: #444; background-color: #ebebeb; font-size: 1em; display: block; font-family: Arial, Verdana, Helvetica, sans-serif; 
							border: 1px solid #ccc; text-decoration: none; width: 150px; padding: .3em .8em; text-align: left; }

#menu a:hover.nav, #menu a:focus.nav { background-color: #f3d5e5; color: #333; }

#menu a.resize 				{ background-color: #fff; }

#menu img.logo 				{ border: 0px none; padding: 16px 0 0 16px; }

#menu img.resize 			{ border: 0px none; margin: 0 0 0 0; }



/******************** Footer Div Styles ********************/

#footer p 					{ font-family: verdana, arial, helvetica, sans-serif; font-size: 0.675em; font-style: normal; font-weight: normal; text-decoration: none;
							color: #000; background-color: #9baabf; text-align: center; margin: 0 0 0 0; padding: 8px 0 8px 16px; }

#footer a:link, a:visited 	{ font-family: verdana, arial, helvetica, sans-serif; font-size: 1em; font-style: normal; font-weight: normal; text-decoration: none;
							color: #000; }

#footer a:hover, a:focus 	{ color: #000; text-decoration: underline; }



/******************** Disclaimer Div Styles ********************/

#disclaimer p 				{ color: #444; text-decoration: none; font-size: 0.75em; line-height: 1.25; font-family: arial, verdana, helvetica, sans-serif;
							font-weight: normal; text-align: left; margin: 16px; border: 1px solid #7a052c; padding: 16px; }


.right {
	float: right;
	width: 200px;
	margin: 10px 16px 10px 10px;
	padding: 10px;
	border: 1px solid #ccc;
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 0.7em;
	font-weight: bold;
}

Now I realise two things:

1. I have a lot of extra text and space in there that can be deleted/moved up when I complete the project and upload the files to make the whole CSS file smaller and load faster,

2. That I still have a lot of classes specified for things that don't need classes (I'm going to work out which ones I don't need right after posting this message)

But my question is, I've used tabs to align styles in my CSS file, three lines between each set of <div> styles, and other things to just simply lay it out neatly so I can understand it, but are there any problems with this? Do all browsers read the CSS file the same, do some read the spaces and tabs and do silly things with them? (I remember a problem I had once with IE needing a piece of HTML to appear on the same line as another piece of code in order to not show a slight space between a banner and navigation), will my neat CSS layout upset any browsers? I've tested in only Firefox 1.5 and IE 6 so far, both display it well but I'm just wondering.

Tailslide -> RE: CSS Presentation (6/13/2006 2:55:56)
Don't worry Nicole - it makes absolutely no difference with CSS - you just arrange it how you like. I tend to have rules on one line just because I personally find it easier to read but a lot of people really hate that approach and much prefer to arrange it with a singe rule on a line and brackets on their own line sort of like Javascript. If you have a very large stylesheet then extra lines means extra file size - but as long as it's not ridiculously large I don't think it's going to have much of an impact.

Page: [1]

0.078125