Project #5 - Using Classes, Spans, and the Float property


Lab Activity

Coding:

You will be provided with the web pages and images to be used in this project. While viewing the project instructions online or visiting the link given, download the zip file to your css folder (created for previous project) and unzip or extract the files to store them in your css folder. Windows will automatically try to save the files into a folder named project5. Do not use the project5 folder to store your files. If this happens, move the files into your css folder and delete the project5 folder.

project5.zip

When you have unzipped/extracted the files, you should see files named: web-careers5.html, parkland-csit5.html, webdev5.html, and 7 image files. The pages have the same text content that you used in Project 4, but the "design" will look much different with new CSS applied.

If you need help with your coding, upload your css folder that includes all of your pages, images and stylesheet to the server and send me the URL of the page you have questions about.

General questions like, " Does this look ok? " and " Can you see what is wrong with this?" and " My code doesn't validate " are too vague.

Questions must be more specific like, " When I hover over my hyperlinks, the dark blue color for text does not show."

For the area that is not working, also tell me what you used in your HTML code and what you used in your CSS for that area. You must use the validator on any page that you are asking questions about. If you don't understand validation errors listed, please let me know what validation error is listed FIRST on the errors list. Validation errors should be corrected and the page revalidated, one at a time. Allow yourself plenty of time to use the validator and get help with the corrections.

 

<body>
< div id= " container "> < !--start of container-->
< div id="banner"></div>
<nav>
unordered list of page links for your website
</nav>
<header>
<h1> and one paragraph with an image added
</header>

< div id= "content"> < !--start of content-->
< div id= " col1 " >
h2 followed by paragraph content
</div>
< div id= " col2 ">
h2 followed by paragraph content
</div>
< div id="col3">
h2 followed by paragraph content
</div>
< div id="col4">
h2 followed by unordered list
</div>

< /div > < !--end of content-- >


<footer>
content for footer
</footer>

</div> < !--end of container-- >


</body>

 

Open the web page named: web-careers5.html in the browser. Notice the areas of content on the page. You will add <div> </div> elements to mark the divisions on each page of the website. Visualize where you will need to create divisions on each page by viewing the figure here that summarizes the structure for the <div> elements to be added.

Notice in the diagram that the "container" division is a big box holding everything inside the body.

It has divisions nested inside it named:

Nested inside the "content" division are four more divisions named:
col1, col2, col3 and col4.

The starting and ending point of each division is very important for the CSS to be applied properly.

Details to help you add the divisions into your page are given below the diagram.

Work slowly and carefully, taking time to think about what each of the coding steps is supposed to accomplish in your web page.

An image to show you where the beginning and end of divisions show up in the text content areas of the page for web-careers5.html is shown below. Click on the thumbnail to see the full view:

Screenshot

Add divisions and image to web pages:

Open your web-careers5.html page in Notepad.

On the line after your opening tag for <div id="container"> (and the "comment" that goes with it), add this code to add a new division to the page: <div id="banner"></div>

Notice that the above "division" on your page does not have any text content. Later, you will add CSS for the "banner" id to add a background image at the top of the document.

The next code on your page should be the "nav" division of your coding around the unordered list of hyperlinks.

The "header" division should surround the level 1 heading and the paragraph that follows it.

In the "header" division, directly after the opening <p> tag, add an <img> element so the " big bug" image (bug.png) displays. You may need to refer back to Project 2 to review how to add an <img> element.

When you are finished the image tag should have 6 attributes (src, alt, title, width, height, class). After completing your stylesheet (later in the instructions), the image will appear to the left of the text of the paragraph because of the CSS that will be applied using class=" imgleft " .

 

After the closing tag for the "header" division, add the start tag for a "content" division. The end tag for the "content" division should be added just before the last paragraph that contains the "footer." Since the start tag for this division is a long ways from the end tag in the code for the page, add an HTML comment tag AFTER the </div> end tag for this division. The comment should say: " This is where the content division ends"

Inside the "content" division, add FOUR divisions with ID attributes of col1, col2, col3 and col4. Each time you see a level 2 heading in the text content, start a new division. End the division before the next level 2 heading starts. The division for "col4" will contain the level 2 heading and the unordered list of " Interesting Links." Later in the instructions you will include CSS with the "float" property for each of these boxes and will assign a width to them using CSS so that the divisions will display beside each other.

Note in the "col4" division, the last list item displays no visible text on the page. (< li > & #160;< /li > ) It has the numeric entity code for a non-breaking space to make it more stable across different browsers. Some browsers may not display the formatting if there is no text content for the element. This list item, with only a space in it, is inserted to keep the formatting consistent. Each list item, including the last one, will be formatted with a top border when you add your CSS.

AFTER the closing </div> for the "col4" division, you should have the closing </div> for the "content" division of your page, followed by the "footer" division surrounding the Copyright paragraph and the ending </div> tag for "container." Save and validate.


Open your parkland-csit5.html page and your webdev5.html page

Add the divisions and the large grasshopper image, repeating the steps given above to make each page have the same HTML structure for design as the web-careers5.html page.

Save and validate.


Review of syntax for different types of selectors in CSS

Type of selector CSS Syntax Corresponding HTML code that marks where formatting will be applied in web page
tag rule tag {property: value;} <tag>
id #name {property: value;} <sometag id="name">
each id can only be used one time per page
class .name {property: value;} <sometag class="name">
each class can be used as many times as you want
compound selector tag1 tag2 {property: value;} tag2 element that is inside tag1 element
(compound selectors format items that are nested. must have space between items in selectors but not commas)
compound selector #name tag {property: value;} tag element that is inside an element that has id="name"
grouped tag1, tag2 {property: value;} each element receives the same formatting
(must use commas between names of selectors)
pseudoclass a:link
a:visited
a:hover
a:active
for this project the pseudoclasses are all for the hyperlink element

Create a new External Stylesheet

After you have added all of your style rules, all of your pages should have formatting similar to this. (Click on thumbnail image to see full view):

Thumbnail Screenshot

Open a new document in Notepad. Save the document naming it: styles5.css

Add a <link> tag to each web page to connect it to the styles5.css stylesheet.

On your stylesheet:
Add the following TAG style rules just like in the last project.

Notes about coding for the TAG rules in the chart below:

The star (*) used as a selector in the first style rule represents all elements. It says to apply 0 padding and 0 margin to all elements until overwritten with something that is more specific.

When using web-safe color codes, three digits can be used. If only three digits are given, each digit is repeated to determine the proper color. For example, in the h2 style rule: #366 color code will represent the color of #336666

The background property for the h2 style rule should make this image appear once in the background to the right of the text for every level 2 heading.

View the page to see the properties for each TAG rule as you add it to the stylesheet. Look at each property in your CSS and see if you can see the effect it has on your web page. Continue on, taking time to save each new style rule to your stylesheet and view the effect on the web page.

Selector property value

*

 

padding 0
margin 0
body
font-family "Century Gothic", Arial, sans-serif
font-size 85%
line-height 1.5em
h1
padding 1em
font-size 200%
letter-spacing 2px
font-weight lighter
h2 padding 30px 35px 30px 10px
font-size 125%
letter-spacing 2px
text-transform uppercase
color #366 [blue-green]
background

url(smallbug.png) no-repeat right center

height 2.5em
a text-decoration none

Continue with your style rules to add ID, class, compound, pseudoclass, and grouped selectors

Use the shorthand method when possible. The selectors are given in bold text followed by a list of property:value settings to use in the declarations. To help you see if your CSS rules are working, descriptions of property values and color names are listed in [brackets] beside some of the values. Do not include the [descriptions] or [color names] in your CSS. Always use the numeric color code to specify color.

Container Division

The <div id="container"> . . . </div> element on your web page creates an invisible box to group together all of the content on the page.
To apply formatting using this ID, add a style rule to your stylesheet using an ID selector to match. Add declarations with properties and values for:

Banner Division

The < div id="banner"></div> element on your web page has no text content
To apply formatting using this ID, add a style rule to your stylesheet using an ID selector to match. Add declarations with properties and values for:

The #banner CSS should make the image that looks like this appear as a background image in the #banner division at the top of the page.

 

Navigation (" nav " ) Division

This section of the page includes the hyperlinks to each of your pages. To apply formatting using this ID, add a style rule to your stylesheet using an ID selector to match. Add declarations with properties and values for:

You need to style the <ul> , < li> , and < a> elements that are in the nav division, but you don't want this formatting to be applied to any other < ul> , < li> , or <a> elements in your pages. So... you use compound selectors to specify that the formatting should be applied only inside an element marked with id=" nav" .

Add a style rule using a compound selector to apply formatting for the <ul> element ONLY if it is inside an element of "nav"

Add a style rule using a compound selector to apply formatting for the <li> element ONLY if it is inside an element of "nav"

Add a style rule using a compound selector to apply formatting for the <a> element ONLY if it is inside an element of "nav"

Header Division

The <header> . . . </header> element on your web page creates an invisible box to group together the level 1 heading and the paragraph that follows it.
To apply formatting using this element, add a style rule to your stylesheet using an selector to match. Add declarations with properties and values for:

The < div id=" content" > . . . < /div > element on your web page creates an invisible box to group together all of the content between the header area and the footer on the page.
To apply formatting using this ID, add a style rule to your stylesheet using an ID selector to match. Add declarations for properties and values for:

The image below should now display for the "content" area of the web page. It repeats down the page so it looks like the page has four columns.

4column.gif

Add a style rule using a compound selector to apply formatting for the <p> element ONLY if it is inside an element with id="content"

Add a style rule using a compound selector to apply formatting for the <ul> element ONLY if it is inside an element with id="content"

Add a style rule using a GROUPED selector (using commas between the names of the selectors) to apply formatting to the four ID's named: #col1, #col2, #col3, #col4 (Hint: see lecture notes for an example of the syntax for grouped selectors)

The text in the"col" divisions have a fixed width or 205px to make your text appear on top of background image in divisions "floated" next to each other at this point. If it is not working, be sure you have used the correct syntax for the grouped selector.

Add a style rule using a compound selector to apply formatting for the <ul> element ONLY if it is inside an element with id="col4"

Add a style rule using a compound selector to apply formatting for the <li> element ONLY if it is inside an element with id="col4"

The <footer> . . . </footer> element on your web page creates an invisible box to surround the paragraph for the copyright notice and reference to mitchinson.net.
To apply formatting using this ID, add a style rule to your stylesheet using an ID selector to match. Add declarations for properties and values for:

Add a style rule using a class selector named .imgleft

Add a style rule using a a class named .highlight

Then...go to your web pages and use a <span> element to apply the .highlight class to a few phrases in the "header" division of your pages

A class can be used multiple times on a page. "Highlight" more than one phrase on each page.

Add a style rule using a grouped, compound selector named: nav .current, nav .current:hover
(It is important to use the exact spacing and punctuation as shown in the selector name above. This says to apply formatting for any <a> element with class="current" that is inside an element with id="navigation" and a compound selector to apply formatting for the a:hover state of any <a> element with class="current" that is inside an element with id="navigation")
Add properties for:

Then...go to the "nav" division of coding on each of your web pages. Find the code for the hyperlink to the current page. Add the attribute class="current" to the start tag for the <a> element. It will look like this when you are done: < a href="web-careers.html" class="current">
You will also need to go to your other pages and find the <a> element for the current page and add the class="current" attribute. Each page will have a different <a> element to apply this to, depending what page you are on.

The CSS should make this image appear in the background of the "current page" link

Add a style rule using a grouped selector using pseudoclasses for the a:link and the a:visited state of hyperlinks

Add a style rule using a pseudoclass for the a:hover state of hyperlinks

Add a style rule using a compound selector to apply formatting for the a:hover state of the hyperlink ONLY if it is inside an element of "nav"

When you float across the navigation bar with the mouse, this image should appear in the background of links that are not the current page.

Save your pages and validate HTML and CSS.


If your pages do not have the formatting displaying in the screenshot, go back to your style rules and troubleshoot. See note at top of project instructions about details for asking for help on this project.


Upload folder to server (after you receive feedback for Project 4)

Upload your css folder. After uploading your pages, view them from a public URL to be sure they work properly. All pages should have formatting applied.


Submitting Project

Take Quiz 5 in Cobra. Use the Dropbox for Lab 5 in Cobra to submit the URL of your page. With the Add File button, attach only one file: your styles5.css stylesheet. Please remember to use the Insert QuickLink dialog box when submitting your complete URL and choose the option to Open In: New Window.

To determine your URL, remember that all URLs will begin with:
http://www.csit.parkland.edu/~yourusername#/
After the user name, you must add the name of the folder. After the folder name, you must add the name of the file.