Assignment 10 — Using Divs and Spans

The <div> and <span> elements provide supporting structure to your web pages. You can use these elements to group things on your web page and to style those items as a group. This assignment also introduces the concept of pseudo-classes.

You can use a <div> element to group block-level elements (such as a heading (<h3>) with the related paragraphs or bullet lists).

<div id="section_a">
  <h3>I'm a heading </h3>
  <p>This is my related content.</p>
</div>

Doing this would allow you to do such things as create a style for that <div> element to create a border around both elements, to specify that the text within that <div> has a specific color, or to provide a background image or color for the <div> element.. For example if you wanted to draw a single box around both the <h3> and <p> element, you could specify the following rule:

div#section_a {border-style: dashed; border-width:2px;}

The <span> element allows you to do the same type of thing to text within a block-level element. For example, if you wanted, within a single paragraph, to have part of the text in one color and the rest of the text in another color, you could create two <spans> as shown in the following example:

<p><span class="menu_item">Hamburger</span> - <span class="price">$5.50</span><p>

You could then specify a style rule for each span:

span.menu_item {color: green;font-weight: bold;}
span.price {color: black;}

Certain elements also have a state associated with them. For example, when you display a web page in a browser, often times the visited links (those whose web pages you have already seen) will be a different color than the non-visited links. You can specify these states to have different colors by specifying rules for that state, as shown in the following example. The value link and visited are called pseudo classes, and they are associated automatically with the state of the link as the browser interprets it.

 a:link {color: purple;}
 a:visited {color: blue;}

Other states can specified, such as if an element is a first child of a parent element, whether you are hovering a cursor above an, and so on.

For more information about <div>, <span>, and elements that support pseudo-class elements, see Chapter 10 of the Head First HTML and CSS book.

HTML elements:

Tasks:

1. Read and complete the exercises from Chapter 10 of the Head First HTML and CSS book.
2. Create a folder named Chapter10.
3. In your Chapter10 folder, create your customized versions of the following files.
   • lounge.html
   • lounge.css
   • directions.html
   • elixir.html
   • minimum of five images

   Duplicate the folder structure described in the book.

4. Ensure that all of your links work correctly and display the appropriate file when clicked.
5. Validate each of the HTML pages at https://validator.w3.org/. Fix any errors that occur.
6. Upload the contents of your Chapter10 folder to your website.
7. Zip your Chapter10 folder and name the file yourName_chapter10.zip.
8. Submit the zipped file through Blackboard. In the comments section in Blackboard, enter a URL to the files on your website.

Your assignment should demonstrate:

• Revising the files from Assignment 9.
• Incorporating <div> and <span> elements within your content.
• Defining the following CSS styles for a <div> specified with an id attribute:
  • Define the border-width, border-style, and border-color.
  • Define appropriate padding and margins.
  • Center the content within the <div>.
  • Add a background image to the <div> that appears only once.
  • Change the color of the headings within the <div>.
  • Float the <div> to the right.
• Defining the font-style and font-weight styles for <span> elements identified with class attributes:
• Changing the color of <a> elements using psuedo-classes.
• Validating your CSS and HTML files and correct any errors.
• Uploading the files to your website.

By 11/16

Example assignment:

Chapter 10 example