| PreviousStyle syntax | Declaring a style sheet (CSS) | NextClasses |
Style sheets are not directly integrated into the W3C's HTML recommendations. For this reason, you need to include elements in the HTML code indicating both the type of document, meaning the version of the HTML and CSS recommendations used by the pages, and the styles themselves.
In the HTML page, you need to include a document type declaration, a reference to the HTML standard being used. The declaration is made by adding a line like this one:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>...</HEAD>
<BODY>Page content</BODY>
</HTML>
What's more, a metatag can be used to tell the browser or search engines which language has been used for defining style sheets. This metatag, included in the HTML header of the document, is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
</HEAD>
<BODY>Page content</BODY>
</HTML>
The styles may be incorporated within the HTML document in four different ways:
Style sheets in a web page are declared with the STYLE tag, placed within the tags <HEAD> and </HEAD>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">The attribute type="text/css" in the <STYLE> tag is used to specify the stype of style sheet being used. The comment tags <!-- ... --> are used to stop older browsers, which do not support style sheets, from displaying this information on-screen.
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
Style definitions;
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>
You can also define a style within a document tag. This sort of declaration is called an inline declaration.
This method for defining style sheets is not recommended, as it runs counter to the very purpose of style sheets, as the style is being embedded within each element separately. Nonetheless, it may be used to define a special style for a particular HTML element, which does not need a universal definition.
To define an inline style, simply add the STYLE attribute to the HTML tag to which you wish to apply a particular style:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<TAG Style="style:value;"> ... </TAG>
...
</BODY>
</HTML>
 |
A style can be applied "in-line" to any HTML tags, except for the following: BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE |
Here is an example of a style applied to an <H1> tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Title </H1>
...
</BODY>
</HTML>
Being able to store style sheet definitions outside of the document is a plus, as it is therefore possible, by editing the file containing the style sheets, to change the look of all the web pages which use that sheet.
First, you need to create a text file containing style sheets, whose extension is .css, such as style.css:
<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
body {background-image: home.gif;}
LI {font: 13px Verdana;}
B {font: 14px Verdana; font-weight: bold;}
A {
font:12px Verdana;
font-weight: bold;
color=black;
text-decoration: none;
}
H1 {font: 16px Arial;font-weight: bold;color=black;}
H2 {font: 14px Arial;font-weight: bold;color=black;}
-->
Next, in every HTML page, add a shortcut to the page containing the style definitions:
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
...
The W3C's recommendations also offer a final way to include style sheets in a document: by importing style sheets. It is possible to import external style sheets when declaring the document's style by inserting the command @IMPORT immediately after the style tag:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
@IMPORT URL(url of the sheet to import);
Definition of document styles;
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>
|
If there are multiple imported definitions all affecting the same tag, only the last one will be utilised by the browser. |
Sometimes, within a single paragraph, you need to apply different styles to certain text segments, and this is what the <SPAN> and <DIV> tags are used for.
The <SPAN> tag is used to apply styles to segments of a paragraph.
It can be used with either ID or CLASS.
Its syntax is:
<SPAN class=Name_of_class> Text </SPAN>
Instead of applying to a few words within a paragraph, the DIV tag applies to a block of text, which may be one or several paragraphs.
The DIV tag's syntax is:
<DIV class=major> paragraphs </DIV>
Multiple styles can be defined by using the different methods of implementing CSS. For this reason, invoking several external style sheets results in what is called a cascading styles, a combination of styles for various HTML elements. If multiple styles affect the same element, only the last one will be kept.
<LINK rel=stylesheet type="text/css" href="style1.css">
<LINK rel=stylesheet type="text/css" href="style2.css">
<LINK rel=stylesheet type="text/css" href="style3.css">
If multiple conflicting styles are found in the external style sheets, CSS recommendations allow users to choose between several alternative style sheets using the rel attribute of the STYLE tag, combined with the TITLE attribute for selecting them by name:
<LINK rel="alternate stylesheet" type="text/css" href="style1.css" title="style1">
<LINK rel="alternate stylesheet" type="text/css" href="style2css" title="style2">
<LINK rel=stylesheet type="text/css" href="style2.css">
What's more, when multiple styles are invoked within a page using the various possible inclusion methods, and some styles conflict, the style closest to the content is the one applied. The priority, in descending order, is as follows:
Inline style > Document style > Imported style > External style
Last update on Thursday October 16, 2008 02:43:13 PM.
Adding rows of different sheets in excel Canon ir2018i technical data sheet Case for olympus stylus Creating a shell script that deletes a directory Css colours Css multiple body styles example Epson stylus sx105 printer says ink cartridge not recognised Excel transfer data between sheets Olympus stylus verve s battery charger Philips she9551 review Positioning sizing creating properities of style sheets in html notes download Relative reference sheet Samsung s5230 has stylus pen Shell ftp copy folder with files Show css style Ssh secure shell download What is the standard linux user shell Xbox 360 clear smoked shell