Example
We have to classes myClass and anotherClass.
In css:
, means
OR.
and
blankspace means:
AND but only nested.
No blankspace between the class selectors mean: look for a element that has both classes.
and
. means now am expecting a
class.
So to select to different classes we can use OR like this:
 |
| Please note the difference in CSS : .myClass .anotherClass and myClass.anotherClass |
Another reminder:
in the following css statement only the two colors are totally separated when the CSS compilation try to apply them: This is all done with the:
,
.myClass p, .anotherClass div {...}
#Inherit
Inherits its parents value, so if a p element has a color red. Then if a a element has tagged to inherit color then this will apply for a element as-well.
Example:
p{
color:red;
}
p a {
color: inherit;
}
#Initial
Inherits the value the element should have if no styling for it was declared.
Of course IE crap wont support this.
Firefox might need -moz-initial;
#Border
Some border quick syntax:
border-left: solid #aaa 1px;
#Padding
padding: 20px (this will apply to all sides);
padding: 5px 10px 15px 20px;
Explanation above statement:
5px : represents TOP
10px: represents RIGHT
15px represents BOTTOM
20px and you guest it represents LEFT.
#Custom Fonts
You can download the font of your preference, let’s say cool_font.ttf, and upload it to your remote server where your blog or website is hosted.
@font-face {
font-family: cool_font;
src: url('cool_font.ttf');
}
After that you can use it just like a normal CSS declaration:
p.custom_font{
font-family: cool_font; /* no .ttf */
}
To make your @font-face declaration works with IE as well, you must prepare two font files, one in TTF / OTF format and the other one in EOT format.
@font-face
{
font-family: my_font;
src: url('my_font.eot');
src: local(my_font), url('my_font.ttf') format('opentype');
}
#Center
Center Block elements:
table{width:50%;margin:auto;}
Inline Elements:
for inline elements e.g:
div{text-align:center}