نبدأ بالتطبيق والدرس الأول
مع كل تصميم سننجزه سنتعلم مجموعة من خصائص الـ CSS بطريقة ممتعة وعملية

الهيكل باستخدام الــ HTML

سنحوله إلى تصميم اكثر تنسيقا كـ:

بإضافة الـ Style عليه (باستخدام الـ CSS)

نشرح تالياً كل الأدوات المستخدمة في التصميم السابق

بداية يجب التنويه إلى أن

كل شيء داخل المتصفح يمثل عنصر (element)
وكل العناصر لها الخصائص التالية:
- حدود
- خلفية
- مسافات
- وبعضها تحتوي على نص

نبدأ بالحدود (border):

للحدود 3 سمات اساسية

بالنسبة للـ style

ستظهر بالشكل التالي في المتصفح

الحدود تحمل 4 قيم وهي بالترتيب:
four values (for the top border, right border, bottom border, and the left border).

top - right - bottom - left
غالبا هذا الترتيب موجود في اغلب الخصائص كما سنرى لاحقا

الطريقة المختصرة

وإذا كتبت مثلاً:
border-style:solid;
فإنها ستكون للجهات الأربعة

بالنسبة للـ width
فانه سمك خط الحدود ويقاس ب:
اما وحدات القياس: in px, pt, cm, em, etc)
او وحدات محددة مسبقا: thin, medium, or thick

والوحدات المحددة مسبقاً تأخذ تقريبا المقاسات التالية:
thin = 1px
medium = 3px
thick = 5px

ركز الان فقط على ال px والوحدات المحددة مسبقا واترك بقية وحدة القياس لحين الوصول الى مستوى اعلى (استجابة الموقع)