CODEWITHSUNDEEP
htmlcss
Jojothesco
Jojothesco

Reputation: 21

Why is my CSS wrapper not applying to my HTML code

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;
}

Upvotes: 2

Views: 226

Answers (4)

Magicprog.fr
Magicprog.fr

Reputation: 4100

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.

Upvotes: 1

Md Johirul Islam
Md Johirul Islam

Reputation: 5162

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

Upvotes: 0

Joel Almeida
Joel Almeida

Reputation: 8037

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;

Upvotes: 2

wickywills
wickywills

Reputation: 4204

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

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

Upvotes: 0

Related Questions