CODEWITHSUNDEEP
htmlcss
ppreyer
ppreyer

Reputation: 6837

Twitter Bootstrap and Formatting a header class in CSS

I'm trying to replicate a build your own resume project from CodeAcademy, but I am having some trouble styling my header. For some reason it will only put my desired background color around my h1 and h2 tags but not around my dl tag. Also the twitter bootstrap link that I include doesn't work on my page. Any help on either problem would be greatly appreciated!

Here is my HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>
       Parker Preyer's Resume
    </title>
    <link rel="stylesheet"href="style.css" />
    <link rel="stylesheet"    href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
  </head>
  <body>
    <div class="header">
            <h1>
                          Parker J. Preyer
                        </h1>
            <h2>
                          "I'm learning how to design websites!"
                       </h2>

            <dl>
            <dt>
                          Email
                        </dt>
            <dd>
                          [email protected]
                       </dd>

            <dt>
                          Phone
                        </dt>
                <dd>
                          919-740-4206
                        </dd>

            <dt>
                          Address
                        </dt>
            <dd>
                          1042 Clay Street, San Francisco, CA
                        </dd>
          </dl>
    </div>

  </body> 
</html>



Here is my CSS: 


body, .details {
    background: #ccc;
}

.header {
    background: #222;
    color: white;
}

dl dd {
    color:white;
}

.header h1 {
    font-size: 42px;
}

.header h2 {
      font-family: "Georgia", Serif;      
      font-weight: normal;
      font-style: italic;
      color: #666;
}

Upvotes: 1

Views: 5603

Answers (1)

frontendzzzguy
frontendzzzguy

Reputation: 3242

Firstly I would begin with how you call in your css files it should read like this

<link rel="stylesheet"  href="style.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />

and not 

<link rel="stylesheet"href="style.css" />
<link rel="stylesheet"    href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />

I would then add the background colour to your dl by doing the following

dl {
    background: red; /* or whatever colour you need */
    }

Upvotes: 2

Related Questions