CSS - Shorthand method

[Sysode]

Quite often when people are asking for help, I notice in their CSS they write something like:

.element {
     margin-top:5px;
     margin-bottom:15px;
     margin-right:5px;
     margin-left:25px;
}

Notice how you've written a specific style 4 times over? This just becomes tiring and annoying after time. This is where the shorthand method comes in, it's essentially the same but allows you to write it in one simple line. So, for example, lets copy the above code but using the shorthand method:

.element {
     margin: 5px 5px 15px 25px;
}

There is NO need to include -right, -left, -top and so on. It's all done on one line.

Here's how I remember which order to do them in: T(op) R(ight) ou B(ottom) L(eft) e = Trouble.

This works for any element that has -right,-left-bottom and so on. So for example, you can use padding, borders etc.

Not sure if I've explained it overly well, if you need any support just comment below.

 

[Mega]

Nice tutorial.

 

[FrancisJoseph]

This is good for new-comers to HTML, good work.
Personally I don't use this method, as I like to have my stylesheet set out in fine detail.

None the less, good tutorial.

 

[Sysode]

This is good for new-comers to HTML, good work.
Personally I don't use this method, as I like to have my stylesheet set out in fine detail.

None the less, good tutorial.

This is CSS, not HTML.

Either way, shorthand method is cleaner and once you get your around the order of it, it's just as easy to make changed. Each to their own I guess.

 

[FrancisJoseph]

This is CSS, not HTML.

Either way, shorthand method is cleaner and once you get your around the order of it, it's just as easy to make changed. Each to their own I guess.

I realize it's CSS but it is STILL a subcategory of HTML. Hence why I stated style-sheet and HTML.
I know the shorthand method from when I first started, just isn't my style.

This is CSS, not HTML.

Either way, shorthand method is cleaner and once you get your around the order of it, it's just as easy to make changed. Each to their own I guess.

Also if there a newcomer to HTML then obviously on average they're a newcomer to CSS..
Didn't say anything about it not being CSS. You have mis-read my words.

 

[Weasel]

I realize it's CSS but it is STILL a subcategory of HTML. Hence why I stated style-sheet and HTML.
I know the shorthand method from when I first started, just isn't my style.

CSS is not a subcategory of HTML, that's like saying SQL database are a subcategory of PHP. You might be a "DesignGod", but certainly not a "code god" if you make such statements.

Anyways, regarding this matter, you can also do it like this:

margin: 10px 10px;

And ofcourse just 1 value for all sides:

margin: 10px;

The first value begin top + bot, and the second right + left.

And instead of TROUBLE to remember, is like thinking of it of a clock. Starts on top, and rotates clockwise. Top, right, bottom, left.

 

[Sysode]

CSS is not a subcategory of HTML, that's like saying SQL database are a subcategory of PHP. You might be a "DesignGod", but certainly not a "code god" if you make such statements.

Anyways, regarding this matter, you can also do it like this:

margin: 10px 10px;

And ofcourse just 1 value for all sides:

margin: 10px;

The first value begin top + bot, and the second right + left.

And instead of TROUBLE to remember, is like thinking of it of a clock. Starts on top, and rotates clockwise. Top, right, bottom, left.

Each to their. The clock way seems a decent way.

My bad, forgot to include the 2 method. So the first value will be top/bottom + right/left for the 2nd value.

 

[Weasel]

Each to their. The clock way seems a decent way.

My bad, forgot to include the 2 method. So the first value will be top/bottom + right/left for the 2nd value.

yeah and there's also the 3 value, not sure which way that is though.

 

[Markshall]

yeah and there's also the 3 value, not sure which way that is though.

margin: 10px 5px 30px;

...is equivalent to:

margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 30px;

 

[Yondu]

Nice tutorial