CSS Tips

Learn how to address specific challenges and combinations in CSS, along with techniques you can apply in your web styling.

Introduction

• Supercharge your CSS
• Exercise files
• Using GitHub Codespaces with this course

1. Working With CSS

• Should I normalize or reset my CSS?
• Write better CSS with stylelint

2. Container Tips

• The vw unit is a bit of a mixed blessing
• Consistent sizing with box-sizing: border-box
• Logical box properties instead of top, right, bottom, left
• Writing modes
• Horizontal and vertical alignment in any container
• Maintain aspect ratio in containers and images
• How the clear property works
• Move over clearfix: Clearing with flow-root

3. Typography

• px, em, and rem units explained
• Set natural line lengths with the ch unit
• Responsive sizing with min(), max(), and clamp()
• Add a drop cap to your text
• Truncate text length and number of lines of text
• Style text selection and highlighting
• Making sense of the line-height property

4. Custom Properties

• Custom properties with default values
• Nesting custom properties to create functions
• Create light or dark mode with custom properties
• Sidebar: hsla() colors are just better

5. Layout

• Should you use grid, flex, or float?
• Add gaps and gutters to grid and flex
• Pseudo-elements are true grid and flex items
• Putting things on top of one another using grid
• Fixed and sticky elements

Conclusion

• Thanks