(The Only) Ten Things To Know About CSS
AKA, “Secrets of the patented JM3 Gasbag Model™” - a getting-started list to make sense of CSS. [2,547 diggs and counting.]
- The Point of CSS is to use clean, simple HTML in your page, then write CSS “rules” that style the objects on your page. The page stays clean and looks cool, and your HTML page works on both mobile devices and regular browsers. That’s the point of CSS.
But The Art of CSS is quickly and easily referring to the right objects in your page from your CSS rules. The act of matching CSS rules to HTML tags is like a conversation: both sides need to be clear and in sync with each other, or they’ll talk over each other and you’ll get a headache from all the yelling. - General or Specific Matching: suppose you want to style an
<h1>header in your page. You can choose how general or specific your style is applied:- to style all
<h1>tags, use css ruleh1 {… - to style all tags in a certain place, e.g. for
<b>’s inside<p>tags, use css rulep b {… - to style all
<h1>headers of a certain kind, addclass=”myheader”to the<h1>tags you want to style, and use css rule.myheader {… - to style just one <h1> header, add
id=”myheader”to the<h1>tag you want to style, and use css rule#myheader {…
You can combine the above rules in different ways, too;
to style all<h1>tags of type"barleymash"inside offorms of type"magicform", use css ruleform.magicform h1.barleymash {… - to style all
- Target acquired: Because getting the matching rules wrong can waste so much time, use this trick: until your rule is for sure matching up, don’t use any CSS properties other than
color: red;It’s quick to type and easy to spot. As soon as you see the text go red in your HTML page, you know your rule is matching. Then and only then, now that you know your rule is matching the right part of your document, then deletecolor: red;and write your rule. EZ. - Master the patented JM3 Gasbag Model: a CSS layout is like a big bag of objects. each of those objects can exert forces (Think gas jets. Like your layout is farting at you.) Mostly the forces “push” out (margins, padding, and float are all properties that “push” objects around.) By altering CSS rules, you adjust the forces. Viewing your page in a browser just shakes the bag, and things will settle where the forces direct them. This is the secret of CSS - manage the forces, and the objects will balance. Fight the forces, apply too many properties at once, all fighting against each other and your objects will jostle around, poking holes in the bag and in each other, and your page will leak all over the place. No fun. Gasbag Example 1: to center something, set margin-left: auto; and margin-right: auto; This works because you balance the opposing forces on the left and right, so the element is held perfectly centered like a ball held between two magnets
- Gasface Corollary 1: the JM3 Gasbag Model only applies when using the default CSS rules of “relative” positioning. It’s also possible to use something called “absolute” positioning, where you position each little box by giving it specific coordinates. don’t do this. it will take you a long time and your layout will look terrible if the amount of text or graphics ever changes. Only weird print designers use this :-)
- Rule A - Divs and Spans: The lingua franca of CSS are two tags called <div> and <span>. Neither
<div>nor<span>tags have a default appearance; other than the fact that<div>’s are boxes and<span>’s are “inline” within text, they’re just generic tags for applying styles to. - Rule B - Divs are boxes, <span>s are text:
<div>s are boxes, and have height, width, and alignment that you can can play with. By default, the height of a<div>is the height of its contents (text or images or other<div>s)
<span>s are for “markup” within text. these are called “inline” elements, because they only make sense “in a line” of text.” Tags like bold (b), italic (i), underline (u) etc. are all <span> / inline elements.
Don’t use <div>s (boxes) to markup text, and don’t use <span>s for boxes, and your layout will go much easier. - Global, Local, or Intimate: you can apply CSS properties at three levels: across multiple HTML pages (via a file named something.css), on a single page (in a style block), or to a specific tag within a page (via the style=”…” attribute within a tag). When you FINISH a layout, it’s good to move all your CSS code into a separate CSS file so you can share it globally. But while you develop and test your code, it’s easier to just put the CSS rules in a style block inside the HTML page - then you’re not switching back and forth between two files as you’re write the code.
- Keep it clean: writing clean HTML these days is really easy. But even people who consider them self e1337 CSS HAX0Rs often don’t write very clean, efficient CSS. Efficiency doesn’t make the page load faster, it just makes your code easier to work on.
Three tips:- condense rules like (
font-family, font-size) or (margin-left, margin-right) into single-line rules:margin: 0px 10px 10px 10px; - stack your classes: no one EVER uses this trick; you can apply as many css classes to a single tag as you want, just put spaces between the names, like <h1 class=”exciting warning”> will apply both the class exciting AND the class warning. this saves TONS of duplication in your CSS. (i don’t know why no one uses this trick. it’s great. when you see someone’s stylesheet that has dozens of lines like:
.redtext {
font-family: Arial, Helvetica, sans-serif;
color: red;
}.bluetext {
font-family: Arial, Helvetica, sans-serif;
color: blue;
},that's a sign that they probably don't know this trick.
- use commas to apply the same CSS rule to many HTML tags at once:
p, b, i {…will apply the … style to paragraphs, bold, and italic text in one line.
- condense rules like (
- Hacks are stupid. You don’t need them. Many CSS tutorials teach that to make a page work in multiple browsers, that you need to learn various “CSS hacks”. All this stuff is crap. You don’t need any of it.
CSS starts out being a pain for everyone. Don’t worry. You’re not stupid, CSS is. Don’t think you need to memorize all the properties, either — use Got API’s handy cheat sheet. And have fun.
73 Comments
Comments RSS TrackBack Identifier URI
Leave a comment
Excellent article. Setting aside all tutorials and technical explanations on what CSS is, this is very good.
There are a few points to make it even better, like combining font properties in one line, instead of using multiple variables, for example,
.myclass {
font: bold 2em arial,verdana;
}
is better in compare to
.myclass {
font-size:2em;
font-family: arial,verdana;
font-weight: bold;
}
Hi John - Great post, on each new site we build we finesse our technique, hopefully we’re finally getting there!
@Pavel: great point. i just added your point to #9, KEEP IT CLEAN. Thanks! :-)
Digged it! Great article also bookmarked your blog too, thanks
bookmarked it, thanks for the css lesson
[…] right here […]
One thing I went nuts on with my CSS when I started was giving ID’s to everything or classes to everything. You can reduce the bloat in your HTML by simplifying your CSS to define multiple rules against base tags at once.
p, td, th, span {
font: 10px Arial;
}
And if you need refinement, CSS rules are cumulative, so later rules build on earlier rules. But be careful, you can overwrite rules in later blocks and really confuse yourself.
th {
font-weigth: bold;
margin: 0 auto auto 0;
}
[…] The (only) Ten Things to Know About CSS Filed under: Uncategorized — recar @ 4:20 am The (only) Ten Things to Know About CSS a one-page tutorial that demystifies the cryptic and cranky rules of CSS.[news] [technology] [programming] […]
[…] http://blog.jm3.net/2007/03/16/the-only-ten-things-to-know-about-css/ […]
Good article. I disagree with the absolute positioning statement though. True, its better to float elements when your content is dynamic or continuously changing, but there is a place for absolute positioning… for instance, when something is evergreen and will not change, its ok to use absolute positioning. Just make sure to nest it inside a container with a relative position. I love that you teach to avoid hacks. I work for a large media company and we take this seriously. We brought in an “expert” who has published multiple CSS books over the last few years to train some of our associate designers… unfortunately, he spent a lot of time glorifying hacks. At our company we create ad-sales driven projects that are very graphic intensive and need individual CSS files. What happens down the road when a new browser doesn’t support an old hack? Do we have time to re-code hundreds of projects? No sir.
Great article, I can see this helping a lot! Thanks!
Props for the “gasface” reference.
[…] a one-page tutorial that demystifies the cryptic and cranky rules of CSS.read more | digg story […]
I recently read somewhere that the values set 0 on the margins (for example) do not need “px” after them because the unit measurement could be anything. I read that “0″ was enough for the browser to know what the value should be. 0 is the same in all units in CSS, is what I am trying to say.
h1 tags shouldn’t go inside a paragraph…
Great advice. I wish I could’ve read this before having to learn it through trial and error though :-)
Great post! The class=”word word2″ (space) trick is pretty sick!
Hi
nicely written, butt I want to suggest 1 more:
Do NOT use labels for your tags as you suggested in 9.2) “redtext”.
If you ever change your mind and make the “redtext” for example loog green - you will be getting really confused.
Suggestion: Use a label (name) for the class which describes what the class should be used for “company_name”, “importrant_word” … this way it will be much easier not only to change the appearance and still have correctly labeled tags, but also to apply tags to new parts of your site. Afte 6 month not using a class - who knows what “redtext” was used for?
Olaf
Great article, I can see this helping a lot! Thanks!
[…] Sveiki, ši savaitė ypatinga - Pixel.lt laimėjo geriausio technologijų blogo apdovanojimą. Ta proga pixel.lt lankomumas keletui dienų išaugo net 3 kartus, tikimės jog bent dalis iš jų pasiliks ir prisidės prie projekto. Taip pat šią savaitę buvo parašytas straipsnis apie ‘Alt’ ir ‘Title’ atributus. Skaitiniai šiam savaitgaliui: Pašto adreso apsauga nuo išorės (pirmasis Lietuviškas skaitinys! Žmonės, nebūkit kuklūs, jeigu parašėt kažką vertingo - pasidalinkit komentaruose arba atsiųskit el. paštu ir mes įdėsime į skaitinius. Taip pat galite įdėti savo straipsnius ne tik kaip skaitinius, bet ir pilna versija. Juos netgi galima pas mus įkėlinėti per rss. El. paštas info@pixel.lt) (The Only) Ten Things To Know About CSS CSS+Javascript power. Fancy menu Tableless forms […]
Very nice post. I really didn’t know about the possibility of “stacking classes”. I think this is one of the most useful features for keeping code clean. I will immediately start using it. About hacks … i agree that they should be avoided as much as possible. The only “trick” I use for multi-browser compatibility is the “cascading” attribute of style sheets: i work on a basic, standard CSS style sheet for well-behaving browsers, and i make specific style sheets for elements that don’t show correctly in other browsers (typically explorer). In my head section, i test against user’s browser and, if needed, I load specific style sheets. This is the only way i found to solve effectively the multi-browser compatibility issue. Got some other advices about?
too bad you haven’t used this to style yer wodpress… ;)
how can you write about css if you do not showcase what you do on your very own blog?
great post though!
Diez cosas que deberías saber acerca de CSS…
(ING) Diez tips que deberías conocer si estás desarrollando páginas web basándote en plantillas CSS….
Great tips. I also start every stylesheet with:
* {padding: 0; margin: 0}
This sets padding and margins on every element to 0, giving you a level playing field across different browsers. I know Firefox and IE (to name but two) often start with different defaults which can cause all kinds of headaches and confusion.
Also, get to know the CSS box model. I keep telling people but they don’t listen. You have to know this.
[…] He calls it The Only Ten Things You Need to Know About CSS, which seems a little presumptuous. Nevertheless, its a decent high level overview of CSS and his explanation of “the forces at work” may be crude, but I think the point is made. […]
Nice introduction on the piece of CSS tricks.
[…] (The Only) Ten Things To Know About CSS [ John Manoogian III ] […]
When I was learning CSS (and I still am) It took me years to realise it was # for id and . for class!
Good article, but I definitely disagree on the need for hacks (unfortunately). If you’re a business, your web site is your face to the world. And w/o hacks, you end up having to choose between looking good in most browsers and horrible in IE, because it still doesn’t do CSS very well (IE7 is just a new variation of doesn’t work).
What looked good in Firefox (both Mac/Win) and Safari was totally thrashed in IE6/7. So I had the choice to either tell IE users to screw off (not good business practice), make it look good on IE at the expense of Firefox and Safari (which are much better CSS-friendly browsers), hack it for IE support, or lose the design of my site in favor of a restricted “common denominator” CSS that the retarded IE browser could display.
I chose to hack the CSS for basic IE support (it doesn’t look AS good in IE, but it isn’t a mess either). Until such a point as IE is up to the same level of CSS support as Firefox and Safari, hacks are a necessity, IMHO.
Good article, but in your “stack classes” example, I would prefer to use your comma rule, like this:
.redtext, .bluetext {font-family: Arial, Helvetica, sans-serif;}
.redtext {color: red;}
.bluetext {color: blue;}
[…] Manoogian III […]
(The Only) Ten Things To Know About CSS…
I came across this great article on CSS, “(The Only) Ten Things To Know About CSS”. Great article for people new to CSS, and for people who need to brush up their basic CSS skills. It pretty much sums it……
CSS hacks *are* stupid, but mostly when they are used foolishly and/or improperly. Name me one browser with full, proper CSS2 support that doesn’t have rendering bugs. Even Opera and Konqueror can’t purport to have perfect rendering, regardless of how well they behave.
For those terrible moments when everything should work, a good CSS hack can save your butt. If you can water down a complex design to the point where it doesn’t need a CSS hack or two, great. But it’s not always possible without falling back on other hacks or just not supporting a wide range of browsers (or when you have a deadline approaching).
People just need to learn to not use a CSS hack unless it’s absolutely necessary. I would rather present a watered-down version of content to IE6, but let’s face it: not many large companies are.
That shorthand can be condensed even more. When you write the margins on one line like that, “margin: 0px 10px 10px 10px;” you’re shortening what would have been written out as:
margin-top: 0;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
Andrew was right about specifying the unit type after a value of 0, there’s no need to do it. Additionally, this can be condensed even more. In the interest of keeping the code as short as possible, CSS allows you to use only as many values as you need. In this case it’s not all four.
Here’s how it works:
If you were to specify only a single value, as in “margin: 10px”, then not only would the top value become 10px, but three remaining margins would also inherit the same value, making all four margins 10px.
If you were to use two values, as in “margin: 0 10px”, then each of the two values will be inherited by their opposite, making the top and bottom margins 0px, and the right and left margins 10px.
So in the example given, “margin: 0px 10px 10px 10px;” the right and left margins are the same value, and only the first needs to be listed. This makes the condensed code “margin: 0 10px 10px;”.
[…] read more | digg story […]
No hacks is fine — if you’re good with css you shouldn’t need them. With one exception:clearing floats. I use http://www.positioniseverything.net/easyclearing.html. If anyone knows a better way, fine, but I’ve never seen it.
Jm3,
Take Note: Your article itself does not validate for CSS nor XHTML.
Few blogs do. Good article, tho.
-AGP
This is the first CSS tutorial type thing that’s made it to the front page of Digg that I actually agree with. It takes months of writing CSS daily to come up with a solid system for naming your XHTML elements and styling them efficiently. Just wanted to add in that the wildcard selector (*) is always really helpful, especially when debugging….
* {border:solid 1px black}
This is also helpful to delete default formatting, which is unfortunately different across browsers.
* {margin:0;padding:0;}
Hi..
Thanks for this dragon-taming article, it’s much appreciated by those of us who become lost in the deep forests of coding. Lots of tutorial writers do seem to have lost touch with how LITTLE newbies know.
For instance, I have a question about point #9.2. It may be clear to everyone else, but my right and left hemispheres built up pressure on this one, so I thought I’d just ask.
Could you show how - using your example of ‘redtext’ and ‘bluetext’ - if you stacked those class ids together, that the colors wouldn’t clash? Yes, I can see how the font would of course be the same, but wouldn’t stacking the two colors in the same class cause a trainwreck? How does this work? Am I tripping over the insignificant?
thanks for your clarification and for whittling CSS down to graspable size.
Della
dugg! good tips for those starting out, and good reinforcement for those in the trenches daily.
dude, use the firebug extension for firefox: http://www.getfirebug.com. it’s completely changed the way i develop css.
you won’t need to use that color:red hack anymore… click on an element to select it and view all the rules that apply to it, then change the css right in the page, on the fly. once you’ve got it looking the way you like it, just copy the rules into your actual source.
also, regarding IE issues, make sure you have the doctype set correctly, so that IE is forced into standards mode instead of quirks mode. (google to find out more.) it won’t fix all your problems, but IE uses a different box model in quirks mode, which makes things even more confusing.
[…] CSS minimalism Filed under: Technology — 0ddn1x @ 2007-03-17 19:51:21 +0000 http://blog.jm3.net/2007/03/16/the-only-ten-things-to-know-about-css/ […]
altay Says:
March 17th, 2007 at 12:24 pm
dude, use the firebug extension for firefox: http://www.getfirebug.com. it’s completely changed the way i develop css.
I would also download the IE Developer Toolbar. It does essentially the same thing as the Firefox extension and will show you what order class are being applied in IE. I use both heavily.
I believe stacking classes has been around since the NN4 days, but was not compatible with IE5.5. IE 6 changed this behavior, and now that the Mac IE has been retired it eliminated the last vestiges of the stacking class incompatibilities. I do agree with you that it is an underused feature, but I believe many people shy away from its use due to the early implementation fiasco.
I’ve also found the structure of CSS should be displayed in a much cleaner fashion. The technique I use:
.classA,
.classB {
color:#F00;
}
.classB { /* classB modifier - inherits common attributes from above */
font-weight:bold;
}
[tab] .classB i {
/* i is a nested tag within classB - tab in the nested structure
to increase visibility */
}
Hopefully the spaces translate properly! This is my typical structure, and it serves me well. I’m still open to adaptations, so if anyone else has comments I’d be interested in hearing them.
[…] John Manoogian CSS hakkında bilmemizi istediği 10 şeyi yazmış. Link […]
[…] John Manoogian III » Blog Archive » (The Only) Ten Things To Know About CSS (tags: design html reference web webdesign css) […]
[…] John Manoogian III » Blog Archive » (The Only) Ten Things To Know About CSS great summary! must read for css types, especially those just starting:) (tags: css webdesign tutorial design web reference html tips) […]
At one time, I thought class stacking was going to be a very clever way of reducing code, however, I ran into issues when I started modifying a very large site. The problem is that by moving from 1 class to multiple, you’re essentially going from a 1:Many relationship between class-attribute to a Many:Many relationship. Having worked in databases for a few years, I knew that Many:Many = generally a bad idea.
I phoned up a friend who has been in web design for 5+ years and programming for 10+ years and he confirmed my hesitation and told me that he practically never uses class stacking, because it gets messy quick once you have two classes that share styling attributes.
Ex. Say you want to style the elements on your Blogs page similarly. So you create a Blogs style. You also want buttons on your site to be styled a certain way. So you create a Buttons style. Now, what happens when you have a button on your Blogs page? Uh oh. Do you stack the classes? Well, both the Blogs and Buttons classes are likely to include a background-color property. Which class wins? Maybe you also have a “Reply to Blog” section with a Reply button.
Let’s add another layer. You’ve added a login control to your Blogs page. It uses a login style class. It contains a button. So now your button has 3 classes: Blogs, Button and Login. All 3 set the background property. Which class wins?
What I’ve described is relatively simple. In some applications, you could be working with objects that are 20+ layers deep when you count all the divs, tables, and controls. Try remember just how you stacked the classes in those when you go to maintain your site.
Most developers would choose to take the longer, but clearer route of creating additional styling classes (ex. BlogsButtons, LoginButtons, BlogLoginButtons, etc) and only reference a single class. It does require more code, but in a sizable application, it is more straightforward to maintain.
Use class stacking if you wish, but be warned of the dangers.
[…] John Manoogian III » Blog Archive » (The Only) Ten Things To Know About CSS AKA, “Secrets of the patented JM3 Gasbag Model™” - a getting-started list to make sense of CSS. (tags: web-developer web-developer/css blogs reference technology tips articles advice) […]
[…] The Only Ten Things To Know About CSS Related Comments Related […]
Great article, but… rule number 11, dont use such a small font that forces your reader to have to go up and increase the font size manually.
[…] Things to know about CSS I especially like the GasBag model […]
[…] Useful tips from John Manoogian III: (The Only) Ten Things To Know About CSS. But why does the page look so ugly in IE? […]
Simply Excellent…… Best among best……… like a clean perfect CSS style sheet….. thank you for sharing…..
[…] the-only-ten-things-to-know-about-css […]
[…] Link […]
[…] John Manoogian III » Blog Archive » (The Only) Ten Things To Know About CSS (tags: css html reference toshare) […]
[…] 关于 CSS 你必知的十件事 […]
[…] http://blog.jm3.net/2007/03/16/the-only-ten-things-to-know-about-css/ […]
[…] read more | digg story […]
[…] jm3.net […]
[…] This is a nice little post over at roScripts I found via digg. It links to some good resources such as fancy css navigation, 10 things to know about CSS and CSS Fly which lets you edit your CSS on the, erm, fly. […]
[…] Ten Things To Know About CSS […]
Word up on the pointlessness of hacks. I’ve gotten by without them and I keep wondering what the fuss is about.
Amen brother!
[…] Programming - The Only 10 Things to Know about CSS I found this article really interesting. Now if I only I get could this guy to join our staff team. Either way, definitely worth a read. […]
@devlounge: you’re supposed to make the offer first ;-)
Good article. Fun too. However, you may want to point out WHY hacks are stupid and direct n00bs to some good sources for using CSS layouts without hacks.
@Rogie: my goal in writing this was to help n00bs feel that with CSS, THEY have the power to make it work and figure things out without resorting to ridiculous workarounds or deferring to the “high priests of CSS” who are slaves to pixel-accuracy in layouts. (clearly, this goal eluded many digg readers — my fault for not being clear enough). for n00bs to overcome that fear and UNLEARN the convoluted techniques that most CSS sites teach is important to me. if i knew of any books or sites that took a similar approach to teaching CSS, i would surely have linked to them. unfortunately, i don’t know of any. i taught myself by viewing source on sites i liked, experimenting, and being consistently surprised that i could make layouts work without relying on the “expert” CSS advice i found online. i recommend that approach to people who approach for help, together with a healthy dose of determination and enthusiasm.
thanks for your comment :-)
john!
what’s up? i heard you’re no longer in the “great” state of michigan. hope all is going well. good read above as well on css. i continue to use it more efficiently each day.
cheers,
krafty
(formerly of organic employ)
[…] (The Only) Ten Things To Know About CSS 10 important aspects of CSS, a getting-started list to make sense of CSS. […]
great post, with one exception. you need a css hack to handle PNGs in IE6. IE7 and FF handle them fine. (AlphaLoader)
Hi - great article. I agree 99% with you about the hacks - the only thing I use any kind of hacks for is IE and I only use them when IE is the only browser that totally messes up something clear and simple.
I also have a unique way for that - with other browsers you won’t see any CSS hacks if you look into the code as I code my css to .css.php files that return content type of text/css and with php code check if the user has IE or some other browser. Not nearly all, but some of the pages I have made return a slightly different CSS-file for IE than for others - and in some cases I have had to use the same trick in the HTML-code too! Once for example I had a totally unexplainable problem with a *very* simple CSS-design that messed up tthe view with IE’s from versions 5.5 to 7 but not with any other browser. What could I have done? There was no way around it without possibly making a very complex CSS definations that could well mess up things with even more browsers - so I wrote a different code for IE.
Unfortunately IE is the most used browser and it can’t be ignored - and just as unfortunately it doesn’t seem to follow any reasonable standards (no other browser ever show my pages differently than I expected, I know my HTML & CSS and use only valid code). I wouldnt use any hacks in any other way, but for these reasons I’m sometimes just simply forced to code a piece of PHP to return different code for IE.
Your article has probably done more to help me understand the BASICS of CSS than all of the others that use examples, but don’t really explain, for example that is a box or give your tricks like color: red. Really simple concepts, but not always obvious to those who are trying to learn CSS.
I am an amateur volunteer who inherited a large and very messy web site and am attempting to learn CSS to clean it up. Good information like yours not only aids me in my task, but may some day make me appear competent to do what I am doing.
Your link to wierd print designers also helps a lot.