CSS Zen Garden's use of nested <span> tags

Posted on 2006-05-12
Last Modified: 2008-01-09

In the examples on CSS Zen Garden ( I noticed an abundant use of nested <span> tags.  They are between the <h>, <p>, etc tags. What's the reasoning behind this?

1)  <H3><SPAN>The Road to Enlightenment</SPAN></H3>
2)   <P class=p1><SPAN>Littering a dark and dreary road... </SPAN></P>

Question by:c_swanky
    LVL 14

    Expert Comment

    from the html source:

    This xhtml document is marked up to provide the designer with the maximum possible flexibility.
        There are more classes and extraneous tags than needed, and in a real world situation, it's more
        likely that it would be much leaner.
    LVL 30

    Accepted Solution

    It's typically used because in CSS2, only one background image can be applied to an element.
    CSS3 draft allows multiple background images on a single element, but browsers don't support that yet.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now