CSS داخلي

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

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

إليك الصيغة الأساسية لاستخدام CSS الداخلي:

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

في هذا المثال، يحتوي وسم <style> على قواعد CSS التي تحدد لون الخلفية لـ body إلى اللون الأزرق الفاتح، ولون p (الفقرة) إلى اللون الأزرق، وحجم الخط إلى 16 بكسل. ستنطبق هذه الأنماط على جميع العناصر داخل مستند HTML.

التحدي

سهل

لقد تم تزويدك بمستند HTML. استخدم CSS داخلي لتنسيق المستند بالخصائص التالية:

قم بتعيين لون الخلفية لـ body إلى lightgreen.
قم بتعيين لون النص لجميع عناوين h1 إلى red.
قم بتعيين حجم الخط لجميع الفقرات (p) إلى 18px.

لقد تم تزويدك بكود CSS مبدئي لذلك.

ورقة مرجعية

تُضاف لغة CSS الداخلية ضمن وسم <style> في قسم <head> من مستند HTML:

<head>
    <style>
        body {
            background-color: lightblue;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>

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

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS</title>
    <style>
        body {
            
        }
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>