In Tips Sep 11, 200845
13 Training Principles of CSS Everyone Should Know
Your website’s Cascading Style Sheet defines the presentation of the document, but writing your CSS file can sometimes take a bit longer than you originally planned. Take a look at some of the following tips used by the CSS experts to ensure your CSS is being written both effectively and efficiently.
1. Name CSS Classes Intelligently
Give CSS classes a name that corresponds to what element it controls, rather than what the style actually does. Then in the future if you change the color or size then you’ll still know what element of the page the class controls. For example when using CSS to control a certain box:
.green-box { background-color: green;
padding-right: 40px; }
It would be better to call the class something like “top-box” especially as you might want to change the color of the box at a later stage:
.top-box { background-color: green;
padding-right: 40px; }
2. Use Shorthand Coding Techniques
If your still writing out each and every CSS declaration separately, then your probably wasting a ton of time. Not only is shorthand easier to write and edit, but it helps your pages load faster and more efficiently.
Font, Margin, Border, Padding, and many other properties can all be shortened.
Instead of writing:
p { padding-top: 20px;
padding-right: 40px;
padding-bottom: 30px;
padding-left: 10px; }
You can write:
p { padding: 20px 40px 30px 10px; }
For Padding, Margin, and Border; the order of values refer to the following:
1 value = p { margin: 20px; } = All four sides
2 values = p { margin: 20px 40px; } = Top/Bottom Left/Right
3 values = p { margin: 20px 40px 30px; } = Top Left/Right Bottom
4 values = p { margin: 20px 40px 30px 10px; } = Top Right Bottom Left
A few great CSS shorthand guides:
http://www.dustindiaz.com/css-shorthand/
http://www.sitepoint.com/article/introduction-css-shorthand/
3. Know Your Audience & Support Their Browsers
The general rule of thumb is to only support the latest browsers. Spending countless hours trying to fix/hack your coding to support older software is NEVER fun. And usually there are good reasons these outdated browsers have been updated (or ditched altogether).
But this is sometimes easier said than done. If you are coding for a design website whose target audience are “techies” and “geeks”; then dropping IE6 support might be easy. But if your target audience is older folks or users in less developed countries, then a majority of your visitors could still be using outdated software.
Be aware of your visitors and cater to their browser needs.
4. CSS vs. Javascript
Trying to create something that is a bit too complex for CSS? Instead of cluttering your Style Sheet with a ton of coding that may or may not work on every browser, look into using Javascripts. Not only will your site run more efficiently, but it should take less time to code if done properly.
Even if you aren’t proficient in Javascript, check some of the following sites for some ready-made-scripts that might come in handy.
http://www.javascriptkit.com/
http://www.hotscripts.com/JavaScript/Scripts_and_Programs/index.html
5. Use Premade CSS Templates
Still having trouble getting ideas on integrating advanced CSS features into your site? Why not use some coding that has been written and tested by others. There are a handful of great websites with CSS round-ups to aid you in your CSS needs.
http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/
http://intensivstation.ch/en/templates/
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
6. Validate Your CSS
Whether you are still writing your coding and need to locate an error, or you have finished it altogether; validating your Style Sheet is extremely important. Not only can the W3C Validation Service help you fix errors and locate holes, but it ensures your coding is ‘web friendly’ and ready for the public.
W3C Validation Service:
http://jigsaw.w3.org/css-validator/
7. Use The Proper Doctype
So you have finished coding your site, validated the CSS and XHMTL, and still can’t get it to look right? Maybe your doctype isn’t set properly. This is often overlooked and determines how the browser is to read your website, thus making it extremely important. Again, make sure to use the W3C Validator to your benefit.
8. Use a CSS Compressor
Having trouble getting your Style Sheet to load and run efficiently? Try compressing it with some of the following compressors:
http://www.cssdrive.com/index.php/main/csscompressoradvanced/
http://developer.yahoo.com/yui/compressor/
http://csstidy.sourceforge.net/
9. Remember Case Sensitive Element Names
Remember that element names in selectors are case sensitive when using CSS with XHTML. It is sometimes recommended to use only lowercase to ensure the possibility for errors is minimized. Also, values of the class and id attributes in HMTL and XHMTL are case sensitive; so make sure to keep an eye on your “caps” when coding.
10. Download CSS Resource Guides
Whether writing your coding from scratch or using a CSS Framework; some of the following “cheat sheets” could come in handy for your CSS needs:
http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
http://yuiblog.com/assets/pdf/cheatsheets/css.pdf
http://www.digitart.net/blueprintcss/bluebrintcss.pdf
http://www.apple.com/downloads/dashboard/developer/csscheatsheet.html
11. Don’t Declare Default Values
Remember not to write “obvious coding”. Any declaration that is set by default doesn’t need to be written, such as the following:
body { font-weight:normal; }
12. Group Your Selectors
When several element types, classes, or ids share similar properties, you can group these selectors to avoid specifying the same properties over and over again. This will really help keep coding slim and efficient.
So, to specify the font family, font color, and padding for all heading elements, you can use the following:
h1,h2,h3 {
font-family:Arial,Helvetica,Lucida,Sans-Serif;
color:#000;
margin:1em 0;
}
13. Simplify Your Coding
Last but not least, simplify your CSS. Many designers try to achieve original designs through complex solutions. Remember back in Elementary School when your teacher would say “K.I.S.S. = Keep it Simple Stupid”? Well that applies to CSS as well. By writing a CSS file that is too long, not organized, or contains too many “CSS Hacks”; you run the risk of coding a site that doesn’t display properly in the end. Not only can countless hours of wasted time be thrown away, but you could end up with a site that looks different in nearly every browser. And as the technology behind these browsers changes, your site could become worse looking as time goes on.
It is better to keep the hacks to a very minimum (if any), and use coding methods that have withstood the test of time.
Article written by Omar the Radwan
Got Some Life Saving CSS Principles To Add?
Post your top 3 CSS tips in the comments below for the chance to win a 250GB Western Digital Passport Portable HD. 
45 Comments
Sep 11, 2008
1. Using CSS content in raw css file (not in css file goin online > it’s waste of kbs)
+ structure
- wrapper
- right-col
- left-col
+ Typography
… (u get the idea)
2. proper taging via comments
/*
Typography
*/
3. what aou have already written in no. 2 >
as far as Premade CSS Templates are considered, i would recommend reusing templates you have made… they are usually tagged the same way you are used to… and rewritin outsource templates is just the same as writing them on my own
Sep 11, 2008
Nice Article!
Easy to understand for us CSS n00bs.
#4 is especially a great point!
Thanks
Sep 11, 2008
One-line handwritten CSS declarations, definitely. Such a time saver when parsing the styles!
Sep 11, 2008
These are great tips and will be very useful since I’m still learning. Thanks for taking the time to put this list together!
Sep 11, 2008
Great tips, though it seems odd to point people to 2 javascript sites for newbies known for hosting cruddy scripts. Why not point out the popular javascript frameworks (jquery, scriptaculous, mootools, etc.) , all of which have demos and ready-to-go code and reflect a commitment to standards? Very nice article though!
Sep 11, 2008
great!!!!.thanks for this.its very useful on my side.
Thanks a lot!!
Ronald
Sep 11, 2008
Mootools….. ahahahahahaha! I like that.
t
Sep 11, 2008
“It would be better to call the class something like “top-box” especially as you might want to change the color of the box at a later stage…”
And what happens when you want to move the box away from the top?
Sep 11, 2008
The only tip I really have I find incredibly useful is creating reusable classes.
Example:
.red {color: #f00;}
.bold (font-weight: bold; }
.times {font-family:times new roman; }
Yo
or if I need a bolded red text:
Yo!
or I wanted something neato:
Something
Text text OMG text text
This beats creating classes for individual items. Just because they are very reusable.
Also, combining classes is quite amazing.
Sep 11, 2008
I just realized it stripped out all my html tags. :/ My last comment seems pointless now.
Sep 11, 2008
[...] was recently browsing the web and found a post by Design Reviver titled, 13 Training Principles Of CSS Everyone Should Know. One of the tips mentioned the The W3C Markup validation Service. So I thought, “I’m [...]
Sep 11, 2008
@lsktree - yes good point, should be box-1 or something!
Sep 11, 2008
It is nice to separate the CSS hacks in another file and make it visible only in browser versions you need to.
Example:
[code]
[/code]
Another important thing is the use of “media” attribute. This way you can make styles according to the media you are using. I use it for example to hide the page header and menus when I’m printing the content of it.
[code]
[/code]
Another useful trick is to identify the body of a page. This way you can make small changes for each page of the site you are building.
Example:
[code]
h1
{
width: 300px;
height: 100px;
text-indent: -9999px;
overflow: hidden;
}
body#home h1 { background: url(img/home_title.gif);}
body#contact h1 { background: url(img/contact_title.gif);}
body#portfolio h1 { background: url(img/portfolio_title.gif);}
[/code]
in the html:
[code]
Home
Home
… etc
[/code]
Sep 11, 2008
(Escaping the codes)
It is nice to separate the CSS hacks in another file and make it visible only in browser versions you need to.
Example:
[code]
<link rel="stylesheet" type="text/css" href="css/screen.css" />
<!–[if lte IE 7]><link rel="stylesheet" type="text/css" href="css/screen-ie.css" /><![endif]–>
[/code]
Another important thing is the use of "media" attribute. This way you can make styles according to the media you are using. I use it for example to hide the page header and menus when I’m printing the content of it.
[code]
<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
[/code]
Another useful trick is to identify the body of a page. This way you can make small changes for each page of the site you are building, without creating a buch of ids and classes in the code.
Example:
[code]
h1
{
width: 300px;
height: 100px;
text-indent: -9999px;
overflow: hidden;
}
#home h1 { background: url(img/home_title.gif);}
#contact h1 { background: url(img/contact_title.gif);}
#portfolio h1 { background: url(img/portfolio_title.gif);}
[/code]
in the html:
[code]
<body id="home">
<h1>Home</h1>
<body id="portfolio">
<h1>Home</h1>
… etc
[/code]
Sep 11, 2008
Best advice from the top of my head that I can offer, will save you countless hours trying to get your site to workin in IE6;
Never add padding to an element where you have specified width.
That’s all. Follow this simple rule and you will see a significant drop in IE6 box model issues.
If you need padding in a div element, nest a div inside with a clas such as .innerpadding;
.innerpadding { padding : 10px; }
Props to Chris Coyier (http://css-tricks.com ) for this trick.
Sep 11, 2008
Tip 1:
Use reset stylesheets:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://developer.yahoo.com/yui/reset/
Tip 2:
CSS image rollovers:
http://www.designmeme.com/articles/cssrollovers/
http://www.alistapart.com/stories/rollovers/
Tip 3:
Write CSS without hacks:
Use only classes, use clear , fixed width layout, etc.
http://nimbupani.com/blog/learn-to-write-css-without-hacks.html
These are just some of the things I like to follow and have been implementing into my website stylesheets and have had great results.
Love the site, keep up the good work!
Sep 11, 2008
My suggestion is to create sections in your CSS file based on the different parts of your site e.g. Header, Horizontal Menu, Left Sidebar, Main Content, Footer, etc.
This way it’s very easy to go back and edit your code, or for someone else to make changes if you’re no longer maintaining the site.
Sep 11, 2008
My suggestion would be - use master style sheet to neutralize default browser styling. It’s always real pain searching for reasons why IE displays something differently than FF for example.
Very helpful for finding errors is to write:
div{border:1px solid red;} - this tip really helps You to understand why and how Your divs are displayed.
And one more thing, i suggest to use FF plugins for faster testing - web developer, edit css, resize windows, measure tool, html, css validators can be real help for You. I wrote great article too about those plugins -
http://www.1stwebdesigner.com/development/the-best-50-firefox-add-ons-for-web-developers/
Sep 12, 2008
The three rules I live by are:
1. Using a CSS reset helps eliminate cross browser screw ups.
2. Setup and use classes that can be inserted over and over again. Example: .clear {clear:both}, .left {clear:left;}
3. Organize and comment your stylesheet the best you can as you go, this will save tons of time when you have to go back and make changes later.
Sep 12, 2008
My suggestions to users would be -
Tip 1: Use a reset stylesheet. This helps equalize most used tags across all browsers, helping in browser compatibility, example:
http://meyerweb.com/eric/tools/css/reset/
Tip 2: Write css without using hacks. I have begun to use again a reset stylesheet, clear , and few other tips. Example of others:
http://nimbupani.com/blog/learn-to-write-css-without-hacks.html
Tip 3: If you plan to have menu with image rollovers, use CSS. Real easy to implement and very sleak.
Sep 12, 2008
1. Use a commenting system for breaking apart a stylesheet into sections, i.e. Header, Footer, Navigation. This makes it easier to quickly scan your stylesheet to find the section you need. The format I use is as follows:
For Sections:
/*——————————————-
NAVIGATION
——————————————-*/
For Sub-Sections
/* MAIN NAV */
2. Use conditional comments to target specific stylesheets for IE. To target IE6 and below, use the following.
… place styles or stylesheet here…
3. Indent your CSS to show hierarchy. For example:
/* PRIMARY NAV */
… styles here…
/* 2ND LEVEL NAV */
… styles here…
/* 3RD LEVEL NAV */
… styles here…
Sep 12, 2008
Whoops, some formatting was stripped out. Trying a 2nd time here…
1. Use a commenting system for breaking apart a stylesheet into sections, i.e. Header, Footer, Navigation. This makes it easier to quickly scan your stylesheet to find the section you need. The format I use is as follows:
For Sections:
/*——————————————-
NAVIGATION
——————————————-*/
For Sub-Sections
/* MAIN NAV */
2. Use conditional comments to target specific stylesheets for IE. To target IE6 and below, use the following.
[code]
… place styles or stylesheet here…
[/code]
3. Indent your CSS to show hierarchy. For example:
[code]
/* PRIMARY NAV */
… styles here…
/* 2ND LEVEL NAV */
… styles here…
/* 3RD LEVEL NAV */
… styles here…
[/code]
Sep 13, 2008
my tips:
1)
use a css framework (like YaML, blueprint, YUI grids)
read more about them and why to use them here:
http://www.slideshare.net/zerok/css-frameworks
main reasons to use ‘m are: browser compatibility get much easier, use the expertise of the framework’s creators
2)
use haml (for html — okay this is not about html), and sass (a side project of haml) for css. these tools realy take a lot of pain out of website development. the learning curve ( 120 ) should be worth it for any developer/designer (company).
3)
make use of css browser plugins..
css doesn’t create warnings (the css validator has already been mentioned), so generally it is hard to spot the error. some nifty firefox browser plugins can help out.
one example:
https://addons.mozilla.org/en-US/firefox/addon/60
4) (the bonus tip)
use import function of stylesheets cleverly.
especially with big sites some of the pages do not need all of the css stuff to be loaded.
modularizing your css in to layout and content is a good way to start (the YaML framework suggests this already).
these are my .04 cents, singapore dollar cents at the moment, as im travelling.
nice article! (and yes i still need an external hard disk, i’ll pay shipping no problem)
Sep 13, 2008
A good way to organise CSS might be to create separate files within a directory and write a simple PHP script to compile them all and use the filenames to create sections. This script could also only include page-specific content, reducing the overall size. (E.g. http://craig1709.co.uk/scripts/main.phps)
Firebug is indispensable for CSS development to get an idea of width, height, margins and padding of your elements.
Personally, I find Quirksmode (http://www.quirksmode.org/css/contents.html) similarly indispensable. It shows compatibility across major browsers and a list of common hacks, problems and solutions.
Sep 13, 2008
Use classes for items that may repeat. Use id’s only for items that don’t, won’t, and can’t repeat. ID’s are for structural elements (like wrapper divs) and repeating items which need to be referenced individually, like by javascript.
Also, give each page’s body element a unique ID. Then you can add page-specific tweaks at the bottom of your main CSS file. That’s better than adding a new file or inline styles just for a few exceptions.
Sep 13, 2008
The only CSS tips I can think of off the top of my head are:
1. Use comments in your CSS to mark elements in the page. It will help you find things alot easier:
/* Header */
.top_box {}
.menu {}
/* Content */
.wrapper {}
.content {}
2. To add to #1, organize your styles. Put each style on a separate line, do not smash them all together. That way you can access your styles much easier when they start to fill up. [example on #1]
3. Keep your styles in sequential order, that way you won’t be looking for a style where it does not belong. For example, if .content rests inside .container it would make sense to order them as .container {} .content {}. [again, example up top]
As you can tell, I’m a neat freak when it comes to CSS =]
By the way, great article!
Sep 13, 2008
Oops… I just noticed Tracey’s tip. My bad.
Sep 14, 2008
Brilliant article for pointing out so many of the obvious things.
I’ve been telling people recently to label and name things more intelligently rather than rushing through and creating a name that is unfathomable to anyone’s imagination.
There’s nothing worse than going through folders which were written back in 2000 by someone who didn’t really think things through for being explicit.
Sep 14, 2008
Nice list, for sure.
The only one I’m a bit wary of is #4. There are plenty of people out there who have javascript disabled in one way or another - your layout should not break if they don’t have javascript enabled. I’m not saying don’t use it - just make sure it degrades well.
I’ll also second the comments that mentioned a reset CSS sheet - that will save you 90% of your headaches, and knowing your IE6 bugs will save the other 10%.
Sep 14, 2008
Good article but I have an issue with #11. Browsers have default styling and those defaults differ. If you use a reset.css, something similar to what Eric Myers has created, then you will want to be more explicit in your css with everything, however, this often leads to redundancy. When assembling css, inheritance can be powerful for removing redundancy and thinning out your code.
Relying on defaults can be dangerous, especially when testing cross browser.
Sep 14, 2008
Nice list. The pedant in me needs to point out that “you’re” is the contraction of “you” and “are” — you should use “you’re” instead of “your” within your article.
Sep 14, 2008
@import is important for me, you can not stick every style into one stylesheet, you need structure.
main.css, forms.css, ie.css, base.css for example.
You would have a template set for each site you make but base.css is important.
Point 11 about not having default values is wrong for a few reasons.
Reset and clearing styles (base.css) is very important because your making sure every aspect is reset before loading your styles. If you google you will see a lot about reset’s.
One of the reasons for this is that when you speedily pass through websites your browsers rendering engine sometimes holds onto previous website styles in the cache. Ever seen your site after flicking through things and saw errors and thought “where is that from?” and force refreshed to see it again and watch it disappear? that is why.
Sep 14, 2008
Hi here are my little css tricks and sorry for my weird english
1. Boring tag?
With a simple css style you can transform a boring html element like to a nicer looking rectangular design element, just add a height and a border to it!
CSS FILE
hr{border-left: 4px solid #ddd;
border-top: 4px solid #ddd;
border-right: 4px solid #aaa;
border-bottom: 4px solid #aaa;
background-color: #eee;
height: 24px;
}
2. Simple Image Magnifier
Little preview images makes a website intresting,
now they should be magnified - by using a div with position absolute to avoid a break of the following html elements , the overflow parameter and a simple mouseover/out - here’s the code…
HTML FILE
CSS FILE
.imageMagnifier{position:absolute;
width:100px;
height:100px;
overflow:hidden;
}
3. Linked Page
You can link all the space on a website that doesn’t contain html elements for example to guide the user to a information or help page.
Define a div that covers all the visible area
and with the onClick method link to the desired page. Important is to put the div container
behind all other html elements with z-index and
to define the div after the body tag!
CSS FILE
.all{position:absolute;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:0;
}
HTML FILE
Sep 14, 2008
Use a reset.css stylesheet … preferably the one found from the 960 CSS framework.
Sep 15, 2008
cool thanks, we love css
Sep 15, 2008
TIP 1 - Separate Style and Behaviour
Currently there are a ton of clever CSS examples floating around which take advantage of pseudo classes (such as :hover, :active e.t.c.) to produce behavioural effects without Javascript. However, these classes are only for changing the style of elements when the user interacts with them, not for actually producing drop down menus or lightboxes or whatever. Also:
* Javascript is supported in more browsers and can be made to degrade gracefully for those users who turn it off.
* It will be easier for you to maintain your site because you won’t have a bloated main.css.
* It will be easier for anybody else to edit your site because they will be able clearly see the style/behaviour separation.
If you really want to have a nice looking image gallery then use slimbox, not a CSS only lightbox. If you don’t yet know Javascript and are using these CSS gimmicks to get around a gap in your knowledge then do yourself a favour and go and learn it. Start off with a framework like Mootools.
TIP 2 - Don’t use CSS resets or the universal selector
Either of these things will cause your main.css to become bloated and your site to take a performance hit. Instead, create your css reset as you go and only add the elements to it that you actually need.
Most people have this:
* {margin:0; padding:0;}
and then add back in margin and padding when they need it. This creates bloat because whenever you create a , you have to add back in its padding.
Its much better to have:
#menu, h1, .footer {margin:0; padding:0;}
and then just keep adding whatever you need to.
But don’t use a CSS reset file because you don’t really need your block quotes and definitions lists being reset when you aren’t using them on your site.
TIP 3 - Remember that and are more than just styles!
A common mistake is to use to make any inline text italic or for page headings instead of site headings. What many don’t seem to realise is that these tags aren’t just a tag with different default styling. They are there to add semantic markup to your site so that a search engine can get a better idea of what your site is about and link to it accordingly.
So any text you put in tags will stand out to search crawlers and link your site to whatever is inside them. If you’ve used for all your quotes instead of the appropriate quote tags, users will start finding your site using the wrong keywords.
The same goes for headings. Only put important text in . If you have an image for a heading then don’t use for all of your individual page headings, use instead. Equally, don’t make into a large, bold font and use it for your site title.
Use CSS to make text italic not and use to indicate emphasised text, not CSS.
Sep 15, 2008
#13 seems like a very bad idea, javascript should be used primarily for behaviour! not to modify css (css can be modified as a result of behaviour though)
Sep 17, 2008
1. Write top-down, indented code (as an additional option, separate your code into “layout” and “appearance”).
Make your life easier by correlating the order of your CSS code in relation to where it appears in your HTML file. Indent code in relation to this, too. (Will try to write it here, hope this site accepts no breaking spaces!)
For example:
#header { … }
#breadcrumbs { … }
#breadcrumbs a { … }
#maincontent { … }
#maincontent p { … }
As the additional option states, you can also divide your CSS file into two parts, one that is strictly for appearance (colours, sizes etc.), and one that is strictly for positioning (left, right, margins, padding etc.).
If you’re using a compressor, remember to save your indented file and name it differently to the compressed file, so you can reuse it later.
2. Use a CSS Reset like Eric Meyer’s reset.
Some people say that you shouldn’t use them, but I consider them to be them very important. Start off your design be resetting all the design elements to a common, base value that is the same across all browsers. This makes your life a lot easier when developing. There are many out there, just have a look around and choose the one for you.
3. Remember when to use an ID (e.g. #header) and a class (e.g. .link). I’ve seen these being abused a lot. Remember: ID’s mark unique elements, that is, they only appear once on a page, while classes can be used multiple times in a page.
Some additional rules:
4. Never include CSS within a document, always have it in an external file. Not only will this speed up rendering of your page and improve performance, it will make your code (and life) a lot simpler. Make sure it’s included within the header, too
5. Position really is everything, so learn how to use position: relative, position: absolute etc. Incredibly important. This tutorial is useful: http://www.barelyfitz.com/screencast/html-training/css/positioning/
6. KISS: keep it simple, stupid. In the years I’ve spend developing websites with CSS, I’ve found that simplicity really is important in making sure your CSS renders correctly across all major browsers. If your CSS code is starting to venture into the realm of hacks, conditional statements for IE, and the like, you’re going down the wrong path.
7. Adhere to XHTML strict as best as possible (or, at the very least XHTML transitional). In my time developing CSS-based websites, I’ve often found that XHTML strict allows for the best uniform layout among the various browsers out there. This is a personal preference, but I’ve often found I’ve spent less time trying to get something to work in XHTML strict than I have in any of the other DOCTYPES.
8. I recommend naming your css files according to versions, perhaps using a version numbering system, or a date-based system (or both). Example: style-v1-0-d2008-10-17.css
There’s a good reason for this, mainly to do with caching. By changing the file name every time it is actually changed, then you allow yourself to specify long cache times, and thus speed up the loading of your page.
Sep 17, 2008
Wow, thanks folks for all your css tips, some excellent techniques in there! CSS work is all about using it in the tried and tested way, hopefully the DesignReviver community will start you in the right direction.
Results of the Competition
The CSS tips have been reviewed and we are happy to announce that Nelson Vasconcelos in the winner! HD will be across to you shortly.
Sep 17, 2008
I am very pleased! Thank you Tim!
Sep 18, 2008
Great post! I agree with all of your principles and I can add some too but these are CSS basics that everyone should know:)
Sep 23, 2008
great tips and comments
Sep 23, 2008
How is green-box any different than top-box, they both declare styling in their names. What happens if your “top-box” is not at the top anymore? You run in the same problem as the green-box changing colors. A better name would be “header” or “navigation”. Name your element by what it is rather than naming it by what color it is or where it is located.
Same applies with “left-column”, “right-column”….
Oct 14, 2008
[...] DesignReviver - 13 Training Principles of CSS [...]
Oct 29, 2008
How can I make the img padding in the website bottom. I made a code then I put the code in FireFox it’s OK, but in InternetEplorer the img in the top. :/
Leave a Comment