Game Development Reference
In-Depth Information
CSS3
Cascading Style Sheets, most commonly known simply as CSS, is another contrib-
uting technology to the success of HTML and the World Wide Web. CSS is a style
language that controls the way an HTML structure is rendered. Some of the benefits
of using a style language alongside a markup language include separation of con-
cerns, reusability of visual design, ease of maintenance, and scalability. As part of the
HTML5 revolution, there were some significant updates to the CSS spec, which have
also taken the language to a whole new level.
Separation of concerns
The first, and possibly most apparent benefit that CSS brings to the game is separ-
ation of concerns. By allowing HTML to describe the data that it represents, and not
worry about how that data is presented, CSS is able to control the way that data is
displayed. This way the CSS expert can work on styling a web application without the
need to touch the HTML file. Best of all, the CSS expert needs absolutely no know-
ledge of any of the possibly many other technologies used in a given project. This
way, no matter how complex the rest of the project is, the styling can be done inde-
pendently and separately.
Reusability of visual design
There are many ways to include CSS rules into an HTML document. For example,
you can write all the CSS code right into the same HTML file that uses it, you can
write it inside each HTML element as you create them, or you can put the CSS style
in a completely separate file, then import the stylesheet into the HTML file. Most com-
monly, what you'll want to do is write all your CSS code in one or more separate files
(think separation of concerns), then import each file into the HTML files that you'd like
to use for each set of styles. This way you can have a single stylesheet that describes
a particular visual
theme
, then you can reuse that theme throughout an entire applic-
ation (possibly composed of thousands of individual HTML files and pieces) simply by
importing the stylesheet with a single line of code:
<style>
p {
