Structuring a Web Page - HTML5 Foundations - page 40

3. Save the files.
That completes your page templates! In Chapter 4, you use these templates to create each page on your website.
Styling the Page with CSS
Cascading Style Sheets, or CSS, is a language used to describe how the web browser should present HTML elements
and their content. You can use CSS to control the visual aspects of your web page, including element position, back-
ground colors and images, borders, fonts, and many more design aspects. The following example shows a brief ex-
tract of CSS code.
section {
font-size: 14px;
color: #CC0000;
}
This code is an example of a CSS style rule that sets the size of all text within <section> elements to 14 pixels
and colors it red. The first part of a CSS rule selects the elements that the style should be applied to, and the code
within the curly braces describes the styles.
Colors in CSS are defined using either a hexadecimal or RGB notation that defines the amount of red, green, and
blue that should be used in order to produce the desired color. #CC0000 is the code for red.
HTML and CSS have always been very tightly coupled. Most developers who know HTML will also be knowledge-
able about CSS and vice versa. I strongly urge you to learn CSS if you want to build professional web pages.
The aim of this topic is to teach you about HTML5. CSS is an equally large topic, but I don't cover it in this topic.
There are, however, many great topics on the subject, particularly the latest standard, CSS3. I definitely recom-
mend that you pick up a copy of CSS3 Foundations by Ian Lunn (John Wiley & Sons, 2013), which is also part of
the Treehouse series. The Treehouse website also has a number of great videos covering CSS. Try starting with
the videos for CSS Foundations ; you can find them at http://teamtreehouse.com/library/websites/
css-foundations .
Linking CSS to Your HTML
Web pages with complex designs often have hundreds of lines of CSS code, which can get pretty hard to manage
after a while. Luckily, you can create separate stylesheet files to help break up your CSS code and make it more
manageable. For instance, some developers find it easier to split the code responsible for the page layout and the
code responsible for branding and colors into separate files.
To create an external stylesheet, you simply need to create a file in your text editor that uses the .css file extension.