Adding Comments to CSS

Comments in a stylesheet are a good idea. Often, things that are obvious as you write them, make no sense a week or even years later – or to somebody else. So it can be very helpful to include explanations. However, we don’t want to browser to read and render those, as they are not meant to be displayed on the webpage, so we have to hide them.

/*
This is a HIDDEN Comment!
*/

That’s all it takes – a ‘/*’ to start, and a ‘*/’ to end. A few handy applications for these hidden comments are:

h1 {
color: #000000; /* black - because I forget */
font-size: 2em;
}

Another handy use for the comments are to help define the structure, so things are easier to find:

/* ----------------- Generic Styles ------------------ */
 
.alignleft { float: left;}
.alignright { float: right;}
.clear { clear: both;}
 
p { margin: 0 15px 10px;}
 
h1, h2, h3 {
	font-family: Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;
}
 
h2,  h2 {
	margin: 25px 20px 5px;
	color: #9e6548;
	font-size: 2em;
}
 
h3 {
	margin: 25px 0 5px;
	padding: 5px 25px;
	background: #9e6548;
	color: #f7efe3;
}
 
ul { margin-bottom: 25px; }
 
/* ----------------- The Header -------------- */
 
#header {
	background: url(pics/stove.jpg) #f7efe3 no-repeat top right;
	height: 200px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
 
#header h1 {
	color: #9e6548;
	font-size: 3em;
	padding: 35px 25px 0;
}
 
/* ------------- Top Navigation ------------------- */
 
#topnav {
	background: url(pics/nav.png) repeat-x;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	width: 679px;
	height: 45px;
	top: 55px;
	position: relative;
	padding-top: 13px;
}
 
#topnav li {
	display: inline;
	margin: 15px;
	}
/* ------------ content -------------- */
 
#content, #contentPage, #indexPage {
	float: left;
	width: 635px;
	padding: 35px;
}
 
#contentPage h2, #search h2 {
	margin-top: 0;
	margin-bottom: 0;
}
 
#contentPage h3, #search h3 {
	margin-bottom: 10px;
}
 
/* ----------- Sidebar ---------------- */
 
#sidebar {
	width: 205px;
	background: #9e6548;
	float: right;
	margin: 12px 0;
	color: #f7efe3;
	padding: 20px 10px;
}
 
#sidebar h1, #sidebar h2 {
	font-size: 1.4em;
	margin: 25px 5px 5px;
	color: #f7efe3;
}
 
/* ------------- footer ----------------------- */
 
#footer {
	clear: both;	
	height: 40px;
	font-size: .8em;
	background: #9e6548;
	color: #f7efe3;
	text-align: center;
}
 
#footer p {
	padding-top: 14px;
}

I’m sure you get the idea.

Posted in: tutorial web