1- استایل درونی یا inline style
در این روش کد های css داخل تگ های html نوشته می شوند و فقط یکبار، آنهم توسط خود این تگ مورد استفاده قرار می گیرند. این روش کم کاربرد تر از دو روش دیگر است.
مثال:
<p style="line-height:19px;">
در مثال بالا یک تگ p که مربوط به کدهای html است نوشته شده و مقابل آن style که مربوط به کد های css است. در این خط تعریف کرده ایم که میزان ارتفاع خطوط این پاراگراف باید 19 پیکسل باشد. این خط نوشته شده در مقابل تگ p یک نوع استایل برای آن است. و بعد از آن برروی خطوط دیگر اعمال نخواهد شد.
2- استایل داخـلی Embedded Or Global Style
در این روش کد های این زبان برنامه نویسی، به شکل عمومی مابین دو تگ <style> قرار گرفته و مکان آن در خطوط ابتدایی مابین دو تگ <head> و بر روی کد های html تاثیر می گذارند. این روش بهترین روش نیست اما کاربرد دارد.
مثال :
<html>
<head>
<style>
کدهای css در اینجا نوشته میشود
</style>
</head>
3- Linked or external style sheet
در این روش کد های css همگی در یک فایل جداگانه نوشته شده و با پسوندی به همین نام ذخیره می شوند. سپس توسط یک لینک در صفحه ی مرجع قرار داده میشوند. این روش خارجی وارد کردن کدهای این زبان برنامه نویسی، به یک یا چندین صفحه ی وب بوده و کاربرد بسیاری دارد. در واقع کارآمد ترین روش است.
بطور مثال در خطوط مقابل چند کد این زبان برنامه نویسی را نوشته ایم. که هرکدام خاصیت فونت های یک صفحه ی وب را تعریف می کند.
Body{font-family:tahoma;
font-size:8pt;
font-color:#7a7a7a;}
این کد ها را با پسوند در یک فایل با نام style ذخیره می کنیم .سپس در صفحه ی html و در بین تگ <head> کد پایین را قرار میدهیم.
<head>
<link href="style.css" rel="stylesheet">
</head>
در خط دوم همانطور که مشاهده می کنید با استفاده از تگ link که یکی از تگ های html است؛ فایل خارجی style که ایجاد کردیم را، داخل این صفحه فراخوانی می کنیم.
شما با استفاده از یکی از این سه روش، یا همگی در یک صفحه ی وب می توانید صفحات خود را زیباتر و آراسته و البته منظم تر کنید. Css این امکان را به شما می دهد تا هر طور که می خواهید از امکانات آن استفاده کنید.