Class Vs ID
ID is unique, you can only have one per page in your HTML. CSS can be used multiple times. Ideally ID is used for your main containing (Parent) elements and Class for your child elements as well as repeated elements.
Browser support:
Broser support notes have been included, If you only See IE mentioned it means all other browsers support them. IE has been bad in the past supporting commong CSS practises that most other browsers have adopted for some time.
Cross Browser Border Radius
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
Note: IE 8 and below do not support border radius.
Cross Browser Opacity
selector {
filter: alpha(opacity=60); /* MSIE/PC */
-moz-opacity: 0.6; /* Mozilla 1.6 and older */
opacity: 0.6;
}
Note: Opacity makes inner elements and content such as text conform to the opacity. If you wish to just have the containing element to have a background opacity for example you will need to use RGBA bacground colour.
Tip: If you would like to use a cross browser background with some opacity, make an image of say 1/1 or 4/4 etc pixels and set your colour. Adjust your opacity in say photoshop of that layer and save the image as a PNG. Apply this as a repeatable background and this will work for all browsers. (Good tip for an IE only stylesheet, use RGBA for supported browsers and this methid for older IE versions.)
Rgba Examples ( background transparency )
(a = alpha - Your transparency ammount)
div {
background: rgba(100, 200, 100, 0.5);
}
Note: Not supported in IE 8 and below
IE stylesheet transparency option
.backgroundBlock {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
Font Shorthand
body {
font: font-style font-variant font-weight font-size/line-height font-family;
}
/* Real life example */
body {
font: normal small-caps bold 14px/150% Arial, Helvetica, sans-serif;
}
/* Or (em) */
body {
font: normal small-caps bold 1.2/1.5 Arial, Helvetica, sans-serif;
}
Border Shorthand
border: 5px solid #ccc;
Varied Border widths:
border: 2px solid #666; border-width: 2px 4px 1px 4px;
Background Shorthand
background: background-color background-image background-repeat background-attachment background-position; /* Real life example */ background: #f1f1f1 url(/css/images/background.png) repeat-x 0 0; /* Or (em) */ background: #f1f1f1 url(/css/images/background.png) no-repeat 50% 50%;
Style HTML 5 Form Placeholder text
::-webkit-input-placeholder {
color: #ccc;
}
:-moz-placeholder {
color: #ccc;
}
Use @font-face
/* Declare your font */
@font-face {
font-family: 'MyWebFont';
src: url('/fonts/webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/webfont.woff') format('woff'), /* Modern Browsers */
url('/fonts/webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('/fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyFontFamily', Fallback, sans-serif;
}
A great resource for @font-face is http://www.fontsquirrel.com/
Note: Fonts used on the web need either a liceance purchased or use free liceanced fonts
Free Google Web Fonts: http://www.google.com/webfonts
IE min-height fix
selector {
min-height:500px;
height:auto !important;
height:500px;
}
CSS float clearing method
To use clearfix add the class clearfix to the parent element. If you are floating <li> elements add class="clearfix" to the <ul> for example.
.clearfix
{
display: inline-table;
/* Hides from IE-mac \*/
height: 1%;
display: block;
/* End hide from IE-mac */
}
html>body .clearfix
{
height: auto;
}
.clearfix:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Note: In some cases you in IE7 it still will not clear floats. You will need the following HTML element to have say a class="clear" with the CSS in your stylesheet being .clear { clear:both; }
Correctly Centre Text in an element
Often people will use padding to try and centre tect in an element such as a menu item. This will cause problems and inconsistancy in browsers. For single line text (such as in menus) use this method.
div#container {
height: 35px; line-height: 35px
}
Handy CSS Selectors
The star symbol will target every single element on the page under this parent.
#container * {
border: 1px solid black;
}
IE6 and above and all other browsers
Adjacent selector. This will select only the element that is immediately preceded by the former element
div + p {
color: #ccc;
}
Ie7 and above
Target the direct child of the previous element
div > p {
border: 1px solid #ccc;
}
Ie7 and above
Target all anchor elements with a title
a[title] {
color: #ccc;
}
Ie7 and above
Target elements with a href (link) of given link
a[href="http://www.businesscatalyst.com"] {
color: #999;
}
Ie7 and above
Input (such as a radio button) that is checked
input:checked {
border: 1px solid black;
}
Ie9 and above
Target Element of type
input[type=radio]{
border: 1px solid black;
}
Ie7 and above
Select the 3rd item
li:nth-child(3) {
color: #ccc;
}
IE9 and above, Firefox 3.5 and up.
Select the every 3rd item
li:nth-child(3n) {
color: #ccc;
}
IE9 and above, Firefox 3.5 and up.
Select the last item
li:last-child {
color: #ccc;
}
IE9 and above, Firefox 3.5 and up.
Select the first item
li:first-child {
color: #ccc;
}
IE9 and above, Firefox 3.5 and up.
Useful links:
http://css3generator.com/ - Generate CSS3 code.
http://www.css3.info/ - All you need to know about CSS3.
http://www.w3schools.com/css/ - W3Schools CSS information.