- Tuesday October 7, 2008 - 12:24:25 am BST
- registered : 996877
- online : 19532
- questions/day : 4947
- Answer rate : 70.49%
- 06/10 phone call drops cable modem connection (Network)
- 06/10 My internet shuts down when i play games (Hardware)
- 06/10 task manager (Viruses/security)
- 06/10 Windows Shutting Down in 60 Seconds (Windows)
- 06/10 about hdd player power supply (Hardware)
- 06/10 System restarts if i shut down (Windows)
Cascading Style Sheets (CSS)
|
Declaring a style sheet
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.
Document Type Declaration
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>
Incorporating styles
The styles may be incorporated within the HTML document in four different ways:
- Document style: declared in the header, i.e. within the <HEAD> and </HEAD> tags
- Inline style, meaning as tag attributes
- External style, declared in a separate file with the extension .css
- Imported style, declared in a separate file with the extension .css
Document style
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>
Inline style
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>
External style
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 <LINK> tag lets the browser know that it has to look for a document located outside the HTML page.
- The attribute rel="stylesheet" specifies that the document in question is an external style sheet.
- The attribute type="text/css" specifies the type of style sheet.
- The attribute href=" URL " shows the URL of the style sheet (its location on the Internet)
Imported style
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. |
The <SPAN> and <DIV> tags
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
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>
The <DIV> tag
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>
Cascading styles
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