There is no official documentation about CSS shorthands but they are there and some of you know them, some of you not. I tried to make a list of CSS shorthands, that may be of use by anyone.<\/p>\n
<\/p>\n
background: #FFFFFF url(image.jpg) no-repeat scroll top left;<\/pre>\nAvailable background properties:<\/h4>\n
\n
- background-color\n
\n
- transparent<\/li>\n
- hexadecimal from #000000 to #FFFFFF<\/li>\n
- predefined colors like: blue, red, green, etc. (with letters)<\/li>\n
- rgb(X,X,X) where X is a number from 0 to 255<\/li>\n<\/ul>\n<\/li>\n
- background-image\n
\n
- none<\/li>\n
- url(URI) where URI can be relative or absolute path to your image<\/li>\n<\/ul>\n<\/li>\n
- background-repeat\n
\n
- no-repeat<\/li>\n
- repeat-x<\/li>\n
- repeat-y<\/li>\n
- repeat (includes both: repeat-x and repeat-y)<\/li>\n<\/ul>\n<\/li>\n
- background-attachment\n
\n
- scroll<\/li>\n
- fixed<\/li>\n<\/ul>\n<\/li>\n
- background-position\n
\n
- top left<\/li>\n
- top right<\/li>\n
- top center<\/li>\n
- bottom left<\/li>\n
- bottom right<\/li>\n
- bottom center<\/li>\n
- center left<\/li>\n
- center right<\/li>\n
- center center<\/li>\n
- 0 0<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Defaults to:<\/h4>\n
background: transparent none no-repeat scroll 0 0;<\/pre>\nThat means if you left out any of the properties, the others will have these values.<\/p>\n
font<\/h3>\n
A typical shorthand:<\/h4>\n
font: normal normal bold 1em\/1.2em georgia,\"times new roman\",serif;<\/pre>\nAvailable font properties:<\/h4>\n
\n
- font-style\n
\n
- normal<\/li>\n
- italic<\/li>\n
- inherit<\/li>\n
- oblique<\/li>\n<\/ul>\n<\/li>\n
- font-variant\n
\n
- inherit<\/li>\n
- normal<\/li>\n
- small-caps<\/li>\n<\/ul>\n<\/li>\n
- font-weight\n
\n
- normal<\/li>\n
- bold<\/li>\n
- bolder<\/li>\n
- lighter<\/li>\n
- inherit<\/li>\n<\/ul>\n<\/li>\n
- font-size\n
\n
- xx-small<\/li>\n
- x-small<\/li>\n
- small<\/li>\n
- medium<\/li>\n
- large<\/li>\n
- larger<\/li>\n
- x-large<\/li>\n
- xx-large<\/li>\n
- number+unit<\/li>\n<\/ul>\n<\/li>\n
- line-height\n
\n
- normal<\/li>\n
- number+unit<\/li>\n<\/ul>\n<\/li>\n
- font-family\n
\n
- (list of fonts)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
margin and padding<\/h3>\n
The margin and the padding are the easiest and the rules go clockwise:<\/p>\n
margin: (top) (right) (bottom) (left);<\/p>\n
A typical shorthands (examples):<\/h4>\n
This adds 10px margin on all sides of the element:<\/p>\n
margin: 10px 10px 10px 10px;<\/pre>\nThis also, adds 10px margin on all sides of the element<\/p>\n
margin: 10px;<\/pre>\nThis adds 10px margin to top and bottom and a 20px margin to left and right:<\/p>\n
margin: 10px 20px;<\/pre>\nAlso any combination of number and measurement unit is possible.<\/p>\n
The same rules apply for padding as well.<\/p>\n
border<\/h3>\n
A typical shorthand:<\/h4>\n
border: 1px solid blue;<\/pre>\nAvailable border properties:<\/h4>\n
\n
- border-width: number+unit;<\/li>\n
- border-style:\n
\n
- solid;<\/li>\n
- dotted;<\/li>\n
- dashed;<\/li>\n
- hidden<\/li>\n
- none<\/li>\n
- double<\/li>\n
- groove etc.<\/li>\n<\/ul>\n<\/li>\n
- border-color:\n
\n
- none<\/li>\n
- hexadecimal from #000000 to #FFFFFF<\/li>\n
- predefined colors like: blue, red, green, etc. (with letters)<\/li>\n
- rgb(X,X,X) where X is a number from 0 to 255<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
list-style<\/h3>\n
A typical shorthand:<\/h4>\n
list-style: disc outside url(image.gif);<\/pre>\nAvailable list-style properties:<\/h4>\n
\n
- list-style-type\n
\n
- disc<\/li>\n
- square<\/li>\n
- circle<\/li>\n
- decimal<\/li>\n
- georgian<\/li>\n
- etc<\/li>\n<\/ul>\n<\/li>\n
- list-style-position\n
\n
- inside<\/li>\n
- outside<\/li>\n<\/ul>\n<\/li>\n
- list-style-image:\n
\n
- none<\/li>\n
- url<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Defaults to:<\/h4>\n
list-style: disc outside none;<\/pre>\nThere are other shorthand out there, but are less used. Any comments are welcome.<\/p>\n","protected":false},"excerpt":{"rendered":"
There is no official documentation about CSS shorthands but they are there and some of you know them, some of you not. I tried to make a list of CSS shorthands, that may be of use by anyone.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,4],"tags":[],"_links":{"self":[{"href":"https:\/\/goranmitev.com\/blog\/wp-json\/wp\/v2\/posts\/7"}],"collection":[{"href":"https:\/\/goranmitev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/goranmitev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/goranmitev.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/goranmitev.com\/blog\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":6,"href":"https:\/\/goranmitev.com\/blog\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/goranmitev.com\/blog\/wp-json\/wp\/v2\/posts\/7\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/goranmitev.com\/blog\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goranmitev.com\/blog\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goranmitev.com\/blog\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}