<!DOCTYPE html>
<html lang="en">
<head>
<title>Order of CSS properties</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Order of CSS properties</h1>
<div id="div1"    style="padding: 10px;
scroll-padding: 0 5px;
border-color: red;
border-radius: 0 5px;
border-style: solid;
border-width: 0 5px;
scroll-margin: 0 5px;
margin: 0 10px;
background-color: #ccaa11;
font-family:  monospace
"></div> 
<div id="div2"    style=" padding: 10px;
border: 5px solid red;
margin: 0 10;
my-invalid-property: 0;
webkit-border-radius: 5px;
background-color: #ccaa11;
background: bbb  ccc;
font-family:  monospace
"></div> 
<script> 
for (let i = 1; i <= 2; i++) {
const id = "div" + i;
const myDiv = document.getElementById(id); 
const divStyle = myDiv.style; 
const len = divStyle.length;
document.write("<h2>" + id + "</h2>");
document.write("<p>" + len + "</p>");
document.write("<ol>\n");
for (let i = 0; i < len; i++)
document.write("<li>" + divStyle.item(i) + "</li>\n");
document.write("</ol>\n");
}
</script>
</body>
</html>
