HTML and CSS Reference
In-Depth Information
<p>This page is red</p>
</body>
</html>
Go ahead and save this text file as “MyPage.html” in the same folder as the CSS file.
You have now created a simple environment in which you can test CSS. To view the page,
open MyPage.html with your web browser. You will see that the background is indeed
colored red because of the rule in the style sheet.
View source
While you have the browser opened, you can view the HTML markup that makes up the
page by pressing Ctrl+U on a PC or Cmd+U on a Mac. This shortcut works in all major
browsers, including Chrome, Firefox, and Internet Explorer (IE). You can also find the
view source window by right-clicking on the page and selecting “View Source”. In Firefox
and Chrome, the style sheet is clickable, allowing you to view the external style sheet rules
that apply to the web page. (Note that in Chrome, you have to right-click the style sheet
and select to open it because this file is stored on your local machine.)
Viewing the source code of web pages like this provides a great way to learn from other
web developers. Whenever you find an interesting element on a web page—whether it is
created with HTML, CSS or JavaScript—the page source will reveal how it was created.
Comments
Comments in CSS are created by using the C-style notation (
/* */
). Everything placed
between
/*
and
*/
will be ignored by browsers, even if the delimiters span multiple lines.
/* Multi-line
Comment */
The main use of comments is to clarify the code to developers, including you in the
future. They can also be used to improve readability by delimiting sections of the style
sheet or providing meta data about the file, such as the author's name.
/*
* Meta data
*/
/*** Section heading ***/
p { margin-top: -1px; } /* clarification */
