Wednesday, January 9, 2019
HOW TO USE COLOR PROPERTY IN CSS|COMPREHENSIVE DETAILS
You will recall that in our previous lesson on HTML, I painstakingly outlined different colour codes and combinations, and as well how to apply them in HTML document. In this lesson, however, I will be taking a step further teaching you how to use colour property in CSS. CSS flourish in colour. CSS colour property primarily specifies the colour of text. You can either use colour names (e.g red, blue, etc.) or hexadecimal value (#0000FF, etc.) to define the colour of the text in CSS. Within the next few minutes, I will be walking you through the various steps on how to make use of colour, but before then, there are few things I would like you to note before we go into practical proper.
CRUCIAL THINGS TO NOTE ABOUT COLOR PROPERTY IN CSS
1. RGB
This is a colour formula and it stands for red, Green and Blue. I said a lot on this in one of our previous lessons. If you want to use it in CSS, you write ‘’rgb’’ followed by curly braces. Within the curly braces, you specify the colour amount of ‘red’,’green’, and ‘blue’; separated with a comma. For example, if a text has rgb{0,0,255), it means that red and green will have zero appearance on the text. The text will be blue.
2. RGBA
‘RGBA’ format was recently introduced with the latest version of CSS, (that is, CSS 3). The only difference from the first one we discussed above is the sudden addition of ‘a’. It is an alpha which means opacity or opaque (unable to see through). Opacity is the opposite of transparency. In CSS, when the opacity value is set at ‘1’(one), then it means ‘fully black’’ and when it is set at zero, it means fully transparent. When we get to CSS 3, you will understand better.
3. HSL
HSL stands for Hue, Saturation and Lightness. Hence it used to determine how hue, saturated or bright a colour can be. Hue is the degree on the colour circle between 0-360. So, 0 & 360 signifies pure red, 120 means green, while 280 equals to purple. Saturation, on the other hand, is simply the colour percentage value. It is from 0% to 100%. Lastly, Lightness is a percentage value that describes the brightness of a colour. When it is set at 0%, it makes the colour completely dark, and when it is at 100%, the colour becomes completely white. Example, hsl{120,100%, 75%} equals to light green.
4. HSLA
This is similar to the above point. The only difference is the ‘a’ at the end of the acronym. It means alpha. Kindly see point number two for clarification.
Example, hsla{120,100%, 75%,0.5} equals to light green with half transparency
Let us consider an example;
HTML
<p class="first">I am writing my coding exam.</p>
<p>I want this to be our second paragraph.</p>
CSS
<p class="first">I am writing my coding exam.</p>
<p>I want this to be our second paragraph.</p>
REFERENCE THE CSS IN HTML (if you want to use external styling) IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, IT WILL LOOK LIKE THIS
WRAPPING UP
We are gradually coming to an end of CSS basics, we will soon move to the CSS3 and subsequently to Java course. See you in our next lesson.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment