[Basic Web Design] Part 7 - Styling web content (sub-content)

For the sub-content, I'll put a background for the title and customizing the paragraph.


  <aside id='left-side'>
  <!--Left side content-->
  <h3>Lorem Ipsum</h3>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<img src="images/rss.png" width="48" height="48">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </aside>

Then style up the content :


#left-side h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding-left: 50px;
    text-shadow: 0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0,0,0,.1),
    0 0 5px rgba(0,0,0,.1),
    0 1px 3px rgba(0,0,0,.3),
    0 3px 5px rgba(0,0,0,.2),
    0 5px 10px rgba(0,0,0,.25),
    0 10px 10px rgba(0,0,0,.2),
    0 20px 20px rgba(0,0,0,.15);
    background: url(images/icon2.png) no-repeat 12px 0;
    }

#left-side p {
    text-indent: 30px;
    padding: 20px;
    }

#left-side p:first-letter {
    font-size: 20px;
    font-weight: bold;
    }

#left-side img {
    float: right;
    margin: 10px;
    }

 Done!

Write by Arafa Daming