Gen. Jose Hernandez (from The Commons)

Well, somehow I managed to let more than a month slip by without getting this post up. Between being quite busy for a lot of the time, and a bit of procrastination it was easy to fall behind. I've been making progress off and on through PHP and MySQL for Dynamic Web Sites, but with the extremely hot weather in Toronto lately, it has been difficult to get any reading done on the subway sometimes.

Scalar Variables

Variables are the subject of this long delayed post. Variables are used in PHP in much the same way that they are in virtually any other major scripting or programming language. Variables use in PHP is fairly informal. A variable's name must start with a dollar sign and be followed with a letter or underscore (e.g. $variable); beyond that it can be called more or less whatever you want. Unlike in some other languages, variables can be created on the fly, and don't have to be declared or initialized beforehand.

The equals sign (=) is used to assign a value to a variable. So $first_name = 'Mike' would assign the value Mike to the variable $first_name. A double equals (==) is used to check if two values match, an important distinction to remember, as mixing the two up will cause all sorts of issues and may not be that obvious at first.

At the most basic level, variables can contain 4 types of scalar variables: string, float (floating point number), integer or boolean.

A string can be any set of characters, like Mike in in the example earlier, or the entire text of this post, or a date among many other examples. Two strings can be concatenated (stuck together) using a period. Also, there are many functions related to working with strings in PHP.

A variable that contains only numbers can be treated as a string as well, but it differs from a variable containing a string in that there are also many number specific functions and operators as well. The obvious example is basic arithmetic, the basic operators for which are +, -, *, /, % (modulus), ++ (increment) and -- (decrement). Depending on the type of number it will either be stored as an integer or a floating point number.

Finally, boolean variables store a simple true/false value. This has many useful applications, such as storing whether or not a form has been filled out on a page that either displays or handles a form.

Some other notes about Variables

Another important basic variable to be aware of is constants. Once defined, these variables cannot have their value changed within a script. Examples of information that would be stored in constants are the site name/domain in WordPress or PHP's internal system information. Constants are differentiated from regular variables by not using a dollar sign at the start of their name.

One final aspect to mention is arrays. An array is a variable with more than one value assigned to it. Again, this is a concept that is present in other popular scripting/programming languages. I'll leave more explanation of arrays for when I'm actually working with them.

Obviously, this is a very basic explanation of variables. I'll talk more about them as I go over working through the exercises and projects I'm working on to learn PHP.

Classing Sheep (from The Commons)

I've been putting off getting my next PHP post up for awhile now. Things just seem to keep getting in the way. At work I've been either out or working through my lunches, and at home I've been busy with budget stuff and Emily looking for a job among other things. Part of it is that I wasn't able to get access to all but the most standard ports for internet traffic at work, which stopped me from doing any MySQL stuff. Anyway, I've hardly forgotten about my project. I've had an opportunity to work on some PHP stuff at work for our website. So at least things haven't fallen completely by the wayside this last couple weeks.

I figured to keep the site active I'd put this post up, and talk about a variety of random stuff in it. One thing I'd like to talk about is the pictures I've been using for posts. Anyone who has been visiting my site regularly will have noticed the old-timey photos I've been using. These are all from The Commons, a repository of public realm photography housed on flickr. It's tons of fun to peruse if you've got a bit of time to kill. All sorts of interesting archival photography. I like switching between looking up photos of famous events in history and thinking up more obscure searches to see what comes up.

In other news, I'm nearing 100,000 track plays on last.fm. There's a link to my account in the right column. I've been on last.fm for years, and it's pretty fascinating to look back through what I've listened to. All sorts of different kinds of music. Plenty of new artists I've discovered because of last.fm's recommendation engine.

On the videogame front I haven't been up to much. My grand idea to become a Master ranked 1v1 StarCraft 2 player hasn't really gone anywhere. I just can't really bring myself to commit the time and effort to go after it. I haven't even gotten myself reranked for season 2 in any bracket. SC2 isn't going anywhere though, so I could certainly get back into it this summer. Team Fortress 2 going free to play makes me want to install it again and see if Emily might play a bit too. It would be fun to play an FPS together, but it's not really one of her preferred genres. I got through some more campaigns of Shogun 2 at least, which was fun. Keep meaning to play some Shogun 2 multiplayer.

With my now unlimited bandwidth (through Distributel) I've been catching up on various shows through Netflix and other online sources. I'm on a pretty tight budget for the next while to pay off my credit cards, so not really in a position to be going out to pubs, other events, buy new videogames and so on. At least this should afford me plenty of time soon enough to push through the last half of my PHP book, get a bunch more posts up, and keep improving the site.

I suppose that's it for now. Can't think of anything else I'd like to say. The next PHP post is partially written, and I expect to finish it off this weekend, so stay tuned!

A papier-mache cow on Mrs Mellor’s car, 1944 (from The Commons)

Jumping into PHP hasn't been too hard for me. The book is aimed at people with a bit of programming/scripting experience, or at least a familiarity with the concepts. That worked just fine for me, since I have previously worked with VB a bunch when I was a teenager, and have had to hack bits of code here and there in the intervening years. So, the basics are more about learning the syntax and what sort of things you can and can't do.

Basic Syntax

To use PHP in a document, you must enclose it in PHP tags. To open a section of PHP code you use <?php, and once you've finished you close the section with ?>. You can omit the "php" part of the opening tag, but this is informal and it's not like adding three letters is that time sink.

The first exercise is, like with pretty much every tutorial I've ever done, to print "Hello World!." To print something to the browser's screen (or more accurately, the source code of the page), you use the function "echo()" (or "print()"). Obviously just printing some text to the screen is a bit pointless when you can just do it with HTML, but you have to start somewhere. So, this code, placed in the <body> of an HTML page will print "Hello world!":

<?php
echo 'Hello world!';
?>

The echo() function is just one of many that are built into PHP. You can also define your own functions, which I'll get to in a later post. As in the book, I'll continue to refer to functions with parenthesis at the end, even though not all functions actually use them. Keep in mind that the example above doesn't add any HTML. If you wanted to include paragraph or header tags for instance, you would have to place them within the single quotes in the echo function. Also worth noting now is that if you simply open the HTML file with this code in it using your web browser, the code will not run. Since PHP is a server-side scripting language, it MUST be placed on a server with PHP running on it. Then, when the file is requested, the server runs the PHP scripts and sends the output.

The next important concept is that PHP is usually white space insensitive. This is true of many languages, allowing you to space out your code in a way that makes it easy to work with, without any impact on the functionality. For instance, breaking an echo() statement over multiple lines will not change the output. What signifies the end of the statement is the semicolon.

If you want to add formatting for when the page is actually viewed in a browser, you must add the appropriate HTML. You can also add line breaks and tabs to the outputted code using \t for a tab and \n for a line break. Properly formatted HTML output will make debugging easier, so it's best not to ignore this aspect.

It's also important to comment your code for easier editing and debugging. Again, like HTML and various programming languages, PHP allows you to add comments. There are three ways to add comments (the last you'll probably recognize as being the same as in CSS):

# Comment text

// Comment text

/* Multi-line
comment text */

Finally, it's important to note that you can enclose the data to be printed (and in other situations) with either single or double quotes. The important distinction is that variables and other PHP code within single quotes WILL NOT be run. Single quoted data indicated to the PHP engine to not look for any code within to run. If you want to include variables or other code within some data, use double quotes.

If you want to include single quotes in a single quoted string, you would run into the issue that it would close the string too early. Similarly, with if you have some elements of a double quoted string that would be interpreted as code, but isn't supposed to be, you'd run into the same issue. To use these characters you must escape them by placing a slash in front ("\").

For example:

echo 'Michael\'s Blog'

I'll talk more about escaping problematic characters later on, as the characters that must be escaped change under different circumstances.

Well, I've run out of time for this post. Been working on it during my lunch break. I think this is a reasonable place to leave it. Next time I'll continue with the rest of the basic stuff I learned in the introduction section of Larry Ullman's PHP and MySQL for Dynamic Web Sites. I'm planning to move this blog to michaelramsey.ca, and then setup mokembo.com as a feed of both my posts and Emily's posts from emilyramsey.com. Then we'll also write some posts together exclusively for mokembo.com so that it has some original content still.

An Egyptian Bazaar (from The Commons)

Having finished off my HTML and CSS review and learning, I had a hard time deciding where to go next. Having already learned some JavaScript previously, I poked around in the W3schools tutorials for it, but ended up deciding to tackle PHP and MySQL.

Part of the reason I decided on PHP and MySQL is because I've had a book on the two technologies sitting around for some time. So I've been working my way through PHP and MySQL for Dynamic Web Sites (2^nd Edition) by Larry Ullman. So far, in my humble opinion, it's an excellent book. I'm finding it is getting through the material at a good pace. The progression is quite logical from one chapter to the next, and the examples are quite relevant and useful. Since the book has been sitting around for awhile, it covers PHP 5 (which is now at version 5.3.6 a.k.a. PHP 6) and MySQL 4.1 (now at version 5.5). Obviously this makes it a bit out of date, but as far as I understand, the versions that I'm looking at are both still widely used, and the newer versions aren't a whole lot different.

Before jumping into the actual work I've done in learning PHP and MySQL, I figure I should give a bit of an introduction to what exactly PHP and MySQL are and what you do with them. The book also does this, which wasn't exactly that useful for me since I've got a fairly good undstanding of many web technologies, even if I don't know the details of how to actually use them.

What is PHP?

PHP originally stood for "Personal Home Page" and was made by a fellow named Rasmus Lerdorf in 1994 to track visitors to his online resume. It's since gone through various revisions and has grown to become one of the top server-side scripting technologies, and now stands for "PHP: Hypertext Preprocessor". The fact that it's both free and easy to learn has made it a prime competitor for other server-side scripting tech like Microsoft's ASP. If you'd like to learn more, take a look at the article on PHP from Wikipedia.

A "server-side scripting language" is one whose code is run on the server before serving up a page to the client. This is quite the opposite of client-side scripting languages, JavaScript being the most obvious example. JavaScript code, while similar, is served to the client as part of the page, and the client itself will run the script(s) on a page as needed. For PHP to work however, you must have the PHP engine installed on the web server, as PHP is not meant to be sent to the client like JavaScript.

Here's a run through of what happens when loading a PHP page:
Client requests page from server
Server finds file, sees it has PHP to be run, passes to PHP engine
PHP engine runs code, creates page to be delivered to user
Server sends completed page to user to view

JavaScript on the other hand, works rather differently:
Client requests page from server
Server sends page to client
Client reads JavaScript, executing it on load or when the page is interacted with (depending on the nature of the script)

The above is obviously a simplification, but demostrates the general idea. While there is some overlap between what you can do with PHP and JavaScript respectively, the client/server distinction makes the two useful for rather different tasks. Beyond this, the two work extremely well together. For instance, I've been learning about setting up form validation (making sure that all fields are filled out and contain correct data in a form on a web page). While this can be done with PHP, because of it's server-side nature, it requires submitting the form to the server, and reloading the page if the validation fails. From a user's perspective, this can be slow and inconvenient. JavaScript is more than capable of doing form validation on the client's side, allowing it to happen immediately and not have to needlessly use up bandwidth and the server's resources.

PHP allows you to set up dynamic websites, where how a page is displayed can be altered based on user input among other factors. It allows basically static parts of the site (like the header and footer) be set in one place and called by every page on the site, greatly simplifying making changes that would otherwise have to be repeated for each page. It also has the ability to interface with a database (this is where MySQL comes in), allowing even greater automation, particularly of content management. Many popular Content Management Systems (CMS) like WordPress, Joomla and Drupal are built using PHP.

What is MySQL?

MySQL is an open-source database system. It's available at little to no cost, and offers features on par with much more expensive database software. SQL stands for Structured Query Language, and was invented in the 1970s for the Relational Data Base Management Systems (RDBMS) as laid out by Edgar F. Codd's relational model. These RDBMS use multiple tables to store various sets of data and use various methods to build a web of interrelations between the tables. The system is much more effective than a simple flat file database (basically, a spreadsheet) and offers a range of features unavailable in simpler DBs.

MySQL is one particular SQL based database system. Since I'm going to be covering how to work with MySQL and will have an intro post for it as well, I'll leave this part quite short. In relation to PHP though, it's important to note that PHP has a whole variety of functions that deal with storing and retrieving data from MySQL databases specifically. Going back to the example of the process by which a PHP page is retreived; if the PHP on the page is required to insert or read data from a MySQL database it does so at the same time as the server runs the PHP code.

I think that about covers what I wanted to touch on with this introduction. I'm looking forward to actually getting into the stuff I've been learning. I'm already almost half way through the book, so lots to cover. I've been spending more time working on the stuff than I have been updating the blog. I'm sure I'll push through and end up with a backlog of posts queued to go up though. In other news, I haven't been following through with my plan to get seriously back into Starcraft 2. Too many other things going on lately, but I did play a bunch of Shogun 2 again on the weekend.

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.

Using CSS Sprites is the solution to the image part of this problem. Often you will use the exact same set of images on many, or even of the pages on a site. Between a banner, navigation, logos and things like that could all be images. What CSS Sprites allows you to do is combine these repeatedly used images into one large image. The client then only has to download one image, and using CSS you can tell only small portions of the image to be displayed in a certain place. You can also use this for creating hover effects as well - calling one part of the image for normal display, and another when moused over. Unlike the old way of doing hover effects with HTML alone, there is no delay to load the new image when hovering.

In the w3schools CSS Sprite examples they use a series of IDs to specify a part of the one image as the background to whatever element the ID is applied to. Here's an example (click through above to see all their examples and ht helpful "Try it yourself" pages):

#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

As you can see, after the image's file name a set of pixel coordinates are listed for how far from the top left corner of the full image to start for the sprite. The first number is the horizontal coordinate, and the second number the vertical. How much of the image is shown is controlled by setting the height and width of the element that contains the image.

Media Types

I was going to talk about media types, but there isn't really a lot to say. The important thing is that you can set a series of special CSS settings for how a page will look when printed separately from how it will look when on screen. To do this you preface the CSS code with "@media print" to apply the subsequent settings to print, "@media handheld" for small devices, or "@media screen" to make sure that styles are only for screen. There are a variety of other media types, but this is largely for accessibility concerns. Take a look at the w3schools page about media types for more info.

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.

The horizontal navigation bar is set up as a basic unordered list:

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>

To turn this simple list into a horizontal navigation bar, first the list items need to be set to float left (alternately, they could be set to "inline" for almost the same effect). The unordered list is set to have no padding or margin, overflow is hidden and the list-style-type is set to none (to supress the bullet points).

The links (anchor tags) are then styled to create the right look. They're set to display as a block, given a set width, and have their text and background colours set along with some changes to center the text, add a bit of padding and remove the underline. These styles are applied to "a:link" and "a:visited", and the alternate background colour is the only setting applied to "a:hover" and "a:active" (since they otherwise inherit the "a:link" settings).

Image Opacity

Part of CSS3, and not part of the regular CSS standard yet, opacity is fairly widely supported, and can be used to make images or other elements transparent. By using "opacity:x" (where x is between 0 and 1) you can set how transparent you want something to be. 0 is completely transparent, while 1 is completely opaque. This will work for most browsers, but for IE you have to use "filter:alpha(opacity=x)" instead. To make sure your opacity settings are seen in all browsers, you'll have to use both.

A neat trick that w3schools points out is using transparancy with onmouseover events. You could make an image gallery where the focused image is fully opaque and others fade out for instance.

In the CSS Image Opacity tutorial there is also a neat semi-transparent text box created with divs. This is an effect I could certainly see myself using at some point.

The next post will be the last of the Learning CSS series! After that, I'll be onto JavaScript and PHP. Of course, there is more to CSS beyond what I've covered. I'll certainly be returning to it, but to look at particular aspects instead of progressing through a set path like I have been so far.

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.

Kind of the opposite idea to the above, if you place a selector after stating a class, than the following styles will only apply to those tags with that class as well. If the class is specified for another tag, the styles won't apply, and the same goes for the same tags which don't have the class applied. (For examples of both of these, the link above to CSS Advanced takes you to the Grouping/Nesting page.)

Block and Inline

Another useful setting you can change is whether an element is "block" or "inline" (the former have breaks before and after, like a paragraph or list item, while the latter do not cause line breaks, like <span>). By changing this you can create a horizontal list (great for navigation). I'm not really sure why you would want to make an inline element change to block, but there's probably a good reason I'm not thinking of. The code for this is really easy: "display:block" and "display:inline" respectively.

Positioning

There's a few interesting things you can do with CSS Positioning. By default HTML elements use static positioning. The other options are Fixed, Absolute and Relative positioning. These are just what they sound like; fixed position elements will stay in place in the browser even while scrolling, than absolute positioning will keep an element positioning in a certain place relative to the element it is within. (You'd likely want to use these two together, fix one thing, than relatively position other elements within it - like a CTA for signing up to email updates, or buying your prize winning green widgets.) Relative positioning will move an element relative to its position without any special changes.

Another super useful positioning setting is the ability to set how elements overlap. You do this by setting a "z-index" for each element. Elements with a higher z-index number will be positioned overtop of those with lower z-index numbers (default being zero). Also, you can use positive or negative numbers.

You can also "float" elements. This is generally used for images. If you want an image to allow text to flow around it you can tell it to float on the left or right. This is great for inserting small images next to text.

Next time I'll wrap this up with a fancy CSS navigation bar example, image opacity, image sprites and media types (among a few other things possibly). I've been getting started with JavaScript and will be also starting my PHP + MySQL book after I finish off the novel I'm currently reading. In other news, getting back into StarCraft 2 a bit and been playing a bunch of Minecraft multiplayer.

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.

What is important to know is that when you adjust the width and height of an element, you are setting it for the content area. You must ad the width/height of the margin, padding and border to this to get the full size of the element. (However, unless you declare a DOCTYPE, the preceding is not true for IE8 an earlier. Instead, the width value will include padding and border. So, make sure you declare a DOCTYPE.)

There are a bunch of different outline options that I could go over. However, I see them as a bit of a gimmick and not something I'm likely to ever use. If you're really interested there are a bunch of examples you can work with over on the w3schools page about CSS Outlines.

As usual, you can define margin, border and padding size by a variety of possible units recognized in CSS. You should probably use pixels ("px") unless you have some fancy resizing stuff going on. You can set top, bottom, left and right size values for each aspect. There is a useful shorthand to cut down on how the size of your CSS. Instead of having to declare margin-bottom, margin-top, margin-right, margin-left individually, you can use a single line. Here are the examples demonstrating this (taken from w3schools):

• margin:25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

• margin:25px 50px 75px;
  • top margin is 25px
  • right and left margins are 50px
  • bottom margin is 75px

• margin:25px 50px;
  • top and bottom margins are 25px
  • right and left margins are 50px

• margin:25px;
  • all four margins are 25px

So there are a variety of options depending on which sides you need to set differently from one another. The shorthand for padding works exactly the same way.

P.S. Haven't been getting posts up as often as I'd like. Feels like it's taking awhile to get through the CSS stuff even though I've long since finished my review. Maybe I'll jump into some PHP stuff at the same time and switch back and forth. Otherwise, been keeping busy reading a bunch of novels (finished off the main Dune series and most of the way through a Haruki Murakami book I hadn't read before) and played through Portal 2 single player and coop (which only took about a week, but was tons of fun). Been letting Rift and Shogun 2 fall to the wayside.

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.

On the other hand, underlining has taken over as the primary indicator for spotting links on a page. So go ahead and change link colours, but keep them underlined, and use underlining for other elements knowing full well you risk frustrating users who will try to click the underlined non-linked text. Of course the standard blue is still the most usable choice if you want to make your site as easy to use as possible.

Customizing links is pretty straighforward. You could apply text-decoration settings as well as colour attributes. There is also a specific order to how these are declared or it may not work. Here's the example from w3schools:

a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */

I don't think I mentioned in an earlier post, but "/* */" is how you indicate comments in CSS (like <!-- --> with HTML). Otherwise, the link styling is quite simple.

Lists

Lists work with many of the same settings you can use for paragraphs, headers and other ordinary elements. The list specific styling options that CSS gives you are for changing the bullets (for unordered lists) or numbers (for ordered lists). There's a nice table of the various options over on the w3schools list basics page. The important thing to know is that some of the styles may not work on earlier versions of some browsers (particularly IE). As long as you declare a DOCTYPE though, they should.

You can also choose an image to use as a bullet point using "list-style-image: url('image.gif');" but there are various issues with the position of this image being set slightly differently from one browser to another. The w3school pages linked above has a fix for this where you manually set the margins for the image bullet, forcing it to display the same way across various browsers.

Tables

Tables were what separated competent web design from novice web design back in the day. You could create a much slicker looking page layout be using an invisible table to carefully position various parts of the page. Obviously today there are few popular sites/pages that aren't structured using a table-like page setup, usually using <div> tags.

There are all sorts of settings you can change for tables, many of which were also in HTML back when I learned it. Of course with traditional HTML table styling it could be a huge amount of work if you wanted to make a nice looking table. CSS lets you set up your styles and call them as needed (like with everything else in CSS).

Some of the most important settings you can change have to do with the CSS box model, where you control the margin, border and padding. This applies to many elements and will be the subject of my next post. Understanding the box model is a very important part of knowing how to work with CSS (from my point of view so far at least).

Beyond that, you can set the height and width of tables as well as rows, columns and cells individually. Horizontal and vertical alignment can be set, much like you would in Excel. Background, text and border colour have their own settings too. Theres a very nice Fancy Table Example over on w3schools that you can play around with. The alternating row colour looks great in my humble opinion, while the collapsed table borders come in a close second for favourite basic style customization.

Next time I'll continue my coverage of working through CSS tutorials by going over the "Box Model" — an extremely useful bit of CSS to understand, and one that is used constantly when working on website layouts.

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.

Backgrounds

As with HTML before it, the standard option for a background of an element is either a colour or an image. Colours can be set using a named color value ("green"), a HEX value ("rgb(0,255,0)") or an RGB value ("#00FF00"). For a colour you would use "background-color:VALUE;", while if you want to use an image you would use "background-image:url('filename.gif')". The usual place you'll be setting a background colour or image is for your "body" (the full page), but many other elements can have their own background colour or image set as well. For instance different sections of a table, or a paragraph you want to draw attention to.

There are a couple neat things you can do with background images beyond simply choosing a colour or image. For instance, you can choose whether an image will repeat (tile) across the page, and if so, whether it tiles vertically, horizontally, or both. To do this use "background-repeat:", which can have the values: repeat, repeat-x, repeat-y or no-repeat. You've probably seen websites where the background doesn't scroll with the page, this can be set by using "background-attachment:", while "background-position:" will (obviously) set where the background image appears. You can set general areas like "left top," "center center" or "right bottom." The other option is to use x/y values to choose an exact position.

Text

A few of the most basic styles you can set for text were covered in my Introduction to CSS post. The basic options allow you to set the colour, alignment, decoration (strikethrough, underline, etc.), size, indentation, direction, spacing, line-height among various other options. Plenty of full lists around of exactly what can be used and how, just take a look at the w3schools page linked to at the start of this post.

The one basic style they mention that I thought was interesting is "blink" — I thought this had been phased out but apparently it was ported into CSS. Adding <blink> tags was the hallmark of terrible 90's webdesign.

Just look at this example and cringe as this ugly text blinks at you! Very geocities.

Fonts

Better control over fonts was a desperately needed in web design, and CSS did a lot to address the issues. Thanks to inconsistent font sets from one computer to another, choosing a font that wasn't among the most common used to mean that you were virtually guarenteed to have your page display incorrectly on other computers and browsers. CSS added the ability to choose specific fonts, then choose a certain font family as backup, and if that failed, at least maintain the general feel of the font you wanted by defaulting to serif or sans-serif fonts. (Don't know the difference? w3schools has a nice little graphic that explains it.) Of course fonts can be set for specific elements like with other properties, allowing you to choose one set of fonts for headlines, another set for paragraphs and another for lists (as an example).

What I found interesting in particular was the recommendations for how you should set font size. I was familiar with some of the different units available (cm, px, em, %) as well as the more generic sizes (large, x-small, medium). What I learned was that "1em" is the current font size, and is usually equal to 16 pixels. However, different browsers handle the resizing of text in different ways leading to issues. To prevent this, it is best to set your default (body) font size by percent, then all other font sizes by em. This should work in all browsers even when the page is zoomed or text resized.

I'll wrap up the basics (Links, Lists and Tables) in the next post, since this post is getting fairly long. Also, I was away in California for the Mequoda Summit West 2011 last week, which is why I didn't keep up my otherwise fairly active posting schedule so far. I'm planning to do a post about some of the interesting things I learned at the conference in the next few days.