scriptygoddess

12 Responses to “CSS: Shortcuts”

1. John Says:
   April 8th, 2004 at 9:27 pm

   Oh, man, that font-style shortcut is great; I had just stumbled across the border hack a few days ago (border: 1px solid #000;), but the font-style cousin to it is even better. Thanks for posting this!

2. pixelkitty Says:
   April 8th, 2004 at 9:44 pm

   even better - anything with 0 value can be just 0

   so: 10px 0 5px 10px;
   

3. KMB Says:
   April 9th, 2004 at 6:00 am

   Hi there - there is also a nifty shortcut for margin & padding, when your left and right side do have the same value:
   margin: 4px 6px 2px;
   4px = top ## 6px = right & left ## 2px = bottom
   I never used it, but there has to be a way so this comes in handy

4. PEP Says:
   April 9th, 2004 at 8:26 am

   the shortcut for margin & padding also works for top and bottom:

   padding: 2px 10px;

   will put 2px on top and bottom, 10px on left and right

5. theresa Says:
   April 9th, 2004 at 9:08 am

   There’s also a background shortcut to declare all of the background properties:

   background: #ffffff url(image.gif) no-repeat top left;

   or other variants.

6. Jenna Says:
   April 9th, 2004 at 10:11 am

   A good way to remember the margin/padding order is TRouBLe. Top. Right. Bottom. Left.

7. rio Says:
   April 9th, 2004 at 2:32 pm

   nice blog! just wanted to drop a notice that the International Webloggers’ Day is June 9, 2004! http://www.intlblogday.tk

8. Nate Says:
   April 12th, 2004 at 2:36 pm

   I can never remember the acronyms, but another way to remember the margin/padding number order is to just think of a clock - starting at high noon go clockwise = top, right, bottom, left (:00, :15, :30, :45). For whatever reason that method always stuck with me. Here’s a page with a little more shortcut info.

9. Aldark Says:
   April 15th, 2004 at 10:43 am

   One thing I would recommend to CSS novices is to intially separate your information with a new line - then when it works modify it. Only because it tends to be easier to find an error or where you want to modify initially.
   W3Schools.com is a great CSS reference site.

10. Julik Says:
    April 15th, 2004 at 11:06 am

    background: url(image url) left top no-repeat;
    essentially the most important here - horizontal position first, vertical position second (not vice-versa)

11. Christine Says:
    April 26th, 2004 at 10:47 pm

    Another tip: if using dynamic link pseudo-classes, always make sure to remember to put them in correct order.

    a:link, a:visited, a:hover, a:active.

    Great acronym to remember it is: LoVe HAte.

    And remember to add color/background-color both if using the other, otherwise UA’s could over ride your style rules.

12. Jennifer Says:
    October 5th, 2004 at 8:26 am

    Saw this here (ALL the shortcuts)

    font
    font-weight, font-style, font-variant, font-size, line-height, font-family

    background
    background-color, background-image, background-repeat, background-attachment, background-position

    margin
    margin-top, margin-right, margin-bottom, margin-left

    padding
    padding-top, padding-right, padding-bottom, padding-left

    border
    border-width, border-style, border-color

    border-width
    border-top-width, border-right-width, border-bottom-width, border-left-width

    border-style
    border-top-style, border-right-style, border-bottom-style, border-left-style

    border-color
    border-top-color, border-right-color, border-bottom-color, border-left-color

    list-style
    list-style-type, list-style-position, list-style-image

    outline
    outline-color, outline-style, outline-width