Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Macman1993

macrumors 6502
Original poster
Nov 23, 2007
337
16
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

Picture1-10.png


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
 

eskalation.dk

macrumors member
Oct 4, 2006
73
0
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.
 

Macman1993

macrumors 6502
Original poster
Nov 23, 2007
337
16
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.
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.