CSS problems

Discussion in 'Web Design and Development' started by Macman1993, Jun 1, 2009.

  1. Macman1993 macrumors 6502

    Macman1993

    Joined:
    Nov 23, 2007
    #1
    Ok to start I am a total css noob, I have been doing it for about 30 min. I know html and am fairly decent at following instructions. However CSS has me confused and I don't think this is my fault that things are going wrong. So I have my style sheet which is properly linked because it worked originally at first. The page I was making (just me testing my ability to make styles and style classes) worked just fine when I had only one style there. Once I added a second things got really weird. The computer just started ignoring what I was adding or taking away from the css page and kept it like this, I can completely remove the stylesheet from the page and it somehow still thinks its there, what is going on?

    Heres the code I have down so far (like I said I'm just trying things out so its nothing special).

    This is my html code
    Code:
    <html>
    <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    <i>I should be green and centered</i>
    <p>I should be centered and red</p>
    
    
    </html>
    
    And here is the css that is in the stylesheet

    Code:
    i {color:green;text-align:center}
    
    p {text-align:center;color:red}
    
    
    And all of that somehow comes out to this

    [​IMG]

    If anyone could give me help on what is going on I would really appreciate it, and maybe it is me that is somehow messing up, I don't think I am but I am so new to this maybe I am just not following a big rule of css. Please help
     
  2. eskalation.dk macrumors member

    Joined:
    Oct 4, 2006
    #2
    Hi, first and foremost you are lacking a body tag in your html. secondly, your css lines should always end with ;, like this:

    Code:
    i {
    color:green;
    text-align:center;
    }
    
    p {
    text-align:center;
    color:red;
    }
    
    That won't make a difference in your code though, it will make your markup correct thouch. The reason why your css isn't working is that the p element is a container for text which can be centered, as the text is inside a block. The i element does not contain the text inside a box, it just centeres it. so. what you need to do is this:

    Code:
    <html>
    <head>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    
    <p><i>I should be green and centered</i></p>
    <p>I should be centered and red</p>
    
    </body>
    </html>
    
    as for your css you would do this:
    Code:
    p {
    color: red;
    text-align: center;
    }
    
    i {
    color: green;
    }
    
    this should work as both paragraphs of text is now wrapped in a box. :)
    There are different and depending on what you wan't to do better solutions, but this works best for your current markup, unless you begin styling your body tag.
     
  3. Macman1993 thread starter macrumors 6502

    Macman1993

    Joined:
    Nov 23, 2007
    #3
    Thanks so much, it turns out my tutorial I was reading was incorrect which is the reason it was marked up wrong and I was just an idiot and forgot the <body> tag haha not sure how I managed that one but I guess when I reread it I just saw what I wanted to. Thanks a lot for the help.
     

Share This Page