CSS Colors Tutorial for Beginners

Рет қаралды 26,119

Күн бұрын

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
🔗In this CSS colors tutorial for beginners you will learn how to set a background color and how to set a text color. We will explore rgb, rgba, hex, and hsl color values along with HTML color names.
🚩 Subscribe ➜ bit.ly/3nGHmNn
🚀 This lesson is part of a CSS for Beginners tutorial series playlist:
• CSS Tutorials for Begi...
🔗 All Resources for this CSS Tutorial Series: github.com/gitdagray/css_course
📬 Course Updates ➜ courses.davegray.codes/
CSS Colors Tutorial for Beginners
(00:00) Intro
(00:05) Welcome
(00:25) Setup
(01:10) How to set a background color with CSS
(02:57) How to set text color with CSS
(03:46) rgb color values
(04:46) Alpha channel - rgba
(05:53) hex color values
(08:59) VS Code Color Picker
(10:30) hsl color values
(12:52) The color value choice is yours
(13:38) Color contrast checkers and palette generators
⚙ Web Dev Tools:
🔗 Chrome Browser: www.google.com/chrome/
🔗 Visual Studio Code (VS Code): code.visualstudio.com/
🔗 Live Server VS Code Extension: marketplace.visualstudio.com/...
🔗 vscode-icons VS Code Extension: marketplace.visualstudio.com/...
🔗 Github Themes VS Code Extension: marketplace.visualstudio.com/...
🔗 W3C CSS Validator: jigsaw.w3.org/css-validator/
🔗 Specificity Calculator: specificity.keegan.st/
📚 References:
🔗 MDN CSS: developer.mozilla.org/en-US/d...
🔗 MDN CSS Basics: developer.mozilla.org/en-US/d...
🔗 MDN CSS Selectors: developer.mozilla.org/en-US/d...
🔗 MDN - How to Apply Colors to HTML Elements with CSS: developer.mozilla.org/en-US/d...
📚 Color Resources:
🔗 Coolors Contrast Checker: coolors.co/contrast-checker/1...
🔗 WebAIM Contrast Checker: webaim.org/resources/contrast...
🔗 Coolors Palette Generator: coolors.co/
🔗 HTML Color Codes: htmlcolorcodes.com/
✅ Follow Me:
Github: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Blog: yesdavidgray.com
Reddit: / daveoneleven
Was this tutorial about CSS Colors for beginners helpful? If so, please share. Let me know your thoughts in the comments.
#css #colors #tutorial

Пікірлер: 42

@DaveGrayTeachesCode 2 жыл бұрын

It's important to learn about setting color values early on in your CSS journey - but it can be confusing! There are so many ways to provide color values. This tutorial breaks all of the different color values formats down (color names, rgb, rgba, hex, hsl, hsla) with simple explanations. You will also learn about the alpha channel, the VS Code color picker, and useful tools like color contrast checkers that will insure your color choices meet accessibility standards for the web. Just getting started with CSS? Go to the beginning of this CSS for Beginners playlist: kzfaq.info/sun/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

@aladina1 9 ай бұрын

Awesome tutorial. Finally able to comprehend CSS colors. And the tools also are a game changer

@maddog7417 Жыл бұрын

This channel is really helpful. I've been utilizing these videos for a week now and I can see my improvement. Thanks Dave

@DaveGrayTeachesCode Жыл бұрын

Great to hear! 💯

@GabrielSouza-yy2rq Жыл бұрын

Your tips for external resources are always great. Thank you so much!

@DaveGrayTeachesCode Жыл бұрын

Glad it was helpful!

@fairytail6896 5 ай бұрын

Playing with the colours was really interesting!

@ahmad-murery 2 жыл бұрын

Nice video, I rarely use hsl unless I wanted to play with the saturation/lightness of existing color then I converted bak to hex, Chrome dev tools/Styles tab has a little contrast ratio checker embedded in the color picker, the cool thing about it is it shows the AA and AAA contrast curves so you can adjust your color as needed, it can also suggest a color for you, you need to inspect the font color in order to see the contrast ratio tool but sometimes it shows "no contrast information available". Thanks Dave

@DaveGrayTeachesCode 2 жыл бұрын

Thank you, Ahmad - great tips! 💯🙏

@user-no5py2tp8y Жыл бұрын

Really, Very much helpful tutorial for beginners. Thanks Dave.

@DaveGrayTeachesCode Жыл бұрын

Glad it was helpful!

@TravinskiyVladislav Жыл бұрын

Thank you, Dave

@CTILET 2 жыл бұрын

The best chanel of react and css education!

@DaveGrayTeachesCode 2 жыл бұрын

Thank you! 🙏💯

@oncoding4520 Жыл бұрын

Commenting for each video that I have learned from your videos :)

@yatin1370 Жыл бұрын

If someone is confused about HSL: -Hue: Like Dave said a Color wheel; purely for selecting color. 0:Red >> 120:Green >> 240:Blue >> then 0:Red again. -Saturation: Related to "how much Gray" is in the color. 100% is no Gray; pure color. 50% is 50% Gray and 50% color. 0% is only Gray; no color. -Lightness: 50% means.. 50% light given to color. Towards 0% it goes darker-black; less light. Towards 100% it takes goes lighter-white; more light. Hope this helps.

@mailsiraj Жыл бұрын

Thanks for writing what I wanted to write in a very clear way. I did not clearly understand saturation after watching this video. Hence, I went to the great HTML & CSS book by Jon Duckett where I found that saturation is related to the amount of gray and lightness is related to the amount of black - I also found that 100% for both mean absence of gray or black (which is counter-intuitive). In my mind, I mapped lightness to contrast as the measure of white light - hence 0% means no whiteness and 100% means no whiteness. But I am not really sure why gray is important for specifying the color.

@pablo20237 2 жыл бұрын

Thanks so much for this

@DaveGrayTeachesCode 2 жыл бұрын

You're welcome! 🙏

@Pareshbpatel 2 жыл бұрын

A very comprehensive tutorial on CSS colours. So clearly explained. Thnks, Dave {2022-06-29}

@DaveGrayTeachesCode 2 жыл бұрын

You're very welcome, Paresh! 💯

@iambrijeshtoo Жыл бұрын

Thank you!

@DaveGrayTeachesCode Жыл бұрын

You're welcome!

@user-bo8yv7zj9u Жыл бұрын

Amazing

@nishgro191 Жыл бұрын

Hello Dave! Take love from bottom of my heart. You are awesome. I have a request to you. It is possible to add sequential number on series video titles? It will be very helpful for us. Thanks.

@DaveGrayTeachesCode Жыл бұрын

I understand your request. It is not good for the search results. I do put a number on each thumbnail for the video and you can see the correct order in the playlist here: kzfaq.info/sun/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit

@chandrachurmukherjeejucse5816 Жыл бұрын

Great lecture sir❤

@DaveGrayTeachesCode Жыл бұрын

Thank you!

@chandrachurmukherjeejucse5816 Жыл бұрын

@@DaveGrayTeachesCode welcome sir.you made my day🙏

@barangofficial Жыл бұрын

You have lesson for teach about css or JavaScript, i want to it

@damo190 2 жыл бұрын

In css, there are four special universal property values to control inheritance: inherit, initial, unset, revert. I don't understand how revert works. Will u make a video on it?

@DaveGrayTeachesCode 2 жыл бұрын

That's a great request! It may not be for this beginners series, but I may be able to do a separate one.