Learning CSS – Part 8: Image Sprites and Media Types
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).
Image Sprites
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.
When a page is loaded, the first aspect to be retrieved is the page's source code itself. In the source of the average webpage are calls to various external files such as JavaScript scripts, CSS files, and images. Each of these requires its own call to the server to download that file before the page can be displayed (generally at least, but not always). When you've got a handful of different external scripts, CSS files and a whole bunch of images to load, you're faced with quite a few separate requests to be made. These requests account for a significant portion of the load time for a page.
Learning CSS – Part 7: Navigation Bar and Image Opacity
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.
Learning CSS – Part 6: Moving Past the Basics
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.
Learning CSS – Part 5: Box Model
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.
Learning CSS – Part 4: Basic Styling continued
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.
Links
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.
Learning CSS – Part 3: Basic Styling
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.
Recent Posts
- New Computer! – Part 2: Videocard, HDD and Errors Galore
- New Computer! – Part 1: The Initial Build
- UTM Parameters for Better Online Marketing Tracking
- What Happened? Formerly “Learning PHP – Part 4″
- Learning PHP – Part 3: Variables
- RT @MajesticSEO: Flow Metrics - How they work and how to use them [Infographic & Video] http://t.co/SYhUeEIAR8 http://t.co/m4rKkpu8fk
- Just saw an unnatural link warning for the first time in WMT. Not my doing; low quality directories submitted to by a previous agency.