Lab 6: Cascading Style Sheets

Introduction

Let's take a moment and think about a nice design. In this lab you will continue building the website that you started during the first lab. This time you will start customizing your pages so that they are visually appealing. You have to build your CSS manually instead of using any external libraries (such as bootstrap) so that you can become comfortable with CSS before working with the capabilities that these other libraries provide.

Untill now, we have mainly looked at the structure of web pages. Now we will look at formatting – an important additional aspect of good web site design. The techniques used in HTML5 are cascading style sheets (CSS). For this lab, dress up your site using CSS.

Since the focus in this lab is on appearance, a larger than usual portion of your grade will depend upon aesthetics.

Read the entire lab so you see the requirements and know what is coming.

Part 0 - Setting up (5%)

  1. Directory:You must create a folder in you public_html/IT350 folder called Lab06 and store your work in that directory. You should COPY all your files from Lab05 into this directory and make changes to them here! Make sure you do not modify the files in previous labs folders. Make sure files in previous labs folders are not open in your editor!

Part 1 - New style sheet (55%)

  1. (20%) New style sheet: Create an external style sheet to contain a core set of styles used in all pages within this lab's website. The name of the style sheet must be styles.css. At a minimum:
    • define the following CSS properties for element(s) on your page:
      • background-color
      • color
      • margin or margin-xxx (left, right, top, or bottom)
      • padding
      • border or border-style or border-color or border-width
      • text-decoration
      • text-align
      • font-size
      • font-family
      • font-weight
      • float
    • define at least two classes you will use later in your index.html file
  2. (15%) index.html: Modify your index.html page to accomplish the following:
    • Link to the new style sheet styles.css
    • Use at least two classes you defined in your stylesheet
    • Use inline styling in at least one place
    • Use div and span with styling
  3. (15%) Existing HTML pages: modify all other existing HTML5 pages and pages generated from PHP for your ECA/unit (that you have copied into the Lab06 directory) to link to the style sheet you created above. Then, if needed, make any additional changes to each page so that the overall appearance is noticeably different now that the stylesheet has been added (hint: you don't necessarily have to modify the body of your page to achieve this, though it is fine to do so). Try to make use of CSS to make your pages more attractive and more functional.

Part 2 - Navigation (75%)

  1. For this part you need to create a navigation bar for your website (ECA/unit) and include this navigation bar in all your pages (html or generated) for your website. The navigation bar has to make use of CSS to look good and integrate well with your overall page design. The navigation menu must contain links to:
    • index.html
    • schedule.html
    • registration.html
    • login.html (see Challenge problem for a different option)
    • requestReport.php (see Challenge problem for a different option)
    • logout.php (see Challenge problem for a different option)

Part 3 - User style sheet (95%)

Users with disabilities, such as visual disabilities, may wish to modify the presentation of web pages to make them easier to read. But beyond that, you might prefer your own fun styles overlayed on every page you visit! One way to do this is with a user style sheet. You install this in your own browser, and it is loaded with every (or just a subset) page you visit. One way to do this is to change the appearance settings in your browser.
  1. We need to install a browser extension to manage our custom user style sheets. Instructions here are for Chrome only, but Firefox has similar extensions. Follow these steps for Chrome:
    • Visit the Stylus extension and click the blue "Add to Chrome" button. A confirmation box will appear, and it will ask for permission to read and modify your data on all webpages. Confirm the add if this is all it asks for. If it requests permissions beyond that, ask your instructor for guidance.
    • A new icon will appear in your browser (a white S on blue-ish background), top right. Click it, and select the "manage" button.
    • Click the "Write new style" button on the right pane. This brings up an editor within the browser and you can use it to write your user style sheet there. Make it change the colors and font sizes of parts of your pages, at a minimum. Later, you must copy the content and save it into a file named userContent.css within your lab directory.
    • Once finished creating your style sheet, use the text box at the top of the left pane to give it the name userContent. Then click the "Save" button in the left pane. If you make any further edits, you must click Save again.
    • You now have a user style sheet that should apply to all the pages you visit with Chrome! Now open a new tab and go to your lab's webpage. You should see your page change...at least some of it. Your user styles might need "! important" after each rule - see questions 7.1, 7.2 below).
  2. In your Chrome browser, go to Settings (from the menu that appears when you click on the three dots on the top right) and then Appearance (from the links on the left) and then notice that you can change the Font size. Change the font size to Very large. Changing the font size should apply to all the pages you visit with Chrome!
  3. Now make changes to your styles.css and your index.html (if necessary) to enable you to answer the following questions:
    1. What happens if your browser sets the font size to "Very large" and the CSS built into the page does not set any specific font size?
    2. What happens if your browser sets the font size to "Very large" but the CSS built into the page sets the font size to "x-small"? Which takes effect? What if the CSS built into the page sets the font size to "5pt"? Why do you think that is the case?
  4. Write the answers to these two questions in your README.txt file in Lab06.
  5. Copy the code from the user style sheet you created into a file called userContent.css in your Lab06 folder. You will have to turn in this file with the other pages on your website.

Challenge Problem - Just a bit more (100%)

  1. Customize your navigation menu to show the links appropriate to whether the user is logged in or not: if the user is not logged in, show links to index, registration.html, schedule.html, and login.html. If the user is logged in, show links to index, schedule.html, report.php, and logout.php. Modify any file needed to make this happen. Note that some html file might need to become php, to be able to test whether the user is logged in or not.

General Requirements and Deliverables

  1. Documentation: ensure you have appropriate comments in your CSS, HTML, and PHP code.
  2. Validation: ensure your HTML pages validate as HTML5 and your CSS code validates using the W3C CSS validator. You do not have to validate the HTML code generated from PHP, but you should strive to generate proper HTML5 code nevertheless.
  3. Links: Create threetwo links in your top-level IT350.html page under the heading 'Lab06'
    1. Under the name 'Index', make a link to your Lab06/index.html (or Lab06/index.php if that is what you have)
    2. Under the name 'CSS', make a link to Lab06/styles.css
    3. Under the name 'User styles', make a link to your Lab06/userContent.css
  4. Put a README.txt file in the lab directory. This file should have:
    • *Lab number
    • *Your name and alpha
    • *Collaborations in completing this lab (people, online sources used outside the course website)
    • *How far you got (through which part did you finish)? If you tried any additional parts beyond the one you completed, what did you do?
    • *How long this lab took you
    • *(Required for this lab) Answers to questions 7.1 and 7.2
    • Any suggestions to improve the lab
    • Any comments needed for the instructor to review the lab (usernames, passwords, etc.)
  5. All of your files should be in a folder called Lab06 in your public_html/IT350 folder. Your instructor will assume that your web pages are viewable at http://midn.cs.usna.edu/~mXXXXXX/IT350/Lab06/index.html where XXXXXX is your alpha number.
  6. All labs must be complete and saved to the midn.cs.usna.edu drive before you submit your assignment. Do NOT modify your web files after you have submitted your assignment (unless you resubmit, which you can do as often as you like up until the deadline.)
  7. Submit all files to the online submissions system (submit.moboard.com) on or before the due date, this is Lab06. Use the command line submit script and capture the entire contents of the directory. The easiest way to do this would be to cut and paste the following while logged onto the server: 

    cd ~/public_html/IT350
~/bin/submit -c=IT350 -p=Lab06 Lab06
    This assumes that the submit script is located in ~/bin/ and is executable.

When finished, the structure of your web site should look like this: (items in blue undergo modification during this lab)

\\midn.cs.usna.edu\mXXXXXX\public_html\IT350

IT350.html (main page with links to all labs)

images/(images folder might optionally change for this lab)

Lab01/

Lab02/

Lab03/

Lab04/

Lab05/

Lab06/ (all pages will change to add CSS)

styles.css(new external stylesheet created for this lab)

userContent.css(new user stylesheet created for this lab to be used by the browser)

index.html

schedule.html

registration.html

submit.php

LOG.txt

login.html

login.php

requestReport.php

createReport.php

logout.php