CpSc 130 - Intro to Programming and Computing

Cascading Style Sheets Basics

• CSS permits you to style your web pages
• You can place styles within HTML tags, in the head section of a web page or in a separate file.
• For creating a web site that has a uniform "look and feel", use a separate file for CSS
• For this class, most of your styles will be within HTML tags
• Styles consist of a propertyName: Value
• Here's a sample of inline styles to change the margins and borders for a paragraph tag:

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

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

• The syntax for placing styles in the head section is a bit different.
  Use the style start and end tag
  define styles for the html elements using the name of the element

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

• The affected elements are the body and paragraph tag
• We are just going to learn the basics, but I encourage you to learn more!
• A great reference for CSS http://htmlcheatsheet.com/css/"
• CSS properties list

1. Save this page (CSS.html) and modify it by adding style to the head
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

   ---