About me Domain Credits Way out Refresh My blog My host Credit


October 01, 2018 ♥ v23 layout (Halloween theme!) September 07, 2018 ♥ v22 layout ♥ 8 backgrounds/patterns ♥ 4 textures ♥ 20 gradients ♥ 4 banners ♥ 40 colors ♥ 2 photoshop tutorials ♥ 4 miscellaneous tutorials April 03, 2018 ♥ v21 layout ♥ 10 backgrounds/patterns ♥ 14 textures ♥ 10 gradients ♥ 50 colors December 17, 2017 ♥ v20 layout ♥ new blog entry ♥ 6 gradients ♥ 6 banners ♥ 6 colors November 03, 2017 ♥ v19 layout ♥ new blog entry ♥ 10 textures ♥ 10 gradients (new category!) ♥ 2 banners ♥ 10 colors ♥ revamped links & pages July 16, 2017 ♥ new layout (v18) ♥ new blog entry ♥ 6 backgrounds/patterns ♥ 8 premade banners ♥ 10 color schemes (revamped) May 25, 2017 ♥ new layout (v17) ♥ new blog entry ♥ 16 color schemes ♥ 1 photoshop tutorial ♥ 1 miscellaneous tutorial


Terms Back pats Banners Textus Colors HTML Tuts CP Tuts Ps Tuts PHP Tuts Misc. Tuts


Welcome to Sasha's gfx corner Skyrose, here to provide quality resources since May 2014; take a look, read the Terms, grab whatever you like and enjoy. <3

chat with me

CSS shortcuts

This is not a proper tutorial, but only a couple of way to shorten up your stylesheet and make it look slicker.

The first is for the font tag; usually, the font is styled this way.

font-family: Arial;
font-size: 10px;
color: #000000;

To make it shorter, you can style it like this; nothing will change, but your stylesheet will become more professional.

font: 10px Arial;
color: #000000;

Next one is for the padding and margins - meaning thoes tags that define the internal and external spaces of a design; many style them like this.

padding-top: 2px;
padding-bottom: 2px;
padding-left: 0px;
padding-right: 0px;

margin-top: 2px;
margin-bottom: 2px;
margin-left: 0px;
margin-right: 2px;

They don't know there is a much faster and more professional-looking way to style.

padding: 2px 0px 2px 0px; --> in the order top right bottom left
margin: 2px 0px 2px 0px; --> same order as padding

Next is the tag for body background; usually, many style it like this.

background-color: #cccccc;
background-image: url('IMAGE-URL-HERE');
background-position: top center;

There is, however, a shortcut for this too; I don't actually use this as I prefer the old way - just for personal whims.

background: #cccccc url('IMAGE-URL-HERE') top center;

I shared these to help others, but in the end it all comes down to personal preferences; you can use them or not. Just, if you do please credit Skyrose.