CSS را می توان به 3 روش به اسناد HTML اضافه کرد:
Inline – با استفاده از ویژگی style در عناصر HTML
Internal – با استفاده از عنصر <style> در بخش <head>
External – با استفاده از عنصر <link> برای پیوند دادن به یک فایل CSS خارجی
رایج ترین راه برای افزودن CSS، نگه داشتن استایل ها در فایل های external css است. با این حال، در این آموزش ما از سبک های Inline و Internal استفاده می کنیم، زیرا نشان دادنشان ساده تر است و برای شما راحت تر است تا بتوانيد خودتان آن را امتحان کنید.
Inline CSS
یک inline CSS برای اعمال یک سبک منحصر به فرد به یک عنصر HTML استفاده می شود.
یک inline CSS از ویژگی style یک عنصر HTML استفاده می کند.
مثال زیر رنگ متن عنصر <h1> را آبی و رنگ متن عنصر <p> را قرمز تنظیم می کند:
Example
<h1 style=”color:blue;”>A Blue Heading</h1>
<p style=”color:red;”>A red paragraph.</p>
Internal CSS
یک internal CSS برای تعریف یک سبک برای یک صفحه HTML استفاده می شود.
یک internal CSS در بخش <head> یک صفحه HTML در یک عنصر <style> تعریف شده است.
مثال زیر رنگ متن همه عناصر <h1> (در آن صفحه) را آبی و رنگ متن همه عناصر <p> را قرمز تنظیم می کند. علاوه بر این، صفحه با رنگ پس زمینه “پودرآبی” نمایش داده می شود:
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>
External CSS
یک external style برای تعریف style برای بسیاری از صفحات HTML استفاده می شود.
برای استفاده از یک external style، یک پیوند به آن در بخش <head> هر صفحه HTML اضافه کنید:
Example
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body><h1>This is a heading</h1>
<p>This is a paragraph.</p></body>
</html>
external style را می توان در هر ویرایشگر متنی نوشت. فایل نباید حاوی هیچ کد HTML باشد و باید با پسوند css. ذخیره شود.
در اینجا فایل “styles.css” به نظر می رسد:
“styles.css”:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}