ما هي لغة CSS ؟ وما أهميتها في تصميم مواقع الويب ؟

ما هي CSS ؟

تعتبر CSS -اختصار ل - (Cascading Style Sheet) لغة توصيفية تقوم بمنح موقع الويب شكله الجميل وتصميمه الفريد الذي سيميزه عن غيره من المواقع . تعد لغة ال CSS صديقة للغة ال HTML فهي دائماً مرافقة لها وبجانبها في تصميم وإنشاء صفحات الويب. تشكل كل من هاتان اللغتان الأساس لكل موقع، فال HTML هي أساس كل عناصر صفحة الويب أما ال CSS فهي أساس تصميم وشكل الموقع فبدونها ستظل مواقع الويب نصًا عاديًا على خلفيات بيضاء, عليك تعلم CSS ان اردت ان تكون مطور واجهات متخصص, كما عليك بالتأكيد تعلم HTML لبناء اي موقع متميز. قبل البدء ببناء و تطوير لغة ال CSS في عام 1996 من قبل اتحاد شبكة الويب العالمية (W3C) ، كانت صفحات الويب محدودة و بسيطة للغاية من حيث الشكل والوظيفة. فقد كانت المتصفحات القديمة تعرض صفحات الويب كصفحات تتكون من نصوص سوداء بخلفية بيضاء فقط (نص – صور – روابط .. إلخ) بدون أي تصميم يذكر. ولم يكن هناك تخطيط لموعد إطلاق لغة ال CSS. سمحت CSS بتصميم وتشكيل صحفات الويب بطرق متعددة و مختلفة لتتمكن من استيعاب مدى إبداع الشخص ، مثل القدرة على: تحديد الخطوط والهوامش والمسافات لعناصر الموقع . تحديد لون وحجم العناصر . تطبيق الألوان على الخلفيات . تحريك العناصر بحرية والحصول على العديد من الحركات في الموقع . والعديد من المزايا الاخرى . كان Microsoft Internet Explorer 3 أول متصفح تم من خلاله عرض واستخدام CSS في عام 1998. وفي يومنا هذا يختلف دعم بعض خصائص CSS من متصفح إلى اخر. أصدرت W3C- التي ما زالت تشرف على معايير الويب و تحديدها- معياراً أو إصداراً جديداً ل CSS وهو CSS3. و بإصدار CSS3، يأمل المطورون أن تقوم جميع المتصفحات الرئيسية بقراءة وعرض كل خاصية من خصائص لغة ال CSS بنفس العرض والطريقة . كيف تعمل CSS ؟ لفهم أساسيات كيفية عمل CSS ، يجب أولاً فهم القليل عن لغة HTML. حيث تكون عناصر صفحات الويب عبارة عن وحدات على أشكال مربعة يحتوي كل منها على عناصر عديدة ويتم تخصيص حجمها وشكلها عن طريق لغة ال CSS . على سبيل المثال ، رأس الصفحة عبارة عن مربع ، ويحتوي على العديد من الوحدات الأخرى الأصغر التي تضم جميع العناصر التي تشكل رأس الصفحة ، مثل الشعار ، و الناف بار ، و أيقونات التواصل الاجتماعية وما إلى ذلك. باستخدام CSS ، يقوم المطور بتخصيص الشكل والحجم إلى رأس الصفحة . في هذا المثال ، دعنا نفترض أن المطور يريد جعل النص داخل الرأس أرجوانيًا ، بخط من نوع Arial حجمه 15px . يمكننا عمل ذلك باستخدام هذا السطر البسيط:

.PageHead {
   font-family : Arial , sans-serf;
   font-size: 15px;
   color : purple; 
 }

وفي لغة ال CSS يتم تطبيق الخصائص على كل العناصر التي تحمل ال Class or Id المختار في ال CSS، مثلا في الHTML لو تم تعيين Selector واحد لأكثر من عنصر في الصفحة وتم تعيين شكل وخصائص لهذا ال Selector فكل العناصر الحاملة له ستاخذ نفس الخصائص . يوجد الكثير من الكلام حول css , يمكنك التدرج في تعلمها لتصل الى مستوى عالي يمكنك حتى من اضافة خصائص برمجية اليها عبر محركات CSS المتنوعة , وقد سبق وقمنا بنشر مقال عن محرك Sass الخاص ب Css , لا يمكنك الاستهانة بقدرات هذه اللغة ومن المهم جداُ كمصمم او حتى مبرمج ويب ان تتعلمها (الاساسيات على الأقل بالنسبة للمبرمج) , نقدم لك هنا بعض الدورات العربية والانجليزية المميزة لتعلم css

طريقك لتصبح مطور واجهات Front End Developer

الطريق الوحيد للتخصص في تطوير واجهات الاستخدام يكون عبر تعلم CSS و تعلم HTML, عليك البدء في تعلم هاتان اللغتان فوراً لبناء مسيرتك المهنية, و لمعرفة الفرق بين مطور Front End و Back End يمكنك قراءة المقال التالي: ما الفرق بين Front End و Back End في تطوير الويب ؟

كيف أتعلم CSS ؟

هنا تجد أفضل مصادر تعلم css , جميع المصادر التالية تم التأكد من جودة محتواها وسهولته , نتمنى لك كل التوفيق صديقي :) Elzero Web School EJ Media Quentin Watt Tutorials