Curious as to how you all setup your CSS files

[szlamany]

Anyone able and willing to post a part of the CSS files they use for production websites?

Curious what types of selectors people use and how they configure the CSS rules to connect to the html elements.

I know how this all works in practice - I'm curious how professional coders actually organize their CSS rules. I'm starting a new web app and don't want to be constrained by the setups I've seen and used up to this point.

Thanks!

[kareninstructor]

Although I do not code ASP.NET I have done a lot with CSS for others and learned that many are not well organized in how they physically structure their files such as CSS, scripts etc while others will go through growing pains because they generally do not have the time to properly organize the physical structure but along the way will adapt collectively put together standards. With that also comes (sounds like you are at this point) comes the realization about things like selectors via understanding how internals work which includes stuff like inheritance and how rules and such work. Some of the small things become large when a css file grows in size which leads to commenting and also breaking up elements into logical files. All these things were extremely important to me especially when creating sites (one example of a site I did by hand http://jimjacobe.com/index.html) where roughly five percent consisted of tables while the remaining 95 percent were structured using DIV and span constructs.


One of many good sites on CSS
http://www.glish.com/css/

[brin351]

That's a good question. Here is a little website I did for a friend who breads dogs. It's asp.net 4 with CSS based layout.

http://www.noonameenakennels.com/Lha...g_Charles/Home

The CSS - I don't know how good my css structure is, I'm happy for anyone to pick it apart.

structure - basically I start with elements then page layout (ID's) then classes then more specific IDed elements.

fonts - I like to specify a default font in px in the body element and vary it by % on other elements, classes.... like h1,2,3

body   
{
	font-family: Verdana, Arial;
	font-size: 12px;
    color: #FFFFCC;
	background-color:#7A371D;
    background-image: url(/images/bg.jpg);
}

a:link, a:visited
{
    color: #FFFFCC;
    text-decoration: none;
}

a:hover
{
    color: #FFFFCC;
    text-decoration: underline;
}
img{ border:0;}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6{
    color: #FFFFCC;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
h1{font-size: 160%;}
h2{font-size: 150%;}
h3{font-size: 130%;}
h4{font-size: 120%;}
h5, h6{font-size: 110%;}

.lblMsg{ font-size: 150%; color:Gray;}

/* PAGE LAYOUT   
----------------------------------------------------------*/

#wrap{
    width:1000px;
    margin:auto;
    background-color:#7A371D;
    }
#header
{
    width:100%;}
#leftColumn
{
    float:left;
    width:200px;
    margin: 10px 30px 50px 10px;
    }
#content
{
    float:left;
    width:750px;
    margin:10px 0 50px 0;
}
#footer
{
    clear:both;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
    text-align:center;
    padding:20px;
    border-top: 1px solid Gray;
    }

/* Left Menu   
----------------------------------------------------------*/

.menu
{
    width:100%;
    margin-bottom:50px;
}
.menu h3
{
    margin:0 0 5px 0;
}
.menu ul
{
    list-style:none;
    margin:0;
    padding:0;
}
.menu li
{
}
.menu li a
{
    padding:5px;
    display:block;
}
.menu li a:hover
{
    background-color:#CC6600;
}





/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    margin: 5px;
    border: 1px solid #ccc;
}

fieldset p 
{
    margin: 2px 12px 10px 10px;
}

fieldset label
{
    width:100px;
    display: block;
    float:left;
}

legend 
{
    font-size: 120%;
    font-weight: bold;
    margin-left:5px;
    padding: 2px 4px 8px 4px;
}

.input 
{
    border: 1px solid #ccc;
}

/* INDIVIDUAL ELEMENTS   
----------------------------------------------------------*/


.aBtnLink
{
	background-color:#7A371D;
	padding: 1px 5px 1px 5px;
	border-top: solid 1px #BBBBBB;
	border-left: solid 1px #BBBBBB;
	border-bottom: solid 1px #666;
	border-right: solid 1px #666;
}
.aBtnLink:hover{
	text-decoration: none;
	border-top: solid 1px #666;
	border-left: solid 1px #666;
	border-bottom: solid 1px #BBBBBB;
	border-right: solid 1px #BBBBBB;
}	

.validate { color:Red; font-weight:bold; border:1px solid gray;}

.pedagree {width:100%; border-left:1px solid gray; border-top:1px solid gray;}
.pedagree td{ border-bottom:1px solid gray; border-right:1px solid gray; width:33%;}
table td{ color:#FFFFCC; font-size:100%;} /*helps render table in tinymce editor*/

[szlamany]

That's a good question. Here is a little website I did ...CSS - I don't know how good my css structure is, I'm happy for anyone to pick it apart.

structure - basically I start with elements then page layout (ID's) then classes then more specific IDed elements.

fonts - I like to specify a default font in px in the body element and vary it by % on other elements, classes.... like h1,2,3

Wow - thank you!

Exactly what I was looking for. Let me absorb the details of that CSS in the AM and I'll post questions if I have any.

[sapator]

Guys since i will need this soon i have a question(mind you i'm at the very early stages of CSSing).
How do you manage to have the menu to the left?
I see this:

<div class="menu">
    <h3>
        <img alt="Menu" src="/images/menu.jpg" /></h3>
    <ul>

        <li><a href="/Lhasa_Apsos/Cavalier_King_Charles/Home">Home</a></li>
        <li><a href="/About_Us">About Us</a></li>
        <li><a href="/Contact_Us">Contact Us</a></li>
        <li><a href="/Lhasa_Apsos/Cavalier_King_Charles/GuestBook">Guest Book</a></li>
        <li><a href="/Lhasa_Apsos/Cavalier_King_Charles/Links">Interesting Links</a></li>
    </ul>

</div>
<div class="menu">

and i see the CSS but i cannot understand how it actually starts left.
Also will that work on a master page or modifications are needed.
Thanks.

[szlamany]

I believe it was done with

<div id="leftColumn">

[sapator]

Ah.
And you get all the menus after that i suppose.
Thanks.

P.S. I should try this on a master page and see what will happen.

[kareninstructor]

Guys since i will need this soon i have a question(mind you i'm at the very early stages of CSSing).
How do you manage to have the menu to the left?
I see this:

<div class="menu">
    <h3>
        <img alt="Menu" src="/images/menu.jpg" /></h3>
    <ul>

        <li><a href="/Lhasa_Apsos/Cavalier_King_Charles/Home">Home</a></li>
        <li><a href="/About_Us">About Us</a></li>
        <li><a href="/Contact_Us">Contact Us</a></li>
        <li><a href="/Lhasa_Apsos/Cavalier_King_Charles/GuestBook">Guest Book</a></li>
        <li><a href="/Lhasa_Apsos/Cavalier_King_Charles/Links">Interesting Links</a></li>
    </ul>

</div>
<div class="menu">

and i see the CSS but i cannot understand how it actually starts left.
Also will that work on a master page or modifications are needed.
Thanks.

Take a look at the attachment which shows some basic positioning.

Let's say if one page is a tad different (refering to the attached demo) with the left menu as in the span text which hovers at the bottom of the menu changes

	<style type="text/css">		
		@import "lefty.css";
	</style>

would stay but I would change the one page to look as follows which keeps all the other properties defined in lefty.css

	<style type="text/css">		
		@import "lefty.css";
                 DIV#links A:hover SPAN {TOP: 370px;}	
	</style>

So the new definition defining top overrides the top property in lefty.css which is 160

DIV#links A:hover SPAN
{
   padding-right: 5px;
   display: block;
   padding-left: 5px;
   z-index: 100;
   background: black;
   left: 0px;
   padding-bottom: 5px;
   margin: 10px;
   font: 10px Verdana, sans-serif;
   width: 125px;
   color: #aaa;
   padding-top: 5px;
   position: absolute;
   top: 160px;
   text-align: center
}

Hope this helps.

[sapator]

Hmm.
Can't really say i understood what you wrote.So i can't ask something.
You override what?And with what?
The left of the menu is on the css now?

[brin351]

Basically you create a base stylesheet.css that applies to all pages. If you have other stylesheet.css files that apply to some pages/parts of some pages you can include them on the page after the refrence to the base style sheet and they will override the base styles. Or you can put styles in <style> tags on a page or on an individual html element and they to will override the base style.

My understanding is style are applied in order of appearence when refrencing the .css or in a style tag, the last style is the ones that wins. Lastly a style attribute on a html element always wins out.

so if you have 2 style sheets both defining a style for the body{} the one refrenced last will apply.

[kareninstructor]

Hmm.
Can't really say i understood what you wrote.So i can't ask something.
You override what?And with what?
The left of the menu is on the css now?

In regards to override

The following shows the SPAN text under the menu in the attached demo.

DIV#links A:hover SPAN
{
   padding-right: 5px;
   display: block;
   padding-left: 5px;
   z-index: 100;
   background: black;
   left: 0px;
   padding-bottom: 5px;
   margin: 10px;
   font: 10px Verdana, sans-serif;
   width: 125px;
   color: #aaa;
   padding-top: 5px;
   position: absolute;
   top: 160px;
   text-align: center
}

I was referencing the top property in that the value is 160. If 160 is different one say one page out of ten you can override the top property as follows

<style type="text/css">		
   @import "lefty.css";
   DIV#links A:hover SPAN {TOP: 370px;}	
</style>

And yes the menu is on the left.

[sapator]

Ok, i think i got it.
You can override a style with another CSS or with an inline command straight on the markup (?).

[kareninstructor]

Ok, i think i got it.
You can override a style with another CSS or with an inline command straight on the markup (?).

Yes, and in the example I provided only one property is changed while the others are not. Something many do not get or care too work with.

[gep13]

Hey,

And this is where a tool like firebug comes into play. For any given element, you can see exactly which styles have been applied, and where they have been overridden.

Gary

[szlamany]

... (one example of a site I did by hand http://jimjacobe.com/index.html) where roughly five percent consisted of tables while the remaining 95 percent were structured using DIV and span constructs.

Hey - nice site...

Now that I've finished reading jQuery in Action 2nd edition - and am creating my own "database maintaining" jQuery site I can see appreciate what you have created here.

What are some of the more "cool" things you have done in this site that I can look over?

[sapator]

Nice attempt.I'm not too brave to try to create something like that without good knowledge.I'm mostly dreamweavering .
One minor problem though.If you zoom in the picture goes to the far right.

[szlamany]

In regards to override

The following shows the SPAN text under the menu in the attached demo.

[CODE]
DIV#links A:hover SPAN
{
.
.
.

How does the SPAN work? I was just looking more closely at the DEMO.zip you gave and I cannot see how the SPAN text actually appears under the menu.

Please explain a bit of how that relates to the A elements.

Thanks!