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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s