CSS خارجي

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 8 من 76.

CSS الخارجي (External CSS) هو طريقة لإضافة أنماط CSS إلى مستند HTML عن طريق وضعها في ملف CSS منفصل وربط ذلك الملف بمستند HTML باستخدام الوسم <link>. يتيح لك هذا النهج تطبيق نفس الأنماط على صفحات HTML متعددة، مما يسهل صيانة وتحديث تصميم موقعك الإلكتروني. يعد CSS الخارجي مثاليًا للمشاريع الكبيرة حيث يكون الاتساق والكفاءة أمرًا بالغ الأهمية.

إليك كيفية استخدام CSS الخارجي:

أنشئ ملف CSS (على سبيل المثال، styles.css) باستخدام قواعد CSS الخاصة بك:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

2. قم بربط ملف CSS بمستند HTML الخاص بك عن طريق إضافة وسم <link> في قسم <head>:

<!DOCTYPE html>
<html>
<head>
    <title>CSS خارجي</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>مرحباً بك في صفحتي</h1>
    <p>هذه فقرة من النص.</p>
</body>
</html>

في هذا المثال، يربط الوسم <link> ملف styles.css بمستند HTML. تحدد السمة rel العلاقة بين مستند HTML والملف المرتبط (ورقة الأنماط)، وتحدد السمة href المسار إلى ملف CSS.

التحدي

سهل

لقد تم تزويدك بملفات HTML و CSS (index.html و styles.css)، أضف وسم link في ملف HTML لربط الملفات وإضافة الأنماط إلى ملف HTML!

ورقة مرجعية

يتيح لك CSS الخارجي وضع أنماط CSS في ملف منفصل وربطه بمستندات HTML باستخدام وسم <link>.

أنشئ ملف CSS بأنماطك:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

اربط ملف CSS في قسم <head> الخاص بـ HTML:

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

تحدد سمة rel العلاقة (stylesheet) وتحدد href المسار إلى ملف CSS.

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>