HTML and CSS Reference
In-Depth Information
Figure 2-1 The index.html file when viewed in Google Chrome.
Getting Started with CSS
To create a new stylesheet file, follow these steps:
1. In your text editor, create a new file and name it styles.css.
2. Save the file in the css folder of your website project.
You must now reference that stylesheet in the web page.
Adding CSS to a Page
As you saw in the HTML template, the <head> is the place where you add metadata and reference the resources on
which the page relies.
In the <head> section of index.html, reference the stylesheet you just created as follows:
<meta charset=”utf-8” />
<title>Cool Shoes &amp; Socks</title>
<link rel=”stylesheet” href=”css/styles.css” type=”text/css” media=”all” />
<!--[if lt IE 9]>
<script src=””>
Here, you add a link for which the relationship ( rel ) to this page is a stylesheet. The hypertext reference ( href )
points to the place where that stylesheet is located within your project files and is of type text/css . This
stylesheet will be utilized across all media types. More on media types shortly. Note that when a page is using the
HTML5 doctype <!DOCTYPE html> , specifying the type is optional.
Often, you require multiple stylesheets per page. To do this, you can simply add another <link> :
<link rel=”stylesheet” href=”css/styles.css” type=”text/css” media=”all” />
<link rel=”stylesheet” href=”css/styles2.css” type=”text/css” media=”all” />
Alternatively, within a stylesheet, you can use the @import rule, which is a reference from one stylesheet to anoth-
er and can be added anywhere within a stylesheet:
@import url(“styles2.css”);
@import url(“styles3.css”);
Which approach is better? <link> performs better over @import (you can find out more about the performance
impact of @import at: ) but on a
live web page (on the web and viewable by everyone), neither approach is best!
When you're creating a web page, separating styles into multiple sheets is a good idea to make managing styles easi-
er. However, when a site is live, ideally, you should have only one stylesheet. This is best practice, making a web
Search WWH ::

Custom Search