Currently I am trying to implement my first HTML5 application, but I am having some general issues regarding HTML/CSS, specially using header tag.
Usually I put the main tag at the beginning of the CSS rule, therefore I could control each property and to don't mix any of them.
Right now I have this CSS code:
header div.followUs { float:right; font:Georgia, "Times New Roman", Times, serif; color:#B2B2B2; font-style:italic }
header div.followUs a,a:link,a:active,a:visited { color:orange }
header nav { clear:right; float:right; margin-top:20px }
header nav ul li { float:left; margin-right: 25px; text-transform:uppercase; font-weight:bold }
header nav ul li:last-child { margin-right: 0 }
header nav ul li a { text-decoration:none }
And my HTML code is:
<header>
<div class="header-inner clearfix">
<h1 class="logo">Client KickOff</h1>
<div class="followUs">Segue-nos no <a href="#">Twitter</a> and <a href="#">Facebook</a>.</div>
<nav>
<ul>
<li><a href="/html/">Notícias</a></li>
<li><a href="/html5/">Quem Somos</a></li>
<li><a href="/css/">Os Nossos Produtos</a></li>
<li><a href="/css3/">O Nosso Portefólio</a></li>
<li><a href="/js/">Contacte-nos!</a></li>
</ul>
</nav>
</div>
</header>
It is giving the same color as the div with the followUs class applied to the navigation items.
Any ideias?
header div.followUs a,a:link,a:active,a:visited { color:orange }
will literally mean this:
header div.followUs a { color: orange }
a:link { color: orange }
a:active { color: orange }
a:visited { color: orange }
So your links in the navigation are matching to the single a:link
rule, since it is not specified to be within the header and followUs division.
You need to have the header div.followUs
in front of each of the a:
selectors. Although, you should just remove the extra a:
selectors because the initial header div.followUs a
will already cover all forms.