www.webdeveloper.com
Results 1 to 5 of 5

Thread: can someone please explain why my divs aren't getting modified by the css file?

Hybrid View

  1. #1
    Join Date
    Jul 2014
    Posts
    44

    can someone please explain why my divs aren't getting modified by the css file?

    I'm completely new, so I'm learning the very basics, and I've encountered a problem.

    I put div tags around an h1, paragraph, and image element group. when i go to css, i type div{margin:50px; background:a9a9a9;}

    absolutely no effect is taken. however, when i do each element individual in the same css file, it works! so i know the file is properly linked to the html.

    the html portion:

    </head>
    <body>
    <div>
    <h1>Hello World</h1>
    <p><b>This</b> is a test for the <em>Learning</em> of about divs.
    <a href="index.html">Click here to go back to homepage</a></p>
    <h2>List</h2>
    <img src="images/new-goldplatedemblems-ser-i.jpg" width="225px" height="125px" alt="gold plated emblems" />
    </div>

    in the css:

    a {
    color:red; text-decoration: none;
    }

    h1{
    color: green;
    font-family: sans-serif;
    margin-left: 50px;/*pixels, percentages, and ems*/
    }


    /*p, h1, img{
    margin-left: 50px;*/
    }

    div{
    width: 500px;
    margin:auto;
    background:#a9a9a9
    }

    PLEASE someone tell me what I'm doing wrong.

  2. #2
    Join Date
    Jul 2014
    Posts
    44
    oh, and i'm using sublime text 2 for windows.

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    Hi there conchairtoe,

    your problem is caused by your faulty commenting out.

    This...
    Code:
    
    /*p, h1, img{
    margin-left: 50px;*/
    }
    ...should be...
    Code:
    
    /*p, h1, img{
    margin-left: 50px;
    }*/

    coothead

  4. #4
    Join Date
    Jun 2014
    Location
    Cairns - Australia
    Posts
    81
    Hey Con,

    You've got a right mix of bits and pieces there mate .... its a bit confusing but I think this will help?

    1.
    background:#a9a9a9 (is missing a ";")

    2.
    /*p, h1, img{
    margin-left: 50px;*/
    }

    On top of cootheads remark.. It is a comment not code!... /**/ holds comments ie.. /*note to self*/ and can be used anywhere on a page having no impact on it!... So the above /*pixels, percentages, and ems*/ is just a comment you could happily delete...

    Heres a quick cleaner example using the same code...

    Code:
    <!doctype html>
    <head>
    <meta charset="utf-8">
    <title>Div Demo</title>
    
    
    <style>
    
     /*telling all the parts to be 50px left in 1 hit*/
    p, h1, h2, img{ 
    margin-left: 50px;
    }
    
    a {
    color:red; text-decoration: none;
    } 
    
    h1{
    color: green;
    font-family: sans-serif;
    }
    
    
    /* added to change LIST to blue, sorry Im colour blind could make out the green red : ) */
    h2{
    color: blue;
    font-family: sans-serif;
    }
    
    div{
    width: 500px;
    margin:auto;
    background:#a9a9a9;
    }
    
    </style>
    
    </head>
    <body>
    
    <div>
    
    <h1>Hello World</h1>
    <p>
    <b>This</b> is a test for the <em>Learning</em> of about divs.
    <a href="index.html">Click here to go back to homepage</a>
    </p>
    
    <h2>List</h2>
    
    <img src="images/new-goldplatedemblems-ser-i.jpg" width="225px" height="125px" alt="gold plated emblems" />
    
    </div>
    
    </body>
    </html>
    Of course you can dump the <style> tags and more to your external file... hope it helped...

    I left you 1 small challange.. Both h1 & h2 have "font-family: sans-serif;".. It could be 1.. just to get you thinking about efficient clean code... (clue - body font-family)... Luck

  5. #5
    Join Date
    Jul 2014
    Posts
    44
    Quote Originally Posted by Code-tard View Post
    Hey Con,

    You've got a right mix of bits and pieces there mate .... its a bit confusing but I think this will help?

    1.
    background:#a9a9a9 (is missing a ";")

    2.
    /*p, h1, img{
    margin-left: 50px;*/
    }

    On top of cootheads remark.. It is a comment not code!... /**/ holds comments ie.. /*note to self*/ and can be used anywhere on a page having no impact on it!... So the above /*pixels, percentages, and ems*/ is just a comment you could happily delete...

    Heres a quick cleaner example using the same code...

    Code:
    <!doctype html>
    <head>
    <meta charset="utf-8">
    <title>Div Demo</title>
    
    
    <style>
    
     /*telling all the parts to be 50px left in 1 hit*/
    p, h1, h2, img{ 
    margin-left: 50px;
    }
    
    a {
    color:red; text-decoration: none;
    } 
    
    h1{
    color: green;
    font-family: sans-serif;
    }
    
    
    /* added to change LIST to blue, sorry Im colour blind could make out the green red : ) */
    h2{
    color: blue;
    font-family: sans-serif;
    }
    
    div{
    width: 500px;
    margin:auto;
    background:#a9a9a9;
    }
    
    </style>
    
    </head>
    <body>
    
    <div>
    
    <h1>Hello World</h1>
    <p>
    <b>This</b> is a test for the <em>Learning</em> of about divs.
    <a href="index.html">Click here to go back to homepage</a>
    </p>
    
    <h2>List</h2>
    
    <img src="images/new-goldplatedemblems-ser-i.jpg" width="225px" height="125px" alt="gold plated emblems" />
    
    </div>
    
    </body>
    </html>
    Of course you can dump the <style> tags and more to your external file... hope it helped...

    I left you 1 small challange.. Both h1 & h2 have "font-family: sans-serif;".. It could be 1.. just to get you thinking about efficient clean code... (clue - body font-family)... Luck
    thank you so much, i can't believe i missed all that. must have been braindead last night.

    As for the sans-serif dealio, are you referring to the fact that i could just go

    h1,h2{font-family:sans-serif
    }
    ????

    thanks again!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles