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

• Create a file named "styles.css"
• 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
  

• Modify pre tag to have :

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

• Modify li tag to have :

    font-weight of bold
  

• Modify hr tag to have :

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

• Save this page (CSS.html) and modify it to include:

  <link rel="stylesheet" type="text/css" href="styles.css">