Week 04 – CSS

Learning Outcomes

After this week you should be able to

  • Describe CSS
  • Write CSS to style hypertext documents
  • Use Chrome Developer console

04.01 Intro. to CSS

Pre-Class Reading

Class Slides

Group Activty / Lab

  • Download the file solar-system.zip and expand it in your class folder on your PC.
  • Open solar-system.html and style.css in VS Code
  • Follow instructions in comments on both files to update the styling applied to the HTML file.

Post-Class Reading


04.02 More CSS

Pre-Class Reading

- CSS Borders
- Review the file week-04/02/border.html.

Class Slides

Group Activty / Lab

  • Format the aboutme.html page from Week02
  • Start here for instructions to edit your previously created aboutme.html file to link an external CSS file you create.
  • Refer to other pages at that resource as needed to identify syntax for styles you want to apply.
  • Reference your aboutme.html file to identify and add more semantic HTML elements (headings, a list or two, etc.) to use as your CSS selectors. Edit the HTML to add elements, or class="" or id="" attributes, as needed for your CSS.
  • For each CSS selector, define property:value; pairs to style your about-me.html page. Reference file week-04/02/fonts.html for suggestions on how to apply fonts.
  • Create a folder in your personal GitHub repo and upload your HTML and CSS files, then view in GitHub Pages.

Post-Class Reading

Homework due this week

Look for instructions under week-04/02/

Project Deliverable due this week: Site Map + Media List

Find guidance for content and file formats for this deliverable on the Individual Project page on the course website.

As discussed in class:

  • Site Map:Visual representation of pages and their hierarchy
  • Media List: Upload image and other media files collected (so far) for use in your project to an images or media subfolder in your project folder in your personal GitHub repo.
    Also: Upload to GitHub and submit to Blackboard a table with rows listing information about each of your media resources: Filename, Source ("self" or URL where you found the image), Owner, Licensed for Reuse (yes/no). File type for this table can be a Word, Excel, or HTML document.