Game Development Reference
In-Depth Information
color: #cc0000;
font-size: 23px;
}
</style>
<p>Hello, World!</p>
<p style="color: #cc0000; font-size:
23px;">Hello, World!</p>
The previous code is an example of CSS rules written on a specific element. In this
case, only this HTML paragraph tags will use the style defined by this simple rule
(which tells the browser to render the text in red, and 23 pixels height).
(file: /my-style sheet.css)
p {
color: #cc0000;
font-size: 23px;
}
(file: /index.html)
<!doctype html>
<html>
<head>
<link rel="style sheet" href="my-style
sheet.css" />
(...)
The previous code is an example of CSS rules written in a separate document.
In this case, any HTML paragraph tags in the file
index.html
will use the style
defined by this simple rule (which tells the browser to render the text in red, and
23 pixels height). Other documents will not use the styling rules found in
my-style
sheet.css
if the stylesheet is not imported into those files.
Ease of maintenance
Another tremendous benefit that you get by separating the presentation of your
HTML documents through external CSS files is that maintenance becomes very
easy. Imagine the scenario where you write all your styles in the same document that
uses them. If you only have one document, then that's not a big problem. However,
