#align-content-prop .parent{
display:flex;
width:150px;
height:150px;	
background-color:lightblue;
flex-wrap:wrap;
}
#align-content-prop .child{
width:100%;
background-color:lightgreen;
color:white;
border:2px solid rgba(150,150,150,1);
border-radius:3px;
padding:2px;
margin:0px;
}



#align-items-prop .parent{
display:flex;
width:150px;
height:150px;
background-color:lightblue;
flex-wrap:wrap;
}

#align-items-prop .child{
width:100%;
background-color:lightgreen;
border:2px solid rgba(150,150,150,1);
color:white; 
border-radius:3px;
padding:2px;
margin:0px;
}



#align-self-prop .parent{
display:flex;
width:150px;
height:150px;	
background-color:lightblue;
flex-wrap:wrap;
}
#align-self-prop .child{
width:100%;
background-color:lightgreen;
color:white; 
border-radius:3px;
border:2px solid rgba(150,150,150,1);
padding:4px;
margin:0px;
}


#animation-delay-prop .element{
 width:100px;
 height:100px;
 background-color:red;
 position:relative;
 left:0; 
 animation: moveTo 4s infinite;
}

#animation-direction-prop .element{
 width:100px;
 height:100px;
 background-color:red;
 position:relative;
 left:0; 
 animation: moveTo 2s 2 infinite;
}


#animation-duration-prop .element{
 width:100px;
 height:100px;
 background-color:blue;
 position:relative;
 left:0; 
 animation-name:moveTo;
 animation-iteration-count:infinite;
}

#animation-fill-mode-prop .element{
 width:100px;
 height:100px;
 border:1px solid black;
 position:relative;
 left:0; 
 animation: moveToRight 3s 1s 1;
}

#animation-iteration-count-prop .element{
 width:100px;
 height:100px;
 background-color:red;
 position:relative;
 left:0; 
 animation-name:moveTo;
 animation-duration:2s;
 animation-iteration-count: infinite;
}

#animation-name-prop .element{
 width:100px;
 height:100px;
 background-color:red;
 position:relative;
 left:0; 
 animation-duration:3s;
 animation-iteration-count:infinite;
}
#animation-play-state-prop .element{
 width:100px;
 height:100px;
 background-color:red;
 position:relative;
 left:0; 
 animation-duration:3s;
 animation-iteration-count:infinite;
 animation-name:moveTo;
}

#animation-timing-function-prop .element{
 width:100px;
 height:100px;
 background-color:red;
 position:relative;
 left:0; 
 animation-duration:5s;
 animation-iteration-count: infinite;
}

@keyframes moveToRight{
 0%{
	left:0%;
	background-color:red;
 }	
 30%{
	background-color:green;
 }
 
 60%{
	background-color:blue;
 }
 100%{
	left:80%;
	background-color:gray;
 }
}


@keyframes rotate{
 0%{
	transform:rotateZ(0deg);
 }	
 100%{
	transform:rotateZ(360deg);
	background-color:yellow;
 }
}






@keyframes moveTo{
 0%{
	left:0%;
 }	
 100%{
	left:80%;
 }
}



#backface-visibility-prop .parentElement{
 perspective:300px;
 position:relative;
}

#backface-visibility-prop  .element{
 width:100px;
 height:100px;
 position:absolute;
 background-color:lightblue;
 transition:transform 2s;
}


#backface-visibility-prop  .element:hover{
transform:rotateY(180deg);
}


#animation-direction-prop .element{
 width:100px;
 height:100px;
 background-color:red;
 position:relative;
 left:0; 
 animation: moveTo 2s 2;	
}



#background-attachment-prop .container{
 width:100%;
 height:150px;
 overflow:auto;
}


#background-attachment-prop .element{
width:100%;
height:200px;
background-image:url("img/background.jpg");
overflow:scroll;
}

#background-clip-prop .parent{
width:150px;
height:150px;
background-image:url("img/background.jpg");
padding:10px;
border:10px dashed black;
}



#background-color-prop .parent{
width:150px;
height:150px;
background-color:lightgreen;
border:1px solid rgba(230,230,230,1);
}



#background-image-prop .parent{
width:150px;
height:150px;
border:1px solid black;
}



#background-origin-prop .parent{
width:150px;
height:150px;
border:10px solid black;
padding:20px;
background-image: url(img/web4college.png);
background-repeat:no-repeat;
background-position:top left;
}


#background-position-prop .parent{
width:150px;
height:150px;
background-image: url(img/web4college.png);
background-repeat:no-repeat;
border:1px solid black;
}


#background-repeat-prop .parent{
width:150px;
height:150px;
border:2px solid black;
background-image:url('img/web4college.png');
}




#background-size-prop .parent{
width:200px;
height:150px;
border:1px solid rgba(220,220,220,1);
background-image: url(img/web4college.png);
background-repeat:no-repeat;
}

#block-size-prop .parent{
width:150px;
height:150px;
background-color:rgb(255,0,0,0.5);
float:left;
margin: 0 20px;
}

#block-size-prop .container {
width:100%;
height:auto;
float:left;	
}


#border-block-color-prop .element{
width:150px;
height:150px;
background-color:rgb(220,220,220,0.5);
border-block: 5px solid black;
}

#border-block-end-color-prop .element{
width:150px;
height:150px;
background-color:lightgreen;
border-block-end: 5px solid red;
}

#border-block-end-style-prop .element{
width:150px;
height:150px;
background-color: lightgreen;
border-block-end: 5px solid red;
}

#border-block-end-width-prop .element{
width:150px;
height:150px;
background-color:lightgreen;
border-block-end: 5px solid red;
}

#border-block-start-color-prop .element{
width:150px;
height:150px;
background-color:lightgreen;
border-block-start: 5px solid red;
}

#border-block-start-style-prop .element{
width:150px;
height:150px;
background-color:lightgreen;
border-block-start:5px solid red;
}

#border-block-style-prop .element{
width:150px;
height:150px;
background-color:lightblue;
border-block:5px solid red;
}

#border-block-width-prop .element{
width:120px;
height:120px;
background-color:rgb(220,220,220,0.5);
border-block: 5px solid red;
}


#border-block-start-width-prop .element{
width:120px;
height:120px;
background-color:rgb(220,220,220,0.5);
border-block-start: 5px solid red;
}


#border-block-end-prop .element{
width:150px;
height:150px;
background-color:lightgreen;
border:10px solid red;

}

#border-block-end-color-prop .element{
width:150px;
height:150px;
background-color:lightgreen;
border-block-end: 5px solid red;
}


#border-image-outset-prop .element{
width:70%;
height:100px;
padding:10px;
border:5px solid red;
border-image-source:url('img/web4college.png');
border-image-width:20px;
border-image-slice: 12;
}

#border-image-repeat-prop .element{
width:70%;
height:100px;
border:10px solid red;
border-image-source:url('img/chrome.png');
border-image-slice:100;
}

#border-image-slice-prop .element{
width:70%;
height:100px;
border:10px solid red;
border-image-source:url('img/web4college.png');
}


#border-image-source-prop .element{
width:70%;
height:100px;
border:10px solid red;
}


#border-image-width-prop .parent{
width:70%;
height:100px;
border:10px solid red;
border-image-source:url('img/web4college.png');
border-image-slice: 12;
}



#border-inline-end-color-prop .element{
width:150px;
height:150px;
background-color:lightgreen;
border-inline-end: 5px solid red;
}

#border-inline-end-style-prop .element{
width:150px;
height:150px;
background-color: lightgreen;
border-inline-end: 5px solid red;
}

#border-inline-end-width-prop .element{
width:120px;
height:120px;
background-color:rgb(220,220,220,0.5);
border-inline-end: 5px solid red;
}

#border-inline-start-color-prop .element{
width:150px;
height:150px;
background-color:lightgreen;
border-inline-start: 5px solid red;
}

#border-inline-start-style-prop .element{
width:150px;
height:150px;
background-color:lightgreen;
border-inline-start:5px solid red;
}

#border-inline-start-width-prop .element{
width:150px;
height:150px;
background-color: lightgreen;
border-inline-start: 5px solid red;
}




.commonElement{
width:100%;
height:auto;
display:flex;
flex-direction:column;
align-items:center;
}


#border-prop .element{
width:150px;
height:150px;
background-color:lightgreen;
}

#border-bottom-color-prop .parent{
width: 150px;
height: 100px;
background-color: lightgreen;
border:10px solid black;
color:green;
}

#border-bottom-left-radius-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 border:10px solid gray;
 outline:1px solid red;
}

#border-bottom-right-radius-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 border:10px solid gray;
 outline:1px solid red;
}


#border-bottom-style-prop .element{
width: 150px;
height: 100px;
background-color: lightgreen;
border:5px solid red;
color:green;
}

#border-bottom-width-prop .element{
width: 150px;
height: 100px;
background-color: lightgreen;
border:10px solid black;
color:green;
}

#border-style-prop .parent{
width: 150px;
height: 150px;
border: 5px solid red;
background-color: lightblue;
color:green;
}

#border-collapse-prop .element{
width:100px;
height:100px;
background-color: rgba(240,240,240,0.5);
padding:10px;
border:10px solid red;
}

#border-collapse-prop table td, #border-collapse-prop table th{
border:1px solid rgba(230,230,230,1);	
}

#border-color-prop .element{
width: 150px;
height: 150px;
border:10px solid black;
color:green;
}



#border-image-outset-prop .parent{
width:70%;
height:100px;
padding:10px;
border:5px solid red;
border-image-source:url('img/web4college.png');
border-image-width:20px;
border-image-slice: 12;
}

#border-image-repeat-prop .parent{
width:70%;
height:100px;
border:10px solid red;
border-image-source:url('img/chrome.png');
border-image-slice:100;
}


#border-image-slice-prop .parent{
width:70%;
height:100px;
border:10px solid red;
border-image-source:url('img/web4college.png');
}


#border-image-source-prop .parent{
width:70%;
height:100px;
border:10px solid red;
}


#border-image-width-prop .parent{
width:70%;
height:100px;
border:10px solid red;
border-image-source:url('img/web4college.png');
border-image-slice: 12;
}





#border-left-color-prop .element{
width: 150px;
height: 100px;
background-color: lightgreen;
border:10px solid black;
color:green;
}

#border-left-style-prop .element{
width: 150px;
height: 100px;
background-color: lightgreen;
border:5px solid red;
color:green;
}

#border-left-width-prop .element{
width: 150px;
height: 100px;
background-color: lightgreen;
border:10px solid black;
color:green;
}

#border-right-color-prop .element{
width: 150px;
height: 100px;
background-color: lightgreen;
border:10px solid black;
color:green;
}

#border-right-style-prop .element{
width: 150px;
height: 100px;
background-color: lightgreen;
border:5px solid red;
color:green;
}


#border-right-width-prop .element{
width: 150px;
height: 100px;
background-color: lightgreen;
border:10px solid black;
color:green;
}

#border-spacing-prop .element{
width:100px;
height:100px;
background-color: rgba(240,240,240,0.5);
padding:10px;
border:10px solid red;
}
#border-spacing-prop table td, #border-spacing-prop table th{
border:1px solid rgba(230,230,230,1);	
}

#border-top-color-prop .element{
width: 150px;
height: 150px;
background-color: lightgreen;
border:10px solid black;
color:green;
}


#border-top-left-radius-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 border:10px solid gray;
 outline:1px solid red;
}

#border-top-right-radius-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 border:10px solid gray;
 outline:1px solid red;
}




#border-top-style-prop .element{
width: 150px;
height: 100px;
background-color: lightgreen;
border:5px solid red;
color:green;
}

#border-top-width-prop .parent{
width: 150px;
height: 100px;
background-color: lightgreen;
border:10px solid black;
color:green;
}


#border-top-prop.element{
width: 150px;
height: 150px;
background-color: lightgreen;
}

#border-width-prop .parent{
width: 150px;
height: 150px;
background-color: lightgreen;
border:5px solid black;
}

#bottom-prop .parent{
width:150px;
background-color: lightblue;
position:absolute;
}

#box-shadow-prop .element{
width:150px;
height:150px;
background-color: lightblue;
box-shadow:box-shadow: 20px 12px 6px 5px rgba(255,0,0,1) inset;
}


#box-sizing-prop .element{
width:100px;
height:100px;
background-color: rgba(240,240,240,0.5);
padding:10px;
border:10px solid red;
}










#caption-side-prop .element{
width:100px;
height:100px;
background-color: rgba(240,240,240,0.5);
padding:10px;
border:10px solid red;
}
#caption-side-prop table{
border-collapse:collapse;
}

#caption-side-prop table td, #caption-side-prop table th{
border:1px solid rgba(230,230,230,1);	
}


#clear-prop .element{
 width:33%;
 float:left;
 color:white;
}

#color-prop .parent{
width:70%;
height:100px;
border:1px solid black;
}


#column-count-prop .element{
width:200px;
height:150px;
background-color: lightgreen;
}

#column-fill-prop .parent{
width:300px;
height:150px;
background-color:lightgreen;
column-count:4;
}

#column-gap-prop .element{
width:300px;
height:150px;
background-color: lightgreen;
column-count:4;
}

#column-rule-color-prop .element{
width:300px;
height:150px;
background-color:lightgreen;
column-count:4;
column-rule:5px solid red;
}


#column-rule-style-prop .element{
width:300px;
height:150px;
background-color: lightblue;
column-count:4;
column-rule:5px solid red;
}


#column-rule-width-prop .element{
width:300px;
height:150px;
background-color:lightgreen;
column-count:4;
column-rule:5px solid red;
}

#colum-span-prop .element{
width:300px;
height:auto;
border:1px solid black;
column-width:100px;
}

#colum-span-prop .heading{
column-span:all;	
}


#column-width-prop .element{
width:300px;
height:150px;
border:1px solid black;
}

#content-prop .element{
 width:150px;
 height:150px;
 background-color:lightblue;
}

#content-prop .paragraph2:before{
content: "Note: ";
}

#content-prop .paragraph3:before{
 content: url('img/web4college.png');
}

#content-prop .paragraph4:before{
content: open-quote;
}

#content-prop .paragraph5:before{
content: open-quote;
}
#content-prop .paragraph5:after{
content: close-quote;
}





#cursor-prop .element{
width:150px;
height:100px;
border:1px solid black;
}

#direction-prop .element{
width:150px;
height:150px;
border:1px solid black;
}

#display-prop .element{
width:70%;
height:100px;
border:5px solid black;
}


#empty-cells-prop .element{
width:100px;
height:100px;
background-color: rgba(240,240,240,0.5);
padding:10px;
border:10px solid red;
}

#empty-cells-prop table td, #empty-cells-prop table th{
border:1px solid rgba(230,230,230,1);
}


#filter-prop .element{
width:70%;
height:100px;
background:green;
color:white;
}


#flex-basis-prop .parent{
display:flex;
width:250px;	
background-color:rgba(230,230,230,1);
flex-wrap:wrap;
}



#flex-direction-prop .element{
display:flex;
width:200px;	
background-color:rgba(230,230,230,1);
}


#flex-direction-prop .element p{
background-color:rgba(150,150,150,1);
color:white; 
border-radius:3px;
padding:6px;
margin-right:2px;
}


#flex-basis-prop .child{
background-color:rgba(150,150,150,1);
color:white; 
border-radius:3px;
padding:6px;
margin-right:2px;
}



#flex-grow-prop .parent{
display:flex;
width:250px;	
background-color:rgba(230,230,230,1);
flex-wrap:wrap;
}

#flex-grow-prop .child{
background-color:rgba(150,150,150,1);
color:white; 
border-radius:3px;
padding:6px;
margin-right:2px;
}


#flex-shrink-prop .parent{
display:flex;
width:250px;	
background-color:rgba(230,230,230,1);
flex-wrap:wrap;
}

#flex-shrink-prop .child{
background-color:rgba(150,150,150,1);
color:white; 
border-radius:3px;
padding:6px;
margin-right:2px;
}


#flex-wrap-prop .parent{
display:flex;
width:150px;	
background-color:rgba(230,230,230,1);
}

#flex-wrap-prop .parent p{
background-color:rgba(150,150,150,1);
color:white; 
border-radius:3px;
padding:6px;
margin-right:2px;
}

#float-prop .element{
 width:150px;
 height:150px;
 background-color:lightblue;
}

#font-family-prop .element{
font-size:22px;
}

#font-feature-settings-prop .element{
font-size:22px;
}



#font-kerning-prop .element{
font-size:22px;
}





#font-variant-numeric .fonts{
font-size:22px;	
}


#font-weight-prop .parent{
font-weight:700;
}
#font-weight-prop .child{
font-size:22px;	
}


#grid-auto-columns-prop .element{
 display:grid;
 width:100%;
 height:300px;
 grid-template-columns:20px;
 background-color:lightblue;
}

#grid-auto-columns-prop .item{
 background-color:lightgreen;
 grid-column:2/3;
}

#grid-auto-flow-prop .element{
 display:grid;
 width:100%;
 height:300px;
 background-color:lightblue;
}
#grid-auto-flow-prop  .item{
 background-color:lightgreen;
 border:1px solid red;
}


#grid-auto-rows-prop .element{
 display:grid;
 width:100%;
 height:300px;
 grid-template-rows:20px;
 background-color:lightblue;
}


#grid-auto-rows-prop  .item{
 background-color:lightgreen;
 grid-row:2/3;
}







#grid-area-prop .element{
 display:grid;
 width:100%;
 height:300px;
 grid-template-rows:30% 1fr 40%;
 grid-template-columns:30% 1fr 40%;
 grid-template-areas:"a b c" "d e f" "g h i";
 background-color:lightblue;
}
#grid-area-prop .item{
 background-color:green;
 color:white;
}



#grid-column-end-prop .element{
 display:grid;
 width:100%;
 height:300px;
 grid-template-columns:30% 1fr 40%;
 background-color:lightblue;
}
#grid-column-end-prop .item{
 background-color:lightgreen;
 grid-column-start:1;
}


#grid-column-start-prop .element{
 display:grid;
 width:100%;
 height:300px;
 grid-template-columns: 30% 1fr 40%;
 background-color:lightblue;
}

#grid-column-start-prop .item{
 background-color:lightgreen;
 grid-column-end:4;
}


 
 
#grid-column-prop .element{
 display:grid;
 width:100%;
 height:300px;
 grid-template-columns:30% 1fr 40%;
 background-color:lightblue;
}

#grid-column-prop .item{
 background-color:lightgreen;
}


#grid-row-prop .element{
 display:grid;
 width:100%;
 height:300px;
 grid-template-rows:30% 1fr 40%;
 background-color:lightblue;
}
#grid-row-prop .item{
 background-color:lightgreen;
}

#grid-row-end-prop .element{
 display:grid;
 width:100%;
 height:300px;
 grid-template-rows:30% 1fr 40%;
 background-color:lightblue;
}
#grid-row-end-prop .item{
 background-color:lightgreen;
 grid-row-start:1;
}


#grid-row-start-prop .element{
 display:grid;
 width:100%;
 height:300px;
 grid-template-rows:30% 1fr 40%;
 background-color:lightblue;
}
#grid-row-start-prop .item{
 background-color:lightgreen;
 grid-row-end:4;
}

#grid-template-areas-prop .element{
 display:grid;
 width:100%;
 height:300px;
 grid-template-rows:30% 1fr 40%;
 grid-template-columns:30% 1fr 40% 30px;
 background-color:lightblue;
		
}
#grid-template-areas-prop .item{
 background-color:lightgreen;
 grid-area:b; 
}

#grid-template-rows-prop .element{
 display:grid;
 width:100%;
 height:300px;
 background-color:lightblue;
}
#grid-template-rows-prop .item{
 background-color:lightgreen;
 grid-row-start:2;
 grid-row-end:3;
}

#grid-template-columns-prop .element{
 display:grid;
 width:100%;
 height:300px;
 background-color:lightblue;
}
#grid-template-columns-prop .item{
 background-color:lightgreen;
 grid-column-start:2;
 grid-column-end:3;
}

#grid-template-prop .element{
 display:grid;
 width:100%;
 height:300px;
 background-color:lightblue;
}
#grid-template-prop .item{
 background-color:lightgreen;
 grid-row:2/3;
 grid-column:1/2;
}

#height-prop .parent{
width:120px;
height:250px;
background-color:rgb(255,0,0,0.5);
}

#height-prop .child{
width:100%;
min-height:150px;
max-height:200px;
}


#inline-size-prop .parent{
width:120px;
height:120px;
background-color:rgb(255,0,0,0.5);
}

#inline-size-prop .child{
width:100%;
min-width:100px;
max-width:200px;
}


#justify-content-prop .parent{
display:flex;
width:300px;	
background-color:rgba(230,230,230,1);
flex-wrap:wrap;
}


#justify-content-prop .child{
background-color:rgba(150,150,150,1);
color:white; 
border-radius:3px;
padding:6px;
margin-right:2px;
}

#justify-items-prop .parent{
display:grid;
width:300px;	
height:150px;
grid-template-rows:100%;
grid-template-columns:100%;
background-color:rgba(230,230,230,1);
}

#justify-items-prop .child{
background-color:rgba(150,150,150,1);
color:white;
}

#justify-self-prop .parent{
display:grid;
width:300px;	
height:150px;
grid-template-rows:100%;
grid-template-columns:100%;
background-color:rgba(230,230,230,1);
}
#justify-self-prop .child{
background-color:rgba(150,150,150,1);
color:white;
}

#left-prop .element{
width:150px;
background-color: lightblue;
position:absolute;
}

#right-prop .element{
width:150px;
background-color: lightblue;
position:absolute;
}


#top-prop .element{
width:150px;
background-color: lightblue;
position:absolute;
}

#letter-spacing-prop .element{
 width:100%;
 height:100px;
 background-color:lightblue;
}


#line-height-prop .element{
 width:150px;
 height:100px;
 background-color:lightblue;
}

#margin-bottom-prop .parent{
width:70%;
height:100px;
border:5px solid red;
}

#margin-left-prop .parent{
width:150px;
height:150px;
border:1px solid red;
}

#margin-right-prop .parent{
width:150px;
height:150px;
border:1px solid red;
}

#margin-top-prop .parent{
width:150px;
height:150px;
border:1px solid red;
}

#marker-prop .arrowBody, #marker-end-prop .arrowBody, #marker-mid-prop .arrowBody, #marker-start-prop .arrowBody{
stroke-width:10;
stroke:red;
fill:none;
}




#mask-composite-prop .element{

width:70%;
height:100px;
background:green;
color:red;
-webkit-mask-image:url("img/chrome.png"), url("img/web4college.png");
-webkit-mask-size:60px,50px;
-webkit-mask-position:30px 60px,10px;
-webkit-mask-repeat:no-repeat;

}
 
 #mask-clip-prop .element{
width:70%;
height:100px;
background:green;
border:10px solid red;
padding:10px;
-webkit-mask-image:url(img/web4college.png);
}


#mask-image-prop .element{
width:70%;
height:100px;
background:green;
color:white;
}

#mask-origin-prop .element{
height:100px;
background:green;
border:10px solid red;
padding:10px;
-webkit-mask-image:url(img/web4college.png);
-webkit-mask-repeat:repeat;
color:white;
}




#mask-position-prop .parent{
width:100%;
height:100px;
border:1px solid black;	
box-sizing:border-box;
}


#mask-position-prop .element{
width:100%;
height:100px;
background:green;
color:white;
-webkit-mask-image:url(img/web4college.png);
-webkit-mask-repeat:no-repeat;
}


#mask-repeat-prop .element{
width:70%;
height:100px;
background:green;
-webkit-mask-image:url(img/web4college.png);
}

#mask-size-prop .parent{
width:100%;
height:100px;
border:1px solid black;	
box-sizing:border-box;
}

#mask-size-prop .element{
width:70%;
height:100px;
background:green;
color:white;
-webkit-mask-image:url(img/web4college.png);
-webkit-mask-repeat:no-repeat;
}



#max-height-prop .parent{
width:150px;
height:150px;
border:1px solid black;
overflow:auto;
}

#max-width-prop .parent{
width:150px;
height:150px;
border:1px solid black;
}

#min-width-prop .parent{
width:150px;
height:150px;
border:1px solid black;
}



#min-height-prop .parent{
width:150px;
height:150px;
border:1px solid black;
}


#mix-blend-mode-prop .element{
 width:100%;
 height:150px;
 background-color:lightblue;
}

#opacity-prop .parent{
width:70%;
height:100px;
background:green;
color:white;
}

#order-prop .parent{
display:flex;
width:200px;	
background-color:rgba(230,230,230,1);
}
#order-prop .parent p{
border:1px solid black;
padding:6px;
margin-right:2px;
}
#order-prop .current{
background-color:green;
color:white;	
}

#outline-offset-prop .parent{
width:70%;
height:100px;
border:5px solid white;
outline:5px solid red;
color:green;
margin:5px;
}

#outline-color-prop .parent{
width:70%;
height:100px;
border:5px solid white;
outline:5px solid red;
color:green;
}

#outline-style-prop .parent{
width:70%;
height:100px;
border:5px solid white;
outline:5px solid red;
color:green;
}




#outline-width-prop .parent{
width:70%;
height:100px;
border:2px solid white;
outline:2px solid red;
}

#outline-style-prop .parent{
width:70%;
height:100px;
border:5px solid white;
outline:5px solid red;
color:green;
}



#outline-width-prop .parent{
width:70%;
height:100px;
border:2px solid white;
outline:2px solid red;
}


#overflow-prop .element{
width:90px;
height:80px;
border:1px solid black;
overflow:auto;
}


#overflow-wrap-prop .element{
width:50px;
height:120px;
border:1px solid black;
}


#overflow-x-prop .parent{
width:80px;
height:120px;
border:1px solid black;
overflow-x:auto;
}

#overflow-x-prop .child{
min-width:115px;
height:auto;	
}


#overflow-y-prop .parent{
width:90px;
height:100px;
border:1px solid black;
overflow-y:auto;
}

#padding-bottom-prop .parent, #padding-top-prop .parent, #padding-right-prop .parent, #padding-left-prop .parent{
width: 150px;
height: 150px;
background-color: lightgreen;
border:1px solid black;
}



#perspective-prop .parentElement{
 perspective:300;
}

#perspective-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 transform:rotateY(60deg);
}


#perspective-origin-prop .parentElement{
perspective:400px;
}

#perspective-origin-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 transform:rotateY(60deg);
}




#position-prop .parentOfparent{
max-height:100px;
overflow:auto;	
}

#position-prop .parent{
width:100%;	
height:300px;
background-color:rgba(230,230,230,1);
position:relative;
}

#position-prop .child{
background-color:lightgreen;
width:100px;
top:30px;
right:30px;
}

#resize-prop .parent{
width:150px;
height:150px;
border:1px solid black;
overflow:auto;
}


#row-gap-prop .element{
 display:grid;
 width:150px;
 height:150px;
 grid-template-rows:30% 1fr 40%;
 color:white;
}
#row-gap-prop .item1{
 background-color:red;
 grid-row:1/2;
}
#row-gap-prop .item2{
 background-color:green;
 grid-row:2/3;
}
#row-gap-prop .item3{
 background-color:blue;
 grid-row:3/4;
}




#scroll-margin-bottom-prop .page {
 width:278px;
 height:296px;
 border:2px solid yellow;
 scroll-snap-align: end none;
}
#scroll-margin-bottom-prop .docContainer {
  width: 300px;
  height:300px;
  border:2px solid red;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  scroll-snap-type:y mandatory;
}



#scroll-margin-left-prop .img {
 width:296px;
 height:275px;
  border:2px solid yellow;
 scroll-snap-align: none end;
}
#scroll-margin-left-prop .photoGallery {
  width: 300px;
  height:300px;
  border:2px solid red;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}



#scroll-margin-right-prop .img {
width:296px;
 height:275px;
  border:2px solid yellow;
 scroll-snap-align: none end;
}
#scroll-margin-right-prop .photoGallery {
  width: 300px;
  height:300px;
  border:2px solid red;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}



#scroll-margin-top-prop .page {
 width:278px;
 height:296px;
 border:2px solid yellow;
 scroll-snap-align: end none;
 box-sizing: border-box;
}
#scroll-margin-top-prop .docContainer {
  width: 300px;
  height:300px;
  border:2px solid red;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  scroll-snap-type:y mandatory;
}




#scroll-padding-bottom-prop .page {
 width:275px;
 height:300px;
 scroll-snap-align: end none;
}


#scroll-padding-bottom-prop .docContainer {
  width: 300px;
  height:300px;
  border:2px solid red;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  scroll-snap-type:y mandatory;
}


#scroll-padding-left-prop .img {
 width:300px;
 height:275px;
 scroll-snap-align: none start;
}

#scroll-padding-left-prop .photoGallery {
  width: 300px;
  height:300px;
  border:2px solid red;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}


#scroll-padding-right-prop .img {
 width:300px;
 height:275px;
 scroll-snap-align: none end;
}

#scroll-padding-right-prop .photoGallery {
  width: 300px;
  height:300px;
  border:2px solid red;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
}



#scroll-padding-top-prop .page {
 width:375px;
 height:300px;
 scroll-snap-align: start none;
}
#scroll-padding-top-prop .docContainer {
  width: 300px;
  height:300px;
  border:2px solid red;
  overflow-x: hidden;
  overflow-y: auto;
  white-space: nowrap;
  scroll-snap-type:y mandatory;
}



#scroll-snap-align-prop .img {
 width:250px;
 height:250px;
 border:4px solid yellow;
}


#scroll-snap-align-prop .photoGallery {
  width: 300px;
  height:300px;
  border:5px solid red;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  scroll-snap-stop: always;
}


#scroll-snap-type-prop .img {
 width:300px;
 height:300px;
 scroll-snap-align: none center;
}

#scroll-snap-type-prop .photoGallery {
  width: 300px;
  height:300px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}




#shape-outside-prop .left {
  float: left;
  width: 40%;
  height: 12ex;
}


#shape-margin-prop .left {
  float: left;
  width: 40%;
  height: 12ex;
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
}






#stroke-dasharray-prop .child{
fill:lightgreen;
stroke:red;
stroke-width:30px; 
}


#stroke-dashoffset-prop .child{
fill:lightgreen;
stroke:red;
stroke-width:30px; 
stroke-dasharray:20px;
}

#stroke-linejoin-prop .child{
fill:red;
stroke:blue;
stroke-width:50px; 
}


#stroke-width-prop .child{
fill:lightgreen;
stroke:red;
}



#tab-size-prop #element1{
 width:200px;
 height:100px;
}

#tab-size-prop #element2{
 width:200px;
 height:100px;
}


#table-layout-prop #tableLayout{
border-collapse:collapse;
width:300px;
}

#table-layout-prop #tableLayout td, #table-layout-prop #tableLayout th{
border:1px solid rgba(230,230,230,1);	
}

#text-align-prop .parent{
width:250px;
height:150px;
border:1px solid black;
text-align:center;
}

#text-align-prop .child{
width:100%;
height:100%;	
background-color:lightblue;
}


#text-align-last-prop .element{
width:150px;
height:150px;
background-color:lightblue;
}

#text-decoration-color-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 text-decoration-line:underline;
}


#text-decoration-skip-ink-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 text-decoration-line:underline;
}

#text-decoration-line-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
}


#text-decoration-style-prop .element{
 width:150px;
 height:100px;
 background-color:lightblue;
 text-decoration-line:underline;
}


#text-emphasis-color-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 border:1px solid gray;
 -webkit-text-emphasis-style:filled circle;
 -webkit-text-emphasis-position:under;
}


#text-emphasis-position-prop .element{
 width:150px;
 height:100px;
 background-color:lightblue;
 border:1px solid gray;
 -webkit-text-emphasis-style:open circle;
}


#text-emphasis-style-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 border:1px solid gray;
 -webkit-text-emphasis-position:under;
}

#text-indent-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 border:1px solid gray;
}


#text-overflow-prop .element{
 width:100px;
 height:30px;
 white-space:pre;
 background-color:lightblue;
 overflow:hidden;
}


#text-shadow-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
}

#text-transform-prop .parent{
width:100px;
height:100px;
border:1px solid black;
}



#text-underline-position-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 border:1px solid gray;
 text-decoration: underline solid blue;
}



#transform-style-prop .parent{
perspective:300px;	
 width:100px;
 height:100px;
 background-color:red;
}
#transform-style-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 transform:rotateY(50deg);
}
#transform-style-prop .element1{
 width:100px;
 height:100px;
 background-color:lightgreen;
 transition: transform 3s;
 transform:rotateX(30deg);
}


#transform-origin-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 transition: transform 3s;
}
#transform-origin-prop .element:hover{
 transform:rotateZ(360deg);
}

#transform-prop .parentElement{
 perspective:300px;
}

#transform-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
}



#transform-prop .translatex:hover{
transform: translateX(50px);	
}

#transform-prop .translatey:hover{
transform: translateY(50px);	
}


#transform-prop .translatez:hover{
transform: translateZ(50px);	
}


#transform-prop .translate3d:hover{
transform: translate3D(50px,50px,50px);
}

#transform-prop .rotatex:hover{
transform: rotatex(50deg);	
}

#transform-prop .rotatey:hover{
transform: rotatey(50deg);	
}

#transform-prop .rotatez:hover{
transform: rotatez(50deg);	
}

#transform-prop .rotate:hover{
transform: rotate(50deg);	
}

#transform-prop .scalex:hover{
transform: scaleX(2);	
}
#transform-prop .scaley:hover{
transform: scaleY(2);	
}

#transform-prop .scale:hover{
transform: scale(2,3);	
}

#transform-prop .skewx:hover{
transform: skewX(30deg);	
}

#transform-prop .skewy:hover{
transform: skewY(40deg);	
}

#transform-prop .skew:hover{
transform: skew(40deg,40deg);
}






#transition-delay-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 transform:rotateZ(0deg);
 transition-property: transform;
 transition-duration:4s;
}
#transition-delay-prop .element:hover{	
 transform:rotateZ(360deg);
}



#transition-duration-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 transform:rotateZ(0deg);
 transition-property: transform;
 transition-duration:4s;
}
#transition-duration-prop .element:hover{	
 transform:rotateZ(270deg);
}


#transition-property-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 transform:rotateZ(0deg);
 transition-property: transform;
 transition-duration:4s;
}

#transition-property-prop .element:hover{
 background-color:lightgreen;
 width:200px;
}



#transition-timing-function-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 transform:rotateZ(0deg);
 transition-property: transform;
 transition-duration:4s;
}
#transition-timing-function-prop  .element:hover{	
 transform:rotateZ(270deg);
}


#user-select-prop .element{
 width:150px;
 height:150px;
 background-color:lightblue;
}


#vertical-align-prop .parent{
width:200px;
height:100px;
background-color:lightgreen;
}

#vertical-align-prop .child{	
line-height:100px;	
background-color:lightblue;
}


#visibility-prop .container1 { 
width:150px;
height:auto;
background-color:lightblue;
}

#white-space-prop .parent{
width:120px;
height:120px;
border:1px solid black;
}

#white-space-prop .child{
min-width:115px;	
}

#width-prop .parent{
width:120px;
height:120px;
background-color: lightgreen;
}

#width-prop .child{
min-width:100px;
max-width:200px;
height:auto;	
}


#word-break-prop .element{
width:80px;
height:150px;
border:1px solid black;
}


#word-spacing-prop .element{
 width:150px;
 height:150px;
 background-color:lightblue;
}




#writing-mode-prop .element{
 width:100px;
 height:100px;
 background-color:lightblue;
 border:1px solid gray;
}



#z-index-prop .box1, #z-index-prop .box2{
 width:100px;
 height:100px;
 position:absolute;
 color:white;	
}



#z-index-prop .box1{
background-color:red;
}


#z-index-prop .box2{
 background-color:green;	
 top:30px;
 left:30px;
}