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

Free URL Submission in Search Engines and Web Directories

By -
Image
E veryone know the importance of URL submission in search engines and web directories, it is necessary to increasing PAGE RANK in Google and get more traffic to your webpage, the best search engine optimization (SEO) is the key of success. Furthermore as long as an indexed web page links to your site, all the major engines will find you and index you. Use these forms for when you are unsure that the search engines like the sites that currently link to yours. Free Search Engine Submission Few free submission services are as under: You may also like this article: All-in-One Social Count Plugin for Wordpress Simply click Active Search Result and add your URL as below: Free Google Submission Go to Addme and submit your URL, through this service your URL submit in 20 popular search engines. Free Website Submission AddPro is also a free service for URL submission in 18 top search engines, it is a reciprocal base submission, before you applying to su
Read more