internal to external CSS

[evios]

hi everyone, i am currently building a webpage for the staff to fill in their form and all the databases will be stored using SQL. And i am juz started with a validation page for the staff. I need to have a external CSS files to do the HTML, but then i juz know the inline stylesheet. Does anyone know how to make these codes to become an external CSS so that i can link them in ? below is juz one of the form field i use. But i need to built it using 4 pages of HTML using onli 1 CSS, doesnt it looks bulky? Thanks for those who help..

<input name="formtext2" type="text" style="position:absolute;width:200px;left:414px;top:391px;z-index:3">
<div id="text2" style="position:absolute; overflow:hidden; left:323px; top:393px; width:147px; height:41px; z-index:4"><div class="wpmd">
<div><font class="ws11" face="Calibri">Password:</font></div>
</div></div>

and

<div id="image1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:737px; height:367px; z-index:0"><img src="untitled.PNG" border=0 width=737 height=367></div>

[mostafadotnet]

First, make a file (e.g. style.css) and put all your CSS code in that file:
.formtext2 { position:absolute;
width:200px;
left:414px;
top:391px;
z-index:3;
}

And then make this sample for all of your CSS styles[the elements' styles].

After that, remove the style="blah , blah..." from your tags.

Then, put this line in the HEAD tag of each of your pages:

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

In order to know more about CSS and external use of it, take a look at: http://www.tizag.com/

[evios]

for this one:

<div id="image1" style="position:absolute; overflow:hidden; left:0px; top:0px; width:737px; height:367px; z-index:0"><img src="untitled.PNG" border=0 width=737 height=367></div>

does the CSS looks like this?

div.image1 {
background-image:
url ('untitled.PNG');
position:absolute; 
overflow:hidden; 
left:0px; 
top:0px; 
width:737px; 
height:367px; 
z-index:0;
border=0;
width=737;
height=367
}

can anyone solve this for me? cause i found quite hard to figure it out:

<input name="formtext2" type="text" style="position:absolute;width:200px;left:414px;top:391px;z-index:3">
<div id="text2" style="position:absolute; overflow:hidden; left:323px; top:393px; width:147px; height:41px; z-index:4"><div class="wpmd">
<div><font class="ws11" face="Calibri">Password:</font></div>
</div></div>

the CSS i done:

.formtext2 {
position:absolute;
width:200px;
left:414px;
top:391px;
z-index:3
}

div.text2 {
position:absolute; 
overflow:hidden; 
left:325px; 
top:362px; 
width:143px; 
height:29px; 
z-index:2;
font-family: Calibri;
font-size: 15px
}

[buddylee17]

In valid CSS, the id is always unique and is only used once per page. If you have a common style for multiple divs, images, links, paragraphs, ... write a class for them. That being said, the css for the div id would be:

#text2{
position:absolute; 
overflow:hidden; 
left:325px; 
top:362px; 
width:143px; 
height:29px; 
z-index:2;
font-family: Calibri;
font-size: 15px
}

and for the image1 id

#image1 {
background-image:
url ('untitled.PNG');
position:absolute; 
overflow:hidden; 
left:0px; 
top:0px; 
width:737px; 
height:367px; 
z-index:0;
border=0;
}

The leading # sign in css indicates that you are defining attributes for an id. If a period came before the name, it would indicate that it is a class. You could also include the class for the password field:

.ws11{
font-family: Calibri;
}

The advantage of putting all of the css in an external style sheet is that the sheet will get cached by the browser and won't have to be read for every page in your site. If all the styles are inline, it will increase the load time of each page.