Warning:
This wiki has been archived and is now read-only.

Educational materials/Style Sheet

From HTML Wiki
Jump to: navigation, search

Style Sheets

Style Sheets can format the HTML document. HTML documents may contain style sheet rules directly in them or they may import style sheets. There are three ways of providing styling information for the Web browsers.

Any style sheet language may be used with HTML. This educational materials use the style language "CSS(Cascading Style Sheets)".


Adding style to HTML

Linking style sheet

You can separate style sheets from HTML documents. Style sheet files are imported to HTML documents by <link>.

This offers several benefits:

  • Authors and Web site managers may share style sheets across a number of documents (and sites).
  • Authors may change the style sheet without requiring modifications to the document.
  • User agents may load style sheets selectively (based on media descriptions).


[Syntax]

 <head>
   <link rel="stylesheet" type="text/css" href="example.css">
 </head>


See also The link element.


Internal style sheet

You can put style sheet rules in the head of the document by <style>.


[Syntax]

 <head>
   <style>
     p { color: red; font-size:120%; }
   </style>
 </head>
 <body>
   <p>This is a paragraph</p>
 </body>


See also The style element.


Inline style sheet

The start tags can contain style sheet rules directly in HTML documents by the style attribute.


[Syntax]

 <p style="color: red; font-size:120%; ">This is a paragraph</p>


Setting the default style sheet language

You must specify the style sheet language of style information associated with an HTML document by <meta http-equiv="Content-Style-Type">.


[Syntax]

 <meta http-equiv="Content-Style-Type" content="text/css">