SimpleClix Studio

A lot of New Web Developers usually rewrite all the CSS when they need to redesign or update the current web template, and that is really not efficient at all.? So, how can we minimize the amount of time that have to be spent on the CSS?? The answer is simple.? Make your css reusable. But how?

Now, we start from the basic CSS elements.

.bold{

font-weight: bold;

}

.underline

{

text-decoration: underline;

}

and so on…

So whenever you want to make your text bold or underline you can do

<span class=’bold’>bold this</span> OR <span class=’underline’>underline this</span>

So far, it is still the basic, and nothing is really exciting right?

Ok, let’s make it a little bit complicate by introducing the multiple class names.

Now, suppose you want to make your text bold and underline.

Usually you would do

.bold_and_underline

{

text-decoration: underline;

font-weight: bold;

}

then finally apply it to the html tag like this <span class=’bold_and_underline’>bold, underline</span>.

If you are going to mix and match different css properties to the html element, you will end up with write a lot of css properties, and a lot of them just keep repeating.

By using multiple class name, now you can make your life a little bit easier.

You can do this:

<span class=’bold underline’>bold and underline</span>

If you want to apply more properties to the HTML Tag, you can always mix and match of your basic css properties by using the multiple class names.

And I would recommend you to make your class names more meaningful, so you can remember it when you apply it to your html tags.

However, this is not the end yet, and we can even go further with the classes.

A lot of web template will have a lot of <div> containers with css properties, such as, float: left, margin: 0, padding: 0;

Now, let’s set this up in css.

.container

{

margin: 0;

padding: 0;

float: left;

}

and assume we have two div tags, such as

<div class=’container big_box’></div>

<div class=’container small_box’></div>

And now, let’s see the properties of the big box and small box,

.big_box

{

width: 300px;

height: 400px;

}

.small_box

{

width: 100px;

height: 100px;

}

Now, you can see that it save you from writing the margin, padding, float properties repeatedly.

Without the multiple “class names”, you will have to do this:

.big_box

{

width: 300px;

height: 400px;

margin: 0;

padding: 0;

float: left;

}

.small_box

{

width: 100px;

height: 100px;

margin: 0;

padding: 0;

float: left;

}

Finally, the multiple “class names” is compatible with IE6,7, firefox, opera, another other major browsers, so you can feel safe to use it for your projects.

Good luck.

The theories and practical skills nowadays in web designing is quite different from what I started with 10 years ago. Today I am going to talk about sometime that’s surprisingly not being changed much. Let’s look at a picture below:

Familiar, right? Yes, we can still see a lot of this style login form around this infinite triple-w world. I won’t say it’s a bad thing, but since the space on your page is very limited and valuable (unless you don’t have contents to put on. ). How about we want to save some space? However we can’t just delete the “username” and “password” label in front or else you will lose your users the other day when you wake up.

So what’s the alternate option? Well, let’s play some CSS and basic mouse action.

We can see an example before we get started. Let’s look at Apple’s MobileMe website.

It’s a good idea that show the users what those text fields are using the text fields themselves. The following code here are showing that if there is nothing input by the user in the text field, it will have a gray initial value, that’s, “Gray Text” in my example. Once the user click in the text field and ready to type in their own value, the “Gray Text” will disappear and replaced by what the user type in. However, if the user suddenly decide to move out before the type in anything and click somewhere else on the website, the text field will be given back the value “Gray Text”.

<html>
<head>
<style type=”text/css”>
.gray_font {color:#666;}
.black_font {color:#000;}
</style>
</head>
<body>
<input type=”text” class=”gray_font” value=”Gray Text” onclick=”if(this.value==’Gray Text’){this.value=”;this.className=’black_font’}” onblur=”if(this.value==”){this.value=’Gray Text’;this.className=’gray_font’}” />
</body>
</html>

What do you think? This is just an simple example. Use your creativity, you can probably use an image as your background.