Inline Styles

Internal Styles

In this approach, we will use the style attribute to add inline styles for the specified element. It’s more convenient for making fast changes, but using it too much can make the code harder to manage and understand.

Example: The below code will explain how you can add inline styles using style attribute.

HTML


                    <!DOCTYPE html>
<html>

<head>
    <title>
        Inline Styles Example - w3wiki
    </title>
</head>

<body>

    <div style=
        "border: 2px dashed red; 
        padding: 20px; text-align: center; 
        max-width: 400px; margin: 0 auto;">
        <p>
            This is a div with a red dashed border, 
            styled using inline CSS.
        </p>
        <p>
            w3wiki is a renowned platform providing 
            comprehensive tutorials, articles, and coding challenges,
            empowering millions of developers worldwide to enhance 
            their skills and excel in the field of technology.
        </p>
    </div>

</body>

</html>

Output:

Red border with dashed style and no padding by using inline styles

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

Inline Styles

How to Set a Border for an HTML Div Tag ?

Similar Reads