Internal Styles

When we use internal styles, we put our CSS styles inside the HTML file using the <style> tag in the <head> section. This helps us keep our code organized. However, these styles are only usable within that specific HTML file.

Example: The below code uses internal styling using the <style> tag to set border to an HTML element.

HTML


                    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Internal Styles Example</title>
    <style>
        .bordered-div {
            border: 2px solid black;
            padding: 20px;
            margin: 0 auto;
            max-width: 600px;
            background-color: #f9f9f9;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        p {
            color: #666;
            line-height: 1.6;
        }
    </style>
</head>

<body>
    <div class="bordered-div">
        <p>
            w3wiki (GFG) is a well-known platform for 
            computer science enthusiasts, providing a wide range of
            articles, tutorials, and resources on various programming 
            topics, algorithms, data structures, and more.
        </p>
        <p>
            Visit 
            <a href="https://www.w3wiki.org/">
                w3wiki
            </a> 
            for enriching your knowledge and enhancing
            your programming skills.
        </p>
    </div>
</body>

</html>

Output:

How to Set a Border for an HTML Div Tag ?

Borders help us make things look good on websites, this plays an important role in the external view of a website. In HTML and CSS, we have different ways to add borders, making it easier for developers to create attractive web pages that look neat and organized.

Table of Content

Inline Styles
Internal Styles
External Styles
Using JavaScript

Internal Styles

How to Set a Border for an HTML Div Tag ?

Similar Reads