Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Lise Le Petit
2,637 PointsWhat is wrong with my H1 for good sake !
Ok, guys, I'm doing a website for my mother-in-law.
Everything is ok, except that I cannot get ride of the blue color of my H1.
Here is the draft (don't laugh, there is still A LOT to do, I know): http://web.anc4pa0k8v.treehouse-app.com/
And I cannot get rid of the margin under, between my logo and my nav.
<header>
<div id="logo">
<a href="index.html" id="logo">
<h1>Stomatolog <wbr>W.Klementowicz</h1>
<h2>Limby 4 (Weso?a) - 05-077 Warszawa</h2>
<h2>506 055 166</h2>
</a>
</div>
<div id="navigation">
<nav>
<ul>
<li><a href="#oferta-stomatologiczna">Oferta</a></li>
<li><a href="#kabinet">Nasz Kabinet</a></li>
<li><a href="#kontakt">Kontakt</a></li>
<li><a href="#directions">Directions</a></li>
</ul>
</nav>
</div>
</header>
and in my css, I have the following. I think I may have misused the cascading thing but I'm unexperience on this
/****/
GENERAL
*******************/
ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
/* PHOTOS */
.photo {
max-width: 250px;
display: block;
margin: 15px auto 0;
}
/* LINKS */
a {
text-decoration: none;
}
a p {
text-align: justify;
}
/* FONTS */
body {
font-family: 'Droid Sans', sans-serif;
}
h1, h2, h3, h4 {
font-family: 'Lora', sans-serif;
}
nav {
font-family: 'Lora', sans-serif;
}
/* SIZE & ALIGN & MARGINS*/
h1 {
margin: auto auto 0 5px;
}
h2 {
font-size: 0.8em;
margin: 0 0 0 15px;
}
h3 {
font-size: 2em;
display: inline-block;
text-align: center;
display: block;
margin: 100px auto 0;
}
h4 {
font-size: 1.1em;
}
p {
font-size: 0.85em;
}
/* NAV */
nav {
font-size: 2em;
display: inline-block;
text-align: center;
display: block;
margin: 100px auto 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/*******************
COLORS
*******************/
body {
background: #f0f0f0;
}
header, footer {
background-color:#63993D;
color: #fff;
}
nav, h3 {
background-color: #2D4C17;
color: #fff;
}
h4 {
color: #63993D;
}
/* NAV */
nav a, nav a:visited {
color: #fff;
}
nav a.selected, nav a:hover {
color: #32673F;
}
a p{
color: black;
}
/*******************
HOME
*******************/
.home-photo {
max-width: 500px;
display: block;
margin: 100px auto 0;
border-radius:50%;
}
#home-description {
display: block;
margin: 0 15px 30px 15px;
border-radius: 100%;
text-align: justify;
}
/****/
Any hint of where is the problem?
2 Answers
Stone Preston
42,016 Pointsyour h1 is inside a link, so that blue color is just the default color of links. you could try using
a:link h1 {color:#FFF;} /* unvisited link with h1 descendant*/
a:visited h1 {color:#FFF;} /* visited link with h1 descendant*/
to set the color to your liking
Kenneth Love
Treehouse Guest TeacherJust skimming over it, I don't see anywhere that you're setting the color of a elements (which your <h1> is wrapped in).
(Also, did a minor edit to your post so it would display the code more correctly)
Lise Le Petit
2,637 PointsSo I should just add a color setting for h1, right?
Kenneth Love
Treehouse Guest TeacherLise Le Petit : since the H1 is inside of an A, you'll probably want to specify a color rule for either a or a h1 (the latter only applies to H1 elements inside of an A).
Lise Le Petit
2,637 PointsLise Le Petit
2,637 PointsBut the fact that I add a color for the header does not impact the h1 already? I though the element were taking the settings of its parents