سلام دوستان! اگر تا به حال با CSS آشنایی داشته‌اید، می‌دانید که CSS زبان اصلی برای طراحی ظاهر صفحات وب است. CSS به ما این امکان را می‌دهد که ظاهر و حس صفحات وب را کنترل کنیم، از جمله رنگ‌ها، فونت‌ها، فواصل و حتی طراحی ریسپانسیو برای دستگاه‌های مختلف. این زبان می‌تواند به صفحه‌هایی که ممکن است در ابتدا ساده و شاید کمی خسته‌کننده به نظر برسند، جانی تازه ببخشد.
شروع کار با CSS می‌تواند در ابتدا دلهره‌آور به نظر برسد، اما نگران نباشید! در اینجا راهنمایی های ساده و مفیدی داریم که به شما کمک می‌کند CSS را به راحتی فرا بگیرید. اولین قدم مهم این است که بدانید چگونه CSS را به اسناد HTML خود اضافه کنید. البته، ما نمی‌توانیم فراموش کنیم که کدهای CSS می‌تواند در سه مکان مختلف وارد شوند: بصورت درون‌خطی (inline)، داخلی (internal) و خارجی (external).
اضافه کردن CSS بصورت درون‌خطی می‌تواند سریع باشد، اما معمولا بهترین روش نیست چون ممکن است مدیریت آن برای پروژه‌های بزرگ و پیچیده دشوار باشد. به جای آن، می‌توانید از روش داخلی یا خارجی بهره ببرید. استفاده از استایل‌های داخلی در مواقعی که فقط می‌خواهید استایل‌هایی را برای یک صفحه خاص تعریف کنید مناسب است. اما برای پروژه‌های بزرگ و پیچیده‌تر، از یک فایل CSS خارجی استفاده کنید، تا بتوانید به راحتی استایل‌های صفحات مختلف را مدیریت کنید.
حالا بیایید نگاهی به یک مثال ساده داشته باشیم که نحوه‌ی اضافه کردن CSS به یک فایل HTML را نشان می‌دهد. این مثال نشان‌دهنده‌ی هر سه روش وارد کردن CSS می‌باشد که می‌تواند در پروژه‌های واقعی مورد استفاده قرار بگیرد.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>نمونه CSS</title>
<style>
/* استایل داخلی */
body {
background-color: lightblue;
}
</style>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 style="color: navy;">سلام به دنیای CSS</h1>
<p>این یک نمونه از کار با CSS می‌باشد.</p>
</body>
</html>
<!DOCTYPE html>: این خط مشخص می‌کند که سند HTML ما از نوع HTML5 است.<html lang="fa">: ما به مرورگر مشخص می‌کنیم که زبان سند فارسی است.<head>: این قسمت شامل اطلاعات سربرگ برای سند است، از جمله متا تگ‌ها و استایل‌ها.<meta charset="UTF-8">: معین می‌کند که انکودینگ ما UTF-8 است تا بتوانیم کاراکترهای فارسی را نمایش دهیم.<meta name="viewport"...: برای طراحی ریسپانسیو، بهینه سازی نمایش در دستگاه‌های مختلف.<title>نمونه CSS</title>: عنوان صفحه که در نوار مرورگر نمایش داده می‌شود.<style>: بخشی برای نوشتن استایل‌های داخلی در اینجا قرار می‌گیرد.body { background-color: lightblue; }: استایل داخلی که پس‌زمینه صفحه را آبی روشن می‌سازد.<link rel="stylesheet" href="styles.css">: با این خط ما استایل‌های خارجی را به سند متصل می‌کنیم.<h1 style="color: navy;">: متن تیتر با رنگ آبی تیره نمایش داده می‌شود، این استايل بصورت درون‌خطی است.