به‌صورت کلی، در دنیای برنامه‌نویسی وب، استایل‌ها و چیدمان عناصر به واسطه CSS و HTML مشخص می‌شوند. اگر به تجزیه و تحلیل ساختاری صفحات وب بپردازیم، به دو مفهوم اساسی یعنی CSSOM و DOM برخورد می‌کنیم. در نگاه اول ممکن است این دو شبیه به هم به نظر برسند، اما هر کدام نقش و کارکرد خاص خود را دارند. در این مقاله قصد داریم به بررسی این بپردازیم که استایل‌های داخلی یا همان Inline Styling جزء کدام یک از این دو ساختار محسوب می‌شوند.
DOM یا همون Document Object Model نمایی ساختاری از محتوای HTML است که شامل تمام المان‌های صفحه وب می‌شود. به عبارت دیگر، DOM ساختاری از درخت عناصری است که محتویات HTML یک صفحه وب را نمایش می‌دهد و اجازه می‌دهد تا با اسکریپت‌ها و توابع مختلف با آن تعامل برقرار کنیم.
از سوی دیگر، CSSOM یا همان CSS Object Model نمایی ساختاری از کدهای CSS ما ارائه می‌دهد. اگرچه این مدل شاید به اندازه DOM شناخته شده نباشد، اما نقش بسیار مهمی در نمایش صفحه وب دارد و مستقیماً با استایل دهی عناصر در ارتباط است.
اکنون سوالی که مطرح می‌شود این است: استایل‌های داخلی که مستقیماً داخل تگ‌های HTML نوشته می‌شوند، جزء کدامیک از این دو مدل قرار می‌گیرند؟ پاسخ این است که Inline Styling به عنوان بخشی از DOM محسوب می‌شود چون این استایل‌ها به صورت مستقیم و بدون واسطه بر روی عناصر HTML اعمال می‌شوند.
نمونه کد
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مثال Inline Styling</title>
</head>
<body>
<div style="color: red; font-size: 20px;">این یک متن با استایل داخلی است</div>
</body>
</html>
توضیح کد
<!DOCTYPE html> تعیین نوع سند HTML<html lang="fa"> آغاز سند HTML با زبانی فارسی<meta charset="UTF-8"> تعیین کدگذاری کاراکترها به UTF-8<meta name="viewport" content="width=device-width, initial-scale=1.0"> تنظیم نمایش صفحه به صورت واکنش‌گرا<title>مثال Inline Styling</title> عنوان صفحه برای نمایش در تب مرورگر<body> شروع بخش محتوای اصلی صفحه<div style="color: red; font-size: 20px;">این یک متن با استایل داخلی است</div> تعریف یک بلاک div با استایل‌دهی مستقیم داخلی</body> پایان بخش محتوای اصلی صفحه</html> پایان سند HTML