how to add comments to css file
Apr 05, 2012, by admin
Comments in a stylesheet are a excellent plan. Often, things that are understandable as you write them, make no sense a week or even years later – or to somebody else. So it can be very useful to comprise clarifications. 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 a small number of useful applications for these hidden comments are:
h1 {
color: #000000; /* black – because I forget */
font-size: 2em;
}
Another versatile use for the comments are to help describe 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;
}
