Expertrating - XHTML Tutorial, Style Sheets

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

XHTML Tutorial - Style Sheets

Page 3 of 5

Attribute of Style Tag

Type

Type defines the content type of the style 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>

body {background-color: red}

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

</style>

</head>

Div Tag

The div tag defines a division or section in a document. It makes a logical division in a document. It leaves a white space before and after the div tag. In this way logical divisions can be made from div tag. The align attribute of <div> tag of HTML is not supported in XHTML.

Example

<div style=”color:#FF0000;”>

<h3> This is a header in this div section </h3>

</div>

<div style=”color:#CCCC99;”>

<p> This is a paragraph in another div section </p>

</div>

Span Tag

The span tag is used to group inline elements and format them with styles in a document. For example, if some lines in a paragraph have to be formatted differently than the rest of the lines, then the span tag is used. In this case, those lines contained in the paragraph tag are put between span tags. The span tag can be used between any set of tags.

There is no difference between the <span> tag of XHTML and <span> tag of HTML.

Example

<p> This first line in a paragraph.

<span style=”color:#FFCC99;”> This is second line in the paragraph. </span>

This is third line in the paragraph. </p>

Introduction to JAVASCRIPT

Today's web sites are very interactive. Web Browsers allow users to interact with such web sites. XHTML in itself allows minimal interaction with users. Truly interactive pages cannot be created using standard XHTML 'tags' alone. Embedding JavaScript in an XHTML document makes this possible.

JavaScript is an easy-to-use scripting language that can work with XHTML. These scripts make the web site dynamic in nature. The web pages created by using JavaScript can accept input from the user, show pop-up windows, create cookies and perform various other functions.

JavaScript events can be used like attributes in XHTML tags.

In the example stated below, an alert box will pop up when the web page is loaded. In this, a simple function called message is created, and this function is triggered with the onload event (More can be read about JavaScript in the JavaScript tutorial).

Example

<html>

<head>

<script type="text/javascript">

function message()

{

alert("This alert box will be called when the page is loaded")

}

</script>

</head>

</body>

</html>

Output:

Script Tag

The script tag is used to define a script, such as JavaScript. It has been used in the example shown above. The type of the script has to be given with the script tag. In the following example “How are you?” will be printed in the browser but with the use of JavaScript. The language attribute of <script> tag is not supported in XHTML.

Example

<script type=”javascript”>

document.write(“How are you?”)

</script>

ExpertRating XHTML Certification - Get Certified Now!!