Dumb CSS questions

  • mrspabs

    (@mrspabs)


    11 years, 7 months ago

    This is not really wordpress related, but about CSS in general.

    I was given this snippet of code in a tutorial.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <style type="text/css">
      body {
        color: #000;
        background-color: #fff;
      }
      #wrap {
        font-size: 2em;
        color: #333;
      }
      div {
        font-size: 1em;
      }
      em {
        color: #666;
      }
      p.item {
        color: #fff;
        background-color: #ccc;
        border-style: dashed;
      }
      p {
        border: 1px solid black;
        padding: 0.5em;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <p class="item">
        This is the <em>cascade</em> in
        <a href="#">action</a>
      </p>
    </div>
  </body>
</html>

    Why does the CSS use p.item. Shouldn’t it be .item. What is the point of putting the p in front?

    Or couldn’t the same thing be done with #wrap p{}

Viewing 1 replies (of 1 total)
  • WPyogi

    (@wpyogi)

    11 years, 7 months ago

    .item is a class used in the html — and p.item specifies all paragraphs with the .item class.

    Or couldn’t the same thing be done with #wrap p{}

    Not really the same — as this would style all paragraphs in the wrap div — and the other allows you to only style paragraphs that also have the item class assigned to them. Seems subtle — but can be significant.

Viewing 1 replies (of 1 total)
  • The topic ‘Dumb CSS questions’ is closed to new replies.