Week 3

Alright. So the CSS assignment was enjoyable while time consuming. I'd never done much CSS but I'd always read that it should be done without tables (save data representation). Moving away from tables wasn't something I expected to be easy, but I figured if I wanted to really learn something I'd better try. So, instead of simply layering a couple style sheets over my preexisting page from A1, I went with all new--although most of the content is the same with some minor updates and adjustments. At this point, I didn't really know where to start. I had to think about how I needed the HTML to be laid out so that it could work best with CSS. I decided to try to find some inspiration, and what better place to go besides CSS Zen Garden? At that point I wasn't interested in the styling, but the basic HTML structure a site should have so that it can be easily styled multiple times just as they do at Zen Garden. After perusing the sample code, I figured I basically needed a main container, header, body, and footer. Easy sailing from there.

The hard(er) part was next. As I'd never done CSS to lay out a page, I didn't know where to start. Again, I looked to Zen Garden for inspiration. Most of the styles there have heavy use of graphics--I didn't have the time to create fancy background, logos, containers and what-not so I looked for the most basic. I got a sense of how I wanted my page(s) to look and began one step at a time.

Because I'm so fond of rounded corners I knew my site needed them. I saw that there were two ways to do it: with corner images or a purely CSS code. I decided to use the code (-moz-border-radius) for time's sake. I guess that was really the only fancy thing I put in my site.

One issue I did come across was the inability to extend a column all the way down to the bottom or footer of a page. The columns tend to only go as far as the content goes and there's no real individual property that one can use to extend it. Confronted with this problem I consulted the power of Google. I came across a few answers. One of them used the height property in the parent and child divisions and this would've been easiest had I known about it before I wrote my HTML. I instead settled on the "faux column" method which uses a vertically repeating image of the column(s). So, I tried this method and it worked--my column appeared to extend to the footer. Accomplishing this little feat alone made me more proud than all the rest I'd already done.

I could have gone on tweaking my styles for ages, but the assignment was already a bit late and I had to submit it. I hope to try more things on my own and in the next assignment. I'm looking forward to implementing some JavaScript in someway and possibly create a nice photo gallery or little doohickey.

So, the required part of this entry: the difference between class and id. From what I understand, a single class is used repeatedly on a page. For example, if you have a styled portion of text, and want that same style applied to another portion on the page, you'd use a class and apply it to both. An id only occurs once on a page. I think it's safe to assume layout divisions like header and footer will only occur once on a page so then id is most appropriate for them.