CSS Shorthand Cheat Sheet by Example

By -
CSS-Shorthand-Cheat-Sheet-by-Example
 CSS Shorthand Cheat Sheet by Example

Margin & Padding

#div {
margin-top: 0;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 15px;
(auto, 0, px, pt, em or %)    
}
#div {
margin:0 5px 10px 15px;
(top right bottom left)
}		 #div {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 0;
margin-left: 20px;
}
#div {
margin:10px 20px 0;
(top right/left bottom)    
}		 #div {
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#div {
margin:0 auto;
(top/bottom left/right)    
}		 #div {
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
#div {
margin:50px;
(top/right/bottom/left)   
}
Borders
#div {
border-width: 5px;
(thin, thick, medium or set value) (default = medium)
border-style: dotted;
(solid, dashed, dotted, double, etc) (default = none)
border-color: blue;
(named, hex, rgb or 0-255) (default = value of elements/
elements parent color property)
}
#div {
border:5px dotted blue;
}		 #div {
border-right-width: 2px;
border-right-style: solid;
border-right-color:
#666666;
}
#div {
border-right:2px solid #666;
}		 #div {
border-top-width: 3px;
border-right-width: 2px;
border-bottom-width: 3px;
border-left-width: 2px;
}
#div {
border-width:3px 2px;
}
Borders & Fonts
Background
#div {
background-color: #CCCCCC;
(named, hex, rgb or 0-255) (default = transparent)
background-image: url(images/bg.gif);
(url or none) (default = none)
background-repeat: no-repeat;
(repeat, repeat-x, repeat-y or no-repeat) (default =
repeat)
background-attachment: scroll;
(fxed or scroll) (default = scroll)
background-position: top left;
(top, right, left, bottom or center) (default = 0% 0%)
}
#div {
background:#CCC url(images/bg.gif) no-repeat 0 0;
}		 Font
#div {
font-family: Verdana, Arial, Helvetica;
(Verdana, Arial, “Times New Roman”, etc) (default = browse based)
font-size: 12px;
(xx-small, medium, x-large, set value, etc) (default = medium)
font-weight: bold;
(normal, bold, bolder, lighter, 100-900 or inherit) (default = normal)
font-style: italic;
(normal, italic or oblique) (default = normal)
font-variant: normal;
(normal or small-caps) (default = normal)
line-height: 1.5;
(normal, px, pt, em, num or %) (default = normal)
}
#div {
font:italic bold 12px/1.5 Verdana, Arial, Helvetica;
}
List & Color
List
#div {
list-style-image: url(images/bullet.gif);
(url or none) (default = none)
list-style-position: inside;
(inside or outside) (default = outside)
list-style-type: square;
(circle, disc, square, etc) (default = disc)
}
#div {
list-style:square inside url(images/bullet.gif);                      
}		 Color
Aqua: #00ffff to #0ff
Black: #000000 to #000
Blue: #0000ff to #00f
Dark Grey: #666666 to #666                        
Fuchsia:#ff00ff to #f0f
Light Grey: #cccccc to #ccc
Lime: #00ff00 to#0f0
Orange: #ff6600 to #f60
Red: #ff0000 to #f00
White: #ffffff to #fff
Yellow: #ffff00 to #ff0

Comments

Post a Comment

Popular posts from this blog

How to Connect Android to Multiple WiFi Hotspots

By -
Image
Using Android, it’s easy to connect to multiple Wi-Fi networks, so you’ll never have to connect to the web when you arrive home as the device is already connected. W ith Android, it’s incredibly easy to set up separate home and work Wi-Fi connections, so whenever you walk through the door your Android device will automatically connect without even asking. Explore the Market and you’ll find exciting third-party apps that add even more functionality to your smartphone. Follow us over the next two pages as we explore the various Wi-Fi options built in to the Android OS, and take a look at some free apps intended to make life even easier. Discover some great apps that automate connecting to free Wi-Fi Networks. You may also like this: Phone my PC Setup for Android 1 ● Turn On Wi-Fi As you read this there’s a high chance that multiple Wi-Fi connections are available all around you. To find out if that’s the case, tap the Menu key on your Android device, choose...
Read more

Commets, Varialbles & Special Keywords

By -
Image
Comments Javascript supports two types of comments. Double-slashes (//) tell javascript to ignore everything to the end of the line. You will see them used most often to describe what is happening on a particular line. var x=5; // Everything from the // to end of line is ignored(*) var thingamajig=123.45; // 2 times the price of a whatsit. "Blockquotes" begin a comment block with a slash-asterisk (/*) and Javascript will ignore everything from the start of the comment block until it encounters an asterisk-slash (*/). Blockquotes are useful for temporally disabling large areas of code, or describing the purpose of a function, or detailing the purpose and providing credits for the script itself.  function whirlymajig(jabberwocky) {    /* Here we take the jabberwocky and insert it in the gire-gimble, taking great care to observe the ipsum lorum!   For bor-rath-outgrabe! We really should patent this! */    return (jabberwocky...
Read more