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
  

• styles.css should look like:

  
  /* general style */
  body {
    background-color: white;
    color: black; /* steelblue, rgb(70,130,180); */
    font-family: sans-serif;
    margin: 1.5em;
    margin-top: 0em;
    margin-right: 1em;
  }
  
  /* unformatted text */
  pre {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-family: monospace
  }
  
  li {
    font-weight: bold
  }
  
  hr {
    background-color: rgb(24,95,153);
    border-style: none;
    height: 2px
  } 
  
  Save this page (CSS.html) and modify it to include:
  <link rel="stylesheet" type="text/css" href="styles.css">
  

• Styled page should look like this