Currently, I am in the process of creating my first HTML5 application but encountering some challenges with HTML/CSS, specifically with the header tag.
I typically start my CSS rules by targeting the main element to control each property individually and prevent any mixing.
Here is the CSS code I am currently using:
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 here is my HTML code:
<header>
<div class="header-inner clearfix">
<h1 class="logo">Client KickOff</h1>
<div class="followUs">Follow us on <a href="#">Twitter</a> and <a href="#">Facebook</a>.</div>
<nav>
<ul>
<li><a href="/html/">News</a></li>
<li><a href="/html5/">About Us</a></li>
<li><a href="/css/">Our Products</a></li>
<li><a href="/css3/">Our Portfolio</a></li>
<li><a href="/js/">Contact Us!</a></li>
</ul>
</nav>
</div>
</header>
The navigation items are taking on the same color as the div with the followUs class. Any ideas on how to resolve this?