CSS Fonts, Text & Color Properties | Sigma Web Development Course - Tutorial #19

Summary

In this engaging tutorial, CodeWithHarry delves into the intricate world of CSS fonts, text, and color properties. This video is essential for anyone looking to enhance their web development skills. You will learn how to use different fonts, change font sizes, and understand fallback fonts. The tutorial also covers text styling, use of Google Fonts, and the various methods to apply and manipulate color within your web pages. With practical demonstrations, this video provides a solid foundation for anyone interested in web design.

Highlights

• Explore how to change font types and sizes with CSS. 📏
• Understand the concept of fallback fonts to ensure text compatibility. 🔍
• Learn how to use Google Fonts for unique typography on your site. 🌟
• Get to grips with text decoration and color properties to enhance UI design. 🎨
• See practical examples of using RGB and HEX codes to specify colors in CSS. 🖌️

Key Takeaways

• Discover the fundamentals of CSS fonts and how they can transform your webpage's appearance. 🖋️
• Learn how to seamlessly integrate Google Fonts into your projects for richer typography. 🌐
• Understand the importance of fallback fonts to ensure consistent text display across different systems. 🔄
• Master the art of text styling using properties like font weight, size, and decoration. ✨
• Explore various methods to apply colors using HEX, RGB, and HSL color codes. 🎨

Overview

In this video, CodeWithHarry guides you through the dynamic world of CSS fonts, text, and color properties, ensuring your web pages not only function well but look amazing too. Starting with the basics, he covers how different font types can dramatically change the look of a webpage, and how to include these fonts from external sources like Google Fonts.

As he progresses, Harry dives deep into styling techniques that enhance readability and aesthetic appeal through font size, weight, and decoration. The tutorial is comprehensive and interactive, showcasing how to apply these principles practically, making it easier for viewers to grasp complex concepts.

Finally, the video offers an in-depth look at color application in web design, using various coding methods such as HEX, RGB, and HSL. By the end of the tutorial, viewers will have gained a robust understanding of how to effectively use these CSS properties to bring their web design vision to life.

Chapters

• 00:00 - 00:30: Intro and Importance of Fonts and Colors The chapter introduces the significance of fonts and colors in CSS. It covers how to use external fonts on a website, change font sizes, and the concept of fallback fonts. The explanations are accompanied by examples, underscoring the importance of these elements in web design.
• 00:30 - 02:30: Setting Up HTML and CSS for Fonts This chapter focuses on setting up HTML and CSS specifically for fonts and colors, essential components for any website. The instructor demonstrates the process by creating a new folder named 'video 19', opening it in a code editor, and creating an 'index.html' file within it. This setup lays the foundational structure for further development regarding font and color customization in web design.
• 02:30 - 06:30: Font Properties in CSS The chapter discusses the implementation of font properties in CSS. It starts by explaining the use of internal CSS for styling without creating an external stylesheet. The example given involves creating a 'div' element with an 'h1' header containing the word 'fonts' and a paragraph indicating the video's content is about fonts. Additionally, it advises viewers to bookmark or save the playlist for convenient access to the entire series.
• 06:30 - 10:00: Using Google Fonts in Web Development The chapter titled 'Using Google Fonts in Web Development' discusses the basics of fonts in web development. It explains that fonts are the different styles of text appearance, which can significantly alter the look and feel of a web page. The chapter aims to educate beginners on how to change and use different fonts in their web projects. Moreover, it mentions the importance of keeping the source code updated, with a commitment to regular updates to enhance learning.
• 10:00 - 14:00: Font Size and Line Height The chapter explores the application and styling of font families in web development, particularly using VS Code as the development environment. It emphasizes the flexibility provided by CSS to specify multiple fonts as fallback options to ensure desired typography is rendered. This approach ensures that if the first specified font is unavailable, the next available font in the list is used, maintaining design consistency.
• 14:00 - 18:00: Text Decoration and Transformation The chapter discusses the topic of text decoration and transformation, with a focus on fallback fonts. It explains that COUI, Tahoma, Geneva, Verdana, and Sans Serif are examples of fallback fonts, which are used if the main font is unavailable. The transcript illustrates how changing the font family in HTML can affect the appearance of text. An example is given where the font family of an h1 element is changed to Times New Roman, showing what happens when the default font is already Times New Roman. The chapter aims to provide insight into how font selection affects text presentation in web development.
• 18:00 - 21:00: Text Overflow and Alignment This chapter delves into the concepts of text overflow and alignment, focusing on font customization. The discussion begins with a demonstration of how to apply a specific font family by selecting 'Lucida Sans,' enhancing the aesthetic appeal of the text. The explanation covers the importance of specifying a font family, with an emphasis on including a generic font as a fallback option. This ensures better compatibility and display across different platforms and devices. The chapter aims to guide readers through the practical aspects of font selection to improve text presentation.
• 21:00 - 27:00: Introduction to Colors in CSS The chapter titled 'Introduction to Colors in CSS' discusses the importance of setting a font family in your CSS code when creating websites. This ensures that even if the user's computer does not have a specific font installed, the website will still display correctly using alternative fonts like Times New Roman, COUI, or Sans Serif. Additionally, the chapter introduces various font properties, such as setting a font style to italic or bold, offering more options for text customization.
• 27:00 - 32:00: Color Keywords, Hex, RGB, and HSL This chapter discusses different font styles and text decorations. It mainly focuses on the use of italic, normal, and oblique fonts and explains how to apply them in text. Additionally, it covers using font weight to achieve bold text and utilizing text decoration properties for underlining. The chapter provides basic guidelines on when and how to use these styles in typography.
• 32:00 - 33:00: Ending notes and Course Promotion In this chapter, the focus is on various font properties in typography. The speaker discusses different font weights such as bold, bolder, and lighter. They provide an example of how a text becomes thicker (bold) when a specific font weight is applied. The chapter also explains how to use font styles to make text oblique or italic, and mentions the use of text decoration properties like underline and overline to modify text appearance. It serves as a guide for utilizing these properties to enhance text styling effectively.

CSS Fonts, Text & Color Properties | Sigma Web Development Course - Tutorial #19 Transcription

• 00:00 - 00:30 In today's video, we will see how fonts and color CSS work. In this video, I will also tell you how you can use external fonts in your website. We will know how font sizes can be changed, what is the concept of fallback font. And I will tell you all this with examples. Let's go to the video stream. Let's roll the intro Intro So guys, I will say again that today's video is going to be very important
• 00:30 - 01:00 Because in this I will tell you a few fonts and colors And any website you make in your life Fonts and colors will definitely be seen there So what I will do as usual by right clicking here in fact I will make a new folder by clicking here in which I will make a folder named video 19 by right clicking I will open it with code and as soon as I open it with code you can see here I have made a file named index.html here
• 01:00 - 01:30 and I am going to write internal css here Because I don't want to make a style sheet so that everything of you is on the same page So here I will make a div first and I will write h1 in this div And I will write fonts in h1 and I will put a paragraph in it This is a video on fonts, let's say I write Now I want to tell you that if you haven't accessed the playlist then click on bookmark or click on save
• 01:30 - 02:00 and also the source code is updating i have updated the source code of all the videos i will do it in time to time no surprises here, fonts and this is a video on fonts but the interesting thing is is you can change the font now many people are beginners and they don't know what is font this is a different font and this is a different font and this is a different font means if you see the text appearing different then it is because of font so if we want to change the font
• 02:00 - 02:30 of any element then we use font family so i can easily write a style tag here, we use font family. So I can easily put a style tag here that paragraph, do its font family. What to do? Now see here a lot of options are automatically giving me VS Code. Suppose I want to see here Cogui and along with it Tahoma and so many fonts are available here. These are comma separated values which will try to put the first font here if this font is not available in your system then it will try to put this font
• 02:30 - 03:00 and so on so these are called fallback fonts that is, the main font is C O U I and Tahoma, Geneva, Wardana, San Serif these are fallback fonts so you see here as soon as I show you here so its font has changed a little if I show you, the font has changed a little if I want to change the font family of my h1 now let's say I want times new roman so I will change font family to times new roman and I think by default it is times new roman so there is no difference but let's try something else
• 03:00 - 03:30 and here as soon as I write font family I will write like this so let's do lucid a sense and this is a whole set of font family so look here that I have changed the font this font looks a little better now compared to if I say that the font was here before, so you can change the font from font family now whenever we put font family, it is said that whenever you are putting font family, then put at least one such generic font family
• 03:30 - 04:00 so that if the user's computer does not have that font, then there is no problem. In this case, it is suggested that like Times New Roman, like COUI, like Sans Serif, it is necessary to put a font family in your fonts when you are making websites. So this way you can give fonts here now related to fonts we have many more properties like if I want in paragraph that font style I want to make it italic so I can make bold italic font style
• 04:00 - 04:30 I made font style italic here so I can do like this in font style italic so I can do like this in font style we have italic and one is normal and one is oblique we have to use font weight for bold so if I make it oblique and I can't even underline it I have to use text decoration for underline so here these values are there now here usually it is used for italic so if you want to do italic then you will use font style
• 04:30 - 05:00 as soon as you write font here, see a lot of properties related to font have come and I want to tell you font weight here all these values are bold, bolder, lighter and you can also put values like this so see it has become a little thick, that is, it has become bold so whenever you want to make it bold, you can use it and make it bold, so you can make it oblique, you can make it italic with font style, you can make it normal, and if you want to underline here, then you can use text decoration is a property by which you can underline so i want to tell you this and you can also overline
• 05:00 - 05:30 so the way you see overline, it comes up but all these properties i am telling you honestly they are not that much useful, as much as italic or font so here is a code pen, i will put the link of it here before i forget, i will put the link of this code pen and this code pen link will tell you which font families look like so see here serif looks like this, senserif looks like this, monospace looks like this
• 05:30 - 06:00 and cursive looks like this and you can see here that this code pen is showing a lot of things from here that how your families look like now what happens is that when you do web development so you guys would like to use some special fonts. Like I use Ballu Bhai, Ballu Bhai is a font that I like a lot. Yes, Ballu Bhai and Ballu Behna are the names of these two fonts, I will show you now. And in this way, you use Google Fonts, so I will show you how to use Google Fonts.
• 06:00 - 06:30 So if you see here, I will write Google Font in the new tab. And as soon as I come to Google font, I can actually use a font. If I write here Ballu Bhai, I hope I am spelling it correct, Ballu Bhai, there is also Ballu Da, Ballu Bhaina, and here I am not getting Ballu Bhai font, why is this Arabic font showing me? I will come here to home and I will write here hey I am good and here you see Ballu Bhai, Ballu Bhaina, Ballu Bhai 2, all these fonts
• 06:30 - 07:00 I can see, ok, now if I click here then you see here, Ballu Bhai 2 will look like this in English, now suppose I want to use this font, I will reset it, if I want to use this then what I will simply do is I will click here, ok, suppose I don't want medium 500 I want my font to look like this or I want it to look normal, so I will do is, I will click here Ok, suppose I don't want medium 500, I want my font to look like this Or I want it to look normal So I will click on plus And it will give me font here Now there are two ways to include font Either you do it through link or through import If you are doing it through import, then you have to put it in style tag Import statement, which I will show you now
• 07:00 - 07:30 And I hope I am not going fast, I am just trying that I am not repetitive And I can teach you as much as possible so here you can see I have done import URL like this now if I want I will comment this out and I will write here font family and in fact what I will do is I will copy from here because here font family is given how to apply so it becomes a little convenient to copy and paste and here see Ballu Bhai has given sans serif that by chance you don't have Ballu Bhai 2 font so you got sans serif, now you can see here
• 07:30 - 08:00 this font is looking like this, as it was written here it is looking and I remove italic from it and I remove font weight too because these two things I just told you to teach you you want exactly that your font looks as you downloaded it and I can see it because I have downloaded this Ballu by 2 from here You can see here that I have got this font Now if I want to use the link, then I will copy this link Then I will remove the import one from here and now I will put it in my head tag I will do the right click format document so that unnecessary spaces go away
• 08:00 - 08:30 And you can see here that I have included this font through the link in my web page so I can include fonts through HTML in my web page and if I want I can include the font through style tag as you can see here and you can see here that my Ballu bhai is intact my Ballu bhai font is visible here which can see it which is a good thing you can use many fonts like popins which I use a lot to be honest popins is one of my favorite fonts, so if I want to include popins
• 08:30 - 09:00 so it's always recommended that you include all the fonts you want in one bar like I want this popins, I included this so I will bring this link and imports in one bar in one request So it's always recommended that you I will remove the link tags from here because I am putting import now You have to put only one of these So see here, from the same import statement, Ballu bhai is also coming And from the same import statement, Poppins font is also coming
• 09:00 - 09:30 So one arrow two targets, you can also do 1 arrow 2 arrows or 1 arrow 50 arrows. But I don't think you will need 50 fonts in a web page. Now see here if I want my heading to be poppins, so what I will do is, as it is written here poppins and science, so I will make the poppins font here first. And since poppins is available now, so what will happen is that poppins will be added. So see my h1 has poppins in it, you can see here. I use pop-ins a lot it's one of my favorite fonts but you guys go to google fonts and explore a lot of fonts
• 09:30 - 10:00 you will enjoy I can guarantee you this so this was about fonts in CSS and I want to tell you about some other properties of fonts another property is font size with which you can change the font size if I talk about font size you can change font size if i talk about font size i can use large, medium, x, small, double x, large but i will recommend you pixel units then we will talk about other units if i do 20 pixels, you can see font size will increase
• 10:00 - 10:30 now i will show you one thing if i don't put any font size will be little big now i will show you one thing if i don't put any font size means i didn't put any font size so by default one size will be h1 and one size will be paragraph and this styling will be default browser and to see this i will move my face now see here h1 you can see here i will select this, go to compute it and here see font size 32 pixels so I will do one thing, I will reset it just in case, the value is not spoiled through zoom
• 10:30 - 11:00 font size if I write here, see 32 pixels is h1 and the paragraph, its default font size is 16 pixels you can see here, 16 pixels is the default font size so if I want my font size to be a little bigger 20 pixels, then I to be bigger 20 pixels so i will make it 20 pixels and now you can see here 20 pixels font size this is a video on fonts now you can select here and increase font size by arrow keys i am using up arrow key to increase font size
• 11:00 - 11:30 and i can use down arrow key to make my font smaller so here you can see I can make my font smaller I have pressed up arrow key and down arrow key so you can adjust the css here suppose I want to make it 49 pixels and I want to make font weight let's make it 900, no it's a little more suppose we make it 700, let's make it 600, yes 600 is fine then let's say I want to set the color here, let's say red, and if I like these styles, then I will copy them in this way, understand what I am trying to say, now if I reload it, then all these styles will go, because all the styles you put from here are temporary, but if you want to put these styles permanently, then whatever element you applied like I have applied on paragraph, I can paste these styles here
• 11:30 - 12:00 and they are forever here you can see, I will reload it because I have pasted it in my code but for now I will not use these styles so I hope you understood how font size works now after this there is a concept of line height
• 12:00 - 12:30 and let's say I make line height let's say 4 I made line height 4 of the paragraph and for that I have to put some content in the paragraph Let's say I write another paragraph and here I write Lorem 45 and why I wrote Lorem 45, you will tell me in the comment section that why I wrote 45 or why I write 23 So you see what will happen with line height here, that space will come here ok and here the space is created because it has given line height 4 now if I will reduce it as I reduced it, as if I reduced it to 1.4
• 12:30 - 13:00 or 1.8 so you understood that this spacing is line height basically it controls that if you want to increase the space of your lines increase the line height if I want to know what will be the default value of line height then I will remove the line height from here and I will go to increases, increase the line height if i want to know what will be the default value of line height, then i will remove it from here and i will search for line height in computed line height now here i am not able to see line height in this element so in this element, i guess no line height compute has happened so i will do one thing, i will search on google
• 13:00 - 13:30 default line height, so the default line height is about 110 to 120% So if you want to change the line height So you can increase it by 1.2 or decrease it by 1.2 And line height will help you in increasing the spacing After this, there is another property, letter spacing And I am telling you that it is not used much and if I increase the letter spacing, then see what is happening here it increases the spacing of letters
• 13:30 - 14:00 so if you want to increase the letter spacing, then you can use it I personally don't use it much I make my own websites but these are all things that you should know through this video I want you to know about all those things that you may want to do. Let's say you want to capitalize the first letter. So you should know how to do it. Some things you may not know how to do it. It will be a big problem.
• 14:00 - 14:30 So I will show you that if you want to capitalize any first letter or any word like for example h1 or let me put h2 and i will write about fonts now i will write h2 i hope you can see it, let me zoom it if i write h2 let's say i write text transform and let's say I write here text transform and capitalize so if I have made the f of about fonts to a, then you see here
• 14:30 - 15:00 the a of about fonts will be capitalized to the first letter now if I write here in text transform with a colon lowercase, so you see here as I did lowercase, it will be all lowercase if I do uppercase, it will be full lower case if I do upper case, it will be upper case upper case, and it comes in handy it is not that it will not come in handy you should not say everything that it will not come in handy it is actually going to come in handy so this property I hope you guys tie it in your tool belt see here I told you about text decoration
• 15:00 - 15:30 if you want to underline, then underline text decoration it will be underlined but I tell you about text you want to underline then underline text decoration it will be underlined. But I will tell you about text decoration color text decoration color so here you can see text decoration color aqua so here it is underlined with aqua color so you can change text decoration color and this is very helpful when you make navigation bars and in navigation bars it happens that when you hover on them, their color changes or the line appears in some way. So you can do all these things through CSS. So I hope you are understanding these things.
• 15:30 - 16:00 Write in the comment section, whatever you understand. Then I will tell you about two properties very quickly. Text decoration style, like if I add here, if I add text decoration style to this element, and I add it here, so that you have code for your reference. Text decoration style i will add it here so that you can see the code text decoration style and if i want dotted style it will be dotted if you can't see it, i hope you can see it now if i want it dotted, my underlining will be dotted
• 16:00 - 16:30 there are many other values like it is dotted, double, inherit inherit means inheriting from your parents if i do solid then it will be like this, if i do wavy then it will be like this so if you want dash or dotted then you can do it dash is like this, dotted is like this, wavy is like this but i will tell you that with my personal experience i have done so much web development in my life maybe sometime your wavy dotted lines will be useful but you should know, I will say again, you should know that if you don't know
• 16:30 - 17:00 then it will be a problem, if someone tells you that I want dash, I want dotted then you should know how to make it so these are some properties that you should know, there is also thickness I will tell you the thickness and there are many more things but if you want to do thickness then you will write text deco th so it will suggest thickness if you don't want to type this text decoration color or if you don't want to type any property then you write t, d, and co
• 17:00 - 17:30 it will come, I will show you like if I don't want to type this and I want to be suggested quickly so I will write t, d and c if i don't want to type it then i will write t d e and t h i will show you i want text decoration thickness this is important text decoration d e and t h and it is showing why it is suggesting because you have taken t e from th and it is showing why it is suggesting because you have taken te from here and de from here and th from here you will enter and it will come straight
• 17:30 - 18:00 and then you can use arrow key or if you just colon like this then it is showing you now what you want, how much thickness you want you can adjust the value of thickness ok, let's say I do this 45 pixels, I hope I did not do too much, I guess I did too much so I will this 45 pixels, I hope I didn't do too much I guess I have done too much, so I will not do it dotted, I will keep it solid I will keep it solid and you will see here that I have made it a little too thick I will have to reduce its value a little and see I will reduce its value so it is a little less, I think 7 pixels is more than enough
• 18:00 - 18:30 7 pixels is way more than enough, so let's do 7 pixels and see it's thick. So sometimes you have to make it thick. What do you have to do? If you want to make your text decoration thicker, then you can do something like this. So you guys use text decoration thickness to make it thicker. Okay. Then after this I would like to tell you about the text-indent property. The text-indent property is like, let's say I give 45 pixels to the text-indent, so see an 45px text indented, so you can see an indent so you can add an indent and I will show you
• 18:30 - 19:00 that if I will reduce the value of text indented by arrow key so you can see an indent then after this, to make vlogs text overflow is used a lot text overflow property means what you want if your text is overflowing from your box then what should happen, like here I comment out some properties like I don't want dotted I make it black I don't want to do aqua, I make text decoration color blue because black is by default, now I
• 19:00 - 19:30 want to set the width of my text overflow I make the width to 45 pixels and as soon as I did 45 pixels so it became something like this now if I do ellipsis or clip in text overflow so what will happen, what is the difference between ellipsis and clip I will tell you if I increase the width of it, it will become something like this and let's do the same for paragraph I think we can understand this thing better in paragraph so here I will give a class and in class I will do lorem
• 19:30 - 20:00 and I will put a style here by dot lorem dot lorem ok and I will do the same thing here for you one is text overflow one is its width I will give one is first of all I will give border 2 pixels solid red and after this I will give width 45px and let's see how it looks, so it looks like this now what I will say to this paragraph that if there is text overflow in it, then do ellipsis now here one more important thing is that you have to hide the overflow which means that if it is overflowing from the box
• 20:00 - 20:30 what do you want your element you want scroll, you want hidden so now see I have hidden the overflow, can hide it by using ellipsis and if i change the value of it to clip then it will hide it so there are many more properties like this one more property is word break so i will make it 145 and i will write word break and if I do break all in word break then you see here if I don't do break all here
• 20:30 - 21:00 then see dollar went down here if I do break all then what will happen it will break the word here it did DOL and OR here so if you want your words to be break then you can use this property then after this there is a text line property let's say I want to center it so I will put text align center here text align center and now see it is centered if I reload it, it will go for sure so I will put it in h2 and I will say text align center ok
• 21:00 - 21:30 so here it is automatically suggesting me and I am taking it as my property which is very important for me if I am coding So you see here about font center is entered I hope you understood this thing So these were all the properties of text Now here the properties of text are very important Because if you want to make good websites then you should know everything about text only then you will be able to control your text So these were some properties of text I will give you a link in the description where you will get additional to learn about all these things and all this
• 21:30 - 22:00 I have read in this video, after that things will be very intuitive for you. So what I will do is I will move towards colors and I will tell you how colors work. So let's do one thing, let's make one more html file with the name of colors.html because we have spread a lot of mess while understanding fonts because obviously this is not a good website I have made this to teach you concepts and we will make good websites
• 22:00 - 22:30 wait, ok, so let's talk about colors so here I will put its heading, colors and I will put its heading, colors. And I will put a little heading of this too, fonts. I know it doesn't look good, so I can give a little beauty by putting a title. Now after this I will put style here. Oops, I don't know why I make style capital. And what I will do here, I will write h1, let's learn, learn about colors. Now let's say I want to change the color of h1 so i will say h1, i have used element selector here, i will do format document by using element selector i will change the color to red
• 22:30 - 23:00 color and red and obviously you guessed it right, here the color is i want to preview colors.html yes it's done, let's learn about colors you can see that it came from red color. No surprises there. Now can I make it orange? Yes, I can. And range. And you can see here that its color has become orange. What are the color keywords that can be used? Now see these are color keywords. It is possible that the color in your mind
• 23:00 - 23:30 is not a color keyword in CSS. It happens. And I am stuck. I am telling you personally that I am so stuck in these things that there is a color keyword in CSS And i am stuck in these things That there is no color in my mind Like light blue So i will show you how to find it If i write dark yellow And it is not coming Because if i show you Is dark red? yes it is dark red is it dark grey? yes it is dark grey so why is it not dark yellow?
• 23:30 - 24:00 so what happens is that there are some color keywords in CSS and what I will do is I will show you a code pen that code pen you don't have to write I mean this is very much common sense that you don't know how to write but here you can see Alice Blue Antique White, Aqua, Aquamarine, Azure Blue and all these colors, all the colors in CSS has a comprehensive list, so let's do one thing I am putting it here just to see you
• 24:00 - 24:30 it's not that you have to write it, don't think that I am sitting to remember it, no, I know you are smart and you will not do this. So these are the color keywords we have, so one is the easiest for us, I will put a good color, dark red, one is the easiest way for us, here I close this too, close this too, close this too, use the color keyword but sometimes what happens see colors are millions of colors okay if you have to give a particular color to someone means he gave you a hex color code
• 24:30 - 25:00 now what is hex color code hex color code is a way to represent the code now I will tell you three ways which are very commonly used to show color okay so I do one thing I write a paragraph here I will write color can be represented in and here i will make an ordered list and i will write color codes sorry color keywords and here hex color codes
• 25:00 - 25:30 one li and one list item and after this i will add one more li hex color code, one li is my list item hex color code and after this I will add one more li RGB, then one more li will add RGBA, and then one more li will add HSLU, saturation and lightness so here you can see, what is the first method so if I have to do it through color keywords, I have shown you how to do it now I will show you how you can use this color by giving a hex color, if I write color here
• 25:30 - 26:00 I write hashtag here and I will write FFAB in fact I will not choose random color, I will go to hex color code and here you can see a lot of hex color code you can give any color's hex color code and there is a way to generate a hex code here it is shown and if you want to take this color and you like it and you have this color in your mind then I will copy this code and it will generate the same color after hash I will write this
• 26:00 - 26:30 and you can see the green color so hex color is a way to represent color which uses hex values ok and you can see the green color here so hex color is a way to represent color which uses hex values now a particular hex color has RGB equivalent if it is a very common color like red then its color keyword will be equivalent so if you want to use any color then you will be given its code now that code can be given in RGB that code can be given through a color keyword like red, blue or you can be given to you in RGB that code can be given to you through a color code, color keyword like red, blue or it can be given to you in RGB, RGBA or HSL so this is hex color code
• 26:30 - 27:00 now i will tell you how RGB is used if you want to use RGB then you will write color and RGB and here the value of red from 0 to 255 like if i write 23, green value from 0 to 255 and here blue value from 0 to 255 for example, if i write 23 green value from 0 to 255 and blue value from 0 to 255 and see this color is made if you hover over it you will see this and you can generate any color see RGB values are changing so you can generate any color
• 27:00 - 27:30 so with RGB values if red is this much green is this much, blue is this much, then this color is made if you want to make white then put all colors it will become white, if you want to make black then put nothing, dark, 0, 0, 0 and different colors are made from the middle values so RGB makes a particular color you can use this is one way to represent colors another way to represent color is RGBA, and RGBA has same RGBA has same RGB
• 27:30 - 28:00 but one thing is different, that is alpha and what is alpha value, it varies from 0 to 1 if I make it 0.5, let me show you and I do this, so I can do this from 0 to 1, you can see the value is changing and by default it is 1 if I do 1 then there is no need to write but if I do this much for alpha so what will happen, what is alpha basically its opacity, I will reduce the opacity if I reduce it completely, then this color will look like this, see it is light
• 28:00 - 28:30 it is very light after this you have an HSL equivalent of a color, and if I have a HSL equivalent of a color and if I have to tell you what is the most used, see most of the time these color keywords are used after that the most used is hex color, because those people who make designs they mostly use hex color codes in their designs and when they use hex color codes, then developers like us have to use hex color codes to bring the exact color in our design through HTML and CSS.
• 28:30 - 29:00 Okay, so here we have to use the value we have got. If we have been told that RGB color is fine, then we will put values. If your boss has told you that RGB values are to be used through red color, then we will do this. The exact same color will be made if any developer has used a particular color in android app if that developer has to use the same color in his website then bring the exact color code hex color code or RGB values sometimes HSL is also used
• 29:00 - 29:30 I will tell you, it is used less, I personally do not use HSL in my website but HSL is used Now I want to tell you that H in HSL is Hue which represents the type of color S means intensity and purity and L determines lightness Now you can see how HSL color can be made I will copy the color from here and show you Personally I am not a big fan of HSL to be honest I will copy the color from here and I will show you guys I am not a big fan of HSL to be honest but sometimes I get colors so I have to use it
• 29:30 - 30:00 and obviously if you hover over here and change it it will change in HSL only you can also change the alpha value there is also HSLA but again it is not that useful but you should know that there is also HSLA is also there but again it is not used that much but you should know that HSLA is also there, you can also give alpha value in it something like this, okay? I can also add HSLA but again we will keep alpha as 100 and use HSLA only for now because if you are making your website then you have full creative control over which color you are using
• 30:00 - 30:30 so this was about color, if you want to add color in background we use same thing in background color and exactly the way i gave color you can give it in that way, for example if you want to give color in background you can give value of RGB, HSL, RGBA you can give color key words, you can give hex code sky is the limit, its your choice here your choice you will say it's my choice whatever color i use, if you are making your website if you are making someone else's then he will say it's my choice
• 30:30 - 31:00 you are a developer, make a website, use the color i am saying now border color and text decoration color the color which is there in the whole css border color, and there are many other colors the color of the border, where ever we read colors, we can use this kind of values so that was about colors in CSS now there are many things like how to read hsl, how to tweak values and make a particular color
• 31:00 - 31:30 so those things will go to design lessons you should have a goal of how to make a website, so those things will go towards design lessons you should have a goal here, how to make a good website so I hope in this long video I have explained you font and colors because many people were saying that the videos are getting short, so I thought a long video should also be given to you, so I have tried to tell you fonts and colors in today's video, I am enjoying telling you in the comment section in this course and people are not bookmarking the playlist and not liking the video which is wrong
• 31:30 - 32:00 I think you should access this playlist and bookmark it and like this video share it with your friends and share your land in my name and prepare to meet me in the next video Thank you so much guys for watching this video and I will see you in the next video you