Expertrating - XHTML Tutorial, Style Sheets

Home > Courses, Tutorials & eBooks > XHTML Tutorial > Style Sheets

XHTML Tutorial - Style Sheets

Page 2 of 5

The process of linking this file:

The linking of style sheets in XHTML is exactly the same as the linking of the Style Sheets in HTML. The external style sheet is linked with the XHTML document with a <link> tag (this tag is explained in the last part of this chapter). This link tag goes within the <head> tag.

Example

<head>

<link rel=”stylesheet” href=”my ” type=”text/css”/>

</head>

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. The internal styles are defined in the head section with the <style> tag. (style tag is explained in the last part of this chapter)

Example

<head>

<style type=”text/css”>

body {background-color: red}

p {font-family : "courier new", courier}

</style>

</head>

Inline Styles

An inline style is used when a unique style is to be applied to a single occurrence of an element. To use the inline tag the <style> tag is used in the relevant tag. The style tag can contain any style sheet property. The following example shows how to change the color and left margin of a paragraph.

Example

This is my jokes site.

</p>

Note

In an XHTML element, if all the three style sheets are used, then the order of preference is as follows: firstly inline style sheet will be used, then internal style sheet and lastly external style sheet will be used. If style for an XHTML tag has been defined in all the style sheets, then the style of inline style sheet only will be used.

The following tags are associated with style sheets:

Link Tag

The link tag defines the relationship between two linked documents. Using this tag a style sheet is linked to an XHTML document. In XHTML, the link tag has to be closed.

Attributes of Link Tag

Href

Within the href attribute, the target URL of the resource has to be given. It means the writer has to give the URL of the document, which is to be linked with the XHTML document.

Type

Type defines the content type of the link tag. It takes up the value text/css. These two values are usually given together and separated by a slash (/). It means that either of these two values could be used.

Example

<head>

<link href=”mystyle.css” type=”text/css” />

</head>

Rel

Rel defines the relationship between the current document and the targeted document. The value of rel should be given as style sheet.

Example

<head>

<link rel=”stylesheet” href=”mystyle.css” type=”text/css” />

</head>

Style Tag

The style tag defines a style in a document. It goes within the head section of an XHTML document for an internal style sheet.

The style element is also used with the XHTML tag and it goes into that tag for inline style sheets.

The <style> tag used in XHTML is exactly similar to the <style> tag of HTML.

For internal style sheets it is used as:

Example

<head>

<style type=”text/css”>

body {background-color: red}

p {font-family : "courier new", courier}

</style>

</head>

For inline style sheets it is used as:

Example

This is my jokes site.

</p>

ExpertRating XHTML Certification - Get Certified Now!!