سه روش اصلی برای اضافه کردن CSS به HTML شامل استایلهای خطی، داخلی و خارجی وجود دارد که هرکدام مزایا و کاربردهای خاص خود را دارند.
style.<h1 style="color: red; font-size: 24px;">عنوان</h1><head> با تگ <style>.<head>
<style>
body { background-color: yellow; }
p { color: white; }
</style>
</head>type="text/css" اختیاری (HTML5).style.css بسازید و با <link> لینک کنید./* style.css */
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 { color: orange; }<head>
<link rel="stylesheet" href="style.css">
</head>سبکهای خطی (Inline Styles) بالاترین اولویت و سبکهای خارجی (External Stylesheets) کمترین اولویت را دارند. این بدان معناست که اگر شما یک عنصر را در هر دو سبکهای خارجی (External Stylesheets) و سبک داخلی (Internal/Embedded Styles) استایل دهی کنید، قوانین سبک متناقض در سبک داخلی (Internal/Embedded Styles) بر روی استایل بازنویسی می شوند.
اولویت: خطی > داخلی > خارجی
قانون import@ روش دیگری برای بارگیری یک css خارجی است. جمله import@ به مرورگر دستور می دهد تا یک css را بارگیری و از استایل های آن استفاده کند.
@import url("style.css"); /* در ابتدا فایل */
body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 { color: orange; }