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.
Fonts
Looking at all of the different font options available can be overwhelming.
Layout
HTML makes UGLY pages!! How can you arrange the content as a presentation, not just a group of text?
Animation
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.
Colors
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.
Templates
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
Lesson: Styling Your Text
File Download
Lesson: Code Together - Applying Style
File Download
Lesson: Display and Visibility
Lesson: Code Together - The Display Property
Online Access
Code Together - Display Property: Replit
File Download
Assessment: Homework 1
Online Access
HW1 Starter Code: Replit
File Download
Week 2: Advanced Selectors, Display, and Designing for Accessibility
Lesson: Display:Grid
Online Access
CSS Display Grid Demo: Replit
File Download
Lesson: Display:Flex
Online Access
CSS Display Flex Demo: Replit
File Download
Lesson: Styling Lists and Links
File Download
Lesson: Advanced Selectors
File Download
Lesson: Attribute Selectors
File Download
Lesson: Code Together - Navigation
Online Access
Code Together - Navication Demo: Replit
File Download
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
Lesson: Background Images and Opacity
Online Access
Background Images and Opacity: Replit
Week 3: The Box Model and Positioning
Lesson: Box Model
File Download
Lesson: Positioning
File Download
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
File Download
Lesson: Transitions
File Download
Lesson: Transforms
File Download