<META http-equiv content-style-type>

Description

Attributes

Examples

Description:

Informs the browser which type of style sheet you are using by default.

Attributes:

<meta http-equiv="Content-Style-Type" content="type">

Type defines the default style sheets used. May be one of the following.

text/css

Use cascading style sheets

Style Sheets in HTML documents
<META http-equiv="Content-Style-Type" content="text/css">. The default style
sheet language may also be set with HTTP headers. The above META declaration is ...
www.w3.org/TR/REC-html40/present/styles.html - 42k -

Attribute definitions

style= style [CN]: This attribute specifies style information for the current element.

The syntax of the value of the styleattribute is determined by the default style sheet language. For example, for [[CSS2]] inline style, use the declaration block syntax described in section 4.1.8 (without curly brace delimiters).

This CSS example sets color and font size information for the text in a specific paragraph.

<P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?

In CSS, property declarations have the form "name : value" and are separated by a semi-colon.

To specify style information for more than one element, authors should use the STYLEelement. For optimal flexibility, authors should define styles in external style sheets.

14.2.3 Header style information: the `STYLE`element

<!ELEMENT STYLE - - %StyleSheet        -- style info -->
<!ATTLIST STYLE
  %i18n;                               -- lang, dir, for use with title --
  type        %ContentType;  #REQUIRED -- content type of style language --
  media       %MediaDesc;    #IMPLIED  -- designed for use with these media --
  title       %Text;         #IMPLIED  -- advisory title --
  >

Start tag: required, End tag: required

The following CSS STYLEdeclaration puts a border around every H1 element in the document and centers it on the page.

<HEAD>
 <STYLE type="text/css">
   H1 {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>

To specify that this style information should only apply to H1 elements of a specific class, we modify it as follows:

<HEAD>
 <STYLE type="text/css">
   H1.myclass {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="myclass"> This H1 is affected by our style </H1>
 <H1> This one is not affected by our style </H1>
</BODY>

Finally, to limit the scope of the style information to a single instance of H1, set the id attribute:

<HEAD>
 <STYLE type="text/css">
   #myid {border-width: 1; border: solid; text-align: center}
 </STYLE>
</HEAD>
<BODY>
 <H1 class="myclass"> This H1 is not affected </H1>
 <H1 id="myid"> This H1 is affected by style </H1>
 <H1> This H1 is not affected </H1>
</BODY>

Although style information may be set for almost every HTML element, two elements, DIV and SPAN, are particularly useful in that they do not impose any presentation semantics (besides block-level vs. inline). When combined with style sheets, these elements allow users to extend HTML indefinitely, particularly when used with the class and id attributes.

In the following example, we use the SPAN element to set the font style of the first few words of a paragraph to small caps.

<HEAD>
 <STYLE type="text/css">
  SPAN.sc-ex { font-variant: small-caps }
 </STYLE>
</HEAD>
<BODY>
  <P><SPAN class="sc-ex">The first</SPAN> few words of
  this paragraph are in small-caps.
</BODY>

In the following example, we use DIV and the class attribute to set the text justification for a series of paragraphs that make up the abstract section of a scientific article. This style information could be reused for other abstract sections by setting the class attribute elsewhere in the document.

<HEAD>
 <STYLE type="text/css">
   DIV.Abstract { text-align: justify }
 </STYLE>
</HEAD>
<BODY>
 <DIV class="Abstract">
   <P>The Chieftain product range is our market winner for
     the coming year. This report sets out how to position
     Chieftain against competing products.

   <P>Chieftain replaces the Commander range, which will
     remain on the price list until further notice.
 </DIV>
</BODY>

14.2.4 Media types

HTML allows authors to design documents that take advantage of the characteristics of the media where the document is to be rendered (e.g., graphical displays, television screens, handheld devices, speech-based browsers, braille-based tactile devices, etc.). By specifying the media attribute, authors allow user agents to load and apply style sheets selectively. Please consult the list of recognized media descriptors.

The following sample declarations apply to H1 elements. When projected in a business meeting, all instances will be blue. When printed, all instances will be centered.

<HEAD>
 <STYLE type="text/css" media="projection">
    H1 { color: blue}
 </STYLE>

 <STYLE type="text/css" media="print">
   H1 { text-align: center }
 </STYLE>

This example adds sound effects to anchors for use in speech output:

 <STYLE type="text/css" media="aural">
   A { cue-before: uri(bell.aiff); cue-after: uri(dong.wav)}
 </STYLE>
</HEAD>

Media control is particularly interesting when applied to external style sheets since user agents can save time by retrieving from the network only those style sheets that apply to the current device. For instance, speech-based browsers can avoid downloading style sheets designed for visual rendering. See the section on media-dependent cascades for more information.

Meta Tags Explained
Meta Content Language Meta Content Script Type Meta Content Style Type ...
Meta Content Style Type: Specifies the default style sheet language for a ...
www.webmarketingnow.com/tips/meta-tags-uncovered.html - 33k -

Meta Content Style Type: Specifies the default style sheet language for a document.
Example: <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
Recommendation: Do not use. Search engines do not need to know the style sheet.

Linking Style Sheets to HTML
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">. Inlining style loses
many of the advantages of style sheets by mixing content with presentation. ...
www.htmlhelp.com/reference/css/style-html.html - 24k - Sep 14, 2005

Linking Style Sheets to HTML

There are many ways to link style sheets to HTML, each carrying its own advantages and disadvantages. New HTML elements and attributes have been introduced to allow easy incorporation of style sheets into HTML documents.

Linking to an External Style Sheet

An external style sheet may be linked to an HTML document through HTML's LINK element:

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print"> <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print"> <LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>

The <LINK> tag is placed in the document HEAD. The optional TYPE attribute is used to specify a media type--text/css for a Cascading Style Sheet--allowing browsers to ignore style sheet types that they do not support. Configuring the server to send text/css as the Content-type for CSS files is also a good idea.

External style sheets should not contain any HTML tags like <HEAD> or <STYLE>. The style sheet should consist merely of style rules or statements. A file consisting solely of

P { margin: 2em }

could be used as an external style sheet.

The <LINK> tag also takes an optional MEDIA attribute, which specifies the medium or media to which the style sheet should be applied. Possible values are

screen (the default value), for presentation on non-paged computer screens;
print, for output to a printer;
projection, for projected presentations;
aural, for speech synthesizers;
braille, for presentation on braille tactile feedback devices;
tty, for character cell displays (using a fixed-pitch font);
tv, for televisions;
all, for all output devices.

Multiple media are specified through a comma-separated list or the value all.

Netscape Navigator 4.x incorrectly ignores any linked or embedded style sheets declared with MEDIA values other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all.

The REL attribute is used to define the relationship between the linked file and the HTML document. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the TITLE attribute, as in the first <LINK> tag in the example, defines a persistent style.

A preferred style is one that is automatically applied, such as in the second <LINK> tag in the example. The combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style.

An alternate style is indicated by REL="Alternate StyleSheet". The third <LINK> tag in the example defines an alternate style, which the user could choose to replace the preferred style sheet.

Note that current browsers generally lack the ability to choose alternate styles.

A single style may also be given through multiple style sheets:

<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary"> <LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary"> <LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">

In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, one must use the same TITLE with each style sheet.

An external style sheet is ideal when the style is applied to numerous pages. With an external style sheet, an author could change the look of an entire site by simply changing one file. As well, most browsers will cache an external style sheet, thus avoiding a delay in page presentation once the style sheet is cached.

Microsoft Internet Explorer 3 for Windows 95/NT4 does not support BODY background images or colors from linked style sheets. Given this bug, authors may wish to provide another mechanism for including a background image or color, such as embedding or inlining the style, or by using the BACKGROUND attribute of the BODY element.

Embedding a Style Sheet

A style sheet may be embedded in a document with the STYLE element:

<STYLE TYPE="text/css" MEDIA=screen>
<!--
  BODY  { background: url(foo.gif) red; color: black }
  P EM  { background: yellow; color: black }
  .note { rem_margin-left: 5em; margin-right: 5em }
-->
</STYLE>

The STYLE element is placed in the document HEAD. The required TYPE attribute is used to specify a media type, as is its function with the LINK element. Similarly, the TITLE and MEDIA attributes may also be specified with STYLE.

Older browsers, unaware of the STYLE element, would normally show its contents as if they were part of the BODY, thus making the style sheet visible to the user. To prevent this, the contents of the STYLE element should be contained within an SGML comment (), as in the preceding example.

An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate.

Importing a Style Sheet

A style sheet may be imported with CSS's @import statement. This statement may be used in a CSS file or inside the STYLE element:

<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
  @import url(http://www.htmlhelp.com/style.css);
  @import url(/stylesheets/punk.css);
  DT { background: yellow; color: black }
-->
</STYLE>

Note that other CSS rules may still be included in the STYLE element, but that all @import statements must occur at the start of the style sheet. Any rules specified in the style sheet itself override conflicting rules in the imported style sheets. For example, even if one of the imported style sheets contained DT {background: aqua}, definition terms would still have a yellow background.

The order in which the style sheets are imported is important in determining how they cascade. In the above example, if the style.css imported style sheet specified that STRONG elements be shown in red and the punk.css style sheet specified that STRONG elements be shown in yellow, then the latter rule would win out, and STRONG elements would be in yellow.

Imported style sheets are useful for purposes of modularity. For example, a site may separate different style sheets by the selectors used. There may be a simple.css style sheet that gives rules for common elements such as BODY, P, H1, and H2. In addition, there may be an extra.css style sheet that gives rules for less common elements such as CODE, BLOCKQUOTE, and DFN. A tables.css style sheet may be used to define rules for table elements. These three style sheets could be included in HTML documents, as needed, with the @import statement. The three style sheets could also be combined via the LINK element.

Inlining Style

Style may be inlined using the STYLE attribute. The STYLE attribute may be applied to any BODY element (including BODY itself) except for BASEFONT, PARAM, and SCRIPT. The attribute takes as its value any number of CSS declarations, where each declaration is separated by a semicolon. An example follows:

<P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> This paragraph is styled in red with the New Century Schoolbook font, if available.</P>

Note that New Century Schoolbook is contained within single quotes in the STYLE attribute since double quotes are used to contain the style declarations.

Inlining style is far more inflexible than the other methods. To use inline style, one must declare a single style sheet language for the entire document using the Content-Style-Type HTTP header extension. With inlined CSS, an author must send text/css as the Content-Style-Type HTTP header or include the following tag in the HEAD:

<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

Inlining style loses many of the advantages of style sheets by mixing content with presentation. As well, inlined styles implicitly apply to all media, since there is no mechanism for specifying the intended medium for an inlined style. This method should be used sparingly, such as when a style is to be applied on all media to a single occurrence of an element. If the style should be applied to a single element instance but only with certain media, use the ID attribute instead of the STYLE attribute.

The CLASS Attribute

The CLASS attribute is used to specify the style class to which the element belongs. For example, the style sheet may have created the punk and warning classes:

.punk     { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }

These classes could be referenced in HTML with the CLASS attribute:

<H1 CLASS=punk>Proprietary Extensions</H1> <P CLASS=warning>Many proprietary extensions can have negative side-effects, both on supporting and non-supporting browsers...

In this example, the punk class may be applied to any BODY element since it does not have an HTML element associated with it in the style sheet. Using the example's style sheet, the warning class may only be applied to the P element.

A good practice is to name classes according to their function rather than their appearance. The warning class in the previous example could have been named red, but this name would become meaningless if the author decided to change the style of the class to a different color, or if the author wished to define an aural style for those using speech synthesizers.

Classes can be a very effective method of applying different styles to structurally identical sections of an HTML document. For example, this page uses classes to give a different style to CSS code and HTML code.

The ID Attribute

The ID attribute is used to define a unique style for an element. A CSS rule such as

#wdg97 { font-size: larger }

may be applied in HTML through the ID attribute:

<P ID=wdg97>Welcome to the Web Design Group!</P>

Each ID attribute must have a unique value over the document. The value must be an initial letter followed by letters, digits, or hyphens. The letters are restricted to A-Z and a-z.

Note that HTML 4.0 allows periods in ID attribute values, but CSS1 does not allow periods in ID selectors. Also note that CSS1 allows the Unicode characters 161-255 as well as escaped Unicode characters as a numeric code, but HTML 4.0 does not allow these characters in an ID attribute value.

The use of ID is appropriate when a style only needs to be applied once in any document. ID contrasts with the STYLE attribute in that the former allows medium-specific styles and can also be applied to multiple documents (though only once in each document).

The SPAN Element

The SPAN element was introduced into HTML to allow authors to give style that could not be attached to a structural HTML element. SPAN may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes.

SPAN is an inline element, so it may be used just as elements such as EM and STRONG in HTML. The important distinction is that while EM and STRONG carry structural meaning, SPAN has no such meaning. It exists purely to apply style, and so has no effect when the style sheet is disabled.

Some examples of SPAN follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Example of SPAN</TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css" MEDIA="screen, print, projection">
<!--
  .firstwords { font-variant: small-caps }
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=firstwords>The first few words</SPAN> of a
paragraph could be in small-caps. Style may also be inlined, such as
to change the style of a word like <SPAN STYLE="font-family: Arial">
Arial</SPAN>.</P>

Meta tags and more - from <head> to </head>
<meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> @import
url(/path/file.css); </style>. Use this for the javascript: ...
www.webmasterworld.com/forum21/10947.htm -

Your document should begin with a !DOCtype (this tells the browser what sort of HTML is in the file) followed by the <html> and <head> tags:

<!DOCtype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

For your page to actually be valid you MUST declare the character encoding (lets the browser know whether to use A to Z letters (latin), or Chinese, Japanese, Thai, or Arabic script, or some other character set) used for the page, with something like:

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

There are also other schemes such as UTF-8 and many others.

It is also a good idea to declare what human language the page is in, using:

<meta http-equiv="content-Language" content="EN-GB">

The language and country codes come from ISO 4217 and ISO 3166. This is useful for online translation tools as well. Change the "en" and "gb" to whatever language and country you need.

You need a <title> element for the page:

<title> Your Title Here </title>

This is displayed at the top of the browser window, and stored as the name of the bookmark if someone bookmarks the page URL in their browser. Most importantly, it is the <title> tag that is indexed and displayed by search engines in the search results page (SERPs).

You need the meta description tag, as this is very important for search engines, and it is useful but not vital to have a meta keywords tag:

<meta name="Description" content=" Your Description Here. ">
<meta name="Keywords" content=" your, keyword, list, here ">

Most search engines do obey the robots meta tag. The default robots action is index, follow (index the page, follow all outbound links) so if you want something else (3 possibilities) then add the robots tag to the page in question. If you want to exclude whole directories then use the robots.txt file for this instead of marking every HTML file with the tag.

<meta name="robots" content="noindex,follow">

The last parts of your header should have your links to external style sheets and external javascript files:

Use this if the stylesheet is for all browsers:

<link type="text/css" rel="stylesheet" src="/path/file.css">

Use this for style sheet that you want to hide from older browsers, as older browsers often crash on seeing CSS:

<meta http-equiv="content-style-type" content="text/css">
<style type="text/css"> @import url(/path/file.css); </style>

Use this for the javascript:

<script type="text/javascript" language="javascript" src="/path/file.js"></script>

End the header with this:

</head>
<body>

and then continue with the body page code.

It is as simple as that.

WebDeveloper.com - How to set two variables in one declaration ...
... <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"> <meta name="Content-Style-Type" content="text/css"> ...
www.webdeveloper.com/forum/showthread.php?t=78148 - 100k -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<style type="text/css">

body {
	background-image: url(http://site/images/picture.jpg); 
	background-repeat: no-repeat; 
	background-position: right bottom;
	font-family: Arial, Verdana, Helvetica, sans-serif; 
	font-size: 11pt;
}

</style>

</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>

Meta Tag Name:	HTML x.x / XHTML x.x /
Example:
Recommendation:
Length: Minimum n/a Maximum n/a Recommended n/a
Description:
Comments:
Indexed by Google: unknown
Indexed by Yahoo: unknown
Indexed by MSN: unknown
Indexed by AOL: unknown
Other Examples: <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css [14]">

<META http-equiv content-style-type>

Attributes:

Examples:

14.2.3 Header style information: the STYLE element

Linking Style Sheets to HTML

14.2.3 Header style information: the `STYLE`element