Lab 3

Lab 3

HTML & CSS Continued

Goal

  1. To understand the rules of CSS, i.e., the concept of "Cascading"
  2. To understand the box model used by CSS

Lab Setup

Make sure all you folders are created correctly:

If you have not already done so...

  1. Create a folder in your user drive (Z:) for storing your course work called csis390/.
  2. Create a sub-folder in your csis390 folder for storing your lab work, i.e., csis390/labs.
  3. Create sub-folders for all the labs, i.e., lab1, lab2, ..., lab3.

Make sure you can view file extensions

We will use files with identical names, but different extensions, i.e., part4.html and part4.css. You may confuse them if you do not do the following:

In Windows, make sure you display hidden files, folders, and filename extensions

Part 1. CSS & HTML Nesting

Consider the following web page with embedded CSS code:

part1

What color is each of the following?

  1. Header
  2. Nav
  3. Bold Link to Home
  4. Link to Page
  5. List Item

Task 1

  1. First, create the webpage above using Brackets, save it as part1.html and then validate it at html5.validator.nu/
  2. Answer the questions above by putting HTML comments in your part1.html file to the rigtht of each item.
    Example: 
      <li>List Item</li> <!-- this is red -->
  3. Consider that List Item is green, but we never specified the color of the li tag. Explain why List Item is green and explain the general rule about how CSS is applied to content nested in HTML. Put your explanation (as least two sentences) in an HTML comment at the top of part1.html.

Part 2. Selector Specificity

Consider the following web page with embedded CSS code:

part2

What color is each of the following?

  1. Paragraph in body
  2. Paragraph in header
  3. Paragraph in main
  4. Paragraph in section
  5. Paragraph in footer

Task 2

  1. First, create the webpage above using Brackets, save it as part2.html and then validate it at html5.validator.nu/
  2. Answer the questions above by putting HTML comments in your part2.html file to the rigtht of each item.
    Example: 
      <p>Paragraph in body</p> <!-- this is cyan -->
  3. We specified that paragraphs should be cyan, but two paragraphs are different colors. We specified that all the content inside of main should be orange, but the paragraph in main is cyan. With these examples in mind, explain the general rule about how CSS is applied to content nested in HTML. Put your explanation (as least three sentences) in an HTML comment at the top of part2.html.

Part 3. class and id Selectors

Consider the following web page with embedded CSS code:

part3

What color is each of the following?

  1. Special paragraph
  2. First name
  3. Last name
  4. John
  5. Doe
  6. Rocket

Task 3

  1. First, create the webpage above using Brackets, save it as part3.html and then validate it at html5.validator.nu/
  2. Answer the questions above by putting HTML comments in your part3.html file to the rigtht of each item.
    Example: 
      <th>First name</th> <!-- this is pink -->
  3. Consider that we specified that all the td elements are red, but Doe is green. Obviously, we created a class called "special" to apply green to elements. But, now consider that Rocket is cyan and Special Paragraph is pink. Explain which selectors have higher priority. Put your explanation (as least three sentences) in an HTML comment at the top of part3.html.

4. Linked, Embedded & Inline CSS and Box Model

Consider the following web page with linked, embedded and inline CSS code:

part4

Note that part4.css contains the following CSS code: 
div {
	border: 1px solid black;
	background-color: red;
	padding: 2px;
}

What color is each of the following?

  1. First division
  2. Second division
  3. Third division

Task 4.1

  1. First, create the webpage above using Brackets, save it as part4.html and validate it at html5.validator.nu/
  2. Next, create the CSS file above using Brackets, save it as part4.css. and validate it at jigsaw.w3.org/css-validator/
  3. Next, answer the questions above by putting HTML comments in your part4.html file to the rigtht of each item.
    Example: 
      First division <!-- background color is red -->
  4. Finally, answer the questions below with good explanations by using an HTML comment at the top of part4.html
    1. Why is the first division red even though part4.html does not have any CSS code to make it red?
    2. Why is the padding 20px when part4.css clearly has code to make the padding 2px?
    3. Why is the third division blue even thought we apply a class that should make it green?
    4. What do these answers tell you about the priority of linked, embedded and inline CSS code?

Task 4.2

  1. First, save part4.html as part4a.html
  2. Modify the embedded CSS code as follows to make the div look like the following:
    part4a
  3. Create a selector for main and give it a border that is solid 10px cyan
  4. Give main a width of 606px
  5. Set the overflow of main to auto
  6. Set the div to float to the right
  7. Set the width, padding and margin of the div to approximate the image above.
  8. Finally, make sure your page is saved as part4a.html

Task 4.3

  1. First, save part4a.html as part4b.html
  2. Modify the embedded CSS code as follows to make the div look like the following:
    part4b
  3. Increase the padding of the div and set the margin to 0.
  4. calculate and set the exact width needed to fit the three div's side-by-side in the 606px wide main content area
  5. Note that width is the "content width" so you have to consider the padding, margin and border widths to get the div's to fit
  6. Finally, make sure your page is saved as part4b.html

DELIVERABLE

Create a zip file of your lab3 folder called lab3.zip and submit the file in Canvas.

Put your partner's name in the comment area of Canvas.

Not finished?

The deliverable must be submitted in Canvas by midnight on the day before your next scheduled lab meeting. If you wish to work alone, you can submit the deliverable yourself. However, if you are assigned a partner, you can work together outside of lab and submit one deliverable together. When submitting as a lab pair, be sure to include your partner's name in the comment area when you submit via Canvas.

Do not share

Outside of lab, you are only permitted to work with your lab partner. Do not share your work with any other student.