Introduction
This chapter demonstrates about the CSS Comments and also which explain about the its applications for the better understanding of the code and best practice following are the concepts are covered in this chapter.
- About CSS Comments
- Types Of Comments
Description
Comments are used for good development practice to comment in the style sheet. Here some points are listed below to demonstrates the comments on the style sheets.
CSS Comments starts with " /* " and ends with " */ " all the comments are must enclosed with in these symbols as shown below image.
The code below demonstrates the example of the CSS Comments as shown.
[html]
<style>
/*---------------------------------------
#Main Stylesheet
Filename:mystyle.css
Site: splessons.com
Version: 2.0
Author: Team splessons
Description: Demo for Comments on CSS stylesheets.
------------------------------------------*/
</style>
[/html]
CSS Comments are cannot be nested, any thing after the closing symbols will be interpreted as CSS rule.
- User can write the comments as a reminder.
- Comments are used to help the project team to understand the code properly.
- Which are used to maintain the readability and maintenance for CSS file.
- Comments are very beneficial for the large projects which involves many developers and multiple style sheets.
- Which help to keep the track of the people who worked under the project.
Description
CSS Comments are differentiated into several types here some types of comments are briefly explained with the examples as shown.
CSS Comments to Disable Rule
User can Disable some part of the CSS code temporarily by enclosing those code with in the comment tags /*........*/. which is useful when doing experiments on the CSS style sheets when trouble shooting some problems. The code below demonstrates the Disable CSS Rules with comments as shown below.
[html]
<style>
.box{
font-family: Verdana, Papyrus, consolas;
/*
box-shadow: 5px 5px 5px #eee;
color:#fa4b2a; */
background:#009900;
}
</style>
[/html]
A Table of Contents
A Table of Content demonstrates the project requirements, sections, project details etc which includes the guide and reminder for the project developers. Some times table contains have some special symbols such as { $, @, ? } which are not used in CSS code to enable the easy search the code below demonstrates the table of content as shown below.
[html]
<style>
/*---------------------------------------
#Table Of Contents
1.Fonts.
2.Typography.
3.Main Layout.
4.Tables.
5.Forms.
6.Textarea.
7.@fontface
8.Print stylesheet.
------------------------------------------*/
</style>
[/html]
Create Color and Typography Referance
In the Comments User can also give brief reference about the stuffs like Colors and Typography then which acts as a reference for colors and Typography for entire projects. User should make sure that files remains consistent and easy to maintain the code below demonstrates the Color and Typography as shown below.
[html]
<style>
/*---------------------------------------
Stylesheet Color Reference
Background: #fa4b2a;
text: #fff;
headings: #009900;
:link #008800;
:hover #005500;
box-shadow: #ccc;
----------------------------------------*/
/*---------------------------------------
Text & Typography Reference
font-family: Verdana, Arial, Consolas;
font-size: 2.5em/1.3em ;
Buttons: 1.2 em Arial;
----------------------------------------*/
</style>
[/html]
Key Points
- Comments are not displayed o the web page.
- By the Comments user can improve the Readability and maintenance.
- User can disable some part of the code by the Comments.