CSS Grouping
Css Grouping, in your project is very important . The Objective of grouping the CSS is to made everything looks clean and Tidy and eliminate extra CSS Coding. This will benefit the coder and those who would like to modify the work in future . As this would not cause serious headache when you step into your program after sometimes
For Example , i have a Header three and Header two which share the same Styling . In my code i have been repetitive coding it, that seems to be a lot work and redundancy i have done.This does not serve any purpose , it lengthen the development time, and it will be difficult for me to modify in future. In order to eliminate all this unnecessarily work i would want to group all this Header with the same Styling set together.
In order to group the Header with the Same Styling, we just need to group them into the same parentheses. This can be done by separating them with a COMMA.The CSS Grouping technique apply to all ID , Classes, Elements, etc.
Lets step into the Code below and See how we can group ID , Classes, Elements, etc, together in CSS Styling
Before CSS Grouping
Code before modification.
h2{ font-family: sans-serif; color:cornflowerblue; text-shadow: 2px,2px ,5px,blue; line-height: normal; } h3{ font-family: sans-serif; color:cornflowerblue; text-shadow: 2px,2px ,5px,blue; line-height: normal; }
After CSS Grouping
Code after modification.
h2,h3{ font-family: sans-serif; color:cornflowerblue; text-shadow: 2px,2px ,5px,blue; line-height: normal; }
You can group as many elements, Classes or ID that you would like, as long as they share the same styling.Basically for me. when i am doing my own CSS Coding i would like to list out all the Styling that would share the same Styling before hand so i got an Idea how would i want to organise it in a structural manner.
Check out HTML and CSS School here
Check out how to use CSS Combinator here
Leave a Reply