Why is my CSS wrapper not applying to my HTML code

Question

Ok, so I'm making a joke website about a couple of my friends in my computing class and I have reached a problem, the wrapper in my CSS code is not applying to the webpage. The wrapper applies to other pages on the site, however it will not apply to this page, here is the HTML code:

<html>    
    <head>
        <link href="main.css" rel="stylesheet" type="text/css>

        <title>Ways that George is physically better than Adam</title>

    </head>

    <body>

    <div class=" wrapper ">
    <h1> There are many ways that George is physically better than Adam </h1>

    <div class="article ">
    <ul>
        <li>George isn't as fat as Adam.</li>
        <li>George has better hair than Adam.</li>
        <li>George has a manly assortment of stubble.</li>
        <li>George is just more attractive than Adam.</li>
    </ul>

    <div class="littlearticle ">

    <p> <a href="George is better than adam.html "> Click here to return to    the homepage. </a> </p>
    </div>
    </div>
    </div>
</html>

and here is my CSS code

body {
   text-align: Left;
}
.wrapper {
    width:40em;
    text-align; left;
    margin-left: 150px;
    margin-right: 150px;
    padding: 8px;
}
h1 {
    color:red;
    background-color;white;
    font-family:tahoma;
    border-top:red 2px double;
    border-bottom: red 2px dashed;
    padding: 8px;
}
.article {
    color:blue;
    font-family:consolas;
    font-size:medium;
    background-color:yellow;
    padding;
    8px;
}
.littlearticle {
    color:black;
    font-family:consolas;
    font-size:medium;
    background-color:red;
    padding: 8px;
}

<link href="main.css" rel="stylesheet" type="text/css> shouldn't it be <link href="main.css" rel="stylesheet" type="text/css">? also you are missing the closing body tag. — Joel Almeida
– Joel Almeida, Commented Jul 2, 2015 at 8:52

Joel Almeida · Accepted Answer · 2015-07-02 08:57:18Z

2

Four little mistakes :

1

<link href="main.css" rel="stylesheet" type="text/css>

Should be:

<link href="main.css" rel="stylesheet" type="text/css">

2

Missing the closing body tag: </body>

3

Under the .article you have padding;8px;, should be padding: 8px;

4

Under the .wrapper you have text-align;left;, should be text-align: left;

answered Jul 2, 2015 at 8:57

Joel Almeida

8,0775 gold badges27 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jojothesco Over a year ago

Thank's a lot, sorry for my dumb mistakes!

Magicprog.fr · Accepted Answer · 2015-07-02 09:02:36Z

1

A lot of your CSS rules are invalid:

The CSS Syntax is :

rule: property;

and never:

rule; property;

So you can correct :

text-align; left; by text-align: left;

background-color; white; by background-color: white;

padding; 8px; by padding: 8px;

On top of that, your CSS link is invalid, and you should close your ":

<link href="main.css" rel="stylesheet" type="text/css">

Also you missed the closing tag </body>

And a little other thing, your css property should be lowercase in:

text-align: Left; should be text-align: left;

This doesn't affect your css, but it's a good practice to have.

edited Jul 2, 2015 at 9:02

answered Jul 2, 2015 at 8:57

Magicprog.fr

4,1204 gold badges29 silver badges35 bronze badges

Comments

wickywills · Accepted Answer · 2015-07-02 08:54:05Z

0

You're missing a closing double-quote after "text/css"

<link href="main.css" rel="stylesheet" type="text/css">

answered Jul 2, 2015 at 8:54

wickywills

4,2544 gold badges40 silver badges55 bronze badges

Comments

Md Johirul Islam · Accepted Answer · 2015-07-02 09:02:26Z

0

You have few syntax errors as some already mentioned above.

body {text-align: left;}

.wrapper{
width:40em; text-align:left;
margin-left: 150px; margin-right: 150px;
padding: 8px;

}

h1 {
color:red;
background-color:white;
font-family:tahoma;
border-top:red 2px double;
border-bottom: red 2px dashed;
padding: 8px;

}

.article {
color:blue;
font-family:consolas;
font-size:medium;
background-color:yellow;
padding:8px;

}

.littlearticle {
color:black;
font-family:consolas;
font-size:medium;
background-color:red;
padding: 8px;

}

Also correct the reference in the html page as following

<link href="main.css" rel="stylesheet" type="text/css">

Here is the JSFiddle Working for me

answered Jul 2, 2015 at 9:02

Md Johirul Islam

5,1924 gold badges28 silver badges57 bronze badges

Collectives™ on Stack Overflow

Why is my CSS wrapper not applying to my HTML code

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related