Something related to native property of the HTML element such as div element.

The display: flex property is not a native property of the div element. It is applied externally using CSS. By default, a div element has a display property value of block. To use flexbox, you need to explicitly set display: flex in your CSS.

Here’s an example of how to apply display: flex to a div using CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Example</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
    </div>
</body>
</html>

In this example, the flex-container class is applied to the div element, and the display: flex property is set within the CSS to enable flexbox layout for that div.

You cannot achieve all the same styling and layout features using only the attributes of the div element without CSS. The div element in HTML is a generic container for flow content and has very limited built-in attributes for styling. Most of the layout and styling capabilities come from CSS.

HTML attributes can control some aspects of the appearance and behavior of elements (such as id, class, style, and data-* attributes), but they are not sufficient to handle complex layouts and advanced styling like flexbox, grid, animations, transitions, etc.

For example, consider the display: flex property:

Using CSS:

<style>
    .flex-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<div class="flex-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

Using inline styles (still CSS, but not recommended for complex styling):

<div style="display: flex; justify-content: center; align-items: center;">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

There are no HTML attributes for the div element that allow you to set properties like display: flex without using CSS.

For advanced styling and layout, CSS is the essential tool, and HTML attributes alone are not sufficient. Using CSS (either in a separate stylesheet, a <style> tag, or inline styles) allows for greater flexibility and maintainability in your web design.

User agent stylesheets

User agent stylesheets are the default styles provided by web browsers to ensure that web pages render in a readable and somewhat consistent manner across different browsers, even if no CSS is applied by the web developer. These styles provide a basic appearance and layout for HTML elements.

Here are some examples of default styles applied by user agent stylesheets for common HTML elements:

Example of User Agent Stylesheet for a `div` Element

div {
    display: block;
}

Example of User Agent Stylesheet for a `p` Element

p {
    display: block;
    margin: 1em 0;
}

Example of User Agent Stylesheet for an `h1` Element

h1 {
    display: block;
    font-size: 2em;
    margin: 0.67em 0;
    font-weight: bold;
}

Example of User Agent Stylesheet for a `ul` Element

ul {
    display: block;
    list-style-type: disc;
    margin: 1em 0;
    padding-left: 40px;
}

Example of User Agent Stylesheet for an `a` Element

a {
    color: blue;
    text-decoration: underline;
}

How to View User Agent Stylesheets

You can view the user agent stylesheet in your browser's developer tools. Here’s how you can do it in Google Chrome:

Right-click on a webpage and select "Inspect" or press Ctrl+Shift+I (Cmd+Option+I on Mac).
In the Developer Tools panel, select the "Elements" tab.
Click on an element in the HTML tree to view its styles.
In the "Styles" pane, you can see the user agent styles listed under "user agent stylesheet."

Importance of User Agent Stylesheets

User agent stylesheets ensure that web content has a default appearance that is functional and readable. These styles provide a starting point, allowing web developers to customize and override them with their own CSS rules to achieve the desired design and layout.

Example of Custom CSS Overriding User Agent Styles

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Styles</title>
    <style>
        div {
            background-color: lightgray;
            padding: 20px;
            border: 1px solid #ccc;
        }
        p {
            color: red;
            font-size: 18px;
        }
        a {
            color: green;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div>
        <p>This is a paragraph inside a div.</p>
        <a href="#">This is a link</a>
    </div>
</body>
</html>

In this example, the custom CSS overrides the user agent styles to apply specific styles to div, p, and a elements.

User agent stylesheets vary slightly between browsers, but they typically provide basic styles to ensure a consistent and readable default rendering of HTML elements. Below is a comprehensive list of common user agent stylesheet rules for HTML elements. Note that this is a generalized representation and may differ across browsers.

Global Styles

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 8px;
}

Block Elements

div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, header, footer, section, article, nav, aside, main {
    display: block;
}

Headings

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.67em;
    margin: 2.33em 0;
}

Paragraphs

p {
    margin: 1em 0;
}

Lists

ul, ol {
    margin: 1em 0;
    padding: 0 0 0 40px;
}

li {
    margin: 0.5em 0;
}

ul {
    list-style-type: disc;
}

ol {
    list-style-type: decimal;
}

Links

a {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

Tables

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption {
    display: table-caption;
    text-align: center;
}

th {
    font-weight: bold;
    text-align: -internal-center;
}

td, th {
    padding: 1px;
}

Forms

input, select, textarea, button {
    font-family: sans-serif;
    font-size: 100%;
    margin: 0;
}

button, input {
    overflow: visible;
}

button, select {
    text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

Textarea

textarea {
    overflow: auto;
}

Additional Elements

address, blockquote, dl, dd, fieldset, figure, form, hr, menu, pre {
    display: block;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    color: inherit;
    display: table;
    max-width: 100%;
    white-space: normal;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

Media Elements

audio, canvas, progress, video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

Miscellaneous Elements

b, strong {
    font-weight: bold;
}

datalist, keygen, output {
    display: none;
}

Details and Summary

details {
    display: block;
}

summary {
    display: list-item;
}

These styles provide a basic foundation for rendering web pages and are typically overridden or extended by custom CSS provided by web developers.

Related to styling and layout features using only the attributes of the html element (such as div) without CSS​

User agent stylesheets​

Example of User Agent Stylesheet for a div Element​

Example of User Agent Stylesheet for a p Element​

Example of User Agent Stylesheet for an h1 Element​

Example of User Agent Stylesheet for a ul Element​

Example of User Agent Stylesheet for an a Element​

How to View User Agent Stylesheets​

Importance of User Agent Stylesheets​

Example of Custom CSS Overriding User Agent Styles​

Global Styles​

Block Elements​

Headings​

Paragraphs​

Lists​

Links​

Tables​

Forms​

Textarea​

Additional Elements​

Media Elements​

Miscellaneous Elements​

Details and Summary​

Related to styling and layout features using only the attributes of the html element (such as div) without CSS