A few quick CSS/HTML facts

Most of you will know these, but just in case, they are handy all the same…

To shorthand your padding and margins, instead of using:

[php]margin-top: 10px;
margin-right: 4px;
margin-bottom: 20px;
margin-left: 16px;[/php]

just do the following:

[php]margin: 10px 4px 20px 16px;[/php]

As you can see, the properties are clockwise.

———————————————–

And in your use of colours, there is also a shorthand method [which I suspect some of you may NOT know]

If you have a hex color code such as #224488 you can also use #248 to have the same result. This applies to all hex color codes with double digits.

———————————————–

Did you know it is possible to use two classes in the one html element?

Just place a space between the two like this:

[php]<div class="method1 method2">[/php]

And the point of doing this you ask? Because you just never know when you may need to apply two classes to an element, such as in this instance:

I want my font in this paragraph to be a certain colour and then, because it is part of this particular topic, I would also like it to be in italic format.

So…

My CSS is

[php]p .color3 { #ccc; } [/php]

but this also applies

[php]p format2 {font-style: italic;}[/php]

In this way, the varying formats across my site can be controlled very easily.

———————————————–

I have started to use em’s a lot more in my CSS. EM stands for relative units and I have discovered that the reason we see 62.5% so much in designs for declaring font size of a body, is because it makes it easier when converting px to em. The result? Well, all you have to do now to find your equivalent px to em size is simply divide by 10. For example, 18px is equal to= 1.8em

Of course, the arguments for and against using em or px in your design is still there, but at least this formula solves this little riddle for me, if nothing else.