SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Basic css not having any effect - help please

    Hi

    I've copied and pasted this code out of a book but find that the css does not chnage the colour of div segment.

    Can anyone see what is wrong ?

    <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN”
    “http://www.w3.org/TR/html4/strict.dtd”>
    <html lang=”en”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
    <title>Example 2-2</title>
    <style type=”text/css”>
    div {
    width: auto;
    <background: black;
    color: white;
    }
    </style>
    </head>
    <body>
    <h1>How will this div react to auto width?</h1>
    <div>
    <h2>Jupiter</h2>
    <p>Jupiter is the fifth planet from the Sun and the largest planet within
    the Solar System. The Romans named the planet after the god Jupiter. It
    is a gas giant with a mass two and a half times the mass of all the other
    planets in our Solar System combined.</p>
    </div>
    </body>
    </html>

  2. #2
    SitePoint Mentor silver trophy
    Rubble's Avatar
    Join Date
    Dec 2005
    Location
    Cambridge, England
    Posts
    2,392
    Mentioned
    81 Post(s)
    Tagged
    3 Thread(s)
    You had a couple of problems
    1/ Back ticks instead of " - may have something to do with me coping the code?
    2/ The extra < here <background: black;

    I also give the div a name incase you want more than one styled div on your page/site

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
     <html lang="en">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Example 2-2</title>
     <style type="text/css">
    .black {
     width: auto;
     background: black;
     color: white;
     }
     </style>
     </head>
     <body>
     <h1>How will this div react to auto width?</h1>
     <div class="black">
     <h2>Jupiter</h2>
     <p>Jupiter is the fifth planet from the Sun and the largest planet within
     the Solar System. The Romans named the planet after the god Jupiter. It
     is a gas giant with a mass two and a half times the mass of all the other
     planets in our Solar System combined.</p>
     </div>
     </body>
     </html>

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Yes, I agree with Rubble: it looks like you are either typing the double quotes improperly, or using a text editor like Word to create them (which is a bad idea). Just use straight quotes.

    Where I would differ from Rubble is in using a class name like "black", and you may decide to change the color later. Preferably, use class names that describe the purpose/role of the element.

  4. #4
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone. I think the problem with html coding is that its not validated as you go. Compare it to say c# when where you have compile it first, at least you know straight away if there is syntax problem - as it won't compile.
    Cheers
    MAtt

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jmatty2000 View Post
    I think the problem with html coding is that its not validated as you go.
    Some code editors will squeal if you type something that's not valid.

  6. #6
    SitePoint Enthusiast
    Join Date
    Mar 2013
    Posts
    64
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph. I'll just have to be careful what I type
    Cheers
    Matt


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •