Week 10: CSS Basics

Week	Topic	Learning Objectives	Key Resources
10	CSS Basics	Students will be able to link a CSS file to an HTML file correctly and create several basic selectors with appropriate values defined.	Week 10 Slides TBD

Overview

• Basic CSS syntax
  • Selectors
  • Properties
  • Adding CSS to HTML
  • Margins and padding
  • Borders
• Internal and external CSS
• CSS Cascade - specificity and final order
• Element inspector
• CSS box model
  • Box vs inline CSS
  • Divs and spans

Guidance for Mentors

Specific, organized code is the friend of students here! Lots of people have CSS frustrations, and keeping students patient is important in this lesson.

Assignment Rubric

This assignment has students writing some CSS. Their code should:

• Create folder called css at the same level as the README.md and index.html files
• Inside that folder, create a CSS file called index.css
• Open the index.html file and specify a relative path to the CSS file
• Change the background color of the page body
• Change the default text color
• Customize the font family
  • Stretch goal (optional):load in a font family from Google Fonts
• Add spacing (padding/margin) between sections
• Change the alignment of the content of one of the sections
• Change the font size, weight, and color of headings
• Transform the style of the Name heading at the top of the page
  • Stretch goal (optional): add a picture to HTML and/or CSS
• Transform the "Experience" list items into styled blocks
• Transform the style of the "Connect" links
  • Stretch Goal (optional): make or use social media icons to replace the link text with images