HTML and CSS Reference
margin: 20px 20px 20px 20px;
padding: 20px 10px 20px 10px;
padding: 20px 10px;
Note Remember that whenever you're writing shorthand for any CSS property that deals with length, the
directions go in a clockwise manner: top,right,bottom,left.
FOR MORE ON SHORTHAND
Perhaps the most comprehensive resource on CSS shorthand properties ever written exists at the personal
web site of Dustin Diaz ( www.dustindiaz.com ). His CSS Shorthand Guide ( www.dustindiaz.com/
css-shorthand/ ) covers all the properties that accept shorthand notation, examples of each, and some
“gotchas” to watch out for when using shorthand.
Grouping and Notating CSS Rules with Comments
If you build web sites of substantial depth, you will no doubt discover that your CSS rules can
become unmanageable without an organizational system in place. Every CSS author or team
of authors will find what works best for them individually, but we can offer several suggestions.
Like most markup and programming languages, CSS supports the concept of comments,
snippets of text that are ignored by the browser (or other rendering device). These can be use-
ful for several distinct purposes.
CSS Comment Syntax
Before you can make use of comments, you must understand how they are indicated in the
CSS files. CSS uses the “slash-star, star-slash” syntax for comments, in which a comment block
is opened with a slash ( / ) followed by an asterisk ( * ) and closed by its opposite—an asterisk
followed by a slash. Comments can span multiple lines.
/* This is a CSS comment */
/* This is a CSS comment
that spans multiple lines */
The first, and perhaps most obvious, use of comments is to leave contextual notes to yourself
or members of your team. For example, you may do something like this: