digg

Facebook Connect Join Digg About

Understanding the C in CSS

blog.thembid.com — This simple tutorial explains the cascading feature of CSS. Useful for those starting out with CSS or if you need a refresher.

Who dugg this? Made popular Jul 19, 2007

Digg DudeWhat is Digg?

Digg is a place for people to discover and share content from anywhere on the web. Digg surfaces the best stuff as submitted and voted on by the community. Take the Tour to learn more.

52 Comments

show profanity settings
expand all
  • iplaywithfire, on 10/11/2007, -0/+15looking at a lot of websites today i'd say a lot of people need to learn the "S" in CSS..... "style"....
  • GfunkGbuss, on 10/11/2007, -9/+23Was I the only one that thought of the "Counter" in "Counter-Strike Source"?
  • thinkingserious, on 10/11/2007, -1/+13The option appears when you bury the comment.
  • tsctsc, on 10/11/2007, -3/+13Negative.
  • evilpettingzoo, on 10/11/2007, -6/+15How the hell do you block users now?
  • RunningJay, on 10/11/2007, -0/+8C is for cookie that's good enough for me
  • ngmcs8203, on 10/11/2007, -3/+9digg down the person then block.
  • PorkTornado1102, on 10/11/2007, -5/+10I once read an article on nuclear physics - I guess I can post a how-to now.

    ***** totally worthless CSS article. Glad you were able to join the crowd.
  • lordslumber, on 10/11/2007, -2/+6To say this is what the "C" means in the CSS is a slap in the face of what CSS does. You describe a few ways of how to get CSS styles applied to webpages, great, but what does that have to do with cascading? IMO, the C in CSS is all about controlling the cascade down the document object model of a webpage. If I set a style up at the top of the waterfall, it cascades down to the child elements in a controlled manner. This way with very little CSS I can make over-arching changes to entire pages of elements on the page. I can set up rules of for a page that make things look completely different depending on what their HTML parents are; depending on how their cascade differs...

    see it in action:
    http://www.csszengarden.com/

    learn:
    http://www.css-discuss.org/
  • ilovenicotine, on 10/11/2007, -1/+5google what you're asking?
  • wouaren, on 10/11/2007, -0/+3yes this was just to show that cascading is not only related to where you put your css code (.css file or embedded in html)
    and yes in THIS example your solution is better but this would have not show what cascading is.
  • lordslumber, on 10/11/2007, -0/+3So I was wrong to think they didn't include the stuff in his article in the definition of "cascading". However inheritance definitely is also a part of it. Keep reading a little farther in your own link. Or read here at some even earlier write-ups of the definition.

    http://www.w3.org/TR/CSS1#cascading-order
  • gyphie, on 10/11/2007, -0/+3In #3 he says that the cascade is defined by the order that external documents are listed in the Head. This is not true. The cascade applies by order of specificity. If identical definition are defined then the last is taken unless overridden using !important or by some other factor (e.g., a user defined sheet).

    IMO CSS is such poor implementation of a good idea that I perfectly understand why no one understands it. I know I don't.

    Thank goodness for FireBug and online specificity calculators.
  • inactive, on 10/11/2007, -2/+5'C' means 'cascading'. We don't need this crap on the front page.
  • tnatharik, on 10/11/2007, -1/+4I dont think you can block users by using CSS.
  • Tredici, on 10/11/2007, -0/+2You digg him down, but seriously, you guys should check 'em out.

    http://www.last.fm/music/CSS
  • wouaren, on 10/10/2007, -0/+2Call it what you want, that's cascading
  • adamdigg, on 10/11/2007, -2/+4This is a pretty long article to explain a pretty simple idea. Something I rarely see explained in tutorials etc. is how browsers decide to use one selector instead of another, when both seem to apply to an element. Of course the order in which the selectors are given is part of it, but more importantly, (and what took me a long time to find out) is that every selector has a calculated weight, which is important to understand when you have a complex stylesheet. This explains it: http://www.htmldog.com/guides/cssadvanced/specificity/
  • adamdigg, on 10/11/2007, -0/+2Starting to wonder if some Digg competitor/hater is actively digging everyone down to discourage participation...
  • Alisic, on 10/11/2007, -2/+4Eh, that only touches the surface of the cascading in CSS.
    The real action starts when you use the @import rule for some real cascading for separation of complex CSS schemas to multiple layers.
  • uzytkownik, on 10/11/2007, -0/+2I agree with it. You may only use external stylesheets (they are the most flexible) + class/id attributes but you still use C in CSS.
  • marktastic, on 10/11/2007, -0/+1nice! i thought of that too
  • inactive, on 10/11/2007, -0/+1That's pretty cool, I suppose. It could be helpful for beginners.
  • wouaren, on 10/11/2007, -1/+2Useless, the main use of "Cascading" is not discussed in article (or badly) :
    div { color:#f00 } wil define a red color text for all the elements in all div elements of a page
    <body>
    <p>I'm a black text</p>
    <div>
    <p>
    I'm a red text ! Because C means Cascading !
    </p>
    </div>
    </body>
  • sp1keNARF, on 10/11/2007, -1/+2link to what you're talking about?
  • lordslumber, on 10/11/2007, -1/+2what do you mean by "this"?

    I'm aware of what HTML/CSS are capable of, which is why I was put off by the article's watered down definition of cascading.
  • gyphie, on 10/11/2007, -1/+2Your view of Cascading in CSS is wrong. A carefully crafted HTML document and CSS definitions can simulate this.
  • dkomando, on 10/11/2007, -1/+2Was W2 the school before W3 Schools?
    "W2 Schools Introduction to CSS"

    Still a little lost on how the examples relate to Cascading.
  • adamdigg, on 10/11/2007, -1/+2Most of that is true, but when you say "IMO, the C in CSS is all about controlling the cascade down the document object model of a webpage." your opinion is wrong. If you read the specifications for CSS (currently 2.1): http://www.w3.org/TR/CSS21/cascade.html#cascade , it's clear that the "cascading" in the acronym really does refer to the order in which the stylesheets are applied.
  • trghpy, on 10/11/2007, -6/+6What happened to cascading?
  • Domstersch, on 10/11/2007, -2/+2I never thought I'd _see_ a resonance erm... cascading style sheet, let alone create one!
  • flarn2006, on 10/11/2007, -2/+2Content?
  • UglyDigger, on 10/11/2007, -1/+1Cansei. As in Cansei de Ser Sexy.
  • luke16, on 10/11/2007, -1/+1alala alala
  • yogastore, on 06/27/2008, -0/+0http://astore.amazon.com/la.crosse.atomic.clock-20
    http://astore.amazon.com/la.crosse.technology.wire ...
    http://astore.amazon.com/upright.bagless.vacuum-20
    http://astore.amazon.com/dyson.upright.vacuum-20
    http://astore.amazon.com/hoover.bagless-20
    http://astore.amazon.com/hoover.canister-20
    http://astore.amazon.com/pyrex.storage-20
    http://astore.amazon.com/pyrex.storage.lids-20
    http://astore.amazon.com/inflatable.bed-20
    http://astore.amazon.com/aerobed.inflatable.bed-20
  • SoZo, on 10/11/2007, -1/+1Welcome to web 3.0

    You and I are wiser now and know where to invest those hard earned web 2.0 dollars.

    /crap cascades outa' my ass into toilet
    // flushed toilet cascades into sewer
  • p0tent1al, on 10/11/2007, -1/+1The SAME OLD CSS TUTORIAL, with the same damn ol tips. Inline styles, Embedded styles, external styles, I mean I am the first person to be accepting of this type of stuff, but you have to understand, these tutorials come out pretty much 3-8 times a week, and it's the same CSS Tutorial with the same tips.

    I think the only site that comes with original CSS articles is SmashingMagazine, other than that, all these other articles of the same old information, is utter failure, I'm sorry.
  • inactive, on 10/11/2007, -2/+1I totally thought this was about Counter Strike. *****.
  • psygnisfive, on 10/11/2007, -2/+1Let's make love and list to death from above.
  • GeRviLM, on 10/11/2007, -1/+0Buried for being the lamest CSS tips / TYS / unoriginal article ever.
  • adamdigg, on 10/11/2007, -1/+0That's not cascading, it's inheritance.
  • evilpettingzoo, on 10/11/2007, -4/+3Thank you very much all these harry potter people will be blocked. Not so much that I'm sad about/care about the spoilers , but it's more because they're jackasses who ruin it for people who do care.
  • cdleeman, on 10/11/2007, -2/+1wouaren, in your example you'd be better off just setting a class for paragraphs with red text, instead of using an extraneous div. :-) Also, what are you trying to show? That 'cascading' can override the default system font color of black?
  • luke16, on 10/11/2007, -8/+5Whats happened to the cute asian?
  • Dested, on 10/11/2007, -5/+1Alright.....
  • AsherDanger, on 10/11/2007, -7/+2Cansei.........de Ser Sexy?
  • inactive, on 10/11/2007, -9/+3Harry kills Voldemort. Snape was good all along. Vol kills snape. Ron and Hermione get married. Harry and Ginny get married. Lupin, Tonks, Moody, and Fred die (plus a few more).

    spoiler alert.
  • ilovenicotine, on 10/11/2007, -7/+1Snape gets killed in every one I've read... DEAD bitches!
  • appleswitch, on 10/11/2007, -10/+3Lets get on topic people, I'm sick of all the HP stuff. Great tutorial, cue pics of stuff cascading!

    http://interfacelift.com/wallpaper/downloads/00396_abrahmsfalls_1920x1200.jpg
  • Fetching more discussions...
    Show 51 - 53 of 53 discussions

  • Add a Comment

    Login or register to comment!
    Or, sign-in super fast with your Facebook account ...


© Digg Inc. 2009 — Content created and posted by Digg users is dedicated to the public domain | Terms of Use Updated | Privacy Policy
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.