Anatomy of a stylesheet
Article ID: KB101639
To understand how to make basic edits to CSS, you should first understand the
anatomy of a stylesheet.
The Basics
Open any stylesheet and you'll see that it is made up of code chunks that are
formatted something like this:
selector { attribute: value; }
You might see multiple attributes, either in one long line of code or in a block of code, like this:
selector {
attribute: value;
attribute2: value2;
}
A "selector" will either be the HTML tag (p - paragraph,
h1 - heading 1, etc.), a special class (starts with a period, like .red
or .small), or an ID selector (starts with a hash, like #body
or #left).
You might also have multiple selectors listed together and separated by commas, like
h1, h2, h3, h4, h5, h6. This means that all of the selectors will
have the same attributes.
You might also see multiple selectors, listed together without commas, like
#menu h1. This means that the definitions apply very specifically to
the selectors that are arranged in a certain order on the actual page. So in this
example, the definitions apply only to Heading 1 code that are also within a #menu
code area and would not apply to Heading 1 code in general
As you may have guessed, the selectors correspond with what's in your
HTML code of your pages, and the attributes define how those selectors display. So for
example, the following code sets the body tag to have a
background color of red, and a default font color of white:
body {
background: #f00;
color: #fff;
}
If you want to figure out how to change a color, font, or some other attribute of
your web page, first look to see if one of the default HTML elements has that
defined. If it doesn't seem to match what you see, then look to see if that
particular section has a special class or ID selector that is influencing its style.
For example, you may have a web page where most of the text color is black,
but the menu text color is red. When you look at the HTML code, you see this:
...
<div class="menu">
<ul>
<li><a href=...>link 1</a></li>
<li><a href=...>link 1</a></li>
<li><a href=...>link 1</a></li>
</ul>
</div>
Notice that the menu links are contained 1) within a list, and 2) within
<div class="menu">. So in the stylesheet, you
might look to see if the menu link color is defined as a default link color (look for the
a:link, a:visited, a:active, a:hover definitions), or if it's somehow
related to the attributes of the .menu a or .menu ul a definitions.
Other Stylesheet Code
Shorthand
Sometimes you may see some attributes combined into one long line.
CSS rules allow for certain types of shorthand, so the following two pieces of code are
actually identical:
h1 {
font-size: 15px;
font-weight: bold;
font-style: italic;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font: 15px bold italic Verdana, Arial, Helvetica, sans-serif;
}
You may also see shorthand for background, margin, padding, and other properties.
Comments
Things within /* ... */ are comments and may be there
for explanation or other reasons.
Hacks
Sometimes you'll see weird code, or code that seems repetitive. For example,
some common stylesheet code that you may see looks something like this:
#selector {
width: 500px;
height: 300px;
padding: 5px 10px 5px 10px;
voice-family: "\"}\"";
voice-family:inherit;
width: 480px;
height: 290px;
}
html>body #selector { width: 480px; height: 290px; }
On first glance this seems confusing -- there are three widths, three heights,
and then a weird voice-family code block.
This is an example of a CSS hack. A CSS hack is a bit of code that hides the code after it from certain browsers.
There are different hacks out there for different purposes. This specific hack is to fix a CSS bug in IE5 that
doesn't size things correctly if there is padding involved. So, the first width and height is for IE5, the second width and height is
for IE6, FireFox, and Netscape, and the third width and height is another hack for certain Opera browsers. You'll notice that the
second and third heights and widths, if combined with the padding values, equal the first dimensions. So, if you want to
change the dimensions for some reason, just make sure you fix them in all three places.
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1015/kb101639.htm
permalink to this article:
http://www.pixelmill.com/support/kb101639.htm
Back to top