Forgot your password?
typodupeerror
The Internet

10 Best Resources for CSS 344

Posted by CmdrTaco
from the slashdot-is-moving-to-css-in-just-a-few-weeks dept.
victorialever writes "Since one could have noticed an increasing number of websites that are employing CSS and an increasing number of resources talking about how great CSS is, it seems to become impossible not to jump on the CSS bandwagon as well. The 10 Best Resources for CSS provides an impressive list of the CSS resources which have recently become essential for web-developers. Among them - CSSZenGarden, The Web Developer's Handbook, Stylegala, PositionIsEverything etc."
This discussion has been archived. No new comments can be posted.

10 Best Resources for CSS

Comments Filter:
  • by RangerRick98 (817838) on Monday August 15, 2005 @06:53AM (#13320247) Journal
    Google Cache of article [64.233.161.104]
  • Re:But they forgot.. (Score:5, Informative)

    by RangerRick98 (817838) on Monday August 15, 2005 @06:55AM (#13320252) Journal
    Interesting; the article I read has that site listed third as "Official Cascading Style Sheets Level 2 Specification."
  • CSS Cheat Sheet (Score:5, Informative)

    by Sheriff Fatman (602092) * on Monday August 15, 2005 @06:56AM (#13320256) Homepage

    May I also recommend Dave Child's CSS Cheat Sheet [ilovejackdaniels.com] ?

    Print it out & stick it on the wall/partition - it covers almost all the CSS you'll use day-to-day, and (IMHO) it's much quicker than digging through the online documentation or the O'Reilly book.

    Similar things for Javascript, PHP, etc. are linked from here [ilovejackdaniels.com] if you're interested.

  • can I add one? (Score:5, Informative)

    by Anonymous Coward on Monday August 15, 2005 @06:56AM (#13320259)
    The edit css [mozdev.org] plugin for firefox lets you edit the css data for any page and instantly see the changes.
  • by superflippy (442879) on Monday August 15, 2005 @06:57AM (#13320260) Homepage Journal
    I find the CSS Sidebar [mozilla.org] immensely useful. It lets me quickly look up a style and see what values it takes. It's also a good reminder of some of the little-used styles.
  • pwnd. (Score:2, Informative)

    by mindwar (708277) on Monday August 15, 2005 @07:01AM (#13320267) Homepage
    slashcache [slashcache.com]
    also here's a few interesting links bookmarks [alvit.de] layouts [thenoodleincident.com] more layouts [bluerobot.com]
  • Re:But they forgot.. (Score:2, Informative)

    by dagny_dev_ (771050) on Monday August 15, 2005 @07:08AM (#13320286)
    I also wish they would have listed the web developer's handbook [alvit.de], at least as an aside. It's a good starting point. I keep it bookmarked and use it to get to other sites.
  • Best - NCDesign.org (Score:5, Informative)

    by N8F8 (4562) on Monday August 15, 2005 @07:14AM (#13320301)
    Awesome reference for HTML and CSS that shows examples and browser compatability:
  • Re:The REAL news ... (Score:2, Informative)

    by The Mgt (221650) on Monday August 15, 2005 @07:15AM (#13320303)
    I notice slashcode [slashcode.com] seems to have done away with table layout, on the main page anyway.
  • by mill (1634) on Monday August 15, 2005 @07:19AM (#13320314)
    Umm, it isn't valid semantic markup if you are using tables for layout.
  • by Anonymous Coward on Monday August 15, 2005 @07:29AM (#13320344)
    I agree that CSS got limitation, but not with vertical height/positioning and fluid layouts. The only thing bothering me is vertical centering.
  • by lasindi (770329) on Monday August 15, 2005 @07:31AM (#13320354) Homepage
    During the US Civil War, the sunken USS Merrimack was raised and converted to an ironclad by the Confederates, who renamed it the CSS Virginia (which later fought in the famous battle [wikipedia.org] of the ironclads). So the parent was just trying to make a, albeit lame, joke about the acronym "CSS." It wasn't truly offtopic, and it definitely wasn't a troll.
  • Re:The REAL news ... (Score:2, Informative)

    by H0p313ss (811249) on Monday August 15, 2005 @07:52AM (#13320475)

    With multiple stylesheets no less! Time to pre-order Duke Nukum Forever!

    <link rel="stylesheet" type="text/css" media="screen, projection" href="//www.slashcode.com/base.css" >
    <link rel="stylesheet" type="text/css" media="screen, projection" href="//www.slashcode.com/ostgnavbar.css" >
    <link rel="stylesheet" type="text/css" media="screen, projection" href="//www.slashcode.com/slashcode.css" title="Slashcode" >
    <link rel="Alternate stylesheet" type="text/css" media="screen, projection" href="//www.slashcode.com/slashdot.css" title="Slashdot" >
    <link rel="stylesheet" type="text/css" media="print" href="//www.slashcode.com/print.css" >
  • Re:CSS Cheat Sheet (Score:2, Informative)

    by dse (1194) on Monday August 15, 2005 @07:58AM (#13320501) Homepage
    Visibone [visibone.com]'s HTML/CSS reference card is worth the $10. Nice four-page card that goes into a lot more detail on browser compatibility, CSS property values, how CSS relates with HTML, and so forth, yet manages to fit all the CSS stuff in one page.

    (They also make a good JavaScript card from which I learned most of my JavaScript, as well as those nifty color charts.)
  • by goldspider (445116) <ardrake79&gmail,com> on Monday August 15, 2005 @08:02AM (#13320530) Homepage
    I'm reading that book too, but I have a different take on why it took three CSS "experts" to re-code that page.

    It's not CSS' fault; it's the noncompliant browsers. Zeldman's book is basically about using CSS to build a standards-compliant web site that renders properly on a variety of non-compliant browsers.

    Given the differing level of support among the browsers out there, it's no wonder that one has to jump through some hoops to get a consistent display.
  • by goldspider (445116) <ardrake79&gmail,com> on Monday August 15, 2005 @08:07AM (#13320546) Homepage
    1. You don't have to modify every .html file when it comes time to re-design.

    2. Accessibility - your site will be readable by screen-readers and PDAs.

    3. You can use standalone CSS to control the overall dosplay, and in-line CSS to control page-specific elements.

    I wouldn't call myself a CSS "expert", but I am a recent convert.
  • Re:The REAL news ... (Score:3, Informative)

    by dancallaghan (890674) <djc@djc.id.au> on Monday August 15, 2005 @08:16AM (#13320586) Homepage
    Yeah about time too ... I mean, CSS has only been around for almost nine years [w3.org] ...
  • by Anonymous Coward on Monday August 15, 2005 @08:16AM (#13320588)
    Google's Directory on Web Design -> FAQs, Help, and Tutorials [google.com]
    Eric Meyer's CSS Reference page (warning: requires frames, but it's tasteful use :P) [meyerweb.com]

    More on Eric Meyer, who is web-design guru in general, but well-known for his css/edge [meyerweb.com] presentation, and, well, check out his site [meyerweb.com], definitely worth a read.

    Well, that's it, other's that I know of have already been posted.
  • by vitaly.friedman (874102) on Monday August 15, 2005 @08:18AM (#13320604) Homepage Journal
    Ironically, the main version [alvit.de] of The Web Developer's Handbook [alvit.de] wasn't mentioned in the list. However, I actually feel great being slashdotted again. ;)
  • quirksmode (Score:3, Informative)

    by eelcoh (775552) on Monday August 15, 2005 @08:21AM (#13320622)
    Has anyone mentioned http://www.quirksmode.org/ [quirksmode.org]?
  • Re:The REAL news ... (Score:5, Informative)

    by SnowWolf2003 (692561) on Monday August 15, 2005 @08:32AM (#13320698)
    Looks like it is for real

    See CmdrTaco's journal [slashdot.org]
  • by Bogtha (906264) on Monday August 15, 2005 @08:32AM (#13320701)

    It's still easier to do certain things with table-based layouts than it is with CSS alone. Control of vertical positioning/height being the obvious one. That and fluid layouts.

    Okay, vertical positioning, I'll give you. But fluid layouts? That's not hard at all. Websites are fluid by default, they only stop being fluid when you set explicit widths using fixed units. You can do that with CSS or tables.

    If you're a busy designer, sometimes you just have to take the pragmatic route rather that waste hours or days trying to make a pure CSS layout work across all the common browsers

    If you are an experienced designer, then you've already done similar layouts a hundred times before, so you have the code and bug workarounds memorised and making it "work across all the common browsers" is at the very least least as easy as dumping a load of table code into each page.

    Either that or (worse) you compromise the design to make it fit the limitations of a pure CSS layout.

    I think the latter approach accounts for the huge number of 'identikit', bloggish-looking sites out there

    Er, CSS is far less limited than tables (check out the CSS Zen Garden), and I've seen way, way, way more websites out there using tables that all look alike.

    The reason most weblogs look alike is because they come with a set of default templates that people don't tweak very much.

    It's still perfectly possible to create valid, semantic XHTML/CSS markup that uses the odd table for layout

    Er, no. Not semantic. Not at all. If you are using tables for anything other than tabular data, it's not semantic.

    While I'm all for standards and separating content from presentation, at this stage of the game, we just need to choose the solution that works best.

    At any stage of the game you need to choose the solution that works best. In my experience, switching to CSS saved me a whole lot of time that was spent dealing with cruddy code. Sure, in the beginning, that extra time was wasted on stuff I didn't know about CSS, but once I got a bit of experience, it was a real time-saver.

    I know it's probably heresy to say this, but IMO tables work in an intuitive way that you can easily visualize whereas a mass of floated DIVs often do not!

    I've heard that before. Exclusively from developers that have years of experience with tables and who haven't spent any significant amount of time with CSS. Once they spend a week or two coding CSS every day, they wonder how they did without it. And if they never had much experience with tables in the first place, they don't want to bother with all the crap associated with tables (counting rowspans is never intuitive).

    Really, just think about the difference involved in "just move that over to the right a bit" for the two approaches. With tables you have to insert an extra column, count rowspans, if there's any rows spanning across the whole layout you have to break for that, alter its colspan and put another cell below it with rowspans... and with CSS, you open up the stylesheet and change one number.

  • by dtfinch (661405) * on Monday August 15, 2005 @08:35AM (#13320726) Journal
    Just don't use CSS for the things it's not very good for, like replacing a variable width, variable height table layout.
  • by rnd() (118781) on Monday August 15, 2005 @08:40AM (#13320761) Homepage
    this [microsoft.com] is a great reference, and it shows which features are IE only vs which are standard.
  • Re:CSS tables (Score:5, Informative)

    by Richard W.M. Jones (591125) <rich@anne[ ].org ['xia' in gap]> on Monday August 15, 2005 @08:45AM (#13320802) Homepage

    Why? I really don't understand this, what's wrong with divs?

    So that your site works in older browsers. - If it's just a bunch of nested divs, it'll collapse into short lines of text on an older browser.

    So that your site works in text-only browsers. Not just some Unix reprobates using Lynx, but people using mobile or otherwise "reduced" devices.

    So that a speech reader (an accessibility device used by the millions of partially sighted and blind people in the world) can stress the structure of the page when reading it, which helps the visitor to understand how it is laid out even when they can't see it.

    So that you can easily retarget content just by changing the stylesheet or (better) providing device-specific alternate stylesheets.

    So that search engine spiders can understand the structure of your page - eg. they can identify the important headings.

    So that you don't forget what elements in your site mean.

    That's just off the top of my head.

    Rich.

  • Re:CSS tables (Score:1, Informative)

    by Anonymous Coward on Monday August 15, 2005 @08:52AM (#13320836)
    the way to do it is to break your layout into it's basic components (often header, couple of columns and a footer) and make them divs. for everything else inside those divs, use descendant selectors.

    nesting endless divs will mess your head up. using fewer divs but more descendant selectors is the path to enlightenment.

    FWIW, ZenGarden is an interesting place to look at and is made by some very talented designers, but some of the designs are rather restricting. "The Zen Garden aims to excite, inspire, and encourage participation" but it isn't the final word in design.
  • by Bogtha (906264) on Monday August 15, 2005 @08:57AM (#13320868)

    I use the web as an information resource. That means I want "Just the facts Mam". Those could have been presented to me in HTML 3.2

    Disable CSS in your web browser. You'll get "just the facts" from the websites that use HTML + CSS, and you'll get "the facts dressed up with lots of style" from the websites that use HTML + tables. It sounds to me like HTML + CSS does what you want, not HTML + tables.

    I.e. I get back to a world where I view what is important to *me* [...] But I tend to come from the old school -- show me what I want to see -- when I want to see it.

    That's exactly what CSS was designed to do. Want a plainer website? Use a user-stylesheet that disables all the backgrounds, hides all the graphics, and uses your colour scheme. That's the "Cascade" in "Cascading Style Sheets".

  • Re:-moz-stylings (Score:4, Informative)

    by arkanes (521690) <arkanes@gmai[ ]om ['l.c' in gap]> on Monday August 15, 2005 @09:15AM (#13320961) Homepage
    These are the mozilla-specific names for features that are in CSS 3. The dash prefix, by the way, is the correct and standards-compliant way to create extensions.

    I believe that -moz-border-radius is already mapped to it's CSS3 name, but if not they will be as CSS3 support is implemented.

  • by Anonymous Coward on Monday August 15, 2005 @10:06AM (#13321399)
    Oh, don't be so silly. A two column layout? Please.

    body{background:url(tilingstripe.png) center repeat-y;}
    #leftcol{width:49%;float:left} #rightcol{width:49%;float:left}

    Pshaw. And I'm a *girl*.

    -Dody
  • Re:CSS tables (Score:4, Informative)

    by Millennium (2451) on Monday August 15, 2005 @10:26AM (#13321599) Homepage
    Why? I really don't understand this, what's wrong with divs?

    Nothing is inherently wrong with divs, as long as you keep in mind that divs don't mean anything, and that a meaningful tag is always preferable when one is available.

    To illustrate this, let's look at some common page-design tasks. Suppose that you want your page's title (which you'll type in text) and an image to appear at the top of your page. Many people would tell you to use a div with an id of 'head' to wrap everything, but there's a better way: simply use an h1 tag and give it a background and background-image. By using a meaningful tag for your page header, you've cut out excess HTML code, and the result is more elegant.

    Let's say, however, that you want more than just text and an image in your header. Suppose, for example,that you want to do something like Slashdot, using text, an image, and more images representing the last several categories that have been updated. There is no one tag that can encompass all of this, and so here we have a case where a div is appropriate. Give it a meaningful ID -'header' is a common choice- and put your header elements inside it.

    The rule for elegant code is to use the most meaningful tags which will do what you want. DIV tags are suitable when nothing else is available, and there are times when that happens. However, they should not be used when better tags exist.
  • by Finuvir (596566) <rparle&soylentred,net> on Monday August 15, 2005 @11:40AM (#13322122) Homepage
    That same design would have been trivial to convert to CSS (dropping most of the extraneous markup along the way) if those experts were able to use the full power of CSS2. Unfortunately a significant number of people use a browser that has yet to make any headway into supporting CSS2. You may be able to guess who produces said browser.
  • by horza (87255) on Monday August 15, 2005 @12:13PM (#13322424) Homepage
    If you look at the following web site with property for sale in Nice [medinheaven.co.uk], you will see it uses extensive CSS. The original web site was done using tables, which I then converted to CSS. There isn't a single image in the whole of the HTML of the web site apart from a few photos which are content and not design.

    Advantages CSS over tables:
    * the nested tables were fixed width, too complicated to convert to proportional, and if you resized the windows to anything larger than 1024x768 then you had to pan around using the scroll bars. The CSS degrades wonderfully. Even if the display breaks and doesn't look as pretty, it's still usable at any window size
    * pages are a fraction of their original size, and the actual content is clearly visible and editable

    Advantages tables over CSS:
    * cross-browser compatibility. Everything always works in Firefox but IE is a nightmare. Grey bars appearing randomly for no apparent reason, margins having unpredictable behaviour, and things breaking for no reason when pixels are exactly aligned (as proved by basic arithmetic)

    From painful experience I can recommend that you get the designer to mock up in photoshop, and then you design the site directly in CSS and ask for the images to be chopped into the way you need as you go along. Don't get the designer to provide you the HTML in table form which you then convert afterwards.

    Hope this helps,

    Phillip.
  • by rjd97c (907863) on Monday August 15, 2005 @05:33PM (#13325819)
    This is a great extension which enables you to see and edit (in real time) CSS for sites, as well as overlay ID and class info on the actual page! BRILLIANT! (and a lot more stuff too) WEB DEVELOPER [chrispederick.com]
  • by Anonymous Coward on Monday August 15, 2005 @07:35PM (#13326648)
    To be fair, Zeldman's book was written an age ago by CSS standards, and I think you'll find most standards-savvy web designers would most likely consider the book as more a "call-to-arms" than an actual instructional manual.

    The hacks described in the book WERE cutting-edge at the time, when browser support was (far) less than perfect (even less so than today). Hence the need for experts.

    These experts pioneered a great deal of the CSS knowledge we have today, and it's by their early efforts that we have such a wealth of cross-browser techniques available. These techniques are quite mature in themselves, and allow designers the freedom create complex CSS-based designs.

    So - no flame, just a little perspective.

Work without a vision is slavery, Vision without work is a pipe dream, But vision with work is the hope of the world.

Working...