HTML and CSS Reference
In-Depth Information
will render the same as
h1 {font-size: xx-large;
color:red;
font-family:Arial;}
Given the nature of white space in CSS, you may find formatting leads to better
readability for future development. Also like traditional coding, we should add comments
using the common programming language syntax
/* */
like so:
/* first CSS rule below */
h1 {font-size: 28px; color: red; font-family: Arial;}
Of course, when publishing CSS and HTML on public-facing Web sites, removing
comments and reducing white space to improve delivery and slightly obfuscate execution
may be appropriate.
Lastly, case should be well considered. In CSS, property names and many values are
case insensitive, so
h1 {FONT-SIZE:28px;color:RED;FONT-WEIGHT:bold;}
and
h1 {font-size:28px;color:red;font-weight:bold;}
are the same. However, in some important cases, such as with URL values, font names, and
certain selectors such as
id
and
class
values, case will be enforced. For example,
#foo {background-image url(tile.gif); font-family: Arial;}
and
#FOO {background-image url(TILE.GIF); font-family: ARIaL;}
will not necessarily be the same, with the URL sometimes working depending on the Web
server involved, the fonts potentially not matching, and the differing
id
selectors possibly
not working unless an extremely permissive browser is in play.
Given the potential for
confusion, it is much safer to assume that CSS is case sensitive.
When not placed directly inline, style rules would be placed either within a
<style>
tag
found in the document
head
<style type="text/css">
/* a sample style sheet */
h1 {color: red; text-align: center;}
p {line-height: 150%;}
</style>
or will be externalized and referenced via a
<link>
tag found in the
head
of the document,
like so:
<link href="mystyle.css" rel="stylesheet" type="text/css">
