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