HTML Styles, HTML Tutorial, Global Guideline

Bookmark Bookmark: HTML Styles, HTML Tutorial
Forum | Blog


      Home                    

Basic HTML Guide.      
 HTML Introduction.      
 HTML Entities.             
 HTML Tags Guide.      
 HTML Head.                
 HTML Meta.                
 HTML Styles. 
 HTML Formatting.       
 HTML Backgrounds.     
 HTML Attributes.         
 HTML Links.                
 HTML Tables.             
 HTML Images.            
 HTML Colors.              
 HTML Fonts.               
 HTML Marquee.         
 HTML Forms.             
 HTML Frames.           
 HTML Lists.                
 HTML Scripts.           
 HTML Summary.        

HTML Tutorial >> HTML Styles.


     Back             Next     



Linking to an External HTML Style Sheet

This HTML Tutorial section HTML Styles will guide you how to link an external HTML styles sheet to an HTML document through HTML's LINK element:

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

The tag is placed in the document HTML HEAD. The optional TYPE attribute of HTML Style sheet 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 HTML style sheets should not contain any HTML tags like <HEAD> or <STYLE>. The style sheet should consist merely of style rules or statements.

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.

HTML Tutorial guide 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.


Embedding an HTML Style Sheet

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

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

The HTML STYLE element is placed in the document HEAD of the document. 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.

Very old browsers such as Netscape 2.0, 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 HTML STYLE element may be contained within an SGML comment like (<!-- HTML comments -->), as in the preceding example. This use of comment tokens to hide the HTML style sheet from old browsers should only be used in HTML, where the comment tokens are actually part of the style sheet. In XHTML, the comment tokens would be a real XML comment, and the style sheet would be hidden from browsers that treat the document as XML.

Here in HTML Tutorial you saw an embedded style sheet should be used when a single document has a unique html style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate to use.


Importing a Style Sheet in HTML

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

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


     Back             Next     
 

[ About ] [ Contact ] [ Home ]
[ Links ] [ Site Map ] [ Services ] [ Privacy ]

Copyright 2005 -  2018 www.globalguideline.com All rights reserved. (Best viewed in IE 6.0+ or Firefox 2.0+ at 1024 * 768 or higher) 241 visitors are online now