Placement of stylesheet

Unknown Data · 1 Placement of stylesheet Sun Oct 10, 2010 4:20 am

Unknown Data

Registered Member

Posts : 833
Points : 254
Age : 28
Location : Denmark
Browser : Safari

Placement of stylesheet
Learn CSS - part 3

Placement of stylesheet
A stylesheet can either be placed inside the HTML document or as a separate file. Is our stylesheet placed inside the HTML document are there two additional options for placement. Below are listed the three opitions for placement of a stylesheet.

• External stylesheet
• Internal stylesheet
• Inline Style

External stylesheet
An external style sheet is ideal to use, when you have a desire to be able to change, a complete web ite that contains many pages. There is only one place that must be modified to achieve this effect. To do this, must the HTML document be connected to the stylesheet via the following tag <link>. The tag is placed in the HTML document headers as shown in the example.

Code:: <html> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> </body> </html>

The following stylesheet (stylesheet.css) could look like this:

Code:: body { color : #000000; background-color : #333333; } p { font : 12px arial; margin-left: 25px; }

It is now the browser's task to read "stylesheet.css" and format the displayed HTML document after this. A stylesheet document is always stored with the last name ".css"

Internal stylesheet
By using a internal stylesheet are we putting this tag in the header <style>. This kind of style sheet is used for documents, where you have a preference for a particular layout, which is only applicable to this document. We could also take a look at a example below here.

Code:: <html> <head> <style type="text/css">  </style> </head> <body> <h1>This is our title</h1> <p>Here is the text moved 50px from left and have a fontsize of 15px. </p> </body> </html>

A browser reading a website are normally ignores unknown tags. Browsers of an earlier date could not read the <style> tage, so this results in that the content is displayed on the screen. To avoid this are we adding "" - the HTML comment characters.

Inline style
Inline style is used inside a normal tag. This type is used, when you want a particular property which applies only to one special thing. Here is an example:

Code:: <html> <head> </head> <body> <p style="color: #0000FF; margin-left: 50px"> This sentense it written with blue and placed 50px from the left. </p> </body> </html>

Now you've got an insight into the different types of style sheets. The use of individual sheets each have their advantage. Whether you are using external, internal or inline style depends on you. But try to go to the next lesson, here you can see how the use of external, internal and inline style work in combination.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.