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

• CSS Introduction

Class Slides

• Week 4.1 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

• CSS Tutorial on MDN including linked subheadings:
  • How CSS is structured
  • How CSS works

04.02 More CSS

Pre-Class Reading

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

Class Slides

• Week 4.2 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

• CSS Reference
• Box Model. Look through the sample files and experiment with CSS short-hand.

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.