Skip to content

Latest commit

 

History

History
104 lines (71 loc) · 5.61 KB

css.md

File metadata and controls

104 lines (71 loc) · 5.61 KB
Raw

CSS

Projected Time

About 5 hours

  • 27 minutes for video walkthrough of CSS slides
  • 10 minutes for video walkthrough of CSS-Part 2 slides
  • 3.5 hours for Independent Practice (Project)
  • 20 minutes for Check for Understanding

Prerequisites

HTML lesson

Motivation

  • Cascading style sheets(CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language like HTML. (reference from wikipedia & town open-data portal)
  • CSS enables the separation of presentation and content and this separation can improve content accessibility, provide more flexibility, reduce complexity and repetition in the structural content.(reference from Alan Dotchin academy)
  • It can completely control how your web pages look without changing your HTML. It's an important language for front-end and full-stack web developers to know because today it is used in all webpages.(reference from skillcrush & quora)

Which companies use CSS? Everyone. Some companies with very beautiful sites are Uber and Nokia.

Looking at an example website

  • Have you ever noticed why some websites look so appealing?
  • Go to wildrenfrew.com and see how unique this website is?
  • Some sections in this site are marvelous.
  • The website is a complete package of correct font, color, images, and video which all enhances its beauty.

Objectives

Participants will be able to:

  • Select HTML elements using the type, .class and #id CSS selectors
  • Explain the difference between classes and ids
  • Explain what CSS properties and CSS values are, and how they're related
  • Describe the 3 ways that CSS code can be incorporated into a project
  • Sketch the basic file tree for web projects
  • Describe several text properties that can be altered using CSS
  • Describe how borders can be styled using CSS
  • Describe the hierarchy of specificity for CSS selectors
  • Describe the different parts of the "Box" model
  • Effectively use the display property
  • Changing and Removing styles from CSS in a webpage.

Specific Things To Teach

  • CSS selectors
  • Common CSS properties and their allowable values
  • How to incorporate CSS into web projects
  • Web project file tree
  • Specificity hierarchy
  • The Box Model
  • How to style with the display property

Lesson

CSS (video walkthrough of slides)

CSS (slides)

CSS Part 2 (video walkthrough of slides)

CSS Part 2 (slides)

Things to Remember

  • You need some HTML code before you can add styling with CSS.

  • HTML and CSS are two different languages. Though commonly referred to together as "HTML/CSS", these are two distinct languages that do completely different things. They work really well together.

  • There are specificity rules in CSS. You need to understand these rules so you can work within them to produce the styling you want.

Independent Practice

No pairs will be assigned for this project, but you should rely on your classmates for help once you've spent 20 minutes working independently through something you're stuck on.

The activity for the HTML, CSS, Bootstrap and jQuery lessons is a project that allows you to combine your new skills in each of these areas.

Click here to access the instructions for the CSS portion of the recipe-page project. Please don't move on to the prompts for the other topics yet.

Check for Inline CSS contents while removing style tag from the webpage.

Tutorials for changing and removing style tags are provided in the CSS slides

Challenge

Change and remove style and link tags from Google,Amazon and change the website design accordingly.

Check for Understanding

  • What is the benefit of using CSS in HTML?
  • Explain the difference between class and id in CSS.
  • Describe how borders can be styled using CSS.
  • Describe the different parts of the "Box" model.
  • Explain use of inline and block value in display property.

Supplemental Resources