When you look at the code for externalStyle.html, you might be surprised to see no obvious style information at all!
<!DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title>externalStyle.html</title> <link rel = "stylesheet" type = "text/css" href = "myStyle.css" /> </head> <body> <h1>External Style</h1> <p> This page has styles set for paragraphs, body, and header 1. </p> <p> The styles are defined in an external style sheet. </p> </body> </html>Where you normally see style tags (in the header), there is no style. Instead, you see a tag. This special tag is used to connect the current document with another document.
How to define the external style
When you use an external style, the style elements aren’t embedded in the page header but in an entirely separate document.In this case, the page is connected to a special file called myStyle.css. This file contains all the CSS rules:
/* myStyle.css */
body {
background-color: #333300;
color: #FFFFFF;
}
h1 {
color: #FFFF33;
text-align: center;
font: italic 200% fantasy;
}
p {
background-color: #FFFF33;
color: #333300;
text-align: right;
border: 3px groove #FFFF33;
}
The style sheet looks just like a page-level style, except for a few key differences:
-
The style sheet rules are contained in a separate file. The style is no longer part of the HTML page but is an entirely separate file stored on the server. CSS files usually end with the .css extension.
-
There are no tags. These aren’t needed because the style is no longer embedded in HTML.
-
The code begins with a comment. The /* */ pair indicates a comment in CSS. Truthfully, you can put comments in CSS in the page level. External CSS files frequently have comments in them.
-
The style document has no HTML. CSS documents contain nothing but CSS. This comes closer to the goal of separating style (in the CSS document) and content (in the HTML document).
-
The document isn’t tied to any particular page. The great advantage of external CSS is reuse. The CSS document isn’t part of any particular page, but any page can use it.
How to reuse an external CSS style
External style sheets are really fun when you have more than one page that needs the same style. Most websites today use multiple pages, and they should share a common style sheet to keep consistency.
The code shows how easily this is done:
<!DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title>SecondPage.html</title> <link rel = "stylesheet" type = "text/css" href = "myStyle.css" /> </head> <body> <h1>Second Page</h1> <p> This page uses the same style as <a href = "externalStyle.html">externalStyle.html</a>. </p> </body> </html>External style sheets have some tremendous advantages:
-
One style sheet can control many pages: Generally, you have a large number of different pages in a website that all share the same general style. You can define the style sheet in one document and have all the HTML files refer to the CSS file.
-
Global changes are easier: If you’re using external styles, you make a change in one place and it’s automatically propagated to all the pages in the system.
-
Separation of content and design: With external CSS, all the design is housed in the CSS, and the data is in HTML.
-
Easy upgrades: Because the design parameters of the entire site are defined in one file, you can easily change the site without having to mess around with individual HTML files.
The link tag
The tag is the key to adding a CSS reference to an HTML document. The tag has the following characteristics:-
The tag is part of the HTML page. Use a tag in your HTML document to specify which CSS document will be used by the HTML page.
-
The tag only occurs in the header. Unlike the tag, the tag can occur only in the header.
-
The tag has no visual presence. The user can’t see the tag, only its effects.
-
The <link> tag is used to relate the document with another document. You use the tag to describe the relationship between documents.
-
The tag has a rel attribute, which defines the type of relationship. For now, the only relationship you’ll use is the stylesheet attribute.
-
The tag also has an href attribute, which describes the location of the other document.
Link tags are often used to connect a page to an externally defined style document.
Most people refer to the hyperlinks created by the anchor () tag as hyperlinks or links. This can lead to some confusion because, in this sense, the link tag doesn’t create that type of link.
How to specify an external link
To use the tag to specify an external style sheet, follow these steps:-
Define the style sheet.
External style sheets are very similar to the ones you already know. Just put all the styles in a separate text document without the tags.
-
Create a link element in the HTML page’s head area to define the link between the HTML and CSS pages.
My link element looks like this:
<link rel = "stylesheet" type = "text/css" href = "myStyle.css" />
-
Set the link’s relationship by setting the rel = "stylesheet" attribute.
Honestly, stylesheet is almost the only relationship you’ll ever use, so this should become automatic.
-
Specify the type of style by setting type = "text/css".
-
Determine the location of the style sheet with the href attribute.