css_back_class.html

<div style="color:##38121E">Hello Wold</div>
<div style="color:##38121E; font-size:20px">Hello Wold</div>
<div style="color:##38121E; font-size:20px; font-wight:Bold">Hello Wold</div>
<div style="border-width: 1px; border-style: dotted; border-color: black">Hello Wold</div>
<div style="border: 1px dotted black">Hello Wold</div>

1. --------------------------------------------------------
<style type="text/css">
div {font-size: 20px}
#red {color: #450515}
.thick {font-weight: bold}
</style>

<div>Hello World</div>
<div id="red">Hello World</div>
<div class="thick">Hello World</div>
<div class="thick">Hello World</div>

3.---------------------------------------------------------

<style type="text/css">
div {border: 1px dotted #DACF47; margin: 10px; padding: 10px}
#red {color: #450515; border: 1px solid green}
.thick {font-weight: bold}

#red .thick  {font-weight: normal; border: 1px solid orange}
span.thick  {color: #78D876; border-left: 5px solid red}

.one, .two, .three {text-transform: uppercase; text-align: right; font-size: 14pt}

.four 		{border: 3px solid red; width: 300px; height: 200px}
.four:hover {border: 3px solid blue}
</style>

<div>Hello World</div>

<div id="red">Hello World
   <div class="thick">Hello World Inside</div>
</div>

<div class="thick">Hello World</div>
<span class="thick">Hello World</div>

<div class="one">This is one</div>
<div class="two">This is two</div>
<div class="three">This is three</div>

<div class="four">This is three</div>

4.---------------------------------------------------------
-- List of Pseudo-classes : http://reference.sitepoint.com/css/css3psuedoclasses

<style type="text/css">
div {border: 1px dotted #DACF47; margin: 10px; padding: 10px}
div:first-child {background: orange}
.middle:before {content:"Read this -"; background-color: #0B6632}
div:nth-child(3) {background: gray}
div[title] { font-family: Verdana, Arial, "Times New Roman"}

ul>li {border: 1px dotted #DACF47;}

h2~p {color: pink}
</style>

<div>Hello World
	<div>First Child</div>
	<div>Second Child</div>
</div>

<div>Hello World</div>

<div title="Hey!">Hello World</div>

<div title="Hey!" class="middle">Middle one</div>

<ul>
  <li>Item 1</li>
  <li>
    <ol>
      <li>Subitem 2A</li>
      <li>Subitem 2B</li>
    </ol>
  </li>
</ul>

<h2>Heading</h2>
<p>Para 1</p>
<p>Para 1</p>
<div>Just a Div</div>
<p>TPara 1</p>
<div><p>Para inside a div</p></div>
5.---------------------------------------------------------

<style>
@media screen
  {
  .test {font-style: normal;}
  }
@media print
  {
  .test {font-style: italic; font-style: 30pt}
  }
@media screen,print
  {
  .test {font-family: Verdana}
  }
</style>

<div class="Test">Hello</div>

6.---------------------------------------------------------
<style>
div {border: 1px solid red; padding: 10px; }
.center {margin-left: auto; margin-right: auto; width: 300px}
.left   {float: left; width: 100px}
</style>

<div class="center">I'm in the middle</div>
<div class="left">Float Left 1</div>
<div class="left">Float Left 2</div>
<div class="left">Float Left 3</div>
<div>No Float</div>
<div>No Float</div>
7.---------------------------------------------------------

<style>
div {border: 1px solid red; }
.fix  {position: fixed; top: 100px; left: 200px;  width: 200px; height: 200px; background-color:rgb(120, 120, 220 ); z-index: 100}
.fix2  {position: fixed; top: 150px; left: 250px;  width: 200px; height: 200px; background-color:rgba(220, 120, 220, 0.5); z-index: 99}
</style>

<div class="fix">I'm in absolute position</div>
<div class="fix2"> </div>
8.---------------------------------------------------------
-- http://www.barelyfitz.com/screencast/html-training/css/positioning/

<style>
div {border: 1px solid red; }
.fix  {position: fixed; top: 100px; left: 200px;  width: 200px; height: 200px;}
.child {width: 60px; height: 60px; position: relative; right: 5px}
</style>

<div class="fix">Hello
	<div class="child">I'm a child</div>
</div>
8.---------------------------------------------------------
<style>
div {border: 1px solid red; }
.fix  {position: relative; top: 100px; left: 200px;  width: 200px; height: 200px;}
.child {width: 60px; height: 60px; position: absolute; right: 5px}
</style>

<div class="fix">Hello
	<div class="child">I'm a child</div>
</div>
9 -------------------------------------------------------
<style>
div {border: 1px solid red; }
.fix  {top: 100px; left: 200px;  width: 200px; height: 200px;}
.child {width: 60px; height: 60px; position: absolute; right: 5px}
</style>

<div class="fix">Hello
	<div class="child">I'm a child</div>
</div>