Session 03a - CSS Example

 <div style="font-family: garamond, times, serif;">Garamond, Times, or serif (generic family)
 </div>
 <div style="font-family: calibri, arial, helvetica, sans-serif;">Calibri, Arial, Helvetica or sans-serif (generic family)
 </div>
 <div style="font-family: lucida console, courier, monospace;">Lucida Console, Courier or monospace (generic family)
 </div>
 <div style="font-family: fantasy;">Fantasy (generic family)
 </div>
 <div style="font-family: cursive;">Cursive (generic family)
 </div>

 <div style="font-style: normal;">Normal font-style
 </div>
 <div style="font-style: italic;">Italic font-style
 </div>
 <div style="font-style: oblique;">Oblique font-style
 </div>

 <div style="font-variant: small-caps;">This should be rendered in small-caps.
   <div style="font-variant: normal;">Here we revert to "normal".
   </div>
 </div>

 <div>font-weight can be used to make
   <span style="font-weight: bold">text appear bold   </span>.
 </div>

 <div style="font-size: 8pt;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
 </div>
 <div style="font-size: 120%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
 </div>
 <div style="font-size: 1.5em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci.
 </div>

 
 <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
 </div>

In style element (<style>) within head element:

body {
      font: normal normal normal x-large/200% arial, helvetica, sans-serif;
}

 <div style="margin-left: 30%; margin-right: 30%;">
   <p style="text-align: left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
   </p>
   <p style="text-align: center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
   </p>
   <p style="text-align: right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
   </p>
   <p style="text-align: justify">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.
   </p>
 </div>

 <div style="background-color: rgb(100%,66%,33%); padding: 1em; ; margin: 1em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   <br/>
rgb(100%,66%,33%)
 </div>
 <div style="background-color: #ffa854; padding: 1em; margin: 1em; ">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   <br/>
#ffa854
 </div>
 <div style="background-color: rgb(255,168,84); padding: 1em; ; margin: 1em;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   <br/>
rgb(255,168,84)
 </div>

 
 <h4>Dotted </h4>
 <p class="border1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras feugiat mauris facilisis libero. Etiam nisl. Cras est dolor, viverra ac, ultrices volutpat, vestibulum et, odio. Nulla eget libero. Praesent eget tellus vel nibh nonummy egestas.
 </p>
 <h4>Dashed </h4>
 <p class="border2">Etiam eu arcu quis lectus semper sodales. Donec vitae risus. Integer sollicitudin imperdiet dolor. Donec vehicula. Aliquam ut sapien sed eros imperdiet pharetra. Donec accumsan scelerisque leo. Sed eros nunc, pellentesque et, mollis non, faucibus venenatis, tortor.
 </p>
 <h4>Outset </h4>
 <p class="border3">Pellentesque a velit. Sed pharetra vestibulum mauris. Ut vel arcu. Cras dolor ligula, eleifend et, ultrices nec, viverra in, ipsum. In convallis pharetra lacus. Etiam tellus. Aliquam quam. Vivamus mattis purus nec quam. Suspendisse hendrerit dui ac massa.
 </p>
 <h4>Solid </h4>
 <p class="border4">Etiam rhoncus. Praesent id neque et odio dictum varius. Integer imperdiet blandit orci. Donec nec nunc posuere augue egestas accumsan. Nunc nonummy metus ut nunc. In id turpis vitae nisl eleifend bibendum. Curabitur cursus aliquam dolor.
 </p>
 <h4>Double </h4>
 <p class="border5">Duis id erat a tortor laoreet aliquet. Quisque consectetuer lobortis mauris. Donec pede. Cras non turpis vel tortor iaculis nonummy. Ut facilisis viverra sem. Morbi pretium iaculis ligula. Praesent lectus. Aenean vel ante. Nunc interdum semper nisl. Pellentesque tincidunt.
 </p>
 <h4>Groove </h4>
 <p class="border6">Aliquam leo nunc, congue a, imperdiet eget, aliquet ac, tortor. Sed ac est. Vivamus nisi. Mauris in nisl. Sed ultricies nunc vel nunc. In dignissim consequat arcu. Sed in risus. Nulla facilisi. Integer purus urna, laoreet vitae, congue a, posuere ut, ipsum. Nunc ac lacus sit amet nisi porttitor aliquam.
 </p>
 <h4>Ridge </h4>
 <p class="border7">Vivamus dictum, sem in vulputate vestibulum, est tellus tempus dolor, ut laoreet arcu metus eu orci. Sed enim augue, dignissim sed, porta sed, dapibus ac, nibh. Nunc mattis ipsum eu lectus. Nam pharetra mattis massa.
 </p>
 <h4>Inset </h4>
 <p class="border8">Maecenas consectetuer, lectus ac tempus iaculis, leo ipsum tincidunt erat, et aliquam libero nulla ac ipsum. Nam turpis leo, feugiat vel, nonummy id, ornare a, arcu. Vestibulum porta, justo et ornare porta, neque eros vestibulum libero, semper iaculis augue turpis eu neque.
 </p> 

In style element (<style>) within head element:

body {
font-family: tahoma,arial,sans-serif;
font-size: small;
}
p {
margin: 1em;
padding: 1em;
width: 50%;
}
.border1 {
  border-style: dotted;
  border-color: #990000;
  border-width: thin;
  /* equivalent to
    border: thin dotted #900;
  */
}
.border2 {
  border-style: dashed;
  border-color: #009900;
  border-width: medium;
  /* equivalent to
    border: medium dashed #090;
  */}
.border3 {
  border-style: outset;
  border-color: #000099;
  border-width: thick;
  /* equivalent to
    border: thick outset #009;
  */}
.border4 {
  border-style: dotted;
  border-color: #990000;
  border-width: thin;
  /* equivalent to
    border: 3px solid #999;
  */}
.border5 {
  border-style: double;
  border-color: #000000;
  border-width: 5px;
  /* equivalent to
    border: 5px double #000;
  */}
.border6 {
  border-style: groove;
  border-color: #009999;
  border-width: 10px;
  /* equivalent to
    border: 10px groove #009;
  */}
.border7 {
  border-style: ridge;
  border-color: #999900;
  border-width: 15px;
  /* equivalent to
    border: 15px ridge #990;
  */}
.border8 {
  border-style: inset;
  border-color: #990000;
  border-width: 20px;
  /* equivalent to
    border: 20px inset #900;
  */}