CSS Files

I have talked briefly about CSS in a previous post title Introduction to Cascading Stylesheets. In a nutshell, a Cascading Stylesheet (CSS) is a separate text file that controls the look and feel of your web pages. If you need to change the look of your web pages, you only need to change the CSS file.

For most Web developers, they use CSS files to control the look of a web page in a browser only. CSS files also allow you to control the look of the web pages when they are printed as well. Implementing this feature is as simple as creating a second CSS file and referencing that file in your web pages. The next section will show you how.

Controlling Printing with CSS

As mentioned previously, CSS files are separate text files that are referenced in the HTML of a web page, as such:

This will apply the styles included in the CSS file to the web page, for both displaying in a browser, and when the web page is printed. What we want to do is define a separate CSS file for the browser and the printer. To accomplish this we include the media attribute in the HTML.

To define a CSS file for the browser:

To define a CSS file for printing:

As you can see the above two definitions now include the media attribute that defines when the CSS file should be used. Both statements need to be added to your HTML files for this to work. Let's take a look at an example of how to use the two CSS files.

Defining a Screen and Print Layout

The easiest way to create the two CSS files is to first concentrate on the screen version. Once you have the web site the way you like it, you can then copy the CSS file and modify it to make the print version. Let's look at a simple example.

Suppose you have a Web page with a header and menubar, a content section on the left, and a single sidebar on the right. You want the header and content to print, but not the menubar and sidebar. After all, the visitor can't click the links on the printed page, so you want as much of the page to contain the content.

A stripped down screen CSS file may look like:

The above CSS definitions are missing a lot of other attributes, but for this example this is all we need. The above simply defines a container 900 pixels wide, with a header and menubar that match the width. The content is 700 pixels wide with the sidebar taking up the remaining 200 pixels. In this case, these definitions would be located in the screen version of the CSS file.

Now, when the screen version is complete, we would make a copy of it to start the print version. This means that the same definitions will be located in both CSS files.

As mentioned earlier, we don't want the menubar and sidebar to be displayed when the web page is printed. We also want as much of the page to contain the content as possible. To accomplish this, we modify the print version to the following:

You now notice that we stretched the content section to fill 100% of the page. We have also hid the menubar and sidebar by using the display attribute with the value none. This will prevent those two elements from showing on the printed page.

Once you have the printed version of the CSS files, you can now include them both in your HTML web page as explained above. To watch the two files in action, open your web page in a browser to see the screen version. To view the print version simply select Print Preview in the browser.

Summary

This post provided a quick method of creating a printable version of a web page using a separate CSS file. Using CSS files, you can control what your web pages will look like in a web browser, as well as how they will look when they are printed.

Since this method uses CSS files, any author of a web site or blog can easily implement this feature.

Related Posts

Introduction to Cascading Stylesheets
Designing Web Pages: Tables or CSS

Web Site: Caribbean Web Development

Description: Aims to provide tips, tutorials, hints and other resources that will help to develop, enhance and improve the skills of Caribbean web professionals.

Design 

The design of Caribbean Web Development is the strongest aspect of this blog. I like the design, from the content to the navigational sidebars. Everything is as it should be in a blog.

To start, there is a content section on the left and two navigation sidebars on the right. The font size and type chosen for the content makes it very easy to read the posts. There is some whitespace between the posts that differentiates one post from the other.

The two sidebars are as easy to read as the content. On the left is the navigational links that includes recent posts, categories, archives, and an admin section. Neatly organized and easy to use.

The right side of the sidebars features the RSS subscription link and form, followed by the about text and then some sponsors. I like how the author has limited the advertising to the far right side so a visitor isn't bombarded by advertising.

I like the colours that author has chosen. The header is in red, the content in white (except for one sidebar which is gray), and the footer is black. The colours complement each other very nicely without one colour overpowering another.

Overall the design of the blog is top-notch, which makes it easy to read the posts and navigate through the pages in the blog.

Focus 

The focus of the blog seems to be geared towards helping Web development in the Caribbean. The blog certainly focuses on the Web, however, it seems to be less focused on the Caribbean.

Many of the posts can be read and used by everyone interested in Web development, regardless of where they may reside. I was looking for Caribbean specific Web development, such as local classes, but had trouble finding information specific to that area of the world.

From the information in the archives, the blog is still young, so the author may yet provide information for those in the Caribbean who are interested in Web development.

Content 

The posts on the blog are focused on the Web and provide different Web sites, and tips to help those interested in Web development. The posts are not too long, so those that like short posts may enjoy reading this blog.

The author includes one image in each post that is appropriate for the topic discussed. This is both a good and bad thing. The good is that the images are appropriate for the topic, and that they are high-quality. The bad is that the images can sometimes be large. For those with slower connections, you may experience longer load times.

The content is well-done, however, the images can be quite large and take some time to download especially when there are several on one page.

Spelling and Grammar 

While the design of the blog is the strongest aspect, the spelling and grammar is by far the weakest. There are many instances of spelling and grammar mistakes that caused me to reread a sentence to understand what the author was attempting to say. Some visitors may also find it difficult to read at times.

If the spelling and grammar doesn't make it difficult, the long run-on sentences may. At times an entire paragraph of five to ten lines was one long sentence. By the time I was finished reading the sentence I lost the point of the sentence.

The spelling, grammar and long sentences would need to be corrected to make this good blog a great blog.

Overall 

The design of this blog, from the content to the sidebars, is really well organized. The content is very easy to read, and the navigation links are well organized and easy to find.

The content is nicely done with short posts, and high-quality graphics. The only problem is that those high-quality graphics can be quite large, which increases the download time.

A clean up of the spelling and grammar errors should be done, as they are numerous and takes away from the readability of the blog. Correcting those mistakes will make this good blog a great blog.

The following sections provided the default user ID and password for different routers. For the values that are listed as (blank), simply leave that field empty.

Linksys

D-Link

It is important that you change these values in your router configuration to secure your router. Never leave these values as the default.

If you have a router that you would like added to the above lists, then send me an e-mail or leave a comment and I will add it. The router can be from any manufacturer, not just Linksys or D-Link.

Related Posts

Securing the Linksys WRT54G Wireless Router
Securing the D-Link DI-524 Wireless Router
Securing a Wireless Network
Creating Secure Passwords

GIF Settings

There are many options that can be changed when saving a GIF file. I will not discuss all the optoins, but will touch on the more common ones. The GIF settings are as follows:

• Preset This dropdown list provides several quick settings that you can use to apply to your image. There are several JPEG settings listed that include some default options for GIF.
• File Type The dropdown list below and to the left of the Presets list provides a list of all file types that you can save your file as. Selecting GIF will display settings for GIF files.
• Colour Reduction Below the File Type dropdown is a list of options for reducing the amount of colours in the image. The options include:
  • Perceptual This option reduces colours by including the colours that are more sensitive to the human eye. The human eye is sensitive to shades of green, so more green will be included if the image contains various shades of green.
  • Selective Reduces the number of colours by giving preference to the predominant areas of colour. For example, if you have a picture with a lot of blue sky, and a few trees of green, using this option will include more shades of blue than green.
  • Adaptive Unlike the two previous settings, this one chooses most of the colours that closely matches the colours in the original image. If the image contains no pinks or purples, then the colour palette won't contain these colours.
  • Restrictive (Web) There are 216 colours that are considered Web-safe, meaning no dithering will occur when these colours are displayed. Selecting this option will reduce the colours to these 216 colours.
• Dithering Below the Colour Reduction option is the dithering option dropdown. Dithering is the process of concealing the reality that there are fewer colours by displaying colours close together where they meld together to look like a different colour. There are several options in the dropdown for dithering.
  • No Dither Does just what it says, doesn't attempt to blend the colours using dithering. You could end up with a banded image with this option.
  • Diffusion The most common, and preferred method of dithering. With this method there is no pattern since the colours chosen to create the missing colour are scattered in the image.
  • Pattern This type of dithering has a small impact on file size, in that it makes files smaller. The problem is that it uses a pattern to dither a missing colour, and won't look as nice as the diffusion dither.
  • Noise When you select this option, the dithering is accomplished by creating noise in the image. You may end up with ugly clumps of colours in the image with this option.
• Transparency GIF images have a unique ability to make one colour in the image transparent, meaning the background colour will show through. You also have the option to select the type of dithering to perform to ensure that the transparency blends nicely with the background colour. This option is set in the dropdown below the Transparency checkbox.
• Interlaced This option instructs a Web browser to download the full image in multiple passes. Don't bother enabling this option as it increases the file size, and makes no difference with the connection speeds in use today.
• Lossy Most people know that the GIF file format is a losseless format, meaning no data is lost when the image is saved. Adobe has included a lossy option that removes additional colours when the image is saved, in addition to those you have removed. Don't bother with this option as it will affect the quality of your image even more.
• Colors This is where you can select the total number of colours available in the image, from 2 to 256. Some images may not need all 256 colours, so you can decrease the number until you are satisfied with the file size and image. As you decrease the colours you will see the number of colours in the colour table below decrease to represent the remaining colours in the image.
• Dither This option specifies the amount of dither that will be used in the image.
• Matte If you create an image with a specific background colour, and then set that colour transparent the colours will blend to the original background colour. If you want to blend a different background colour, then you can choose it with this option.
• Web Snap The Web-safe colours were briefly mentioned above, and this option is also associated with them. This option determines the percentage of colours in the image that are pushed towards the Web-safe colours.
• Colour Table This table displays a list of all colours included in the image. If you double-click a colour you can select another colour that will replace the selected colour. Below the colours are several options that you can use on the selected colour, such as making the colour transparent, shifting the colour to a Web-safe colour, and locking the colour.
• Image size If you click on the Image Size tab you can resize the image. The options provided here are the same ones provided by Image->Image Size from the Photoshop menu.

Summary

That is all the options available for creating GIF images with the Save for Web option. The best way to find the optimal image is to open up four images. Modify the images with different settings to see what works for your image.

Related Posts

Photoshop JPEG Settings
When to Use GIF and JPEG Format
Overview of Various Image File Formats
Converting Digital Photos for E-mail or the Web

Web Site: Angelika

Description: Personal blog by a single mother living in the southern Unites States suffering from Multiple Sclerosis, Insomnia & a Hugh Laurie addiction.

Design 

Personal blogs usually have one thing in common: they usually contain many widgets about anything and everything. Angelika is definitely in that category. This blog contains two navigational sidebars one each on the left and the right side, and with the content in the middle.

Both sidebars contain many different widgets, links, and images (if you are a House fan, there are images of Hugh Laurie on the left). Unfortunately, it makes the two sidebars look unorganized, which makes it hard to find anything. I would rather see the blog's navigational links at the top of one sidebar, and then all the other secondary links, and images below.

The colours chosen by the author are different than I have seen on a blog before. There are three different colours chosen for the background, with each having a textured look to them. The author has chosen textures that don't distract from the blog and provide easy reading of the content.

The font and font sizes used on the blog are easy to read. The light background and dark font colour add enough contrast so you don't have trouble reading the content.

Overall, the design was simple and not distracting, however, reorganizing the two sidebars will go along way to improving the design of the blog.

Focus 

It is always difficult to rate the focus of a personal blog, mainly because there really isn't one. A personal blog is about the life of the author, which isn't limited to a single focus.

In this case I will rate the focus of the blog on what the author has provided in the description, which the author in this case has done.

Content 

There is no lack of content in this blog. The author updates on more than a regular basis. Looking at the archives (at the bottom on the left) indicates that the blog is even updated more than once a day, and since 2006. This is a good sign of a dedicated blogger.

As I was reading the posts, I was having trouble following some of the story. Since I was reading the blog for the first time, I became very much confused as to the names of the people she was mentioning. After reading a few posts, however, some became more clear to me.

The author does tend to have long run-on sentences at times, which does impact readability. I had to reread a few sentences to understand what the author was trying to say. She does write in a manner more like a diary then your typical blog.

Many of the posts also include at least one image that is appropriate for the subject of the post.

Overall, the content is good with the exception of those run-on sentences and few grammatical and spelling mistakes.

Spelling and Grammar 

As mentioned in the Content section, there are a few spelling and grammatical sentences that do take away from the readability of the blog. At times the author as purposely (or it seems to appear) misspelled words. This is probably the author's humour so I didn't include those words in my assessment.

Overall 

It is apparent that the author enjoys writing in her blog, as it is evident in the number of posts. The content is one of the strong points to this blog. The design, however, is the weakest part as the unorganized sidebars make it difficult to navigate around the blog.

If you do enjoy ready personal blogs, especially those written more like a diary, then you should check out Angelika.