[web] Effective CSS
Author
I was wondering if anyone could recommend any tutorials/books etc that give better details about effective use of CSS. I know the basics of it, just not how it would be used in a large site. For example, does each different style of table have its own class in the CSS? Or is there a better way?
Also I'm curious how much can be done in CSS and how much needs to be coded in (such as class="forum" or whatever). I'm hoping to make different 'skins' for my website by using different CSS, its all a big learning expericance, so any help is appreciated =]
Thanks,
Al
If you want tables to have different styles, then yes, giving them a different class is typically what you do. You might just use ids instead if you know they are going to be individual. Typically you may have some css for tables in general, to lay down some site-wide baseline styles, and then add additional css for individual classes where certain tables must differ. The same goes for any element. Push shared styles up the tree into more generic selectors.
As for what needs to be 'coded in', could you clarify what you mean? style goes in your CSS, structure goes in your HTML.
As for what needs to be 'coded in', could you clarify what you mean? style goes in your CSS, structure goes in your HTML.
Author
Things like the position of each menu item in respect to the start of the menu. Thats probably bad pracice thinking about it now, but then again i didn't know anything about CSS when i did that part of the site :p
I'm just trying to get into a *good* habit when designing the pages, since I don't know how to use CSS effectively yet :p
Thanks,
Al
I'm just trying to get into a *good* habit when designing the pages, since I don't know how to use CSS effectively yet :p
Thanks,
Al
The main aim of stylesheets is to separate the structure of the document from its style. The best way to get used to CSS is to switch to XHTML and make sure you validate each time to make sure that you stop using tags like <font> attributes like align. Leave everything for stylesheets to handle. Leave no styling information in the page. As a rule of thumb, if you disable stylesheets in your browser and your site still looks good, you are doing it wrong.
Now once you switch to CSS, you may face two real problems. One, is how to get the style you have imagined in your head (i.e, knowing the various properties in CSS). For that, refer some good reference sites with examples... there are many out there. Google is your friend. Get a friend who is used to XHTML and CSS, and keep asking him/her for help when in doubt, rather than leave your code all messy and regret later.
The other, is when to use classes, when to use IDs, and what to do if you just have to style one small element without giving it a class. Generally, you define a "class" when there are several elements of the same nature that will be performing similar behaviour and have to be styled similarly. An ID should be used only if you have a tottally unique element. IDs cannot repeat themselves on the same document. For example, you can define a class of "important" and give it to every important paragraph in your document, which you will then define to be bold and red through CSS. Alternatively, for your main page header an ID will suffice, because you won't have a class of "header"s, but just one. IDs are also useful for navigation through a large page, because if you define something with an id of say "example", then you can access that part of the document directly by entering "page.html#example" in your address bar.
Just remember that there is nothing that can be achieved with inline styling which cannot be done with CSS (and in a much better fashion). You might face small problems like browser-incompatibility if you use the new CSS2 techniques (stupid IE), but by the time you start to use them you would have figured out how to get around that anyway.
Now once you switch to CSS, you may face two real problems. One, is how to get the style you have imagined in your head (i.e, knowing the various properties in CSS). For that, refer some good reference sites with examples... there are many out there. Google is your friend. Get a friend who is used to XHTML and CSS, and keep asking him/her for help when in doubt, rather than leave your code all messy and regret later.
The other, is when to use classes, when to use IDs, and what to do if you just have to style one small element without giving it a class. Generally, you define a "class" when there are several elements of the same nature that will be performing similar behaviour and have to be styled similarly. An ID should be used only if you have a tottally unique element. IDs cannot repeat themselves on the same document. For example, you can define a class of "important" and give it to every important paragraph in your document, which you will then define to be bold and red through CSS. Alternatively, for your main page header an ID will suffice, because you won't have a class of "header"s, but just one. IDs are also useful for navigation through a large page, because if you define something with an id of say "example", then you can access that part of the document directly by entering "page.html#example" in your address bar.
Just remember that there is nothing that can be achieved with inline styling which cannot be done with CSS (and in a much better fashion). You might face small problems like browser-incompatibility if you use the new CSS2 techniques (stupid IE), but by the time you start to use them you would have figured out how to get around that anyway.
You might also be interested in checking out the CSS articles published by A List Apart. The non-css content is great as well.
With your example of a menu, you'd typically have it set up so that each element would automatically position itself rather than hardcoding the position of each element. Techniques such as Suckerfish Dropdowns, Sliding Doors and Trifecta Buttons can allow you to create some great navigation.
With your example of a menu, you'd typically have it set up so that each element would automatically position itself rather than hardcoding the position of each element. Techniques such as Suckerfish Dropdowns, Sliding Doors and Trifecta Buttons can allow you to create some great navigation.
Quote:Original post by Verminox
As a rule of thumb, if you disable stylesheets in your browser and your site still looks good, you are doing it wrong.
When disabling CSS you shouldn't have any styling left (colours, fonts, sizes, borders,alignment) but it should still look readable. That is, page sections should be in the right order, headings are using the proper tags and are obvious.
If your HTML is clear then you should be fine. Good HTML will make it easier to design style sheets, and stops you needing to use classes and ids where they don't belong.
In terms of resources I've always found W3Schools helpful. For more advanced CSS and design techniques A list apart is a fantastic site.
[Edited by - kwackers on September 10, 2006 3:35:29 AM]
Quote:Original post by VerminoxIf I'm unable to use your site with stylesheets disabled you are doing it wrong.
As a rule of thumb, if you disable stylesheets in your browser and your site still looks good, you are doing it wrong.
Your point stands that it won't look good, but I think I agree with kwackers in thinking it a good idea to point out that the site should still have a logical and usable layout with styling disabled. If you're using symantically correct xhtml and laying your content out in a sensible order you should generally be fine.
Quote:Original post by KazgorothQuote:Original post by VerminoxIf I'm unable to use your site with stylesheets disabled you are doing it wrong.
As a rule of thumb, if you disable stylesheets in your browser and your site still looks good, you are doing it wrong.
Your point stands that it won't look good, but I think I agree with kwackers in thinking it a good idea to point out that the site should still have a logical and usable layout with styling disabled. If you're using symantically correct xhtml and laying your content out in a sensible order you should generally be fine.
I'm sorry I did not put my point across properly. What I mean't was that with no stylesheets you shouldn't be able to see any formatting in your document, like colors, borders, fonts, etc. However, yes, it does have to be readable. Using an appropriate structure for your document by separating into sections with headers, using lists for menus, and in general good semantics, etc. will make it readable.
No no, you made your point clearly - apologies if I gave the impression I was disagreeing at all - just making sure the difference between looking good and readable was clear to everyone else reading.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
