I need to improve my CSS
July 11, 2008 11:04 AM Subscribe
I am seeking some very specific CSS advice.
I learned CSS on my own several years ago. I don't work with anyone who does web design and I think I am suffering from the lack of constructive criticism. I know that my CSS is weak but I have no idea what I should be doing to improve it as I don't even know the shop talk words that would help me find new ideas on the web.
I am about to embark on a rehaul of the three websites I manage and will be implementing a tabbed layout. I have been reading A List Apart to get some ideas. I can't stray much from the look of the page. If you could make me change two things I am doing in my stylesheet that you think are horrid, what would they be? Are there some online resources that you think I should be using?
My basic page
An entry page
My stylesheet
I learned CSS on my own several years ago. I don't work with anyone who does web design and I think I am suffering from the lack of constructive criticism. I know that my CSS is weak but I have no idea what I should be doing to improve it as I don't even know the shop talk words that would help me find new ideas on the web.
I am about to embark on a rehaul of the three websites I manage and will be implementing a tabbed layout. I have been reading A List Apart to get some ideas. I can't stray much from the look of the page. If you could make me change two things I am doing in my stylesheet that you think are horrid, what would they be? Are there some online resources that you think I should be using?
My basic page
An entry page
My stylesheet
Uh, you don't need to declare the same shit over and over if you want it to all be the same: that is the Cascade part of CSS. Like if you want all your fonts under #content to be the same, just declare it in #content. Then if say #content h3 a:hover you want an underline, only add that underline there, and no need to redeclare your fonts etc.
So you would have
#content {color: #666666; font: normal 10pt Arial, Tahoma, Verdana, sans-serif; text-decoration: none;}
#content h3 a:hover {color: #fff; text-decoration: underline;}
posted by shownomercy at 11:28 AM on July 11, 2008
So you would have
#content {color: #666666; font: normal 10pt Arial, Tahoma, Verdana, sans-serif; text-decoration: none;}
#content h3 a:hover {color: #fff; text-decoration: underline;}
posted by shownomercy at 11:28 AM on July 11, 2008
Response by poster: Well, I think I am repeating the font stylings to often, for one thing, but without repeating it over and over again it doesn't work. I know it can't be correct but I don't know. Also, I had one of those "conversations" with someone the other day. I was asked to talk about my CSS to a group of people who work for other state departments who are using tables to lay stuff out. There was one guy there who knew a hell of a lot more than I did and he was doing a lot of eye-rolling. At one point he asked if I was going to talk about (insert word I didn't understand) and then he came up front, took over, and talked about (word I don't understand). It was humiliating.
I was satisfied with what I was doing before that but now I am crying myself to sleep at night.
posted by Foam Pants at 11:32 AM on July 11, 2008
I was satisfied with what I was doing before that but now I am crying myself to sleep at night.
posted by Foam Pants at 11:32 AM on July 11, 2008
You definitely need to re-learn CSS. You know the basic attributes and values, but you do not understand the core principles of CSS. Visit www.htmldog.com and go through the CSS tutorials/resources, that will at least get you started. There are a few good books on CSS, but none of them are very comprehensive and there are a lot of bad ones. Try checking out some by Eric Meyer, I haven't read any of them but he knows his stuff.
It does work if you just declare the an attribute ONCE to the parent, all of its children will inherit the attribute. I just tried it on your website and it does work. For example, you have:
#content {
padding: 5px 5px 5px 5px;
margin-right: 210px;
margin-left: 3px;
background-color: none;
position: relative;}
#content p { padding-bottom: 10px; color: #666666; font: normal 10pt Arial, Tahoma, Verdana, sans-serif; text-decoration: none; }
#content strong { padding-bottom: 10px; color: #666666; font: bold 9pt Arial, Tahoma, Verdana, sans-serif; text-decoration: none; }
etc.
Instead of declaring "font: normal 10pt Arial, Tahoma, Verdana, sans-serif;" for every element in #content, just put that line under #content {}
#content {
padding: 5px 5px 5px 5px;
margin-right: 210px;
margin-left: 3px;
background-color: none;
position: relative;
font: normal 10pt Arial, Tahoma, Verdana, sans-serif;
}
This is basically what shownomercy said, and you haven't tried it. I know you haven't tried it because you said it doesn't work.
You should combine selectors when you want to apply the same rules. For example:
#content a.crumb:link { color: #666699; font: normal 8pt/8pt Arial, Helvetica, Tahoma, sans-serif; }
#content a.crumb:visited { color: #666699; font: normal 8pt/8pt Arial, Helvetica, Tahoma, sans-serif; }
Should be:
#content a.crumb:link,
#content a.crumb:visited {
color: #669;
font: normal 8pt/1 Arial, Helvetica, Tahoma, sans-serif;
}
Also, try not to use "pt" for units. Always use px if you are using static units for the screen, it only makes sense to use pt in print stylesheets. With line-heights, just use numbers instead of units unless you want a static line-height.
You are about at intermediate skill level, it won't be hard to get advanced with some experience and reading. Try doing some work for other sites and get more experience with different situations, make a personal website to experiment to your hearts content.
Don't give up!
posted by mallow005 at 11:54 AM on July 11, 2008 [1 favorite]
It does work if you just declare the an attribute ONCE to the parent, all of its children will inherit the attribute. I just tried it on your website and it does work. For example, you have:
#content {
padding: 5px 5px 5px 5px;
margin-right: 210px;
margin-left: 3px;
background-color: none;
position: relative;}
#content p { padding-bottom: 10px; color: #666666; font: normal 10pt Arial, Tahoma, Verdana, sans-serif; text-decoration: none; }
#content strong { padding-bottom: 10px; color: #666666; font: bold 9pt Arial, Tahoma, Verdana, sans-serif; text-decoration: none; }
etc.
Instead of declaring "font: normal 10pt Arial, Tahoma, Verdana, sans-serif;" for every element in #content, just put that line under #content {}
#content {
padding: 5px 5px 5px 5px;
margin-right: 210px;
margin-left: 3px;
background-color: none;
position: relative;
font: normal 10pt Arial, Tahoma, Verdana, sans-serif;
}
This is basically what shownomercy said, and you haven't tried it. I know you haven't tried it because you said it doesn't work.
You should combine selectors when you want to apply the same rules. For example:
#content a.crumb:link { color: #666699; font: normal 8pt/8pt Arial, Helvetica, Tahoma, sans-serif; }
#content a.crumb:visited { color: #666699; font: normal 8pt/8pt Arial, Helvetica, Tahoma, sans-serif; }
Should be:
#content a.crumb:link,
#content a.crumb:visited {
color: #669;
font: normal 8pt/1 Arial, Helvetica, Tahoma, sans-serif;
}
Also, try not to use "pt" for units. Always use px if you are using static units for the screen, it only makes sense to use pt in print stylesheets. With line-heights, just use numbers instead of units unless you want a static line-height.
You are about at intermediate skill level, it won't be hard to get advanced with some experience and reading. Try doing some work for other sites and get more experience with different situations, make a personal website to experiment to your hearts content.
Don't give up!
posted by mallow005 at 11:54 AM on July 11, 2008 [1 favorite]
You've omitted a couple semicolons.
Use
Declare font sizes in
And just FYI, that fellow is a douchebag who shouldn't interrupt other peoples' presentations. So screw him.
posted by theiconoclast31 at 12:29 PM on July 11, 2008
list-style-image: none} should be list-style-image: none;}. (This appears a couple times in your stylesheet)Use
0 instead of 0px. Zero pixels is the same as zero of anything else.Declare font sizes in
em or %, so they'll be resized correctly.And just FYI, that fellow is a douchebag who shouldn't interrupt other peoples' presentations. So screw him.
posted by theiconoclast31 at 12:29 PM on July 11, 2008
That guy at your meetup sounds like a dick.
Was he talking about graceful degradation or accessibility?
It's just about the only CSS designer "insider jargon" I can think of, off hand. And it would probably be a good thing for a bunch of government "table" HTML designers to know about. The basic idea is that your website should be programmed to work even if certain things fail due to browser differences or people using screen readers (because they're blind, etc.).
Again, that guy sounds like a bit of a turd. Try not to sweat it. Try building yourself a Wordpress blog and experiment with their themes if you want to learn more about cascading style sheets. It's pretty good immersion. Also, Simblebits.org and Bulletproof Web Design (book) are good for tricks in addition to the mentions of Eric Meyer, A List Apart, and HTML Dog, above.
posted by metajc at 12:49 PM on July 11, 2008 [1 favorite]
Was he talking about graceful degradation or accessibility?
It's just about the only CSS designer "insider jargon" I can think of, off hand. And it would probably be a good thing for a bunch of government "table" HTML designers to know about. The basic idea is that your website should be programmed to work even if certain things fail due to browser differences or people using screen readers (because they're blind, etc.).
Again, that guy sounds like a bit of a turd. Try not to sweat it. Try building yourself a Wordpress blog and experiment with their themes if you want to learn more about cascading style sheets. It's pretty good immersion. Also, Simblebits.org and Bulletproof Web Design (book) are good for tricks in addition to the mentions of Eric Meyer, A List Apart, and HTML Dog, above.
posted by metajc at 12:49 PM on July 11, 2008 [1 favorite]
It's a really good idea to install Chris Pederick's Web Developer extension for Firefox - apart from being able to outline elements and get a clear idea of your page structure, you can edit your css "live" to see the effects of changes immediately. Very satisfying!
It also allows you to validate both html and css from the toolbar (there are quite a few html errors that would help if they were fixed).
Which editor are you using to create the (x)html? A good one will alert you to unclosed tags (e.g. a missing closing <>).
You're doing well, don't let that asshole* put you off!
* Was the word specificity?
p.s. I've memailed you.
posted by ceri richard at 1:09 PM on July 11, 2008
It also allows you to validate both html and css from the toolbar (there are quite a few html errors that would help if they were fixed).
Which editor are you using to create the (x)html? A good one will alert you to unclosed tags (e.g. a missing closing <>).
You're doing well, don't let that asshole* put you off!
* Was the word specificity?
p.s. I've memailed you.
posted by ceri richard at 1:09 PM on July 11, 2008
So a few things.
You're definitely duplicating a lot. Actually even in mallow05's example:
These:
#content a.crumb:link,
#content a.crumb:visited {
color: #669;
font: normal 8pt/1 Arial, Helvetica, Tahoma, sans-serif;
}
Aren't needed at all, if the pseudo class matches the base class then you don't need it at all.
Be careful with using child selectors, (#content ul) if you find yourself having to reset the css for other elements, sometimes this indicates your element needs its own class.
posted by bitdamaged at 2:11 PM on July 11, 2008
You're definitely duplicating a lot. Actually even in mallow05's example:
These:
#content a.crumb:link,
#content a.crumb:visited {
color: #669;
font: normal 8pt/1 Arial, Helvetica, Tahoma, sans-serif;
}
Aren't needed at all, if the pseudo class matches the base class then you don't need it at all.
Be careful with using child selectors, (#content ul) if you find yourself having to reset the css for other elements, sometimes this indicates your element needs its own class.
posted by bitdamaged at 2:11 PM on July 11, 2008
Response by poster: I use Notepad. I miss closed tags sometimes because of this. I am breaking in Notepad++.
posted by Foam Pants at 2:22 PM on July 11, 2008
posted by Foam Pants at 2:22 PM on July 11, 2008
also, you don't need to specify everything:
if the breadcrumbs are only in the #content, you can just do:
Get too jiggy with elaborating on the cascade, and you'll wind up with something like the nightmare I just found in a css file I was trying to debug:
posted by mimi at 2:29 PM on July 11, 2008
#content p.crumb { ..... }
#content .crumb { .... }
#content a.crumb { .... }if the breadcrumbs are only in the #content, you can just do:
.crumb {...}
.crumb a {...}Get too jiggy with elaborating on the cascade, and you'll wind up with something like the nightmare I just found in a css file I was trying to debug:
#IDname fieldset div#IDname table#IDname.classname tbody tr.classname td.classname { ... }posted by mimi at 2:29 PM on July 11, 2008
Ugh, that guy sounds like a smug jerk. I can only imagine how humiliated you must have been, and you totally didn't deserve that.
Like others have mentioned, you already have some strong skills, you just need a bit of refinement. Aside from the things others have mentioned, it seems to me that you're using a lot of absolute positioning where you don't really need to. You may want to check out the tutorials on CSS floating at Floatutorial.
You may want to also read up on CSS image replacement techniques, which I noticed you don't really use. There are lots of different methods, but this page has a good overview of the basics.
posted by geeky at 2:54 PM on July 11, 2008
Like others have mentioned, you already have some strong skills, you just need a bit of refinement. Aside from the things others have mentioned, it seems to me that you're using a lot of absolute positioning where you don't really need to. You may want to check out the tutorials on CSS floating at Floatutorial.
You may want to also read up on CSS image replacement techniques, which I noticed you don't really use. There are lots of different methods, but this page has a good overview of the basics.
posted by geeky at 2:54 PM on July 11, 2008
Lots of good stuff here. I'm going to mention some more general resources because people have been address more specific technical stuff, and I'm too lazy/tired to dig into that right now!
I didn't see this mentioned yet but a book that really helped me a lot when I was first trying to "get" CSS in a serious way was Zeldman's Designing With Web Standards. I thought it was great because he discussed the overall thought process of building web sites intelligently and compatibly using standards-compliant XHTML and CSS. Check it out if you haven't, maybe it'd help.
Another fun resource is the CSS Zen Garden, which gives many fantastic examples of the flexibility of CSS. Cool stuff!
Oh yeah, and another vote for "screw that big jerk." We are all at different points of experience and knowledge, and there are many ways to express your "uber-l33t" advanced knowledge without making people feel small. He needs a therapist.
posted by dubitable at 4:09 PM on July 11, 2008
I didn't see this mentioned yet but a book that really helped me a lot when I was first trying to "get" CSS in a serious way was Zeldman's Designing With Web Standards. I thought it was great because he discussed the overall thought process of building web sites intelligently and compatibly using standards-compliant XHTML and CSS. Check it out if you haven't, maybe it'd help.
Another fun resource is the CSS Zen Garden, which gives many fantastic examples of the flexibility of CSS. Cool stuff!
Oh yeah, and another vote for "screw that big jerk." We are all at different points of experience and knowledge, and there are many ways to express your "uber-l33t" advanced knowledge without making people feel small. He needs a therapist.
posted by dubitable at 4:09 PM on July 11, 2008
People "have been addressing..."
I guess I'm too lazy to be using proper English right now too...
posted by dubitable at 4:11 PM on July 11, 2008
I guess I'm too lazy to be using proper English right now too...
posted by dubitable at 4:11 PM on July 11, 2008
in Regards to your question:
"Are there some online resources that you think I should be using?"
for a list good sites about HTML and CSS, check out:
http://css-tricks.com/my-big-ol-list-of-designdevelopment-htmlcss-and-personal-blogs-i-read/
I don't think there is a single link on that post that is not worth checking out.
and another two shorter lists with short reviews:
http://sixrevisions.com/resources/websites_for_web_development/
http://sixrevisions.com/resources/20_websites_better_web_developer/
specifically, you might enjoy:
http://cameronmoll.com/articles/widget/cheatsheet.pdf
a great short CSS reference
and some good book recommendations:
http://www.wolfslittlestore.be/recommended-reading-material
also if you ever have to create a web based form, check out:
http://www.lukew.com/resources/web_form_design.asp
posted by joemako at 9:21 PM on July 11, 2008 [2 favorites]
"Are there some online resources that you think I should be using?"
for a list good sites about HTML and CSS, check out:
http://css-tricks.com/my-big-ol-list-of-designdevelopment-htmlcss-and-personal-blogs-i-read/
I don't think there is a single link on that post that is not worth checking out.
and another two shorter lists with short reviews:
http://sixrevisions.com/resources/websites_for_web_development/
http://sixrevisions.com/resources/20_websites_better_web_developer/
specifically, you might enjoy:
http://cameronmoll.com/articles/widget/cheatsheet.pdf
a great short CSS reference
and some good book recommendations:
http://www.wolfslittlestore.be/recommended-reading-material
also if you ever have to create a web based form, check out:
http://www.lukew.com/resources/web_form_design.asp
posted by joemako at 9:21 PM on July 11, 2008 [2 favorites]
Sitepoint has good online resources and books.
The w3c has a CSS Validator, which I have not used myself, but you may find useful. Can anyone verify if it is worth the effort to validate css? I validate xhtml, but have not tried validating css yet.
posted by SuperSquirrel at 8:37 AM on July 13, 2008
The w3c has a CSS Validator, which I have not used myself, but you may find useful. Can anyone verify if it is worth the effort to validate css? I validate xhtml, but have not tried validating css yet.
posted by SuperSquirrel at 8:37 AM on July 13, 2008
This thread is closed to new comments.
posted by twistedonion at 11:24 AM on July 11, 2008