CSS Grouping

CSS Grouping

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

Your email address will not be published. Required fields are marked *

two × 1 =