تُعد CSS - وهي اختصار لـ Cascading Style Sheets (أوراق الأنماط المتتالية) - عنصراً جوهرياً في تطوير الويب الحديث; فهي لغة لتنسيق الصفحات تُستخدم لإضفاء الأنماط والمظهر الجمالي على عناصر HTML . وببساطة, إذا كانت HTML تمثل هيكل صفحة الويب، فإن CSS هي التي تمنحها مظهراً جذاباً.

إليك مثال على "تنسيق شريط التنقل" (styling a navbar) .

ملاحظة: لا تقلق بشأن محاولة فهم كود CSS في الوقت الحالي; إذ ستتعلم كيفية عمل كل هذا في الدروس وورش العمل القادمة. الهدف هنا هو مجرد إعطائك فكرة عما يمكنك تحقيقه باستخدام القليل من CSS .

<link rel="stylesheet" href="styles.css" />

<nav class="navbar">
 <ul class="nav-links">
  <li><a href="#">الرئيسية</a></li>
  <li><a href="#">نبذة عنا</a></li>
  <li><a href="#">خدمات</a></li>
  <li><a href="#">اتصال</a></li>
 </ul>
</nav>
            

*  {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body  {
  font-family: 'Segoe UI', sans-serif;
  background-color: #f4f4f4;
}

.navbar  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  padding: 1rem 2rem;
  color: white;
}

.navbar .logo  {
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links  {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.nav-links a  {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-links a:hover  {
  color: #ff9800;
}
            

معاينة:

يتمثل الدور الأساسي لـ CSS في فصل محتوى صفحة الويب عن مظهرها المرئي; إذ يتيح هذا الفصل لمطوري الويب إنشاء مواقع ويب أكثر مرونة وسهولة في الصيانة.

باستخدام CSS، يمكنك التحكم في "التخطيط" (layout) و"الألوان" (colors) و"الخطوط" (fonts) و"المظهر المرئي العام" (overall visual appearance) لصفحات الويب دون تعديل هيكلية HTML .

لنأخذ مثالاً بسيطاً للتقريب; إذا تخيلتَ الموقع الإلكتروني كمنزل، فإن لغة HTML تمثل "الأساس والهيكل" (foundation and framework) ، بينما تمثل CSS الطلاء وورق الحائط والزخارف التي تضفي على المنزل مظهراً جذاباً ومميزاً.

تعمل CSS عن طريق تحديد عناصر HTML وتطبيق "الأنماط" (styles) عليها.

إليك مثال يوضح عنصر زر button "غير مُنسَّق" (unstyled) وآخر "مُنسَّق" (styled) .

<link rel="stylesheet" href="styles.css" />

<button class="regular-btn">زر غير منسق</button>
<button class="round-btn">زر دائري</button>
            

.round-btn  {
  font-size: 1rem;
  font-family: 'Segoe UI', sans-serif;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  background-color: #2ecc71;
  color: white;
  border-radius: 50px;
  padding: 0.6rem 1.6rem;
}

.round-btn:hover  {
  background-color: #27ae60;
  transform: translateY(-2px);
}
            

معاينة:

يمكن أن تتضمن هذه "الأنماط" (styles) خصائص مثل "اللون" (color) و"حجم الخط" (font size) وغيرها الكثير. ومن خلال تغيير هذه "الخصائص" (properties) ، يمكنك تعديل مظهر صفحة الويب بشكل جذري دون تغيير محتواها.

تُعد القدرة على إنشاء "تصميمات متجاوبة" (responsive designs) واحدةً من أقوى ميزات CSS .

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

تتيح لك تقنية CSS تعديل "التخطيطات" (layouts) و"أحجام الخطوط" (font sizes) و"العناصر المرئية الأخرى" (other visual elements) بناءً على "حجم شاشة الجهاز" (screen size) الذي يعرض الموقع الإلكتروني.

حاول تعديل حجم نافذة المعاينة لترى كيف يتكيف "التخطيط" (layout) مع "حجم الشاشة" (screen size) .

<link rel="stylesheet" href="styles.css" />

<header class="header">
 <h1>مرحبًا بكم في موقعي المتجاوب</h1>
 <p>يتكيف هذا التخطيط مع حجم شاشتك!</p>
</header>

<main class=content>
 <section class="box">صندوق 1</section>
 <section class="box">صندوق 2</section>
 <section class="box">صندوق 3</section>
</main>
            

body  {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

.header {
  background-color: #4CAF50;
  color: white;
  padding: 2rem;
  text-align: center;
}

.content {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  justify-content: center;
}

.box {
  flex: 1;
  min-width: 200px;
  background-color: #ddd;
  padding: 2rem;
  text-align: center;
  font-size: 1.2rem;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.box:hover {
  background-color: #ccc;
}

/* Responsive: for tablets and below (≤ 768px) */
/* متجاوب: للأجهزة اللوحية وما دونها (≤ 768px) */

@media (max-width: 768px) {
 .content {
  flex-direction: column;
  align-items: center;
 }

 .box {
  width: 90%;
  font-size: 1.1rem;
 }
}

/* Responsive: for phones (≤ 480px) */
/* متجاوب: للهواتف (≤ 480px) */

@media (max-width: 480px) {
 .header {
  padding: 1.5rem 1rem;
 }

 .header h1 {
  font-size: 1.5rem;
 }

 .header p {
  font-size: 1rem;
 }

 .box {
  font-size: 1rem;
  padding: 1.5rem;
 }
}

            

معاينة:

من الميزات المهمة الأخرى لـ CSS طبيعتها "التتابعية" (أو المتسلسلة)، وهي السمة التي استمدت منها اسمها (حيث تشير كلمة "Cascading" إلى هذا التتابع).

وهذا يعني أنه يمكن توريث الأنماط وتجاوزها، مما يتيح بناء "هيكل هرمي للأنماط" (a hierarchical structure of styling) . وسوف تتعرف على المزيد حول كيفية عمل ذلك في الدروس القادمة.

تدعم CSS أيضاً استخدام "ملفات أنماط خارجية" (external stylesheets) .

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

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

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

يتيح للمطورين تحويل مستندات HTML البسيطة إلى تجارب ويب تفاعلية وجذابة، تستحوذ على انتباه المستخدمين وتعزز تفاعلهم مع محتوى الويب.