External style sheets

Currently, we write our rule sets in an external style sheet. You can see it's literally its own file:

In the folder structure on the left-hand side of the screen, you can see that it's in a folder called css:

Besides external style sheets, there are also inline and embedded style sheets. The external style sheet is by far the best place to write your styles; it's a separate file that is linked to each HTML page. An external style sheet can control a whole website, which is the main reason why this is the preferred type of style sheet. Anywhere in between the <head></head> tags of your index.html file; this is where you can link to your external style sheet:

<head>
  <link rel="stylesheet" href="css/style.css"> 
</head>

The href attribute points to the location of the file. Here it's pointing to the css folder and then a file called style.css. There's also a rel attribute that just basically says that this is a stylesheet. In the past, you might have seen text/css as the value for the type attribute, as shown in the following code block, but that is no longer necessary in HTML5:

<head>
  <link rel="stylesheet" href="css/style.css" type="text/css"> 
</head>

You may have also seen a closing forward slash on a self-closing tag like the link element, but in HTML5 that forward slash is no longer necessary. So including it or excluding it won't have any impact on your site.

上一章目录下一章