Learing to Code - CSS

CSS is stylish

Monday was also my first real foray into using CSS sheets for web design and I felt that it went reasonably well. While I have never used CSS before I have had some experience with html and Object Orientated Programming (OOP) in the past. Therefore, the idea of defining your selectors in a separate file to give your site a consistent look and feel and to streamline the coding at the same time feels quite intuitive.

I followed the instruction sheet that maria gave us in class but initially I had difficulty in figuring out how to link my html pages to the CSS file we were creating. It took a few minutes of clicking through menus in Dreamweaver to figure out how to do this, but once I found the command to "attach style sheet" things went much more smoothly. It added the following to my html page:

<link href="css_sheet1.css" rel="stylesheet" type="text/css" />

and from there you can start to play around with the different parameters.

I have to say, I really like the idea of using style sheets for web design. For example, instead of defining your wrapper on each new html page you just do it once in the style sheet and call it with a few short lines of code. It also allows you to call more than one style sheet if needed, and to focus your html pages on content rather than on what goes where.

I do have one bugbear with CSS sheets and that is the inability to nest parameters. The example from class is the following:

So here we have defined various parameters about the ID nav, how the links within the navigation portion of our site should be positioned and how they should behave. This is all fine, but why can't you do the following:

These two present exactly the same information, but in the second version all the paramaters that define our links have been bunched together.  Unfortunately Dreamweaver doesn't allow this way of coding, as can be seen from the lack of pink text after the first curly bracket. Maybe the first method is better for editing in the future, but when you have a nice colour-coded GUI like dreamweaver which can keep track of your brackets and indentation, why not allow you to do it the second way?

One thing which maria made aware  to us in class was the importance of zeroing the margins of the body element of your html pages at the start of your style sheet:

Different browsers have the habit of applying different default values for these parameters if they are not explicitly set by the code, so it's good practice to add these lines to all your style sheets.

The end result of inputting the css and html coding from class was the following:

Which produced the following output:

 The selectors that we defined ourselves have been highlighted. The web page created from the html and style sheet looks quite rudimentary at the moment, but already we have something that looks not so dissimilar to the sites we surf every day. Compare my first effort to the front page of bbc news:

Obviously the BBC's page has a lot of content requiring multiple style sheets and more selectors than my site will need, but even so, I can begin to see how css sheets could be made to produce a page like this.