Coolie on a road in Java, 1946 (from The Commons)
Glad to be doing this last CSS post. Like I've said before, I'm sure I'll be revisiting CSS after this, but not in an organized, step by step way. I've been through a good assortment of the basic stuff that can be done with CSS as well as a few more interesting aspects (like Sprites, coming up). There are all sorts of fancy CSS tricks, particularly with the new stuff in CSS3. Those are the kinds of things I'm looking forward to talking about in the future. For example, I read a neat post about advanced shapes you can make with CSS3 (I can't seem to find the link though).
Back in the days before everyone was on broadband, you had to be super careful to keep your pages' file sizes small. Too many images and/or too long a page and the many users on 33.6-56k modems would be forced to sit through minutes of loading for every page. The issue still exists today, but it's now more of an advanced usability, SEO and high volume website concern.
Katoomba Falls (from The Commons)
I'm coming to the end of what was covered in the w3schools CSS Tutorial. As I mentioned in the last post about learning CSS, there are only a few more things I'd like to cover. In this post I'm going to cover the navigation bar example and image opacity parts of CSS Advanced.
CSS Navigation Bar Example
The CSS navigation bar example is a great way to show how CSS allows you to create quite visually appealing designs without the use of images. By combining a variety of different basic techniques that have previously been covered, quite a nice looking navigation bar is created. Instead of recreating it here, head over to the page using the link above and take a look for yourself.
Possum Camera! (from The Commons)
The "CSS Advanced" section of the w3schools moves on to a less structured format. It covers a variety of different concepts. Some of these I thought more interesting than others. I'm going to touch on a variety of points that I found useful, but not go through all of it in detail.
Grouping and Nesting
Grouping and Nesting are pretty important. It's quite likely that in a set of styles for a site, you will want to set the same settings for a variety of different selectors (tags). By adding multiple selectors separated by commas, you can apply the subsequent styles to all of the selectors.
Wombat or something on a bike with a girl (from The Commons)
Understanding the CSS "Box Model" is quite important. As I mentioned in the previous Learning CSS post, webpages are generally built by using sets of nested table-like elements using <div> tags (replacing HTML tables for this purpose). Many different elements can make use of the same box model settings. Margin, border and padding are the three main settings that are used to achieve just the right spacing in layouts.
The w3schools box model intro page has a very helpful image that shows how margin, border and padding work. margin is the outermost area. Adjusting the margins changes the empty space around the border. The border is exactly that. You can adjust the size and visibility of the border, as well as apply various outline styles to appear around the border edge (among other things). Finally, the padding is the empty space within the confines of the border, spacing out the actual content from the border itself.
Election Night 1931 in Wellington, NZ (from The Commons)
Jumping back in where I left off in the last Learning CSS post, I still need to cover the basic styling options for links, lists and tables. At this point what I'm covering is still quite simple to learn and is partially review for me.
The basic styling you can do for links using CSS is to change the link colour, visited colour, hover colour and active colour. Traditional website usability wisdom said that you should never change the colour of links because the majority of users relied on the colour as an indicator of what is clickable. To the delight of usability concious website designers everwhere, this is no longer the case. Today you can get away with using pretty much any colour for links, provided it stands out in contrast to the other colours used in your overall site design.
Swedes in Hats (from The Commons)
My continued forays into the world of CSS had me learning an array of basic styling options. As mentioned in an earlier post, many of these style options were previously done with HTML. CSS took over these functions and provides a much wider array of options and removed the need to setup styles individually for every instance.
The W3 Schools tutorial covers 6 elements in the basic styling overview: Backgrounds, Text, Fonts, Links, Lists and Tables. Having had to deal with some aspects of site updates in previous years I ended up learning bits and pieces of the syntax for these, but never went over it in a methodical way. As would be expected, the basic styling is all pretty simple and doesn't take long to learn. With that in mind, I'm going to cover each aspect only briefly, with a little extra on a few interesting aspects added in.