View Thread: Two basic CSS Mistakes - Killersites.com Forum

Welcome Guest | Register | Login

Killersites.com Forum

Category: General Web Design

Forum: CSS - Styling your pages with Cascading Style Sheets.

Thread: Two basic CSS Mistakes

Quick Go »

No member browsing this thread

Thread Status: Active
Thread Type: Sticky Thread
Total posts in this thread: 25

[ ]

Author

This topic has been viewed 16171 times and has 24 replies

LSW
Advanced Member

USA
Joined: Nov 27, 2003
Post Count: 6287
Status: Offline


Two basic CSS Mistakes

Between Newbies posting here lately and spammers claiming to work for big companies but with absolutely shoddy code, it came to me the most common problems with people using CSS. Right off let me say that for newbies this should not be embarrassing, I suffered this problem as well when I started.

Beginners basically beginners are hesitant to use CSS, so they commonly try to work with it bit by bit. Wrong approach - just do it. This is usually seen when someone uses CSS just to effect fonts. Another form is tables with CSS. Yes you can do so but it defeats the purpose. Take this to heart, don?t go half way, just jump in.

Thinking it is HTML: Forget what you learned about HTML, this in not HTML it is CSS, another language. All to often you see beginners writing CSS like it is HTML. Just replacing the Font tag with a class name on every paragraph or such.

The idea is to use external style sheets. Every page is linked to this sheet, make a change to this sheet and every page reflects the change. By using styles inside of the tags, you add wasted code and have to make changes on every element on every page. If you merely define the paragraph tag than every paragraph will have that style, no need to ever ad class or ID's

Do not mix, it just makes things confusing for everyone. I see many spamers with HTML attributes, inline styles in tags next to these with Block styles in the header and even a link to an external style sheet. These are god awful monsters to control. I am Webmaster of a site that is like that, the simplest changes will almost always break the site. Beware and avoid such sites and those who build them.

If you have any CSS, put it all in external style sheets and most any HTML attributes can and should be done in the CSS as well. Remember this is not HTML you are dealing with, do not just replace HTML attributes with styles in the code. If you are going to use CSS it will only bring and advantage if you learn to write CSS as CSS and not as a HTML attribute replacement.
Classes: Beginners always write classes, then you will see a dozen paragraphs with identical class names. Again this is due to this HTML style of writing we learned first and how we had to write fonts into everything. CSS is not that way.

With CSS you can and should use ID's. Why? Well ID's for CSS can also be used as reference points for scripts and internal links, you need not name extra elements. Also for instance you name the upper element with an ID <div id=?content?>, everything in that ID can be defined specifically using that ID. So rather than 5 paragraphs with 5 classes, you need put define what a paragraph within an ID should look like. #content p { } will define any paragraph in a DIV named ?content? to have a specific style, any other paragraph in another section will not use that style as it is not in that ID.

This way you can use a default style for paragraphs, but say that paragraphs in you content are shown differently than paragraphs in a footer. By using classes, you are creating far more work for yourself. Simply create a default and then redefine any elements by adding it to a ID description. In this way define links found in one ID element to look different from links in another ID element.

Now this may seem a bit hard to follow, but keep it in mind. CSS is about minimize code. Ask yourself if you can not make things easier and smaller. A class can be used as often as you wish. An ID can be used only once per page. So use ID's as often as possible, then when you go to use a class, ask yourself if it is really something you need. Ask yourself if you need to use it multiple times or if it is not easier just to say, anything in a element with this name should look this way. Why repeat 5 classes in 5 paragraphs when you can say that a paragraph in a element called ?content? should look this way, whether 5 or 25 paragraphs.

So in short as a review:

Do not a use CSS inline styles as a replacement for Font tags.
Use external style sheets, do not mix HTML attributes, inline styles, block styles (styles in the head tags) and external style sheets. Just use external style sheets for all CSS and HTML attributes.
Do not use Classes for everything. Use ID's whenever possible. It is possible to create web sites with few if any classes at all.
Define elements with a ID preamble to it so that those styles only go active when the defined element is in a specifically named ID.

Feel free to view my styles and source code. Once you take these tips to heart, you will discover that CSS is much easier to understand then you believed.

Darkshadow-designs & DSD CSS
----------------------------------------
Gu.aal kwsh� yak'�i it�akw ijeet wugood�k

LSW-WebDesign.com
----------------------------------------
[Edit 3 times, last edit by LSW at Apr 4, 2008 9:29:08 AM]

[Jan 21, 2007 9:04:49 PM]

[Link]

Veldren
Stranger

Joined: Mar 7, 2007
Post Count: 16
Status: Offline


Re: Two basic CSS Mistakes

I completely agree! I was telling my wife the same thing the other day about how that using inline and internal CSS defeats the purpose.

Well done! smile

Vel
----------------------------------------
To err is human... you need a computer to REALLY screw up!

Veldren

[Mar 7, 2007 1:43:47 PM]

[Link]

trynet
Newbie

USA
Joined: Jun 27, 2005
Post Count: 38
Status: Offline


Re: Two basic CSS Mistakes

Val

Great stuff as usual.

One of the biggest reasons newbies do as you describe is that they do not understand the cascade. They don't see how the Browser, User and Designers style sheets blend together to form what one sees in a browser. And they don't see the cascade mechanism within the Designer Style Sheet as well.

All that takes time but as I have learned CSS gives up it's secrets if you just keep working with it.

Bud
----------------------------------------
Bud Kraus
Joy Of Code

Web Design Training And Consulting
http://www.joyofcode.com

[May 23, 2007 7:44:39 AM]

[Link]

lukiee
Stranger

Joined: Jul 10, 2007
Post Count: 5
Status: Offline


Re: Two basic CSS Mistakes

yeah i agree , what i found which helped me was taking a long day with lots of coffee and making a mock-up site with most tags and spent the day just messing around with cascading growing, shrinking, changing just to see what will happen :)

[Jul 10, 2007 3:38:12 PM]

[Link]

leegao
Member

Joined: Jul 11, 2007
Post Count: 65
Status: Offline


Re: Two basic CSS Mistakes

YAY SEMANTIC WEB, this is wut XHTML is all about XD

[Jul 11, 2007 3:07:36 PM]

[Link]

yMladenov
Spammer

Joined: Oct 25, 2007
Post Count: 5
Status: Offline


Re: Two basic CSS Mistakes

And let's not forget that CSS plays essential role in POSH and overall semantic mark-up. :)

[Oct 25, 2007 3:54:33 AM]

[Link]

coosbaytv
Stranger

USA
Joined: Nov 11, 2007
Post Count: 6
Status: Offline


Re: Two basic CSS Mistakes

This is very good info as I have been struggling with this for 6 months now and am at a point where I think I am more dangerous than when I started.

This info is helping me to understand a little of where I have gone wrong.

FYI: I am looking for a new CSS forum where I can ask for help and not be consistently blasted in the process. I have been using a "name brand" CSS forum and instead of getting help in what I was asking for help in, I was getting lessons in ethics, accessibility and constantly being told that I had the wrong perspective.

Thanks, Jay

[Nov 11, 2007 1:35:07 PM]

[Link]

LSW
Advanced Member

USA
Joined: Nov 27, 2003
Post Count: 6287
Status: Offline


Re: Two basic CSS Mistakes

The worst thing happening is the zombiefication of layout tables. people will not let them die. To many schools still teach them, to many books still teach them or are still on the market. For every good tutorial on the net their are 5 bad ones.

Once people rid themselves of the table methodology of thinking... CSS becomes much easier. just a matter of rerouting the paths in the brain... one day it goes "Click!" and you begin seeing where and how CSS can be used yourself.

If you do not know it, visit www.csszengarden.com, that is what helped me go click, that and Max Designs Listamatic
----------------------------------------
Gu.aal kwsh� yak'�i it�akw ijeet wugood�k

LSW-WebDesign.com

[Nov 11, 2007 3:01:13 PM]

[Link]

Sparky38
Newbie

United States
Joined: Dec 11, 2007
Post Count: 34
Status: Offline


Re: Two basic CSS Mistakes

Great article,It gives me inspiration.I am new to web design,didn't have any html exp. before. CSS that I am learning on Stefans basic web design video I bought is actually fun. I am very pleased so far. Thanks again for your info, I printed it off and will review it more. Chip

[Dec 18, 2007 10:15:25 PM]

[Link]

shetland_wolf
Member

UK
Joined: Dec 20, 2007
Post Count: 51
Status: Offline


Re: Two basic CSS Mistakes

I think I am luck having been out of the computer world for a few years and never having done web design, I started looking up places to start and fell straight on to CSS. This was back in november last year. As I have nothing else to compare it with, i have actully found it quite straight forward and easy to work with.

Though after reading the above, I'm glad you said that you don't need alot of classes as I had i think one in my CSS file but other peoples i looked at 20 or 30. Thought i was doing something wrong but by the looks of it, i was on the right track.

[Jan 25, 2008 6:22:27 AM]

[Link]

[ ]

Current timezone is GMT
Mar 22, 2010 1:37:28 AM