مفهوم – سي اس اس CSS هي إختصار Cascading Style Sheets والتي تعني أوراق الأنماط المتتالية، وهي لغة تنسيق لصفحات الويب تهتم بشكل وتصميم المواقع، وصممت خصيصا لعزل التنسيق عن محتوى المستند المكتوب بلغة html.

لا تعد السي إس إس CSS لغة برمجة، وهي تهتم بالمظهر الكلي لصفحات مواقع الويب من ألوان وصور وغيره، ويمكن إضافة CSS للصفحة بعدة طرق أفضلها التضمين الخارجي بكتابة شفرة السي إس إس في ملف منفصل.

ومثلما تحدّد لغة HTML هيكلة الصفحة وتُخبر المتصفحات بوظيفة كل عنصر في الصفحة (مثل رابط لصفحة أخرى أو عنوانا رئيسياً) فإن لغة CSS تعطي تعليمات للمتصفح حول كيفية عرض العناصر في الصفحة من حيث التصميم والمسافة والموضع.

ولو افترضنا أن HTML تقوم على بناء هيكل المنزل فإن CSS تقوم بطلاء المنزل و تصميم الديكور الخاص به.

يكون ذلك عن طريق مجموعة من التعليمات التي سنتعرف على كيفية سردها لاحقا، تحدد تلك التعليمات (أو القواعد) ما يجب تنسيقه وتصميمه على عناصر HTML.

لا تعتبر لغة CSS لغة برمجية فهي ليست مثل JavaScript وليست لغة هيكلة مثل لغة HTML، وفي الواقع لا يمكن مقارنة هذه اللغة بأي تقنية أخرى.

اقرأ ايضًا:

• أساسيات HTML
• مزايا وعيوب ورواتب أشهر لغات البرمجة

قبل عمليات تطوير الويب كانت بعض التقنيات تعرّف واجهة الموقع وتدمج بين البنية والشكل التقديمي، وهذا ليس بالشيء الذكي الذي يجب فعله في البيئة التي تتغير باستمرار وخاصة صفحات الويب ولهذا السبب تم اختراع لغة CSS.

مكان كتابة الـ CSS

أول طريقة: ويصطلح عليها ب Inline style النمط الخطي، وهي كتابة الخصائص والقيم داخل علامة html كقيمة للخاصية style.

الطريقة الثانية: يصطلح عليها ب Internal style النمط الداخلي ، وهي كتابة كود css مستقلا في نفس ملف html ضمن العلامة الزوجية style في رأس الصفحة head .

اخر وثالث طريقة: يصطلح عليها ب External style النمط الخارجي، وهي كتابة كود css في ملف مستقل خارجي والإشارة إلى مساره في رأس الصفحة باستخدام العلامة الفردية link ونكتب كود css بشكل عادي في ملف مستقل نسميه style.css ونضعه في نفس مسار ملف html.

أكثر 5 أكواد شائعة في CSS

1- width

وهو الوسم الخاص بعرض العنصر
ويكتب كالتالي width:100px;
الرقم 100 يغير بأى رقم أكبر او اصغر

2-height

وهو الخاص بالإرتفاع
ويكتب كالتالي
height:100px;
نفس الشئ فيما يخص تغيير الرقم

3-padding

وهي مساحة الفراغ الداخلي للعنصر أو الحاشية.
وتكتب كالتالي padding:10px 15px 6px 8px;
10 الفراغ من الاعلى
15 اليمين
6 الأسفل
8 اليسار
ويمكنك كتابتها كالتالي padding:10px;
معناه انه من كل الجوانب سيكون الفراغ 10 بيكسل

4-margin

نفس padding لكن هذه الحاشية الخارجية حول العنصر وبعده عن العناصر المجاورة له.
وتكتب بنفس الطريقة:
margin:10px 15px 6px 8px;

اقرأ ايضًا:

• نصائح لتصبح مصمم ويب Web Designer محترف
• خطوات تعلم البرمجة
• تعلم البرمجة من خلال الدراسة الأكاديمية أم التعليم الذاتي

5-color

وهي الخاصة بلون النصوص في العناصر.
وتكتب كالتالي
color:#000000;
تغير فقط #000000 بكود لون آخر
ويمكنك أن تضيف لها background
يصبح حبنها لون خلفية العنصر وليس النص هكذا:
background-color:#000000;