Clinical Professor, School of Information
Introduction to CSS3
What You'll Learn
- Understand the importance of the separation of content and style.
- Write a simple CSS rule that can modify the colors and fonts on a web page.
- Modify the appearance of the text on a page using width, line-height, and text transformation.
5 Modules
30 Hours
6 hrs per module (approx.)
Rating
About Introduction to CSS3
The web today is almost unrecognizable from the early days of white pages with lists of blue links. Now, sites are designed with complex layouts, unique fonts, and customized color schemes. This course will show you the basics of Cascading Style Sheets (CSS3). The emphasis will be on learning how to write CSS rules, how to test code, and how to establish good programming habits.
When done correctly, the styling of a webpage can enhance your page. When done incorrectly the result can be worse than no styling at all. To ensure that your sites do not put up barriers for people with cognitive and/or physical disabilities, you will learn how to evaluate pages using the standardized POUR accessibility guidelines. Upon completion of the course, learners will be able to sketch a design for a given HTML page. Using that design they will use CSS to implement the design by adding fonts, colors, and layouts.
This is the second course in the Web Design For Everybody specialization. Subsequent courses focus on adding interaction with JavaScript and enhancing the styling with Responsive Design.
It will be difficult to complete this course if you do not have access to a laptop or desktop computer for the homework.
Skills You'll Gain
- Cascading Style Sheets (CSS)
- CSS Codes
- CSS Frameworks
- HTML Formatting
- JavaScript Style Sheets
- Object Oriented CSS
- Style Sheets
- Web Design
- Web Development
What You'll Earn
- Certificate of Completion:
- Certificates of completion acknowledge knowledge acquired upon completion of a non-credit course or program.
Welcome Message
Welcome to Introduction to CSS3, a course that teaches you how to style and enhance websites using Cascading Style Sheets. You will learn how to control layout, color, typography, positioning, and visual effects, while also exploring transitions and animations. A strong emphasis on accessibility ensures you can apply POUR principles to create designs that are both visually engaging and usable, building skills essential for modern, inclusive web development. This is the second course in the Web Design for Everybody: Basics of Web Development & Coding Specialization.
This abbreviated syllabus description was created with the help of AI tools and reviewed by staff. The full syllabus is available to those who enroll in the course.
Course Schedule
Module 1: Getting Started with Simple Styling
- Reading: Course Syllabus
- Video: Introduction to CSS3
- Reading: Pre-Course Survey
- Reading: Resources
- Reading: Building Your First Web Page
- Video: Cascading Style Sheets
- Video: Reviewing the "Cascading" of CSS
- Video: Colors
- Video: Styling Your Text
- Reading: Early coding
- Video: Code Together: Applying Style
- Video: Display and Visibility - Part 1
- Video: Display and Visibility - Part 2
- Video: Code Together: The Display Property
- Reading: Code Placement
- Reading: Homework One Description
- Video: Homework One Description
- Reading: Introduction to the Gamut Gallery
- App Item: Homework One: Optional Gallery Submission
- Graded: Styling Syntax and Theory
- Graded: Homework One: Styling Your First Page
Module 2: Advanced Selectors, Display, and Designing for Accessibility
- Reading: Resources
- Video: Display: Grid
- Reading: Display: Grid
- Video: Display: Flex
- Reading: Display: Flex
- Video: Styling Links and Lists
- Reading: Review of the DOM
- Video: Advanced Selectors
- Video: Attribute Selectors
- Video: Code Together: Navigation
- Reading: Shorthand rules
- Reading: Browser Defaults
- Video: Browser Capabilities
- Reading: Browsers
- Reading: Background Images and Opacity
- Video: Code Together: Background Images and Opacity
- Video: Designing For Accessibility
- Reading: Additional Resources
- Reading: Homework Two Description
- Video: Homework Two Description
- App Item: Homework Two: Optional Gallery Submission
- Graded: Advanced Selectors Quiz
- Graded: Homework Two: Advanced Selectors and Display
Module 3: The Box Model and Positioning
- Reading: Resources
- Reading: Borders
- Reading: Margin and Padding
- Video: Box Model
- Reading: Code Together: Box Model
- Video: Code Together: Box Model
- Reading: Positioning
- Video: Positioning
- Reading: Additional Resources
- Reading: Why not a Peer Assignment this week?
- Graded: Final Quiz
Module 4: Pseudo-classes, Pseudo-elements, and a Final Project
- Reading: Resources
- Video: Pseudo Classes and Elements
- Video: Code Together: Styling Images with Pseudo-classes
- Video: Transitions
- Video: Transforms
- Video: Code Together: Transitions
- Video: Accessible Navigation
- Reading: Additional Resources
- Reading: Final Project Description
- Video: Final Project Description
- App Item: Final Project: Optional Gallery Submission
- Video: Closing
- Graded: Final Project: Create your site!
Module 5: Where to Go From Here?
- Reading: Coursera Options
- Reading: Post-Course Survey
Grading Policy
Learners must earn at least 80% on each assessment and an overall course grade of 80% to pass. Final grades are calculated from quizzes and peer-graded assignments. Three quizzes are worth 45% of your grade, and three peer-graded assignments are worth 55% of your grade.
Lecturer
Course content developed by U-M faculty and managed by the university. Faculty titles and affiliations are updated periodically.
Beginner Level
No prior experience required
What Learners Are Saying
I've really enjoyed taking these courses and I've learned a lot of things since a year. I paced my learning with these courses and specializations during the COVID-19 period in lockdown. These courses really helped my enhancing my skills and increasing my knowledge.
Ataib Saboor Learner in Pakistan
