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 Learn
- 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