The Power of CSS Shorthand

So many web developers specially those who are new to the whole HTML CSS thing, will normally write out every single line of code exactly as they were taught.

There is nothing wrong with this type of coding, the only problem is that it takes up a lot of extra time, and from my experience, clients are not interested in what will take the longest, clients want things to happen snappy.

If you've been in coding for quite some time or just starting out, these examples that I'll be giving you will definitely help to code faster and smarter. It can make such a big difference, for example, a css file that contains 1000 lines of code, can become a 500 line css file simply by using shorthand css procedures.

1. Background Attribute - CSS Tag

Normal CSS

background-image: url(images);

background-position: 10px 50px;

background-repeat: no-repeat;

background-color: #fff;

Shorthand CSS

background: #fff url(image) 10px 50px no-repeat;

2. Margin & Padding Attribute - CSS Tag

replace the margin for when using padding

Normal CSS

margin-left: 10px;

margin-right: 10px;

margin-top: 10px;

margin-bottom: 10px;

Shorthand CSS

margin: top right bottom left; "For individual margins"

3. Border Attribute - CSS Tag

Normal CSS

border-width: 2px;
border-style: solid;
boder-color: #000;

Shorthand CSS

border: solid 2px #000;

4. Font Attribute - CSS Tag

Normal CSS

font-family: Verdana, Arial;
font-size: 15px;
font-weight: bold;
font-style: italic;
line-height: 1.5px;

Shorthand CSS

font: italic bold 15px/1.5 Verdana, Arial;

5. Color Attribute - CSS Tag

Aqua: #00ffff to #0ff
Black: #000000 to #000
Blue: #0000ff to #00f
Dark Grey: #666666 to #666
Fuchsia:#ff00ff to #f0f
Light Grey: #cccccc to #ccc
Lime: #00ff00 to#0f0
Orange: #ff6600 to #f60
Red: #ff0000 to #f00
White: #ffffff to #fff
Yellow: #ffff00 to #ff0

What is CSS

CSS is short for Cascading Style Sheet, it is the back bone language of web designing.

Normally when someone wants to develop a web site, they must know how to use CSS to it's fullest potential, since CSS is what makes your site look great.

CSS is mostly a set of commands, moulding your site into the design you want. CSS was introduces to make web styling a lot easier, and that's exactly what it is good at.

Here's a example:

div#main {
background: #fff;
width: 500px;
height: 500px;
}

I just basically designed a block to have the name 'main' and have a white background with the size of 500 pixels by 500 pixels.

CSS can be added into a html file quite easily, from attaching a seperate CSS file normally called, style.css, you can also do the CSS styling within a html document like this.

<html>
<head>
<style type="text/css">

div#main {
background: #fff;
width: 500px;
height: 500px;
}

</style>
</head>

<body>

<div class="main">
<h1>Heading 1</h1>
</div>

</body>
</html>

Learning and using CSS is fun and each day is different, you learn something new everyday since it's a technology that keeps on growing.

6 Habits For Writing Better CSS - Part 1

1. Get into the habit of using a CSS Reset
How many times over and over have you coded your css and testing the code on Firefox and Chrome it looks fantastic and to your surprise IE looks like crap. Something that definitely comes in handy is the CSS Reset.
It just resets all margins, paddings, sizes etc. and it simplifies knowing that you are working from a clean slate.
You never edit the Reset.css because it must always be the same.

Some important factors when including the Reset css to your html.

-Always load the reset css before your original site css.
-Never edit the reset css, if you edit it, then it has no use of being a reset css.

2. Adding comments to your code is very helpful
Have you ever come across a piece of code and had absolutely no idea what it does or for what it is.
Well if the coder didn't add comments then that's just unlucky.

When coding, make it a habit to add comments, so when you are someone else works on the code, they'll have a fair idea of what the code is for.

/* This is a comment for this code section */
.box {
background: #000;
color: #999;
}

3. Keeping your code clean
Having clean code is not only a art, but it also makes your code look good.

When you have a class that only requires property, then keep everything on one line.
If you have a class that contains more than one property, split it up onto multiple lines.

It'll look cleaner and faster to read.

.class { text-align: left; }

.class2 {
background: #000;
color: #999;
width: 600px;
}

Tuesday, October 25, 2011

The Power of CSS Shorthand

What is CSS

6 Habits For Writing Better CSS - Part 1