Forum Moderators: not2easy
If I'm understanding this, I need to edit the html now. Is there an online check-list of what to delete, change, or add in the page coding? Like, I know I need to remove font size and color in the HTML so that the CSS will take over. What other things like that do I need to do?
And, I know I'm supposed to add ID and Class somewhere... but I'm really lost as to where...when...
I'm reading tutorials but I need to be taken through examples (I learn best that way).
See a related question under CSS topic "Period . and # and whatnot"
Lifes
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">The point of HTML4 Strict is that it contains no 'presentational' elements - i.e., the ones that CSS is supposed to replace.
Once you've done that, validate your pages [validator.w3.org]. This will let you know which elements you have to remove, along with any other problems in your page. For each element think "is this in here for looks?" or "is this in here because it means something?". Then for each one that means something, check that you're marking it up in a semantic way. For example, if previously you had you headings marked up as:
<p><font size="5"><b>TEST</b></font></p>a more semantic way of marking it up would be:
<h1>TEST</h1>that is to say, using an actual header element over a styled paragraph.
It's not simple for a number of reasons:
1) There are often many ways to do similar things with CSS.
2) Some schools of thought have it that you should never use the <table> tag again while others take a softer line and say you need never use the <table> tag again (it's good to know where they're coming from before you take their advice). I believe that it depends on the sort of site you're building (generally I use a combination: <table> for core (container) structure and css positioning for the rest.
3) Internet Explorer does not comply with the standard on many very important features (this could perhaps be classed as the number one complication).
4) It requires a different way of thinking (not sure how to word that).... You need to get the basics of "the box model" first before you can really let rip with it (is another way of saying it).
I have this URL in my bookmark toolbar as I am constantly refering to it (perhaps I'm a slow learner) [w3.org...] Whenever I implement something new or make even the slightest change I test on IE and FF.
Periodically I run the CSS validator [jigsaw.w3.org...] (in addition to the html validator previously mentioned).
(The validator can be started very easily once you've installed a toolbar for FF or IE - toolbars created to assist in "accessibility" design - very handy.)
Once you've got the basics, the validator is a fantastic way to learn. My experience was: I had no idea what the validator was telling me but it gave me keywords to search on in the manual.
Perhaps before you get to this stage... There are a number of books that can help but they seem to fall into two categories:
1) Design concepts and css (graphic designers rubbish these books because they lean too heavily on design).
2) css technicalities and hacks.
As regards period . or #.... A perhaps overly simplistic way to see this is that they are much the same except ID (#) identifies formatting and positioning of a UNIQUE block on a page (usually only on one page) whereas CLASS (.) is reusable formatting across a whole site.
I'm still learning (so the above may well be shot down in flames) but hope that helps.
[And of course there is always plagerism - find a site that has a technique you like, view the source, find the css files and view them - but be mindful that a lot of people also use javascript and you may, like me, want to avoid js. The "accessibility" / designer toolbars are helpful here too as they do this for you.]
Hope this URL is cool because it is an excellent place to find all sorts of goodies [nils.org.au...] (including current links to the toolbars, validators etc etc).
[edited by: fish_eye at 12:22 am (utc) on Feb. 28, 2006]
I have 3 sites and now want to learn CSS.
Go read our good old friend, nick_w's, CSS tutorial series:
CSS Crash Course [webmasterworld.com]
You'll enjoy it!
Go read our good old friend, nick_w's, CSS tutorial series
You are quite welcome.
Also, see here (yet another Webmaster World hero):
[webmasterworld.com...]
[added]papabaer's tuts are brilliant![/added]
