Practical CSS for No-Coders

Introduction

• Styling the web for no-coders
• Working in CodePen
• What is CSS and how is it structured?

1. Applying CSS to Your Page with Selectors

• Writing your first comment and element selector
• Writing a class selector
• Grouping selectors
• Descendent selectors
• Challenge: Working with selectors
• Solution: Working with selectors

2. CSS Colors and Images

• Identify a color scheme
• Formatting color in CSS
• Background and text color in CSS
• Understanding images in CSS
• Working with background images in CSS
• Challenge: Style this web page
• Solution: Style this web page

3. CSS Boxes, Sizes, and Type

• Understanding type in CSS
• Applying type formatting with CSS
• Understanding and applying size in CSS
• Understanding the box model in CSS
• Working with border, padding, and margin in CSS
• Challenge: Add styling to this page
• Solution: Add styling to this page

4. More Advanced CSS Concepts and Properties

• Styling links with CSS
• Understanding inheritance in CSS
• Debugging CSS with borders and background colors

Conclusion

• Next steps