Introduction to Cascading Style Sheets

Week 1

 

Project Assignment

Review Questions:

  1. Many tags do not have to be closed such as the <P> tag and the <li> tag. Why is it important to have an opening and a closing tag when using STYLES?
    The end Tag tells the Browser when to end the specified style.
  2. What is an inline style? Please provide and example. That is a style that is written within the text of the body of the document.
    Ex.
    <body>
    <h2 style="color: green;">This is an inline style</h2>
    </body>
    result
  3. What is a document level style? Please provide and example.
    This is a style that is written in the head of the document and applies to the whole document. The project assignment is an example of this.
  4. What is a linked style? Please provide an example.
    This is when you have code in the head of the document that links to an external style sheet (or separate document). Example of code in the head of the document:
    <link rel="stylesheet" type="text/css" href="format.css">

    document example
    css example
  5. What is the advantage to having linked style sheets as opposed to to inline styles or document level styles?
    With a linked style sheet, if you want to change something for the entire web site, you only have to change it in the style sheet document. With inline or document level, you have to go to each page and make the change.
  6. What does the Cascade refer to in Cascading Style Sheets?
    That is the ability to use more than one style sheet in a given web site. The first one might apply to the whole web site and the second might apply to just a few pages of the site. The second style sheet rules would override the first one for those particular pages.
  7. What effect will this coding create if applied to the <h1> tag?
    {
    font-size : large;
    font-family : monospace;
    font-weight : bold;
    color : #008000;
    background-color : #FFFF00;
    }
    
    
    This would make the text in the <h1> tag: large, monospaced, bold, green text and yellow background (marked).
    resulting document
    css document