Keyboard Shortcuts

Written by jon on 9:35 AM

Learning a few quick-key secrets can make you look like a computer expert too, and save you seconds when you need something finished fast. Here are a few tips to help you speed up your computing.

Turn back the clock: Ctrl-Z

We have all done it; deleted the wrong text, changed the wrong formula in a spreadsheet, or formatted text in Word and messed up a whole document layout.

Using the Ctrl-Z quick-key combination will save you time and frustration. This is an excellent time-saver; once you know it, you’ll wonder how you ever survived without it. Simply hit the Control key and Z to undo any mistake you make. This is great for when you cut-and-paste the wrong data into a Microsoft Excel file or accidentally delete a paragraph from a Microsoft Word document. Also repeat the key presses to go back a few stages to a previous version of a document.

And just as useful, Control key and Y ‘undoes the undo’, i.e. it puts it back again if you undo one stage too far!

From upper case to lower easily: CTRL-SHIFT-A

One of the more time-consuming things we often have to do is restyle copy from upper case to lower case, or vice-versa, when preparing a presentation or business proposal.

Rather than spend all that time retyping the headline, sentence, paragraph or page, simply highlight the words you want changed and hit your Control key with the Shift button and A – you’ll toggle between upper and lower case copy in an instant.

Minimise everything: Windows key-M

On a busy day you can often have ten or more windows open on your PC. Accessing your desktop in these circumstances can be a lengthy process as you click away each individual window. But you can actually minimise all windows in the blink of an eye by hitting the Windows key and M together.

For when time stands still: Ctrl-Alt-Del

It is unfortunately possible for applications on older model PCs to freeze and force you to wait while your PC troubleshoots. For example, Word can sometimes lock up when opening a corrupted document or one in a new format that an older model PC can’t read. This is doubly frustrating if it happens when you are racing to meet a deadline. (Hint - call CSS to get your PC upgraded if this happens often!)

The Control/Alt/Delete shortcut is helpful in these situations because it takes you straight to Task Manager, where you can immediately shut down and then re-start applications that are experiencing difficulties.

This handy combination also gives you the option of locking your computer, logging off, shutting down, or changing your password.

Magic Text resizer

Finally my favourite, and one which never fails to impress anyone watching - resizing text in Word.

When you are laying out a flyer or a brochure, you often need to get text to just the right size to fit in with graphics or text boxes. Highlight the text, and press Control and [ or Control and ] to decrease/increase the point size one at a time. The text will magically grow or shrink as you tap the keys, and makes it dead easy to fit text into a certain space.

More shortcuts:

  • CTRL-C = Copy
  • CTRL-X = Cut
  • CTRL-V = Paste
  • CTRL-A = Highlight all (for instance a whole Word document to change a font size or style)
  • CTRL-ESC = Open Start Menu, use the arrow keys to select an item
  • F1 = Help
  • F2 = Rename an item
  • F3 = Open Find All Files dialog
  • ALT-F4 = Close the current window, or quit the current program
  • SHIFT-F4 = Automatically repeats the previous Find command in Word
  • F5 = Refresh Screen
  • ALT-F6 = Switch between multiple windows in the same program
  • F10 = Activate the menu bar in a program
  • SHIFT-DEL = Delete items permanently

With these speedy keyboard tips, you will soon be tapping out impressive shortcuts that help you get more done in less time.


Written by jon on 9:25 AM

In part 2 of the tutorial we broke down the major sections of HTML on the page and established separation using DIV tags with unique ID's attached to them:


Using DIV's (to position the major page sections) is the alternate method to what most people use: tables. I would argue one method is not necessarily better than the other. But consider that CSS in the 'official' method to position page elements and tables should only be used to hold tabular data.

On the other hand there are simply times when using tables is much easier and CSS just doesn't cut it.

That said, our current layout (left or right side navigation) CSS is far easier to use and is an overall better solution.

Now that we have that covered, everything gets really easy from here. We've established our main document and the major sections are in place, all we need to do is add our text and images.

Breaking down the page:

This page is simple, we have just a single heading:

The Main Heading

And a single paragraph:

Go to the Web Designers Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'. Follow the instructions there and create your basic HTML page ... and do it now!

We define how the paragraphs and the headings will look in our CSS code:

p {

width: 80%;


h1 {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 18px;

font-weight: bold;

color: #000000;


This is pretty much self-explanatory. The only thing that should be mentioned is that we set the width of the

tags to 80%. This allows us to control all of our text width in one easy to edit spot.

The only thing missing from the page is the actual navigation. The best and easiest way to do this, is by using list (

  • ) tags. That makes sense, since navigational menus are essentially a list of pages.

    We styled the list item tags with this CSS:

    li {

    list-style-type: none;

    line-height: 150%;

    list-style-image: url(../images/arrowSmall.gif);


    The above code uses an image as the bullets for the list and makes the space between the listed items 1 and ½ times larger than normal (I like a little more 'breathing room'). You don't have to have an image for the bullets, you could leave it with no images and no bullets by just removing the attribute:

    list-style-image: url(../images/arrowSmall.gif);

    Or you could use on of the built in bullet options: 'disc', 'circle' and 'square'.

    Next you should add to the HTML page an unordered list (

      ) in between the navigation DIV's just under the 'main navigation' heading:

      The Main navigation

      • Page One
      • Page Two

      To make things easier (for the purpose of the article), change the CSS affecting the list item tags (

    • ) so that we use a built in bullet:

      li {

      list-style-type: disc;

      line-height: 150%;


      Now we have the navigation!

      That pretty much covers our goals for this tutorial, but we have just scratched the surface of CSS. As you can see, we created a nice looking page, while using very few types of HTML tags. At this time there isn't much text on the page, but we could add to the page easily, building it out to include lots of information and images with practically no HTML work at all!

      Video Tutorial on CSS for Page Layout:

      I've created a quick video that talks about page layout in CSS. I talk about some ideas that will make your life a lot easier when it comes to building pages with CSS.

      CSS for Page Layout

      I hope the CSS tutorial was useful for you all, it may have been a little hard to get your head wrapped around this subject at first, but in time you will see that your efforts will pay off. Please let me know how you felt about this article.



       Subscribe to css3 Examples via RSS
      Or, subscribe via email:
      Find CSS3 Examples Entries :