Comments on: CSS: Shortcuts http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/ Sat, 30 Aug 2008 04:50:24 +0000 http://wordpress.org/?v=2.5.1 By: Jennifer http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-12768 Jennifer Tue, 05 Oct 2004 12:26:31 +0000 http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-12768 Saw this <a href="http://tantek.com/log/2004/09.html#d07t1434">here</a> (ALL the shortcuts) <strong>font </strong> font-weight, font-style, font-variant, font-size, line-height, font-family <strong>background </strong> background-color, background-image, background-repeat, background-attachment, background-position <strong>margin</strong> margin-top, margin-right, margin-bottom, margin-left <strong>padding</strong> padding-top, padding-right, padding-bottom, padding-left <strong>border </strong> border-width, border-style, border-color <strong>border-width</strong> border-top-width, border-right-width, border-bottom-width, border-left-width <strong>border-style </strong> border-top-style, border-right-style, border-bottom-style, border-left-style <strong>border-color </strong> border-top-color, border-right-color, border-bottom-color, border-left-color <strong>list-style</strong> list-style-type, list-style-position, list-style-image <strong>outline </strong> outline-color, outline-style, outline-width 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

]]> By: Julik http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11206 Julik Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11206 background: url(image url) left top no-repeat; essentially the most important here - horizontal position first, vertical position second (not vice-versa) background: url(image url) left top no-repeat;
essentially the most important here - horizontal position first, vertical position second (not vice-versa)

]]> By: Christine http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11207 Christine Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11207 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. 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.

]]> By: Aldark http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11205 Aldark Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11205 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. <a href="http://www.w3schools.com" target="_blank">W3Schools.com</a> is a great CSS reference site. 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.

]]> By: Nate http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11204 Nate Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11204 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 href="http://www.sorehead.org/css/shorthand.html">a page</a> with a little more shortcut info. 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.

]]> By: rio http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11203 rio Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11203 nice blog! just wanted to drop a notice that the International Webloggers' Day is June 9, 2004! http://www.intlblogday.tk nice blog! just wanted to drop a notice that the International Webloggers’ Day is June 9, 2004! http://www.intlblogday.tk

]]> By: Jenna http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11202 Jenna Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11202 A good way to remember the margin/padding order is TRouBLe. Top. Right. Bottom. Left. A good way to remember the margin/padding order is TRouBLe. Top. Right. Bottom. Left.

]]> By: PEP http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11200 PEP Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11200 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 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

]]> By: theresa http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11201 theresa Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11201 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. 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.

]]> By: John http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11197 John Tue, 30 Nov 1999 00:00:00 +0000 http://www.scriptygoddess.com/archives/2004/04/08/css-shortcuts/#comment-11197 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! 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!

]]>