colors and units in css explained
CSS Colors and Units Explained – Styling with Precision and Personality
Welcome to this beginner-friendly CSS tutorial where we dive into the essential building blocks of visual design: colors and units. If you're just starting out with web development or looking to improve your design skills, understanding how colors and units work in CSS is key to creating stylish, responsive, and consistent websites.
In this video, we break down how to set colors for different elements and how to control size, spacing, and layout using different CSS units. With practical examples, tips, and best practices, you’ll be styling your pages with confidence in no time.
Working with Colors in CSS
Color is one of the first things people notice on a website. CSS offers multiple ways to define and apply color, whether you're designing buttons, backgrounds, borders, or text.
In this video, we explore all the major ways to declare colors, including:
Color names – Like red, blue, green, or black
Hex codes – A six-digit format starting with a hash symbol, like hash f f zero zero zero zero
RGB and RGBA – Red, green, blue values with optional alpha transparency
HSL and HSLA – Hue, saturation, lightness with optional alpha for more intuitive color control
We show you how to apply color to:
Text
Backgrounds
Borders
Shadows and highlights
Plus, we explain how to pick accessible and visually appealing color combinations using online tools and contrast checkers.
Understanding Units in CSS
CSS units help you define size, spacing, and position. You use them with properties like width, height, margin, padding, font size, and more. But choosing the right unit can make a big difference in how your design looks and behaves.
In this video, we break down the most commonly used units:
Pixels (px) – Fixed and absolute, great for precise control
Ems and Rems – Relative units based on font size, ideal for flexible and accessible designs
Percent (%) – Based on the parent element, perfect for responsive layouts
Viewport units (vw and vh) – Based on the width and height of the browser window
Auto – For letting the browser determine size based on content
We compare each unit, show where they’re best used, and explain how combining different units can create beautiful, scalable layouts.
Why This Video Matters
Mastering colors and units will help you:
Create professional-looking designs
Make your site look good on all devices
Write cleaner, more flexible code
Build visually balanced pages with consistent spacing
Understand how browsers interpret style rules
Thanks for Watching
If you’re ready to take control of your site’s visual style, this video is for you. Don’t forget to like, subscribe, and check the description for:
Sample code used in the tutorial
A cheat sheet for CSS color values and units
Design tools to help you choose color palettes and test responsiveness
Drop your questions in the comments, and let us know what CSS topic you want us to cover next.
Happy coding and happy styling!