CSS - Understand some basics in CSS Syntax

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}