Hello, CSS world!

بعد مناقشة ما هي الCSS و لماذا عليك أن تستخدمها، أنت الأن على الأرجح متحمس لتراها مستخدمة، لو أنت تقرأ هذا من خلال متصفح المواقع، إذا أنت تستطيع أن ترى فعل ال CSS الساحر - من لون العنوان الرئيسي و حجمه، القوائم، تعداد النقاط و أشياء أخرى كثيرة - لو أن لها خلفية، إطار، حجم خط ولون مختلفين، فمن المحتمل أن يكون ذلك بفضل CSS. ومع ذلك، قد يكون هذا أمرًا معقدًا إلى حد يتعذر فهمه في الوقت الحالي، لذا دعنا نخفضه إلى مستوى أساسي أكثر بكثير.

على مدار تاريخ البرمجة، بدأ كل برنامج تعليمي بـمثال "مرحبًا للعالم!"، بهدف وحيد هو عرض الطريقة الأساسية لتقديم النص "Hello، world!" على شاشة المستخدم. ذلك يمكن تحقيقه بسهولة في HTML خالصة، دون إستخدام أي CSS، لذلك سنقوم بتلوينه قليلاً بإستخدام لون مختلف:

<style type="text/css">
h1 {
	color: DeepSkyBlue;
}
</style>

<h1>Hello, world!</h1>

هذا كل ما في الأمر - لقد كتبنا أول قاعدة CSS، موجهة نحو علامة H1 وإستخدمناها لتغيير لون النص، بإستخدام خاصية اللون وقيمة اللون المسماة DeepSkyBlue. يمكنك التحقق من النتيجة عن طريق لصق الشفرة (code) في محرر أو ببساطة عن طريق النقر على زر Try this example!.

خلاصة

وكما ترى على الأرجح، فإن CSS هي لغة بسيطة إلى حد ما، ولكنك لا تخشى إذا لم تفهم تماماً مثالنا الأول. في الفصل التالي، سنناقش ما يعنيه الجزء الذي كتبناه بلغة ال CSS بالفعل ولماذا تمت كتابته على النحو الذي هو عليه.