Week 3: CSS!

Click on the images to make them larger.

The code for this week is here: Week 3 Code

This week we started to build a little bit on the things we used last week, styling HTML with CSS. We started from scratch in our endeavor to build a complete website.

You'll note that all of the CSS code I checked in has lines like this: /* comments */ - this is a CSS comment, I will explain comments of all sorts next week. The comments should help explain what each style block accomplishes.

We started with an empty template and started building what will be the navigation and general layout for the site, we created a <div> tag that has a class of .container. This div will be 1024 pixels and be centered in the middle of the page.


From there, we started to build a navigation system, which is a <ul> tag with <li> tags inside it. 


This <ul> has an id of "nav", when referring to anything with an id in CSS, remember that the pound sign (#) is used to represent ids in css. 

We started to create style blocks for the nav, and this is the complete code:

The "#nav" selector adds a 1 pixel grey border to the table, and makes the display inline-block so that it will stretch to fit the components inside, Also did a reset of the margins and padding.


At that point, it was easy to style the <li> tags, which are list items. We float these left which means they will be next to each other, remove the default tag decoration which is a disc, add a border and some margin and padding to make it easier to read. We also change the color of the links inside the <li>, which is what the #nav li a selector specifies. The one thing you need to remember is that id = #, class = . with css. Every CSS block is the same, each block specifying styles for elements and determining the styling in cascading order, the last style for a particular element is the one that is used by the browser. The last block of css,  #nav li a:visited specifies that the font for a visited link be red.

We then moved on to the chunk of HTML that will display the products for our imaginary store. I briefly showed everyone how to build a table in Week 1 but it's a lot to take in so repetition is what makes this process easier.


And this is the main structure for our product listing. We will add more next week. Note that we used the <table>, <thead>, <tbody>, <tr>, <td>, <th> tags to create this table. It also has repeated <h1> tags inside the cells and images.