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.

1 comments comment | Posted in » ,  

Top CSS Shortcuts

Written by jon on 9:17 AM

Top CSS Shortcuts

When writing your CSS, it is possible to write neater, more readable code by making use of CSS shortcuts. A shortcut is a feature of CSS that allows the developer to specify a number of related properties on a single line rather than specify them all separately. Lets look at the following example:


.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
}

The code above is perfectly valid and will work fine, but we can save time and make the code much neater using the following code:


.header {
padding:5px 10px 5px 10px;
}

Using the code above we can specify all of the padding for the header div on one line. It works by applying the first attribute (5px) to the top padding of the div. The second (10px) applies to the right side padding, the 3rd (5px) attribute means the padding on the bottom of the div, and the forth (10px) attribute means the left side padding. The padding is always applied in this order.

It is possible to shorten this code even further using the following code:


.header {
padding:5px 10px;
}

This works by taking the first (5px) attribute to mean the top and bottom, or vertical padding, and the second (10px) attribute to mean the horizontal padding (left and right).

The exact same principles can be used to declare the margin of your divs, so what could have looked like this:


.header {
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;
}

Can now look much neater, and is obviously much quicker to write using the following:


.header {
padding:5px 10px;
margin:5px 10px;
}

Background properties

One of my favorite CSS shortcuts is the background property shortcut. This is how a typical CSS file could look without shortcuts:


.header {
background-image:url(images/image.jpg);
background-position:top;
background-repeat:repeat-x;
background-color:#fff;
}

However, with some nifty CSS it could look like this:


.header {
background: #fff url(images/image.jpg) repeat-x top;
}

The above code is much quicker and more manageable. Take note though, that all of the properties must be provided when using the background shortcut. If I missed off the colour specification at the beginning for example, the code would not work.

Font shortcuts

Another very useful shortcut is the font shortcut. The code below can be shorted considerably:


body {
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 0.8em;
line-height: 1.2em;
}

Here is the shortcut:


body {
font: bold 0.8em/1.2em verdana, sans-serif;
}

It is important to write the shortcut in the same order as above so that web browsers don’t get confused!

Borders

This is my favorite shortcut of all. This saves me a great deal of time when I am developing web sites because whenever I have a problem with a layout or an element, the first thing I do is put a border around it so that I can see its dimensions and work out what’s going on.

Here is some typical code:


.header {
border-width: 1px;
border-color: #000;
border-style: solid;
}

This can be shorted to the following:


.header {
border:1px solid #000;
}

Then, whenever you are not sure why an element is not behaving properly, just use the border shortcut above to debug your code and see what the dimensions of the element are.

Conclusion

As you can see, you can make your code much shorter and neater using the CSS shortcuts outlined here. Once you get into the habit of using them, I guarantee that you will wonder why you ever did it differently in the past!

No Comment comment | Posted in »  

CSS Shortcuts Tutorial

Written by jon on 9:14 AM

CSS Shortcuts

In CSS, there are a numerous ways to code the same style. In the tutorial, I'll explain some of the most common shortcut structures that will allow you to make your css styles as small and effcient as possible.


Fonts
When defining fonts, you can combine 4 of the most used css attributes into one. For instance, the old-school way of writing this font style:

font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 16px;

can be written using shortcut methods as:

font: bold 11px/16px verdana, sans-serif;

The attributes must be arranged in the same order or web browsers will get confused.

Hex-decimal Colors
Color attributes for all kinds of CSS styles can be written using defined using hex-decimal colors like color: #ff6600; for a shade of orange. Colors that are made up of pairs of repeated digits can be simplified by using 3 digits instead of all six. For instance, the orange hex-decimal code can be abbreviated as color: #f60;. Each digit represents two digits in the full hex-decimal code. So, if you what to use the color white in your code, don't use color: white; or color: #ffffff;. That's so 1997. Be cool and use color: #fff;. (And just like that you may have saved a character or three...great stuff).

Borders
If you were to right out the long-hand version of border code, it could take up some serious space. For example, just to define common attributes for a top border of something you could end up writing:

border-top-width: 2px;
border-top-style: dashed;
border-top-color: #f00;

That can be simplified to:

border-top: 2px dashed #f00;

Additionally, if you are going to define all four borders you can just use one border attribute like:

border: 2px dashed #f00;

Margins, Padding, and Borders
Margins, padding, and borders all have similar CSS coding, such as:

margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 15px;

All four attributes can be defined in shortcut notation like this:

margin: 10px 5px 20px 15px;

Note that the attributes go around clock-wise starting from the top. Margin, padding, and borders can be shorted further when some of the attributes are the same. Here is a list all four combinations of shorcuts:

4 Values: (margin: 20px 15px 10px 5px;) first - top, second - right, third - bottom, fourth - left.
3 Values: (margin: 20px 15px 10px;) first - top, second - left & right, third - bottom.
2 Values: (margin: 20px 15px;) first - top & bottom, second - left & right.
1 Value: (margin: 10px;) first - top, right, bottom, & left

Zeros
While we're talking about shortcuts, it's probably good to note that when defining any size attributes using px, em, pt, pc, in or what ever other measuring increment you wish to use, you can always leave off the measurement unit for values of 0 (ie: 0, 0px, 0em, and 0pt) are all the same. The only caveat is when you are defining with percentages. For reasons beyond our scope of knowlege, the powers that be at the W3C made it necessary to add the % sign to 0%. In some browsers, it doesn't matter. But to be safe, use 0% with combinations of other percentages.

No Comment comment | Posted in »  

CSS: Shortcuts tips

Written by jon on 9:12 AM
CSS: Shortcuts tips
(Still on old news for you CSS-pros. I’m wondering why YOU’RE not writing this blog. All the comments have been more helpful than my posts!! LOL!)
Just wanted to jot these down so I could find them later:
font-weight: bold;font-size: 10px;font-family: Verdana,Arial,Helvetica,sans-serif;shortcut:font: bold 10px Verdana,Arial,Helvetica,sans-serif;
margin/padding shortcuts:margin: top# right# bottom# left#ie. margin: 5px 0px 2px 10px;ormargin: top&bottom# left&right#ie. margin: 10px 5px;
color shortcuts (websafe hex)color: #000000;shortcut: color: #000color: #FFCC00;shortcut: color: #FC0;
1 comments comment | Posted in »  

CSS Shortcuts

Written by jon on 9:10 AM
Shortcuts
In CSS, there are a numerous ways to code the same style. In the tutorial, I'll explain some of the most common shortcut structures that will allow you to make your css styles as small and effcient as possible.
Sponsors - Spoono Host

FontsWhen defining fonts, you can combine 4 of the most used css attributes into one. For instance, the old-school way of writing this font style:
font-weight: bold;
font-family: verdana, sans-serif;
font-size: 11px;
line-height: 16px;
can be written using shortcut methods as:font: bold 11px/16px verdana, sans-serif;
The attributes must be arranged in the same order or web browsers will get confused.
Hex-decimal ColorsColor attributes for all kinds of CSS styles can be written using defined using hex-decimal colors like color: #ff6600; for a shade of orange. Colors that are made up of pairs of repeated digits can be simplified by using 3 digits instead of all six. For instance, the orange hex-decimal code can be abbreviated as color: #f60;. Each digit represents two digits in the full hex-decimal code. So, if you what to use the color white in your code, don't use color: white; or color: #ffffff;. That's so 1997. Be cool and use color: #fff;. (And just like that you may have saved a character or three...great stuff).
BordersIf you were to right out the long-hand version of border code, it could take up some serious space. For example, just to define common attributes for a top border of something you could end up writing:border-top-width: 2px;
border-top-style: dashed;
border-top-color: #f00;
That can be simplified to:border-top: 2px dashed #f00;
Additionally, if you are going to define all four borders you can just use one border attribute like:border: 2px dashed #f00;
Margins, Padding, and BordersMargins, padding, and borders all have similar CSS coding, such as:margin-top: 10px;
margin-right: 5px;
margin-bottom: 20px;
margin-left: 15px;
All four attributes can be defined in shortcut notation like this:margin: 10px 5px 20px 15px;
Note that the attributes go around clock-wise starting from the top. Margin, padding, and borders can be shorted further when some of the attributes are the same. Here is a list all four combinations of shorcuts:
4 Values: (margin: 20px 15px 10px 5px;) first - top, second - right, third - bottom, fourth - left.3 Values: (margin: 20px 15px 10px;) first - top, second - left & right, third - bottom.2 Values: (margin: 20px 15px;) first - top & bottom, second - left & right.1 Value: (margin: 10px;) first - top, right, bottom, & left
ZerosWhile we're talking about shortcuts, it's probably good to note that when defining any size attributes using px, em, pt, pc, in or what ever other measuring increment you wish to use, you can always leave off the measurement unit for values of 0 (ie: 0, 0px, 0em, and 0pt) are all the same. The only caveat is when you are defining with percentages. For reasons beyond our scope of knowlege, the powers that be at the W3C made it necessary to add the % sign to 0%. In some browsers, it doesn't matter. But to be safe, use 0% with combinations of other percentages.
2 comments comment | Posted in »  
Subscribe to: Posts (Atom)

RECENT COMMENTS

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