CSS Shortcuts to Help with Styling

As my website is getting more involved, my code as well as my CSS page are becoming quite long and confusing. I am having to scroll up and down a thousand times and spend lots of time looking in my CSS sheet just to change one small detail. However, I have recently found that there is actually a shortcut that can be used in CSS. Shortcuts make things easier and more efficient, so I am going to show you a quick short cut I have learned.

For just one section with an image I have all this typed:

body {

background-color: #D31D8C;

background-image: url(image/picture.jpg);

background-repeat: repeat-x;

background-position: top right;



However, it can all be condensed like this!!


body {

background: #D31D8C url(running1.jpg) repeat-x top right;


Another example is for an image and the border:

#img 1 {

border-top-color: #BCDD11;

border-top-width: 5px;

border-top-style: dashed;

border-left-color: #BCDD11;

border-left-width: 5px;

border-left-style: dashed;

border-bottom-color: #BCDD11;

border-bottom-width: 5px;

border-bottom-style: dashed;

border-right-color: #BCDD11;

border-right-width: 5px;

border-right-style: dashed;



All that text in CSS can be put into one compact line to make your stylng 100x easier.


#img 1 {

border: #BCDD11 5px dashed;


This is really all you need, and look! It’s so much shorter and simpler!


-Olivia Allegretto


~ by oma12 on October 2, 2012.

%d bloggers like this: