trying to figure out the difference between the Header tags, div, span, and p tags

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • JimO
    #1

    trying to figure out the difference between the Header tags, div, span, and p tags

    I'm new to CSS and I'm trying to figure out the difference between the
    Header tags, div, span, and p tags as they relate to style sheets. They
    each render slightly different in the browser and accept different styles.
    I was wondering if there is any hard and fast rule or if it's just a matter
    of playing around and discovering ones preferences.

    Thanks,
    Jim


    <html>
    <head>
    <title>Untitled </title>
    <style language='css/text'>

    h1 a {
    background-color: lightgrey;
    font-size: 2em;
    color: white;
    border-bottom: thick black solid;
    text-decoration: none;
    cursor: pointer;
    }
    h1 a:hover {
    color: red;
    }
    p a {
    background-color: lightgrey;
    font-size: 2em;
    color: white;
    margin:0;
    padding: 0px;
    border-bottom: thick black solid;
    text-decoration: none;
    cursor: pointer;
    }

    p a:hover {
    color: blue;
    }
    div a {
    background-color: lightgrey;
    font-size: 2em;
    color: white;
    border-bottom: thick black solid;
    text-decoration: none;
    cursor: pointer;
    }
    div a:hover {
    color: green;
    }

    span a {
    background-color: lightgrey;
    font-size: 2em;
    color: white;
    border-bottom: thick black solid;
    text-decoration: none;
    cursor: pointer;
    }

    span a:hover {
    color: yellow;
    }

    </style>


    </head>

    <body>
    <h1><a href=''>This is the H1 Text</a></h1>
    <p><a href=''>This is the p Text</a></p>
    <div><a href=''>This is the div Text</a></div>
    <span><a href=''>This is the span Text</a></span>



    </body>
    </html>


    Tags: None
    • David Dorward
      #2
      Re: trying to figure out the difference between the Header tags, div, span, and p tags

      JimO wrote:
      [color=blue]
      > I'm new to CSS and I'm trying to figure out the difference between the
      > Header tags, div, span, and p tags as they relate to style sheets.[/color]

      No difference, except for different default val
      [color=blue]
      > They each render slightly different in the browser and accept different
      > styles.[/color]

      They accept the same styles, although it might not look like it.

      span { width: 100em; } would have no effect, while h1 { width: 100em; }
      would have an effect, but that is because the width property doesn't apply
      to elements with display: inline. Change it to { display: block; width:
      100em; } and it works on both elements.

      What requirements there are for a property to apply are described in the
      summery of the property in the CSS spec.

      --
      David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
      Home is where the ~/.bashrc is

        Comment

        • C A Upsdell
          #3
          Re: trying to figure out the difference between the Header tags,div, span, and p tags

          JimO wrote:[color=blue]
          > I'm new to CSS and I'm trying to figure out the difference between the
          > Header tags, div, span, and p tags as they relate to style sheets. They
          > each render slightly different in the browser and accept different styles.
          > I was wondering if there is any hard and fast rule or if it's just a matter
          > of playing around and discovering ones preferences.[/color]

          If you are learning, buy a good book. See, for example:

          404 - Page Not Found
          http://www.upsdell.com/BrowserNews/res_css.htm

            Comment

            Previous template Next
            Working...