Exercise: Pulling it all together
Alright, our final exercise is to upgrade all our test site pages (index.html, privacy.html, about.html, contact.html) to use CSS layouts. To give you an idea of what we expect, we’ve provided a sample index.html and style.css that you can copy or build on below.
Once again we start with our sketch: You will notice we’ve made some refinements to our last layout and added some actual content.
It may be a valuable experience for you to try to spend some time to recreate this on your own. But if you’d like to skip ahead, you can just read over our example files below:
The final html page can be seen here. Just view source to see the html.
The CSS file can be downloaded from here. Drag it into your text editor to take a look at it.
- If you look at the html file, you’ll notice that it’s impossible to guess what the final page will look like because all the styles are in the CSS file. This is ideal, because it means a designer can style your site without touching the content.
- The stylex.css file has a few comments in it that you may want to read.
- We switched to a fixed (vs fluid) layout so that we can specify pixel widths and heights instead of percentages. This gives us complete control of the layout.
- To use a fixed layout, we need to create a “backboard” on which to peg all our containers. Simply create a div that holds everything in the body tag, then copy the body and backboard CSS styles and you’ll have it.
- While you’re experimenting on your CSS, remember that you don’t need to upload to your server to check things out. You can test your changes from your computer.
Congratulations! You’ve made it to the end of this lesson. CSS is a very deep topic, and we glossed over many of the details, but we believe we’ve given you enough tools to accomplish most if not all of what you’ll want to do. Once you upgrade your test site, give your coach a shout, and she’ll be glad to look over your work!