Welcome to the CSS portion of the series where we’ll style the markup for our website using CSS.
To get started, we’re going to want to bring up our mockup for reference throughout the lesson, and we’ll also open our index page by dropping the project folder into Sublime Text and navigating to the file through the sidebar.
So with our index page on hand, it’s now time to create a new file that we’ll use as our stylesheet, and we’ll save this in our project folder as style.css. In doing so, you’ll note that the file is automatically added to our sidebar navigation, and this area is a great feature of Sublime Text that will allow us to quickly navigate through our project files.
Now, as we’re using an external style sheet for our project, we need to link our CSS to our HTML, so going back to our index page, we’ll work within the head of our document to introduce a link tag, and taking advantage of Emmet, we can type link colon css, and then hit [TAB] to produce a link that we can then direct to our style.css file.
With our files linked together, it’s now time to bring up our page in the browser as this will allow us to preview our changes as we progress through our stylesheet. Dropping our index file into Chrome, we’re also going to enable LiveReload so that we can view our updates in real time.
Moving back to Sublime Text, and looking over our index file, the first tag that we setup is that of our container, and this is a good place to start.
Drawing from our mockup, you’ll remember that we decided on a width of 1000px for our website. So moving to our stylesheet, we’ll open our container class, and declare a maximum width of 1000px, and in saving our document, LiveReload updates our web preview accordingly.
Reviewing our site, we need to center our page in the browser. To do that, we can declare a margin of 0 auto, where the first parameter, 0, indicates that the top and bottom margins will be set to 0, using auto tells the browser to automatically determine the left and right margins, and centers our page.
With our page centered, the next area to focus on is that of our top navigation, and the first thing we’ll want to do is remove the underline from our links. To do that, we’ll move to our stylesheet, and using the hyperlink selector, we’ll declare text-decoration none.
Previewing our changes, we’ll now make our first amendment to the design of our website. In the mockup portion of the series, we didn’t indicate any hover state for our links, but this is definitely a feature we’ll want to include. So designing right in the browser, we’ll open a hyperlink hover selector, and declare a color of black. Much better.
Further assessing this area, the nav is a bit cramped, and we’ll want to give this element some room to match our mockup. To do that, we’ll take advantage of the top-nav class, and introduce a margin of 20px to both the top and bottom of this element. Taking advantage of the margin shorthand property, we’ll leave the second parameter at 0 to ensure that both our right and left margins remain unchanged.
Next, we’ll want to address the individual links that compose our navigation. Consulting our mockup, the links each have some spacing between them, as well as vertical lines.
So moving back to our stylesheet, we can target these links directly by following our top-nav class with the hyperlink selector. Working on our links, we’re going to use some padding to produce that spacing. Now why not use a margin, well, where margin is applied to the outside of our element, and affects the spacing between other elements, padding is applied to the inside of the element and controls how far the element’s content is away from the border.
So as the first parameter controls both our top and bottom padding, we’ll set that to 0, and focus on the left and right padding, which we’ll set to 20px.
Next, we’ll want to introduce those vertical lines that we have separating our links. So let’s declare a left border of 1px solid with a color of black, and in this case, the first parameter refers to the width, and the second refers to just what kind of border we want to display. Where other options include dashed and dotted.
With our borders in place, our links are coming together, but you’ll note that we’re having some issues with our first link. We want to remove that first vertical line, and also make sure that our nav is flush with the left-hand side of our page.
Thankfully, we can target that link directly by opening a new top-nav selector, and amending first-child to the hyperlink. This will work to specifically target that first link inside of our nav, and we can then remove the border, and set the left-padding to 0.
Great. With our navigation in place, it’s time to focus on that banner. Setting up a selector for our class, we’re going to declare a height of 200px to match the rough selection we drew in our mockup, and we’ll set the background to our chosen color.
.container {
max-width:1000px;
margin:0 auto;
}
a {
text-decoration: none;
}
a:hover {
color: #000;
}
.top-nav {
margin:20px 0;
}
.top-nav a {
padding:0 20px;
border-left:1px solid #000;
}
.top-nav a:first-child {
border: none;
padding-left:0;
}
.banner {
height: 200px;
background: #007ab3;
}
Moving down the page, the next area of our site is that of our main section which is composed of our primary and sidebar content.
Starting with our primary content area, you’ll remember that we decided on a width of 650 pixels, or 65% of our container, and we’re going to opt to go with the percentage based width as this will allow us to create a fluid design that will work with our maximum-width to respond to the dimensions of the browser window.
So opening up a selector for content, we’ll declare a width of 65%, and to ensure that this portion of our layout is left justified, we’re going to use the float property to declare a float of left.
You’ll also remember from our mockup that we reserved 5% of our page space as a margin between that of our content area and sidebar, so we’re going to apply a right margin of 5% to set that up.
Following the content area, we can setup our sidebar by using the same process. We’ll set a width of 30% to use the remainder of our container, and to ensure that our layout remains consistent, we’ll also float this element to the left.
.content {
width: 65%;
float:left;
margin-right:5%;
}
.sidebar {
width: 30%;
float: left;
}
Saving our stylesheet, and moving to our web preview, you’ll see that our page has really come together, but there does seem to be an issue with the footer.
It appears to be stuck in our sidebar when we really want it to clear the main content area and extend across the entirety of our page.
Now the issue here lies in our floated elements, as floated objects don’t shape their container, whenever you apply this property to an object, the parent element runs into an issue calculating its height. In our case, the parent element is our container, and it’s basically collapsed upon itself which causes all of the elements following our floated objects to wrap around this content.
So to resolve this issue, we’re going to introduce a clear fix. Where in setting up a selector with a declaration of clear: left, we can force all of the content following our fix to render below it.
We can then move to our HTML and introduce the clearfix following our floated elements. Leaving the div empty, we’ll close it out, and in checking our preview, you’ll now see that our footer is right where we want it to be.
.clearfix {
clear:left;
}
Well, we’ve come a long way, and with our website now matching our mockup, you can really see how after starting with a simple wireframe, we were able to transition to a working site.