css elements and selectors

css elements

div {
      font-family:Arial, Helvetica, sans-serif;
}
.div {
      font-family:Arial, Helvetica, sans-serif;
}
#div {
      font-family:Arial, Helvetica, sans-serif;
}

where:
"div" = is a selector  indicate which element the rule applies to, or HTML element you want to style.
" font-family:Arial, Helvetica, sans-serif;" = is a declaration consists of a
property(font-family:) and a value(Arial, Helvetica, sans-serif;)

some css selectors

*{} = universal selectors

example:
* {
margin:0px;
padding:0px;
}

meaning:
Selects all elements

.{} = class selectors

example:
.graydirt {
margin:0px;
padding:0px;
}
HTML:
<div class="graydirt">1</div>
<div class="graydirt">2......</div>

meaning:
Selects all elements with class="graydirt". Also classes can be used to identify more than one in your documents/pages.

#{} = id selectors

example:
#graydirt {
margin:0px;
padding:0px;
}
HTML:
<div id="graydirt">1</div>

meaning:
Selects the element with id="graydirt". Also ID can be used to identify one element in your document/page.

li > a = child selectors

example:
li > a {
color:#ff0000;
}

HTML:
<ul>
   <li><a href="#">lorem</a>
         <div><a href="#">lorem2</a></div>
   </li>
</ul>

output:
lorem
lorem2

meaning:
Targets only the first "a" elements that are children of an "li" element (but not other "a" elements inside the "li").

li a = descendant selectors

example:
li a {
margin:0px;
padding:0px;
}

HTML:
<ul>
   <li><a href="#">lorem</a>
         <div><a href="#">lorem2</a></div>
   </li>
</ul>

output:
lorem
lorem2

meaning:
Targets all "a" elements inside the "li".