There are many ways to add style sheets to HTML, each with its own advantages and disadvantages. New HTML elements and attributes have been added to allow the style sheet to be combined more easily with the HTML document.
Connect to an external style sheet
Embedding a style sheet means entering a style sheet
inline style
Class attribute
ID attribute
span element
div element
Notes on Certifications
-------------------------------------------
Connect to an external style sheet
An external style sheet can be connected to an HTML document through an HTML 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>
<LINK> tags are placed in the head section of the document. The optional Type property is used to specify the media type--text/css is a cascading style sheet--allowing browsers to ignore style sheet types that they do not support. It is also a good note to configure the server for CSS files and send Text/css as content-type content.
An external style sheet cannot contain any markup for HTML such as <HEAD> or <STYLE>. Style sheets consist only of style rules or declarations. A separate by
P {MARGIN:2EM}
The composed file can be used as an external style sheet.
The <LINK> tag also has an optional media property that specifies the media or media to which the stylesheet is accepted. The allowable values are
Screen (default), submitted to computer screens;
Print, output to printer;
Projection, submitted to the projector;
Aural, loudspeaker;
Braille, submitted to Braille tactile sensing device;
TTY, telex (using fixed fonts);
TV, TV;
All, output devices.
Multiple media are specified by using a comma-separated list or value of all.
Netscape Navigator 4.x incorrectly ignores any connections or embedded style sheets that use media value declarations except for the screen value. For example, media= "Screen,projection" will cause the stylesheet to be ignored by the Navigator 4.x, although the device displayed is the screen of the computer. Navigator 4.x also ignores style sheets that use media=all declarations.
The Rel property is used to define the relationship between the connected file and the HTML document. REL=STYLESHEET specifies a fixed or preferred style and rel= "Alternate StyleSheet" to define an interaction style. Fixed styles are always applied when the style sheet is active. The missing title attribute, like the first <LINK> tag in the example, defines a fixed style.
A preferred style is automatically applied, just like the second <LINK> tag in the example. The combination of Rel=stylesheet and a title property specifies a preferred style. Web page makers cannot specify more than one preferred style.
The interaction style is indicated by rel= "Alternate StyleSheet". The third <LINK> tag in the example defines an interaction style that the user can choose to substitute for the preferred style sheet.
Note that browsers today generally lack the ability to choose an interactive style.
A single style can 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 grouped together into a "contemporary" style, which is applied as a preferred style sheet. To combine multiple style sheets into a single style, you must use the same title in each style sheet.
An external style sheet is ideal when a style is applied to many pages. Web makers use an external style sheet to change the look of the entire site and simply change a file. Similarly, most browsers save an external style sheet in a buffer, so that if the stylesheet is in a buffer, it avoids the delay in displaying the page.
Microsoft Internet Explorer 3 for Windows 95/NT4 does not support body background images or colors from the attached style sheet. If you consider this error, Web page makers may wish to provide additional structures that include a background image or color, such as inline or inline styles, or use the background property of the BODY element.
-------------------------------------------------
Embed a style sheet
A style sheet can be embedded in a document using the STYLE element:
<style type= "Text/css" media=screen>
<!--
Body {background:url (foo.gif) red; Color:black}
P EM {background:yellow; Color:black}
. note {margin-left:5em; margin-right:5em}
-->
</STYLE>
The style element is placed in the head section of the document. The required Type property is used to specify the media type, as is the link element. Similarly, the title and media properties can also be specified with the style.
Older browsers, which do not recognize the style element, will present its contents as part of the body so that they are visible to the user. To prevent this, the content of the style element contains an SGML annotation (<!--comment-->) inside, as in the example above.
Embedded style sheets can be used when a document has a unique style. If multiple documents use the same style sheet, the external style sheet is more applicable.
-------------------------------------------------------
Enter a style sheet
A stylesheet can be entered using the CSS @import declaration. This declaration is used for a CSS file or an internal 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 should still be included in the style element, but all @import declarations must be placed at the beginning of the style sheet. Any rule specified in a style sheet that itself transcends the rules that are opposite in the input style sheet. For example, the definition terms will still be a yellow background, even if an input stylesheet contains dt {Background:aqua}.
The order of the imported style sheets is important for how they cascade. In the example above, if the style sheet entered by STYLE.CSS specifies that the strong element is displayed as red and the strong element is shown as yellow in the Punk.css style sheet, then the following rule wins and the strong element appears yellow.
The style sheet entered is useful for modular effects. For example, a Web site can classify a style sheet by using a selector. A simple.css style sheet gives common elements like body, P, H1, and H2. In addition, a EXTRA.CSS style sheet gives less common elements like code, BLOCKQUOTE, and DFN. A tables.css style sheet can be used to define rules for a change element. These three style sheets can be included in HTML when needed, using the @import declaration. Three style sheets can also be grouped by link elements.
------------------------------------------------------------
inline style
Styles can be inline using the Style property. The style attribute can be applied to any BODY element (including the body itself), except for Basefont, Param, and script. This property treats any number of CSS declarations as their own values, and each declaration is separated by semicolons. Here is an example:
<p style= "color:red; font-family: ' New Century schoolbook ', serif ' > The style of this paragraph is the red New Century schoolbook Word, if the font is available. </P>
Note that the new Century schoolbook is enclosed in single quotes in style because double quotes are used as include style declarations.
Inline styles are more flexible than other methods. To use inline styles, you must use the Content-style-type HTTP header extension to make a separate stylesheet language declaration for the entire document. Web page makers using inline CSS must either use TEXT/CSS as an Content-style-type HTTP header, or include the following tags in the head section:
<meta http-equiv= "Content-style-type" content= "Text/css" >
Because it mixes with what needs to be shown, inline styles lose the advantage of some stylesheets. Similarly, inline styles accept all media by default because there are no statements that specify explicit media for inline styles. This method should be used sparingly, such as when a style is applied to all media to an individual case of an element. If the style is applied to a single element, but only with confirmed media, use the id attribute instead of the style property.
------------------------------------------------------------------
Class attribute
Class property is used to specify what style the element belongs to. For example, style sheets can be added to the punk and warning classes:
. punk {color:lime; background: #ff80c0}
p.warning {font-weight:bolder; color:red; Background:white}
These classes can be referenced in HTML using the class attribute:
<p class=warning> Some attribute extensions have negative side effects, resulting from supported and unsupported browsers ...
In this example, the punk class can be used with any BODY element because it has no HTML element association in the style sheet. In the case of the stylesheet, the warning class can only be used for P elements.
A good habit is to name classes, depending on their function rather than their appearance. The warning class in the above example can also be named Red, but if the Web page maker decides to change the style of the class to another color, or wants to define the aural (auditory) style for those who use the PC speakers, then the name becomes meaningless.
A class is an effective way to apply styles to the same structural part of an HTML document. For example, this page uses a class to use a different style for CSS source code and HTML source code.
-------------------------------------------------------------------
ID attribute
The id attribute is used to define the unique style of an element. A CSS rule like
#wdg97 {Font-size:larger}
can be applied to HTML through the id attribute:
<p id=wdg97> Welcome to Web Design Group and TV water 168!</p>
The value of each id attribute in the entire document must be unique. The value must be a letter, a literacy, or a hyphen, beginning with the letters. Letters are limited to a-Z and a-Z.
Note that HTML 4.0 allows a period in the id attribute, but CSS1 does not allow a period in the ID selector. Also note that CSS1 allows Unicode characters 161-255 and ignores Unicode characters as a numeric code, but HTML 4.0 does not allow these characters to be in an id attribute value.
When a style needs to be applied only once in any document, it is appropriate to use an ID. ID is the same as the style property, in that the ID allows you to specify the styles of the media and can also be applied to multiple documents (although each document is used only once).
----------------------------------------------------------------
span element
The span element is added to the HTML to allow the Web page creator to give the style but no need to attach to an HTML structural element. span is used as a selector in a style sheet, and it can accept style, class, and ID attributes.
span is an inline element, so it can be used as an element in HTML, such as EM and strong. The most important difference is that although EM and strong have structural meanings, span does not have the same meaning. Its existence is purely an application style, so it has no effect when the stylesheet is invalidated.
Some span examples are as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.0//en" >
<HTML>
<HEAD>
Examples of <title>span </TITLE>
<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> front is
A few words in a paragraph will be small caps. Styles can also be inline, such as changing the text
The style of the word is <span style= "font-family:arial" >Arial</SPAN>.</P>
-----------------------------------------------------------------
div element
div elements are functionally similar to span elements, and the main difference is that Div ("division", "partial" abbreviations) is a block-level element. A div can contain paragraphs, headings, tables, and even other parts. This makes it easy to create classes with different integrations, such as chapters, summaries, or notes. For example:
<div class=note>
The <p>div element is defined in HTML 3.2, but only the Align attribute in HTML 3.2 is compatible. HTML 4.0 adds the class, STYLE, and ID attributes to the attribute. </P>
<P> because Div can contain other block-level integrations, it is useful to have a large section for building documents such as this note. </P>
<P> requires closing the tag. </P>
</DIV>
Notes on Certifications
A handful of documents using CSS styles are certified on the HTML3.2 (Wilbur) layer (WDG Web site, translator). HTML3.2 does not interpret span elements, nor does it explain class, style, or ID attributes, and it rarely supports type and media properties in link and style elements.
These related style elements and attributes are not harmful to browsers that are not supported because they can be safely ignored. Documents that use these elements and attributes can be authenticated against HTML 4.0.
