ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
XHTML Tutorial - Index
XHTML Tutorial - Introduction to XHTML
XHTML Tutorial - Formatting
XHTML Tutorial - Links
XHTML Tutorial - Images
XHTML Tutorial - Forms
XHTML Tutorial - Tables
XHTML Tutorial - Frames
XHTML Tutorial - Style Sheets
XHTML Tutorial - Advanced Tags
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

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

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

<p style=”color: red; margin-left: 20px” >

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

<p style=”color: red; margin-left: 20px” >

This is my jokes site.

</p>

 

       

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2015. All Rights Reserved.