ایجاد پیوند میان فایلهای html و فایل های css با استفاده از تگ link
برای ایجاد پیوند فایلهای css خارجی در طراحی وب سایت دو راه وجود دارد:روشهای link , @import.
تگ link بین سند HTML و سندی که این فایل به آن لینک می‌شود ارتباط برقرار می‌کند.
ایجاد پیوند یک فایل خارجی را می‌توانید به صورت زیر بنویسید:
<link rel=”stylesheet” href=”styleseet.css” media=”all”>
خصیصه هایی که در این تگ به کار می‌روند عبارتند از:
rel:نحوه‌ی ارتباط فایل را با سند اصلی مشخص می‌کند.
href:آدرس فایل css را مشخص می‌کند.
type:نوع mime سند هدف را مشخص می‌کند.
media:وسیله‌ی ارتباط با سند هدف را مشخص می‌کند.
خصیصه‌ی title نیز گاهی در عنصر link مورد استفاده قرار می‌گیرد.هر برگه آبشاری که فاقد مقدار title و rel باشد پایا(persistant) نامیده می‌شود که متداول ترین نوع برگه‌های آبشاری است و همیشه بر روی سند تاثیر می‌گذارد.نوع دیگر برگه‌های آبشاری، مقدم(preferred) نام دارد که خصیصه‌های title و rel در آن وجود دارد و هر بار یک برگه‌ی آبشاری درآن قرار می‌گیرد.معمولا اولین برگه آبشاری نادیده گرفته می‌شود.در بعضی از صفحات برگه‌های آبشاری جایگزین (alternate) وجود دارند.این نوع برگه‌های آبشاری همیشه از سبک مقدم استفاده می‌کنند و اولین برگه آبشاری مقدم برگه پیش فرض محسوب می‌شود. سندهای نوع مقدم می‌توانند جانشین انواع سندهای دیگر شوند(توجه داشته باشید که اگر خصیصه‌ی title را در تگ link برای برگه آبشاری print به کار ببرید در مرورگر فایرفاکس محتوای سند html را چاپ نمی‌کند).
در مثال قبل خصیصه media با all مقدار دهی شده بود این بدین معنی است که سند css برای تمامی رسانه ها اعمال می‌شود.اما این که چندین برگه آبشاری را به یک صفحه html پیوند بزنیم و هرکدام از فایلهای css را در دستگاههای جداگانه لود کنیم با استفاده از خاصیت media امکانپذیر است.در این مثال برگه آبشاری یا فایلcssی که در خط اول به فایل html پیوند زده شده فقط موقع نمایش وب سایت در مونیتور لود می‌شود و وقتی کاربر بخواهد محتویات وب سایت را چاپ کند فایل css دومین خط لود می‌شود.
<link rel=”stylesheet” href=”stylesheet.css” type=”text/css” media=”screen”/>
<link rel=”stylesheet” href=”stylesheet.css” type=”text/css” media=”print”/>
مقادیر دیگری نیز برای خصیصه media وجود دارند که عبارتند از:braile ,aurltv ,projection که همه اینها به خوبی در تمامی مرورگرها پشتیبانی نمی‌شوند.