CSS Internal

CSS Internal

Internal CSS is a method of adding CSS styles to an HTML document using the <style> element. The CSS code is written inside the <head> section of an HTML document.

Internal CSS allows you to style multiple HTML elements on a single webpage without creating a separate CSS file.

1. Internal CSS Syntax

The basic syntax of internal CSS is:

<head>
    <style>
        selector {
            property: value;
        }
    </style>
</head>

Here:

• <style> defines the internal stylesheet.
• selector selects the HTML elements you want to style.
• property specifies the CSS property.
• value defines the property value.

2. Internal CSS Example

Here is a complete HTML example using internal CSS.

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>

    <style>
        h1 {
            color: blue;
            text-align: center;
        }

        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>

    <h1>Welcome to CodingRider</h1>

    <p>This paragraph uses internal CSS.</p>

</body>
</html>

3. Internal CSS for Text Styling

You can use internal CSS to change the color, size, alignment, and font of HTML text.

Example:

<style>
    h1 {
        color: red;
        text-align: center;
        font-size: 35px;
    }

    p {
        color: gray;
        font-family: Arial, sans-serif;
        font-size: 20px;
    }
</style>

This example makes all h1 headings red and centered, while paragraphs use gray text and a font size of 20px.

4. Internal CSS Using Class Selectors

Internal CSS can also use class selectors to apply styles to specific HTML elements.

Example:

<style>
    .box {
        background-color: lightblue;
        padding: 20px;
        border: 2px solid blue;
    }
</style>

<div class="box">
    This is a styled box.
</div>

The class selector .box applies the same styling to every element with the class name box.

5. Internal CSS Using ID Selectors

You can use an ID selector to style a unique HTML element.

Example:

<style>
    #header {
        background-color: black;
        color: white;
        padding: 20px;
        text-align: center;
    }
</style>

<div id="header">
    Welcome to CodingRider
</div>

The ID selector #header applies styles to the element with the ID header.

6. Advantages of Internal CSS

• Easy to write and understand.
• Allows styling multiple HTML elements on one page.
• Does not require a separate CSS file.
• Keeps CSS code in one place within the HTML document.
• Useful for single-page websites and demonstrations.
• Supports element, class, ID, and other CSS selectors.

7. Disadvantages of Internal CSS

• Cannot easily reuse the same stylesheet across multiple HTML pages.
• Increases the size of the HTML document.
• Can make large HTML files difficult to maintain.
• Does not provide the same separation of content and styling as external CSS.

8. When Should You Use Internal CSS?

Internal CSS is useful for:

• Single-page websites.
• HTML and CSS learning examples.
• Small projects and prototypes.
• Testing styles without creating an external stylesheet.

For larger websites with multiple pages, external CSS is generally recommended.

Conclusion

Internal CSS is a simple way to style HTML elements using the <style> element inside the <head> section. It is useful for styling individual webpages and learning CSS fundamentals.

Practice Tasks

1. Create an HTML webpage using internal CSS.
2. Make all h1 headings blue and centered.
3. Style paragraphs using green text and a 20px font size.
4. Create a class selector named card with a background color and padding.
5. Create an ID selector named header and style a header element.