Pub Pixel Avatar Image

HTML5 Snippets - Embed A Default CSS Style Sheet To Your Web Page

Published:

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

Article Details

Views: 367

First Published:

Word Count: 659

Edition: 1

Now lets say that you want to add some CSS style rules directly to your web page. This is known as an embedded style sheet as well as an internal style sheet. And lets also say that you would like to make the embedded style sheet the default style sheet for your web page. In-order to tell the browsers your web pages default embedded style sheet, which is also known as a preferred style sheet. You will first need to embed the style sheet directly to your web page using the <style> element and title attribute.

Now the <style> element when added to your web page will allow you to add one or more CSS style rules to that very same web page. The <style> element also requires an end tag </style>. You must place the CSS style rules between the <style> elements start tag <style> and end tag </style>. You will then need to add the title attribute to the <style> elements start tag <style>. The title attributes value should be a text title describing the style sheet that was embedded to the web page using the <style> element.

It's important to remember that when indicating a preferred style sheet using the <style> element you must place the <style> element that indicates the preferred style sheet before all other <style> elements that contain a title attribute with a different value then your preferred style sheets title attribute. Preferred style sheets using the <style> element can also be disabled if the user selects an alternate style sheet.

Another important thing to remember is that you will need to place the <style> element within the <head> element of the web page in-order for your <style> element to work properly.

And one other important thing to remember is that embedded style sheets will override external style sheets.

Now let me first show you the code by itself for the HTML snippet for embedding a default CSS style sheet to your web page using the <style> 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 embed a default CSS style sheet to your web page using the <style> element.


<style title="Title describing your style sheet">Place your CSS style rules here</style>

Here is the HTML code snippet to embed a default CSS style sheet to your web page using the <style> element for HTML5 in the example below.


<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Welcome To HTML5</title>
 <style title="Blue Violet Layout">  
  body { background: #8a2be2; }
  p { font-size: 1.8em; color: #ffffff; }
 </style>
</head>
<body>

 <p>Your web page should now have an embedded style sheet as its default style sheet.</p>  

</body>
</html>

And here is the HTML code snippet to embed a default CSS style sheet to your web page using the <style> 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>
 <style title="Blue Violet Layout">  
  body { background: #8a2be2; }
  p { font-size: 1.8em; color: #ffffff; }
 </style>
</head>
<body>

 <p>Your web page should now have an embedded style sheet as its default style sheet.</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.