Pub Pixel Avatar Image

HTML5 Snippets - Link Your Web Page To An Alternate External CSS Style Sheet

Published:

Rate Article (Sign in and be the first to rate this article.)

Article Details

Views: 1170

First Published:

Word Count: 792

Edition: 1

Now lets say that you have some CSS style rules stored in a CSS style sheet file that you want to use as an alternative style sheet for your web page. That your users can then select in-order to replace the preferred style sheet or in-other words the web pages default style sheet with the selected alternative style sheet. In-order to tell the browsers that you are providing an alternative style sheet also known as an alternate style sheet for your web page, that your users can select in place of the default style sheet for your web page. You will need to include the <link> element along with rel attribute, type attribute, href attribute and of course the title attribute.

Now the <link> element will define the relationship between the web page the <link> element is placed in to the CSS style sheet file the <link> element links to. You will then need to include the alternate stylesheet value for the rel attribute in-order to define the relationship between the current web page and the linked CSS style sheet file. Next you will need to add the type attribute. The type attributes value should be the MIME type of the linked document. MIME is short for (Multipurpose Internet Mail Extensions), which is an internet standard that is used to identify the type of information that the linked file contains. In our case we will need to include the MIME type value text/css for the type attribute, which indicates that the linked document is an external CSS style sheet. Next you will need to add the href attribute. The href attributes value should be the URL to your alternate style sheet file. And finally you will need to include the title attribute. The title attributes value should be a text title describing the style sheet the <link> element links to. Browsers that support alternate style sheets will use the title attributes value to help generate a selectable menu listing all available alternate style sheets for your web page. That your users can then choose from by selecting the style sheets title generated by the title attributes value.

You may include as many alternate style sheets as you like for your web page that your users can choose from.

It's important to remember that you will need to place the <link> element within the <head> element of the web page in-order for your <link> element to work properly.

Now let me first show you the code by itself for the HTML snippet for linking your web page to an alternate external CSS style sheet using the <link> element. And then I will show you how to code and where to place the HTML snippet for both HTML5 and XHTML5.

Here is the HTML code snippet below to link your web page to an alternate external CSS style sheet using the <link> element.


<link rel="alternate stylesheet" type="text/css" href="http://www.example.com/your-alternate-style-sheets-location.css" title="Title describing your style sheet" />

Here is the HTML code snippet to link your web page to an alternate external CSS style sheet using the <link> element for HTML5 in the example below.


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
 <link rel="stylesheet" type="text/css" href="http://www.example.com/retro.css" title="Retro Layout">  
 <link rel="alternate stylesheet" type="text/css" href="http://www.example.com/modern.css" title="Modern Layout">  
</head>
<body>
  
 <p>Your web page should now provide an alternate external style sheet for your users to choose from.</p>  

</body>
</html>

And here is the HTML code snippet to link your web page to an alternate external CSS style sheet using the <link> element for XHTML5 in the example below.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
<head>
 <meta charset="UTF-8" />
 <title>Welcome To XHTML5</title>
 <link rel="stylesheet" type="text/css" href="http://www.example.com/retro.css" title="Retro Layout" />  
 <link rel="alternate stylesheet" type="text/css" href="http://www.example.com/modern.css" title="Modern Layout" />  
</head>
<body>

 <p>Your web page should now provide an alternate external style sheet for your users to choose from.</p>  

</body>
</html>

Article Tags

Tag Article (Sign in if you want to tag this article.)

Share This Article

Send To Facebook Link

Tweet This Link

Send To LinkedIn Link

Send To StumbleUpon Link

Digg This Link

Send To Google Plus One Share Link

Send To Reddit Link

Send To Tumblr Link

Send To Delicious Link

Send To FriendFeed Link

Send To Diigo Link

Email Link

AddThis Link

0 Comments

Leave Comment (Sign in and be the first to comment on this article.)

Important

This site cannot guarantee the accuracy of articles, comments, answers and other types of content or media submitted by members or anonymous users and guests, and we recommend that you use common sense when following any advice or information found on this site. Read our full Content Disclaimer Agreement for further information.