You should really read up on the latest css standards here: http://www.css3.info/ Also, you might want to check out w3c schools for CSS information for beginners
Use shorthand notations, always comment your css codes, try and explore the beauty of css, work and play on it yet there were standards that must follow. Goodluck! Regards, Peter
w3schools is my first place to learn the web programming. You should go there. I even go with the trouble downloading all of websites.
As mentioned the best way is to use w3schools and be sure to know at least basic html before starting with css because without html css is useless.
Mark is correct -- there's a saying I use a good deal in that regard: "CSS is only as good as the HTML it's applied to." Before you even THINK visual layout of the page for screen targets, you should have useful semantic markup of your content. If you don't have a clean usable HTML before you start making the layout with CSS, the end result is most always inaccessible rubbish. When writing that HTML you should be entirely concerned with saying what things ARE, and NOT what they are going to look like. What it will look like for each target device is either the job of the user agent (browser) or CSS. With the rarest of exceptions your CSS also has NO malfing business in the HTML. Include it from an external file using LINK. There is NO legitimate reason to ever use the STYLE tag, and the only acceptable reason to use the STYLE attribute is when that style is actually conveying DATA -- like a tag cloud or width on a percentage bar. Otherwise, it belongs in a separate file. When working with CSS having it in a separate file is actually more useful because you can open up two editor windows side-by-side so you can see your markup and the CSS it's being applied to at the same time; prevents you from constantly scrolling up and down your code going "what did I call that again?" or "what did I apply to this?". If you have multiple monitors, even better -- see why I consider tabs in editors to be a step BACKWARDS in functionality... and just part of why I think 'tools' like Dreamweaver are little more than nube predation... The only thing about Dreamweaver that can be considered professional grade tools are the people promoting it's use. ... and be sure you use MEDIA targets, and avoid 'all'... there is very little reason to expect ANY values to be the same for print, handheld, screen, etc.... so why would you send the same CSS to all of them. Likewise, and this tidbit isn't very well documented, I suggest that your primary link embed be as follows: <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> Code (markup): Projection is used by a lot of Kiosks and by Opera when in fullscreen (chrome-less mode) which makes pages that just say "screen" end up broken for those. Likewise there are still enough webTV folks out there that sending them your screen CSS isn't a bad idea. Notice I call it 'screen.css' after it's media target -- NOT "style.css" or "GSfGhk234.css" or any other uselessly vague name. To that end any classes or ID's should say WHAT the element is or WHY it's receiving style, NOT what that style is. What that style is belongs in the CSS. That's part of why <span class="blueText"> is moronically stupid and defeats one of the entire reasons to use CSS in the first place; might as well go back to using HTML 3.2 at that point. (see all the idiots lining up to drink the HTML 5 kool-aid, who until recently were vomiting up HTML 3.2, slapping a 4 tranny doctype on it and calling themselves 'experts') In terms of naming things, I always like to point people new to coding at this article on IBM's Linux developer site. It's meant for C programmers, but I think the lessons in there are useful to anyone writing any form of code be it a real programming language or simple markup. http://www.ibm.com/developerworks/linux/library/l-clear-code/ I'm particularly fond of the "oh, now we're done" part. Plays to commenting or more specifically, overcommenting. You do something strange, explain it -- don't waste time documenting the mundane; and if you bother to use meaningful names like "content", "mainMenu", "pageWrapper" alongside semantic markup you shouldn't need comments in the first place unless it's for something like: zoom:1; // trip haslayout, fix legacy IE bugs One of the big things about CSS that is rarely well explained is inheritance and the parent-child relationship; the 'cascading' part of CSS. You'll often see idiotic rubbish markup like this: <div class="menu"> <ul class="menuUl"> <li class="menuLI"> <a href="#" class="MenuA"> Code (markup): 99% of the time there's nothing being done to the DIV that couldn't be applied to the UL... if you have a parent element with a id or class on it and every element under that parent is getting the same class, NONE of them need classes. In most cases that should be written: <ul id="mainMenu"> <li> <a href="#"> Code (markup): The div is pointless, so we get rid of it. .menuUL == #mainMenu .menuLI == #mainMenu li .menuA == #mainMenu a or #mainMenu li a When you have a parent, you can target it's children -- that's what spaces between properties is for; time and time again you'll see idiotic half-assed garbage markup even from allegedly professional software (yes Turdpress I'm looking at you) that completely forgets this.... or worse, starts using classes in a presentational manner... For example: <li id="menu-item-3533" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3533"> Which is about as dumb as fried ****. If you need that many classes and ID's on a menu item to apply CSS to it, what you really need to do is back the **** away from the keyboard and take up something less detail oriented like macramé. Because again, CSS is only as good as the HTML it's applied to.
Your post is really helpful for me,because I have a little knowledge about CSS.So thank you so much for sharing such a informative post.Keep writing.
lots of tutorial(e.g tizag.com/cssT/ , w3schools.com etc ) available for CSS, it will help you to learn and code that website.