Project #4 - Applying CSS using Divs, IDs and compound selectors

Most students find this project to be more challenging. Allow extra time for reading and troubleshooting.


In the last project the selector for each of the style rules was the tag name for an element found in your web page. There are many other types of selectors that can be used in CSS. In this project, ID selectors, compound (descendant) selectors and grouped selectors will be introduced. Read the lecture notes or online resources to help you with the coding activity and lab questions for the project.


Lab Activity:

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. When you are extracting the files, Windows will automatically give you a folder named project4. Do not use the project4 folder to store your files. Use the browse button to direct the computer to save your files into your css folder.

Link to Project 4 zip file

Extract dialog box

When you have unzipped/extracted the files, you should see files named: web-careers.html, parkland-csit.html, webdev.html, comptech.jpg, head.jpg. Make sure that these files are not inside a project4 folder. If they are, move them into your css folder.

Open the web page named: web-careers.html in the browser. Notice the areas of content on the page. You will need to have FIVE <div> </div> elements to mark the following divisions on each page of the website. Visualize where you will need to create divisions on each page by viewing the figure below that summarizes the structure for the <div> elements to be added. The green box below displays where the coding for the <div></div> tags will be placed in Notepad. The second diagram displays the layout of the divisions using the text content of the page. Details to help you with the coding are given following the diagrams.


<body>

Divs for Project 4

</body>

The multi-color box shows where the divisions are placed with respect to the text content of the page. Each "division" in the diagram is displayed with a different colored background. You will not see these background-colors in your web page. This picture is just to show you where the divisions are placed in the content of the page. When you add the code for the divisions onto your HTML page, you will not see any visual change in your web page. Formatting will not be applied until you create the style rules with CSS. Details to help you add the divisions into your page are given below the diagram.

Divs for Project 4


View the web-careers.html page in Notepad so you can see the code. Notice that the code to create the "container" division on the page has already been added in to help you get started. Right after the <body> tag, you will see:

< div id= " container " > < !--beginning of the container-- >

This tells the browser to start a division on the page and apply any formatting given on the stylesheet for an ID selector named: #container

Following the opening tag for the division you see an HTML " comment " :
< !--beginning of the container-->

This code is for explanatory purpose only. It does not display when the page is viewed in the browser. All comments in HTML must be written with this syntax:
< !-- comment text here -- >

Before the ending </body> tag you will see the ending </div> tag for the "container" division. It also has a "comment" in code to remind you that this represents the ending tag for the < div id= " container " > tag. This set of < div > < /div > tags will create an "invisible" box around all of the elements within the body of the page. Using the directions below and the diagram displayed above as a guide, add FOUR more divisions with <div> elements to the page following these guidelines:

When you are finished, you should see FIVE elements on your page with coding similar to the diagram.
(You will not see the shading or borders. They are shown to help you visualize the concept of creating invisible boxes to group together HTML elements for applying CSS formatting.)

Add HTML comments to identify where each division starts and ends. Use the name of the id for the division in the comment.

Mark the 3 list items in the unordered list as hyperlinks:

The unordered list that follows the <h1> heading on the page has text content for hyperlinks. Add the code to make each one of the <li> elements into a hyperlink. When you are finished, you should have three hyperlinks that go to the pages of the website, including the page that you are on. Use relative hyperlinks using the filenames of your web pages as the values for the href attributes.

Go to the parkland-csit.html page and the webdev.html page and repeat this procedure. Each web page given to you in the project 4 zip file needs the division elements added and hyperlinks to provide navigation between the pages. (You will not be using the web pages from the previous projects in this project.)

Save your pages and validate to be sure that each opening div or element tag is properly closed. Be sure you have five opening tags and five closing tags. Each opening <div> tag should have an id attribute added that will correspond to ID selectors on the stylesheet. The browser looks for the ID on the stylesheet and applies the formatting properties to the element that has the matching ID attribute on the web page.

In the copyright notice of each page, replace the words Current year with 2013 and replace Student Name with your name.


Create a new External Stylesheet

Open Notepad. Type a CSS comment at the top of the page to include your name: /* Student Name */
Save the document naming it: styles4.css

Add a <link> tag to all three pages to attach your stylesheet to each web page. Save each page.

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

Use the shorthand method when possible in your style rules. To help you see if your CSS rules are working, explanations of property values and color names are listed in [brackets] beside some of the values. Do not include the [descriptions] or explanations given inside the square brackets or [color names] shown inside square brackets in your CSS. Always use the numeric color code to specify color.

Selector property value
html, body
[This is a grouped selector. Be sure to include the comma between the tag names. The same formatting will be applied to both elements]
margin 0
padding 0
body
background-image url(comptech.jpg)
h2
margin 1em 0 .5em 0
letter-spacing 3px

View the page to see the properties for the TAG rules being applied. It won't be a pretty page until more CSS is added but you should see the background image and notice the formatting to space out the text being applied to level 2 headings.

Continue on, taking time to save each new style rule to your stylesheet and refresh your web page to view the effect on the web page. Think about the syntax that you have been using for style rules as you read the instructions below to set up the formatting for the page. Look at the examples of coding in the lecture notes and in previous projects to help you create your style rules. Remember that each style rule requires a selector (telling where the formatting will be applied) and one or more declarations that each include a property and value. Look at the properties being used in each declaration and see if you can determine what formatting they represent. This will improve your ability to troubleshoot and help you build your own CSS rules later in the course.

REMINDER:
When adding style rules to your stylesheet with an ID selector, you must include the # with the ID name.
Example of an ID selector in CSS: #container, When using the HTML5 symantic elements you only need to use the name of the element with no hash tag. For example: header, nav, footer is all that is needed. #header, #nav, #footer is incorrect. Please refer to the w3 schools description of HTML5 symantics. http://www.w3schools.com/html/html5_semantic_elements.asp

Container Division

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

When you view the page now, you should see all of the text content inside a box that is defined in the HTML code between < div id= " container > and < /div > . The styles rules created for the ID named container apply to this area of the page. You should see a box that has a white background and a width that is 760 pixels wide. The box for "container" is in the middle of the page because you have used left and right "auto" margins in the CSS for this area. Since the width of the box has been set at a specific width, the browser uses the "auto" margins to use the remaining space evenly on left and right. There should be a medium blue border around all of the content. The line-height property causes the text to appear with " one and a half-spaced " lines. The font should appear as a sans-serif font, a little smaller than the default size.

Header Division

The <header> . . . </header> element on your page creates an invisible box to apply formatting at the top of the page.
To apply formatting to the header selector, add a style rule to your stylesheet using a selector named header. Add declarations for properties and values for:

View the page to see the styles being applied. At this point, the level 1 heading is above the background image.... continue on!

REMINDER:

Add a style rule to your stylesheet using a compound (descendant) selector to apply formatting for a level 1 heading element ONLY if it is inside an element with id="header"
Add declarations for properties and values for:

The "header" section of your page should now look like this:

heading screenshot

Navigation (" nav " ) Division

This section of the page includes the hyperlinks to each of your pages. 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 to your stylesheet using a compound selector to apply formatting for the <ul> element ONLY if it is nested inside an element of "nav"
Add declarations for properties and values for:

If you view the page at this point, you can see that more changes need to be made!

Add a style rule to your stylesheet using a compound selector to apply formatting for any <a> element ONLY if it is nested inside an element of "nav"
Add declarations and properties and values for:

Now the white text, padding and removal of the hyperlink underlining make the navigation list much easier to read.

Add a style rule to your stylesheet using a compound selector to apply formatting to the element that has id="current" ONLY if it is nested inside an element of "nav"
Add a declaration for these properties and values that will format the hyperlink marked as "current" to display with gold text:

The browser needs to find an element with id="current" nested inside an element of "nav" to apply the above style rule to the web page. When you were marking your HTML code for the page, you included a element tag of "nav" but there are no elements marked with the attribute of id="current" yet. To see this style rule being applied requires adding the id="current" attribute into the HTML coding. Go to the HTML code of your web page. On the web-careers page, locate the "nav" division and find the code for the hyperlink to the current page. Add the attribute id="current" to the start tag for the <a> element. It will look like this when you are done:
< a href= " web-careers.html " id= " current ">
You will also need to go to your other pages and find the <a> element for the current page and add the id="current" attribute. REMINDER: Each page will have a different <a> element to apply this to, depending what page you are on.

Add a style rule to your stylesheet using a compound selector to apply formatting for the <li> element ONLY if it is nested inside an element of "nav"
Add declarations and properties and values for:

The above formatting will cause the list items to display horizontally, side by side, with a right border appearing as a vertical line after each list item. Continue on!

The previous style rule created a right-border for each list item. The first list item also needs a left border. Follow the directions below to create a style rule to apply to only the first of the list items.

Add a style rule to your stylesheet using a compound selector to style the element that has id="first" ONLY if it is found nested inside an element of "nav"
Add one declaration to add the values for the border-left property:

At this point, you do not have any elements in your web pages that include the id= " first " attribute. Go to the HTML code of your web page. Find the code for the first list item in the " nav " division of the page. Add the attribute id= " first " to the start tag for the list item. It will look like this when you are done: < li id= " first " >

Now the style will be applied because you have an element with an id="first" attribute inside an element with id="nav" applied to it.
You will need to go to the HTML code of each page and add id="first" to the first list item in the "nav" division. This will be marked on the same list item on every page.

View your pages! Your navigation division should look like this (hyperlink to current page is gold text):

On page 1:

navigation page 1

On page 2:

navigation page 2

On page 3:

navigation page 3

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

Add a style rule to your stylesheet using a compound selector to apply formatting for the <p> element ONLY if it is inside an element with id="content"
Add a declaration with properties and values for:

View your web page and notice that in the section of the page for " Interesting Links, " there are four list items. Three list items include a hyperlink. The last list item is empty. You want to keep four list items in the code but you do not want the last list item to display. You can "hide" elements using the display: none; declaration in CSS. To hide the last list item:

Add a style rule to your stylesheet using an ID selector named: #noshow
Add a declaration with properties and values for:

Go to the HTML code of your page. Find the last <li> element in the section of the page with the heading " Interesting Links. " The last list item does not have any text content. It looks like this: < li ></li>
Add the code necessary (on each of your HTML pages) to apply the #noshow ID to this <li></li> element. (See previous examples where you added the id attribute into the HTML coding to help you figure this one out.)

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 the footer ID, add a style rule to your stylesheet using an ID named footer. Add declarations for properties and values for:

Add a style rule to your stylesheet using a compound selector to apply formatting for the <p> element ONLY if it is inside an element of "footer"
Add a declaration with properties and values for:

Your completed pages should have formatting that looks similar to the screenshot. (While online, click on the thumbnail image to see the full view for the page.)

screenshot

The screenshots are provided to give you a good idea of what to expect from the CSS added to the project. Depending on the size of your monitor screen and resolution, the spacing may appear slightly different, but the overall formatting should appear as in the screenshot. If your pages do not have the formatting displaying in the screenshot, go back to your style rules and troubleshoot. If you need help, 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. Ask specific questions and give details about what is happening that you don't understand. For the area that is not working, 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. You must send only one question per email when troubleshooting. When asking for help with your coding, you cannot just say, "It's not working, please help." You have to specify one problem at a time and describe what code you tried to use. If the validator gave an error message with the area of code that you are concerned about, you have to tell me what error message the validator presented about the code.

 

Create an embedded style sheet

Open the web page named webdev.html

Add the code required to insert an embedded stylesheet using the <style> </style> element. An embedded style sheet will only apply the style rules to the current page.

<style type="text/css">

</style>

Inside the <style> element, add one style rule to format the <ul> element. Set the list-style-type property to square.

Save the page. View the page and see if the bullets in the unordered list appear as squares.

Troubleshoot and edit if necessary.

Be sure to validate using the validator for HTML and the validator for CSS code BEFORE uploading. If you submit a project that still contains validation errors in the coding, the project is considered incomplete and you earn a -.6 deduction on the project score.


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

Upload your css folder (which should contain 3 new web pages, 1 new stylesheet and 2 new images for this project, and files from the previous project). When uploading be sure that you "drop" your css folder in a blank area (not on top of other folders). 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 4 in Cobra. Use the Dropbox for Lab 4 in Cobra to submit the URL of your page. With the Add File button, attach only one file: your styles4.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.

Reminder:
If you are unable to successfully publish your web page to the CSIT server, please make a zip folder for all of the files for the project and send it to me as an attachment using your Parkland student email (not Cobra). If you are having difficulty with the uploading procedure, you must make an appointment or stop by office hours to get help. You will not get full credit for your project unless you upload it to the Parkland server and submit an accurate URL.