Commenting is one thing you should know while working on Cascading Style Sheets. Comments are added by enclosing them between /* and */. Comments can span several lines and these lines will be ignored by the browser.
/* These are basic element selectors */
selector{
property1:value;
property2:value;
property3:value;
}
Comments can be added between rules or inside the property block. For instance, in the following given CSS, the second and third properties are enclosed within a comment delimiters. These properties will hence be ignored by the browser. This is useful while checking out what effect a certain part of a CSS has on the web page. What you need to do is just comment on them, save your CSS and then reload the HTML.
selector{
property1:value;
/*
property2:value;
property3:value;
*/
}
Cascading Style Sheets, unlike other languages has only block level comments. Single line comments doesn’t exist. One can however limit the comment to a single line but this too needs the elements to include the opening and closing comment delimiters “/* and */”.
Grouping Selectors
Yet again, you can group different selectors. For example, you want to apply same style to h2 and p, you could write the CSS below:
h1 {color:blue;}
p {color:blue;}
In the above CSS, you repeat information that is the same (i.e. color:blue). To shorten the Cascading Style Sheet, you can group the selectors together with a comma. Doing this will apply the rules within the brackets to both the selectors. You can write it this way.
h1, p {color:blue;}
Of the several selectors (each matching a different part of the markup, HTML), the three most basic ones you’ll come across most often are:
p {}: element selector
This selector matches elements of the same name on the page.
.example{}: class selector
The selector matches elements that have a class attribute with the value specified. Therefore, the above would match
,
,
or any other element with class “example”.
Note that class selectors don’t apply to any specific element name.
#example{}: id selector
This selector matches every element that has an id attribute with the value specified. All element with the id of example (according to the above CSS) would match.
Note that ID selectors don’t apply to any element name. For every HTML document, you can only have one of each ID.
This is all for the day. Come back for more topics like software development, android application development, web designing, application development, etc.
Cascading Style Sheets Basics – Comments and Grouping Selectors
Commenting is one thing you should know while working on Cascading Style Sheets. Comments are added by enclosing them between /* and */. Comments can span several lines and these lines will be ignored by the browser.
/* These are basic element selectors */
selector{
property1:value;
property2:value;
property3:value;
}
Comments can be added between rules or inside the property block. For instance, in the following given CSS, the second and third properties are enclosed within a comment delimiters. These properties will hence be ignored by the browser. This is useful while checking out what effect a certain part of a CSS has on the web page. What you need to do is just comment on them, save your CSS and then reload the HTML.
selector{
property1:value;
/*
property2:value;
property3:value;
*/
}
Cascading Style Sheets, unlike other languages has only block level comments. Single line comments doesn’t exist. One can however limit the comment to a single line but this too needs the elements to include the opening and closing comment delimiters “/* and */”.
Grouping Selectors
Yet again, you can group different selectors. For example, you want to apply same style to h2 and p, you could write the CSS below:
h1 {color:blue;}
p {color:blue;}
In the above CSS, you repeat information that is the same (i.e. color:blue). To shorten the Cascading Style Sheet, you can group the selectors together with a comma. Doing this will apply the rules within the brackets to both the selectors. You can write it this way.
h1, p {color:blue;}
Of the several selectors (each matching a different part of the markup, HTML), the three most basic ones you’ll come across most often are:
p {}: element selector
This selector matches elements of the same name on the page.
.example{}: class selector
The selector matches elements that have a class attribute with the value specified. Therefore, the above would match
,
Note that class selectors don’t apply to any specific element name.
#example{}: id selector
This selector matches every element that has an id attribute with the value specified. All element with the id of example (according to the above CSS) would match.
Note that ID selectors don’t apply to any element name. For every HTML document, you can only have one of each ID.
This is all for the day. Come back for more topics like software development, android application development, web designing, application development, etc.
I am a freelance content writer who is currently working on projects like android application development, web application development, etc. for a software development company based in India.
View the original article here