All about CSS3 for Absolute Beginners: Part 6
.jpg)
Hi everyone and welcome back to the blog. The magic behind your favorite websites is slowly unfolding by the introduction to the core concepts of CSS. By the end of this all about CSS3 for Absolute Beginners series, I'm sure you will be confident enough when sitting in front of a CSS codebase. So let's continue the ride together.
Selectors in CSS
Earlier we learned the concept of ancestors in HTML and CSS. There are a variety of selectors available in CSS that will help us in different scenarios. You know about the universal tag selector, class selector and ID selector, so let's focus on what's beyond these.
Group Selector in CSS
This is helpful when you want to apply styles to a group of elements. For example, you may want to apply a specific style for all the paragraphs, h2, and anchors in an HTML.
h2, p, a {
color: purple;
}
This tells CSS3 to apply the given styles to all the h2, p and a elements in the HTML. You can group as many elements as you want, separated by a comma.
Descendant Selector in CSS
If you want to target an element inside a parent element, then go for the descendant selector. For example:
.box p {
color: red;
}
This example does the work of applying the styles to all the paragraph elements inside the element with the class box. Now paragraphs inside the box will only have red color. Experiment with this concept in your code editor.
Sibling Selectors in CSS
In this case, the h2 tag is the next immediate sibling to the h1. Any third element won't count as an immediate sibling like the h3 element.
h1 + h2 {
color: pink;
}
This "+" sign is for the adjacent sibling selector and this example selects h1 and h2.
When you want to select all the siblings of the same type as an element then use the general sibling selector.
HTML
In this example, the general sibling selector targets all the anchor tags after the h3. The paragraph element in between will stay unaffected but the anchors after it will be affected.
Float Property in CSS
Float property is helpful in positioning an element within its container. For example, create a container box and add a small box inside it. You may want to move the small box to the left or right of its parent container. Float property will come in handy at this point.
HTML
<div class="big-box">
<div class="small-box"></div>
</div>
Now observe this setup; you will see a parent container box and a small child box inside it. Now apply float equal to left and then right.
Color Models in CSS
So far, we have seen simple color names as values. Interestingly, the simple color values also have a huge range to choose from such as Phlox, Atrovirens, Sarcoline, and much more. If you want an exact color, you can use HEX codes, RGB values or HSL. Let's understand key differences and when to use each.
HEX Code in CSS
You may have seen RGB lighting a lot in this modern era, probably in clubs, gaming gadgets, disco rooms, TVs, room decor, or other places. RGB means a combination of red, green and blue. When each of these colors mixes, they form different colors. HEX is actually the combination of these red, green and blue.
When you head over to Google Color Picker and choose a color, you will see the HEX code of that color available for you to copy. You can add that HEX value to the color or background-color property.
.box {
background-color: #e3bc22
}
This is a color value randomly picked from Google Color Picker. When writing a HEX value, it should always be prefixed with a hashtag. This is the most convenient and fast way to add a color of your choice.
RGB and RGBA Values in CSS
With the RGB function, you can directly pass in the red, green and blue values and generate a color of your own.
.box {
background-color: rgb(52, 252, 219);
}
If you want to control the transparency of the color, then go for RGBA. The third value, A, stands for alpha. Here you can pass a value between 0.0 and 1. Just add a comma after the blue and provide a value between 0 and 1, like 0.4 or 0.9.
HSL Color System in CSS
This is for professional designers who want to have control over hue, saturation and lightness of the color. Increasing saturation makes colors more vivid, while lightness adjusts brightness. In the hue, you can pass a value between 0 and 360 (0 is red, 120 is green and 360 is blue). In the saturation and hue, pass values between 0% and 100%.
HSL can be interesting when you switch these values up and down and see their effect.
Wrapping up
It may seem that what you've learned was not that difficult and practicing it once or twice might be enough. It might be true, but to be on the safe side, you should practice at least 5 to 10 times on every concept so that you get to understand it by heart.
Thank you for reading the blog and if there's anything you feel like discussing with me then feel free to leave a comment or just reach me via the contact us page and I will try my best to help out.