تحدي التنسيق الأساسي
جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 9 من 76.
التحدي
سهللقد تم تزويدك بمستند HTML يحتوي على عنوان (<h1>) وفقرة (<p>). مهمتك هي تنسيق هذه العناصر باستخدام مزيج من CSS المضمن (inline)، والداخلي (internal)، والخارجي (external). اتبع الخطوات أدناه:
- استخدم inline CSS لتغيير لون نص العنوان
<h1>إلى blue. - استخدم internal CSS لتغيير لون خلفية الـ
bodyإلى lightgray وحجم خط الفقرة (<p>) إلى 16px. - استخدم ملف الـ external CSS المقدم المسمى
styles.cssلتغيير لون نص الفقرة (<p>) إلى red. - قم بربط ملف CSS الخارجي بمستند HTML باستخدام وسم
<link>.
جرّب بنفسك
<html>
<head>
<title>Basic Styling Challenge</title>
<style>
body {
background-color: white;
}
p {
font-size: 12px;
}
</style>
<!-- ضع رابط ملف CSS الخارجي هنا -->
</head>
<body>
<h1 style="color: red;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>جميع دروس Styling with CSS
4أساسيات النصوص
لون النصعائلة الخطحجم الخطسمك الخطمحاذاة النصزخرفة النصتحدي المراجعة رقم 1تحدي المراجعة رقم 27نموذج الصندوق - الجزء الأول
ما هو نموذج الصندوق؟المسافات الداخلية (Padding)الهوامش (Margins)الحدود (Borders)العرض والارتفاعتحدي المراجعة
8نموذج الصندوق (Box Model) - الجزء الثاني
تحجيم الصندوق (Box Sizing)حواف العناصر (Border Radius)التدفق الزائد (Overflow)ظل الصندوق (Box Shadow)تحدي المراجعة