HTML and CSS Reference
In-Depth Information
/* This is a CSS comment that is spread over multiple lines.
The browser ignores everything until the end of this line. */
Comment tags can also be used to disable part of your CSS temporarily. This is a useful technique when
experimenting with new ideas or troubleshooting problems. Just put the opening
/*
and closing
*/
comment tags
around the section that you want to disable. You can disable a single declaration or a whole section at a time. For
example, this disables the
color
and
background-color
properties in the following rule:
body {
font-family: Arial, Helvetica, sans-serif;
/*
color: #000;
background-color: #FFF;
*/
}
Just remove the comment tags to restore the rules.
■
Comments cannot be nested. As soon as the browser encounters the first
*/
closing tag, it treats
everything else as CSS until it finds another
/*
opening tag.
Caution
Why Are They Called “Cascading” Style Sheets?
he
cascade
in CSS refers to the way that rules are added together and applied cumulatively. Think of the cascade
in the literal sense of a waterfall or a river. As a river flows from the mountains to the sea, it starts of as a tiny
trickle, but as more water is added through tributaries, it becomes bigger and more powerful. Yet the water in that
original trickle is still part of the whole.
CSS works in a similar way. You can create a style rule that trickles down through the whole page. For
example, it's common to set the background and text colors in a rule for the body of the page. But lower down,
new rules can be added that affect the font or size of the text in paragraphs or headings without changing the
color or background. And just like a river can break into a delta as it reaches the sea, you can break the CSS
cascade into different strands, so that a sidebar looks different from the main content or footer of the page.
his might sound mysterious at the moment, but all should become clear by the end of this topic. he
important things to remember are these:
•
Styles trickle down:
A style rule applied to the
<body>
affects everything inside the page
unless something else overrides it.
•
Styles are cumulative:
Most property values are inherited, so you need apply only new ones.
•
Inherited styles can be overridden:
When you want to treat an element or section of the
page differently, you can create more detailed style rules and apply them selectively.
In most cases, the order of your style rules doesn't matter. However, the cascade plays an important role
when there's a conflict between rules. As a basic principle, style rules that appear lower down in a style sheet or
<style>
block override any previous rules in the case of a direct conflict.
Chapter 2
describes in more detail how
to determine which rule takes precedence.
