When we last left off, we had the basics for the 3 columns but it lacked content. Time to change that. The content's code is pretty basic so I won't go over it, but I will go over how the CSS works a little. Since we are going to be doing the form next week I have omitted the code for that until we talk about it. For now it is just the first two columns.
<li class="columns">
<h4>Sitemap</h4>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Customer Service</a></li>
<li><a href="#">About the Company</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</li>
<li class="columns">
<h4>Recent Blog Posts</h4>
<ul class="posts">
<li><a href="#">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Maecenas ipsum dolor, viverra in porta</a></li>
<li><a href="#">Curabitur ultricies est at orci aliquam</a></li>
<li><a href="#">In in sodales neque. Ut eget felis lacus</a></li>
<li><a href="#">In hendrerit tellus</a></li>
<li><a href="#">Mauris viverra pellentesque aliquam</a></li>
<li><a href="#">Proin a tristique</a></li>
</ul>
</li>
We are going to have to do some CSS overwrites which I will explain in a minute. To do this we have assigned the unordered list the class of "posts".
Now to style the headers, lists and links.
#footer h4 {
color: #63bc46;
font-size: 23px;
font-weight: normal;
}
#footer ul li.columns ul{
margin: 10px 0;
}
#footer ul li.columns ul li{
font-size: 14px;
color: #707070;
line-height: 22px;
}
#footer ul li.columns ul li a{
color: #707070;
}
#footer ul li.columns ul li a:hover{
color: #63bc46;
}
We have not specified to take off the bullet points yet if you save and load this code they are curiously missing. This is because of the "cascading" part of cascading style sheets. If you look back at the code from the last post, we took off the bullet points off of the list elements that made up the columns. This has carried over to this list element because it is a child element of the column lists.
We have applied a grey color for the list as well as links inside that list. By browser default the links will have a underline so we don't have to specify that. A green color (#63bc46) will show on the links when the mouse moves over them.
On the second column we want not only bullet points but green bullet points. Even if we add bullet points how would we color them? After all there is no element for just the bullet points. The trick is that the bullet points are a part of the list item not the link. So what ever we make the list color, so the bullet point will be. So since the link is grey, we can make the list green and it will appear as though only the bullet point is green.
Also, to get it to apply we are going to have to do a CSS overwrite which basically means we are going to trump a cascading style with another style. This is done by a more specific selector in the CSS. We can use the class of "post" that we created in the HTML earlier as a more specific selector.
#footer ul li.columns ul.posts{
list-style: disc inside;
}
#footer ul li.columns ul.posts li{
color: #63bc46;
}
This does pose a problem though. What if in that column we wanted some text that wasn't a link. That text would show up green instead of the grey like we want. In that case we would have to surround that text in a span tag and style that. But since that isn't the case here, we don't need to take that step.
Next week we will go over the form and how to use some browser specific CSS in order to style this the way we need. As usual if you have any questions post them in the comment section.