CSS stands for Cascading Style Sheet. CSS is used to style HTML code and CSS3 is the latest version to be approved by the World Wide Web Consortium (W3C). While it is possible to style yoru pages directly within HTML, using CSS allows you to separate content from style.


Looking at all of the different font options available can be overwhelming.


HTML makes UGLY pages!! How can you arrange the content as a presentation, not just a group of text?


CSS3 allows you to easily add animation to your site? Simple snippets of code can create cool effects.

Media Queries

If you use media queries you can modify the look and feel of your page based on the platform.


Find out great ways to use colors in your page that will be consistent across machines AND allow people with vision impairment to still navigate your page.


There are a number of popular frameworks that can provide templates for your site. However, these templates can always be improved to meet your specific needs. Knowing CSS allows you to make these changes.

Check it out!

You can see a non-responsive version of the home page that is always styled for a small or mobile screen. Try resizing the window and notice that the page doesn't change.

Course Code

Week 1: Getting Started with Simple Styling

Lesson: Reviewing the "Cascading" of CSS

Online Access

Style attribute: CodePen, Replit

Internal Style: CodePen, Replit

External Style: CodePen, Replit

Precedence: CodePen, Replit

Lesson: Styling Your Text

Online Access

Fonts: CodePen, Replit

File Download

Fonts code

Lesson: Code Together - Applying Style

Online Access

Code Together 1 - No CSS: CodePen, Replit

Code Together 1 - With CSS: CodePen, Replit

Lesson: Display and Visibility

Online Access

Display Example 1: CodePen, Replit

Display Example 2: CodePen, Replit

Display Example 2 Extra: CodePen

Lesson: Code Together - The Display Property

Online Access

Code Together - Display Property: Replit

Assessment: Homework 1

Online Access

HW1 Starter Code: Replit

File Download

HW1 Starter Code

Week 2: Advanced Selectors, Display, and Designing for Accessibility

Lesson: Display:Grid

Online Access

CSS Display Grid Demo: Replit

File Download

CSS Display Grid

Lesson: Display:Flex

Online Access

CSS Display Flex Demo: Replit

Lesson: Styling Lists and Links

Online Access

Styling Links: CodePen, Replit

Styling Lists: CodePen, Replit

Lesson: Advanced Selectors

Online Access

Advanced Selectors: CodePen, Replit

File Download

Advanced Selectors

Lesson: Attribute Selectors

Online Access

Attribute Selectors: CodePen, Replit

File Download

Attribute Selectors code

Lesson: Code Together - Navigation

Online Access

Code Together - Navication Demo: Replit

Lesson: Browser Capabilities

Online Access

Consistent Browser Style - with Defadivt: CodePen, Replit

Consistent Browser Style - with Prefixes: CodePen, Replit

Consistent Browser Style - Default and Prefixes: CodePen, Replit

File Download

Consistent Styling code

Lesson: Background Images and Opacity

Online Access

Background Images and Opacity: Replit

Week 3: The Box Model and Positioning

Lesson: Box Model

Online Access

Box Model: CodePen, Replit

File Download

Box Model code

Lesson: Positioning

Online Access

Positioning: CodePen, Replit

File Download

Positioning code

Week 4: Pseudo-classes, Pseudo-elements, and a Final Project

Lesson: Code Together: Styling Images with Pseudo-classes

Online Access

Styling Images with Pseudo Classes: Replit

Lesson: Transitions

Online Access

Transistions - Using pseudo classes: CodePen, Replit

Lesson: Transforms

Online Access

Animation using transforms (deployed): CodePen, Replit

Jump to Top