CpSc 215 - Cross-Platform Mobile App Development

Basics

• Styles consist of a propertyName: Value
• Inline

  This paragraph has increased margins and is surrounded by a rectangular box

  <p style="margin: 20px; border: solid red 2px;">
  This paragraph has increased margins and is surrounded by a rectangular box <p>
  

• head define styles for html elements

<style>
body {margin-left: 30px; margin-right: 15px; background-color: #ffffff }
p { font-size: 24px;}
</style>

• CSS properties list

1. Create a file named "styles.css"
2. Modify body tag to have :

     background-color of  white
     color of  black 
     font-family of sans-serif
     margin of 1.5em
     margin-top of 0em
     margin-right of 1em
   

3. Modify pre tag to have :

     margin-top of 0.5em
     margin-bottom of 0.5em
     font-family of monospace
   

4. Modify li tag to have :

     font-weight of bold
   

5. Modify hr tag to have :

     background-color of rgb(24,95,153)
     border-style of none
     height of 2px
   

6. The details of each property are here
7. Styled page should look like this

   ---