الان بتطبيق الخواص السابقة على الفورم لعرض الحدود والخلفية واستدارة الحواف

ستكون هذه النتيجة

لابد انك مدرك ان العرض الافتراضي width للعناصر يأخذ 100% من عرض الشاشة
اذا تحتاج لان تضبط العرض بما يناسب المحتوى
وحدات القياس عديدة دعونا نلتزم الان بالبكسل

ولنضع مثلا width:350px;

ستبدو بالشكل التالي
الان حان الوقت للتوسيط

احتاج لدفع الفورم باتجاه الاسفل وباتجاه اليمين ليتوسط في وسط الشاشة وكما قلنا سابقا ساستخدم auto للعرض (اليمين واليسار)

margin:200px auto;

نفتح تعليق خلفية الصورة

بهذا الـ style

نفس الامر تماما ينطبق على الـpadding

لاحظ كيف ان العناصر لاصقه على الحدود هذا يعني اننا بحاجة الى عمل مسافة داخليه وهذا ما يسمى padding

لا احتاج مسافة لاعلى واسفل فثبتها ب 0 واضفت 20 بكسل للجانبين

جهزنا الخلفية والفورم
تالياً نحتاج لتنسيق محتويات الفورم وهي:
h1
input
button
p
a

وتذكر نحن الان داخل الفورم اخذنا 350 بكسل العرض ✨

نبدأ بتنسيق النصوص الموجودة داخل الـ Login (تنسيق النصوص Text)