CSS "Cascading Style Sheets" Lessons
CSS ( Cascading Style Sheets ) - Why CSS ? - Introduction - Css Link Properties / Examples - Css List Properties / Examples - Css Layer Properties / Examples - Css TextBox Properties / Examples - Css Font Properties / Examples - Css Text Properties / Examples - Css Cursor Properties / Examples - Css Background Properties / Examples - Css Table Properties / Examples - Css Scroll Bar Properties / Examples - Tools - Units - Parameters - Template Page - Web Design
Return MainPage / Don't Forget Me

PLACEMENT CSS FILE


1. Including css file outside of head tags ; it is possible to perform a two way lookup

1.1-) Write your Style attribute in a plain text editor ( or with a web editor programs) and the save this document named main.css. Then make a link in head tag to this file.

Example:

<html>

<head>

<link href="style_File/main.css" rel="stylesheet" type="text/css">

</head>

1.2-) In the same shape make a css file and make a link in head tag to out side this file.

Example:

<html>

<head>

<link href="www.css-lesson.ucoz.com/main.css" rel="stylesheet" type="text/css">

</head>

Building :


1-) <style>

<!--

P {font-family:arial; font-size:12px;}

H3 {font-family:arial; font-size:14px;font-color:navy;}

-->

</style>

Notice; <!-- and --> labels is hide css style attribute from without the support internet navigator.

2-) "<style> <!--" and "--> </style>" ----? This writing is wrong.

You must use ? ? into parameter and style="..."

USAGE :

1-) Common Format;

If you want a label be same format all page in the website, you must use this method.

For Example;

P {font-family:arial; font-size:12px;font-color:black;}

2-) Special Format :

If you want a label be different format a page, you can use one from this three methods.

2.1-) .name : It does a lot of different format for label with this method. For this, insert class=?name? in the relevant label.

Example ;

<head>

<style>

.italic {font-style : italic;}

</style>

</head>

<p class="italic">For Example</p>

Or;


<head>

<style>

P.italic {font-style : italic;}

</style>

</head>

<p class="italic">For Example</p>

2.2-) #name ; this method looks like One previous method. But, you must use id=?name? Instead of class=?name?

<head>

<style>

#italic {font-style : italic;}

</style>

</head>

<p id="italic">For Example</p>

2.3-) Label+Label :

Example :

<style>

P {color : black;}

P B {color : red;}

</style>

<p> For Example <b> For Example </b> For Example </p>

<b> For Example </b>
Print : For Example For Example For Example
For Example