Web Design Made Simple Web Design Made Simple

debbie T Designs - Web Design Made Simple

Embedded CSS Style

In a previous tutorial, you learned the syntax of a basic CSS rule is selector {property: value;}

But how does the rule work? Where is it inserted on the page?

One way to implement CSS on your web page is to use embedded CSS. Rules are "embedded" or contained within the <head> area of the actual xhtml document. Remember the <head> tag? That is the tag that nests the <meta /> and <title></title> tags.

Embedded CSS rules will format the xhml on the current file only; it does not affect any other files in your web site.

Let’s set up the template.html file to include an empty embedded styles area.

Launch the template.html file in your text editor. Please view the "Must Have xhtml Tags" if you need a refresher on setting up a template file.

The <style> Tag

After the <meta /> tag, type the <style></style> tag set. In the opening <style> tag, an attribute for type must also be added. In this case the value for type will be "text/css" which will inform the browser it is working with CSS and plain text.

<style type="text/css"></style>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title of Page goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

</style>

</head>
<body>

Leave an extra line or two in between the opening and closing <style> tags.

Special Comments for Non-CSS Browsers

Next, an html <!-- comment --> tag is typed. It is important to add a comment when using embedded styles just in case a visitor is using a browser that doesn’t understand CSS. Very old Web browsers (prior to IE4, NN4, and Opera3) or other web devices (such as certain cell phones or palm pilots) might not comprehend CSS and could actually show the styles as text on your page.

As long as the embedded styles are nested in between the <!-- and the --> non-CSS browsers will ignore what they don’t understand.

<head>
<title>Title of Page goes here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--

-->

</style>
</head>
<body>

So to keep things working properly, remember all embedded css rules should be typed in between the opening comment <!-- and the ending --> comment.

Save your template.html file.

3 Comments

  1. Comment by Nicholas Maietta on November 16th, 2007

    Love your site,… it’s easy to use, informative and it’s refreshing not to have FLASH ads all over the place. Thank you for the positive contributions to the world wide web and the people who use it!

  2. Comment by Jimi on May 12th, 2008

    Debbie,

    Thank you for such an informative and easy to comprehend HTML Tutorial website.
    I’m a complete beginner at website design and your tutorials are very helpful. I also really appreciate all the links to other related websites.

    Thanks again, keep up the great work.

    Jimi

  3. Comment by ashish on May 14th, 2008

    Thanx Debbie./ This site is really helpful to me. Im already using html, css etc. I gain knowledge by doing sites. But using ur all tutorials I really understand what Im doing. Thank you very much.