digg

Facebook Connect Join Digg About

Learn CSS

html.net — This CSS Tutorial will get you started with CSS in just a few minutes. It is easy to understand and will teach you all the sophisticated techniques.

Who dugg this? Made popular May 13, 2006

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.

25 Comments

show profanity settings
expand all
  • Bogtha, on 10/12/2007, -0/+42Unlike virtually all of the awful CSS articles that make it onto Digg, this one doesn't have glaringly obvious, stupid errors, or at least not that I could see from briefly skimming it. The only really poor thing that stood out was their complete ignorance of descendant selectors.

    The article uses examples like:

    <ul>
    <li><a href="ri.htm" class="whitewine">Riesling</a></li>
    <li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
    <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
    </ul>

    a.whitewine {
    color: #FFBB00;
    }

    This is long-winded and wasteful. Use a descendant selector instead:


    <ul class="whitewine">
    <li><a href="ri.htm">Riesling</a></li>
    <li><a href="ch.htm">Chardonnay</a></li>
    <li><a href="pb.htm">Pinot Blanc</a></li>
    </ul>


    .whitewine a {
    color: #FFBB00;
    }

    The selector applies the ruleset to all elements that are descendants ("inside") of <a> elements with class="whitewine".

    Wow. Digg really need to fix their comment editing bugs. What a ***** up.
  • bramkok, on 07/02/2009, -0/+7You can say whatever you want about the quality of the tutorial but the way it is brought is really nice because it is very ironic and sarcastic:

    "Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented the World Wide Web, the language HTML was only used to add structure to text. An author could mark his text by stating "this is a headline" or "this is a paragraph" using HTML tags such as and ."

    and this tutorial about using HTML to display images on a page:

    http://www.html.net/tutorials/html/lesson9.asp

    a half naked hasselhoff in a tutorial displays good humor.
  • nathanchase, on 05/06/2009, -0/+7There's a lot of stuff not covered: descendant, child, adjacent, and attribute selectors, when to use id vs. class, pseudo-classes and elements...

    I recommend http://css.maxdesign.com.au/selectutorial/ for a great tutorial on some of these more advanced CSS topics.
  • masprema, on 10/12/2007, -0/+5I agree with Bogtha, the descendant selector should have been illustrated, but the explanation and illustrations of css are clear and understandable. This is a fine tutorial for people starting out. It did the best job of describing floats that I have seen.
  • bradleyland, on 10/12/2007, -0/+4No, people who make web pages in WYSIWYG editors are joking themselves. No WYSIWYG editor I've used to date creates clean, semantic code like a good text editor and a knowledgeable developer does.
  • saitou, on 10/12/2007, -0/+4You're getting buried because you're showing how naive you are by making a comment like that.
  • veritech, on 10/12/2007, -2/+5the w3schools css one is the best in my opinion
  • masprema, on 10/12/2007, -1/+3I am hooked on Crimson Editor as my text editor.
  • SilentPurity, on 10/12/2007, -0/+2You should of just posted your own guide in the comment area! =D
  • Settra, on 10/12/2007, -2/+4This was very helpful, Thanks :)
  • soccerpmn, on 10/12/2007, -0/+2Honestly, you don't 'know' a language if you just WYSIWYG it. You have to write the code yourself to learn the useful, clean, ins and outs of a language.
  • pornel, on 10/12/2007, -0/+2This article contains some errors - for example illustrated margins don't take collapsing into account (which sometimes drives beginners crazy when they don't know how and why it happens).

    Tutorial also suggests using CSS as HTML macro language, rather than style language - suggested selectors are primitive and their names suggest reusing them on unrelated elements just for sake of presentation (very bad habit) - http://www.w3.org/QA/Tips/goodclassnames

  • rayishu, on 10/12/2007, -0/+1You have to really understand a programming language or Markup language in order to use a WYSIWYG editor, if not then YOUR "Joking Yourself";
  • kickarse, on 10/12/2007, -0/+1The class in the A HREF is helpful if you want to make a background picture a link within the CSS


    Riesling
    Chardonnay
    Pinot Blanc


    /*CSS*/

    a.riesling {
    background-image: url(riesling.gif);
    width: 200px;
    height: 100px;
    }

    a.riesling:hover {
    background-image: url(rieslingo.gif);
    width: 200px;
    height: 100px;
    }

    a.chardonnay {
    background-image: url(chardonnay.gif);
    width: 200px;
    height: 100px;
    }

    a.chardonnay:hover {
    background-image: url(chardonnayo.gif);
    width: 200px;
    height: 100px;
    }

    a.pinot_blanc {
    background-image: url(pinot_blanc.gif);
    width: 200px;
    height: 100px;
    }

    a.pinot_blanc:hover {
    background-image: url(pinot_blanco.gif);
    width: 200px;
    height: 100px;
    }
  • masprema, on 10/12/2007, -1/+2Thanks, Zampa. This is a very helpful link.
  • ZeorS, on 10/12/2007, -1/+2Thank you, veritech!
    I just began to learn web programming, and I found w3schools is a very good place to go.
  • joachimcohn, on 10/12/2007, -0/+0And both W3Schools and HTML.net are Scandinavian-based by the way :-)

    http://www.w3schools.com/about/about_refsnes.asp
    http://www.html.net/about/
  • pornel, on 10/12/2007, -2/+2They're using Explorer as rendering reference - it can't be CSS then! ;)
  • koregaonpark, on 10/12/2007, -1/+1This is a really great guide. I'm just using it and I really like it. I've already built my first stylesheet! Thanks for submitting it, AndreasA.
  • leomyhero, on 10/12/2007, -2/+2Any tutorial that suggests Windows Notepad as a good text editor has lost my vote. Try Text Wrangler for Mac, TextPad for Windows, or Quanta for Linux instead.
  • 1024k, on 10/12/2007, -0/+0Any web-designer who speaks German probably knows this tutorial: http://selfhtml.org

    It is also available in English language but sadly the translation is far from being complete.
  • mdweezer, on 10/12/2007, -3/+2ASP blows.
  • Kujila, on 10/12/2007, -8/+2I'm getting -dugg for something that's 100% true.

    People who make webpages in Notepad (or equivalents) are only joking themselves.
  • infra172, on 10/12/2007, -9/+2Great! A website that teaches you stylesheets with black text and a white background. What's next? A "How to Become a Millionaire" website created by a bum?
  • Kujila, on 10/12/2007, -11/+2Learn CSS:

    Step 1)Open Dreamweaver MX

    Congratulation!

  • 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.