navigation
a webmaster learning community
     Home    Register     Search      Help      Login    
FrontPage Alternative
Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Free FrontPage Templates

Search Forums
 

Advanced search
Recent Posts

 Todays Posts
 Most Active posts
 Posts since last visit
 My Recent Posts
 Mark posts read

 

CSS Presentation

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets >> CSS Presentation 		Page: [1]
 
Nicole

 

Posts: 2850
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline

  		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

 

Posts: 4179
Joined: 7/24/2002
From: England (but live in Finland now)
Status: offline

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


_____________________________

David Prescott
Gekko web design

(in reply to Nicole)
Nicole

 

Posts: 2850
Joined: 9/15/2004
From: Nambucca / Kempsey, Australia
Status: offline

  		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!:)

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.

_____________________________

:)

(in reply to d a v e)
Tailslide

 

Posts: 6295
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		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.

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to Nicole)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets >> CSS Presentation 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Back to top

  Microsoft Corporation in no way endorses or is affiliated with "OutFront."
  OutFront is published and edited by Thomas Brunt.
  440 Great Circle Dr., St. Matthews, SC 29135.
  © 2008 All Rights Reserved
  Click here to view our privacy statement.