External Styles

When we use external styles, we put our CSS rules in separate files that can be linked to the HTML document using link tag. This makes things more organized and reusable.

Example: The below code uses an external stylesheet to set the border to 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>
        Double Style Border with
        Extra Padding Example
    </title>
    <link rel="stylesheet" type="text/css" 
        href="style.css">
</head>

<body>
    <div class="container">
        <div class="bordered-div">
            <div class="inner-content">
                <p>
                    w3wiki (GFG) is a leading platform for 
                    computer science enthusiasts, offering tutorials,
                    articles, and resources on programming, algorithms, 
                    data structures, and more.
                </p>
                <p>
                    Visit 
                    <a href="https://www.w3wiki.org/">
                        w3wiki
                    </a> 
                    for enriching your knowledge and
                    enhancing your skills.
                </p>
            </div>
        </div>
    </div>
</body>

</html>

CSS


                    .container {
    max-width: 800px;
    margin: 0 auto;
}

.bordered-div {
    padding: 30px;
    background-color: #f9f9f9;
    border: 4px double #007bff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.inner-content {
    padding: 20px;
    text-align: center;
}

p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

External Styles

How to Set a Border for an HTML Div Tag ?

Similar Reads