أول ملف CSS ديالك

01قاعدة CSS فيها جوج أجزاء

Selector كيختار العناصر اللي غادي نعطيوها ستايل. التعليمات داخل { } كتحدد الخصائص والقيم. حسن تخلي ملف CSS مشترك للستايلات اللي كتعاود فصفحات كثيرة.

/* styles.css */
p {
  color: #333;
  line-height: 1.7;
}

/* In your HTML head: */
/* <link rel="stylesheet" href="styles.css"> */

02تقدر تعاود تستعمل Classes

Class وحدة تقدر تستعملها فعدة عناصر. اختار أسامي واضحة بحال .card ولا .note، ماشي سميات على لون ولا بلاصة مؤقتة.

<article class="card">A project</article>
<style>
.card { padding: 24px; border: 1px solid #ddd; }
</style>

03فهم Cascade

ملي كتتنافس قواعد CSS، كيتحسب المصدر والأولوية والطبقات وSpecificity. إلا كانو متساويين، اللي جات فالآخر كتربح. استعمل أدوات المتصفح باش تفهم قبل ما تزيد !important فكل بلاصة.

.note { color: #555; }
.note { color: #222; } /* wins over the earlier equal rule */

04جرّب براسك

بدّل Border Radius وPadding وشوف كيفاش كتتبدّل المسافة داخل الكارت.

مثال تقدر تبدلو

<style>
.card { padding: 24px; border: 1px solid #ddd; border-radius: 8px; }
.card h2 { margin-top: 0; }
</style>
<article class="card"><h2>A little structure.</h2><p>A reusable card, styled with one class.</p></article>

غير HTML و CSS. تشغيل السكريبتات وإرسال الفورمات معطّل.

باش تزيد تفهم

تقدر ترجع لـ شروحات MDN و معيار HTML Living Standard باش تفهم أكثر وتشوف التوصيات الجديدة.