NMD 345 Web Applications

CSS property names

Tap m to navigate by menu or space/arrows to go forward or backward.

CSS display


	display: block ;
	display: inline ;
	display: flex ;
	display: grid ;

CSS float


	float: left ;
	float: right ;

CSS position


	position: absolute ;
	position: relative ;
	position: fixed ;
	position: sticky ;

CSS transition


	transition: all 2s ease-in-out ;

CSS TRBL


	/* These four directions: */
	margin-top: 10px ;
	margin-right: 20px ;
	margin-bottom: 30px ;
	margin-left: 40px ;
	/* can be condensed to this: */
	margin: 10px 20px 30px 40px ;

CSS clear


	clear: both ;

CSS font-family


	font-family: verdana ;
	font-family: georgia ;

CSS font-size


	font-size: 12px ;
	font-size: 2em ;

CSS hover


	div:hover { background-color: orange ; }

CSS left (inline)


	left: 100px ;
	left: 10% ;
	left: 10vw ;

CSS top (block)


	top: 50px ;
	top: 20% ;
	top: 20vh ;

CSS margin


	margin: 20px ;
	margin-left: 10vw ;

CSS opacity


	opacity: 1 ;
	opacity: .5 ;
	opacity: 0 ;

CSS padding


	padding: .5em ;

CSS @media


	@media (max-width: 600px) {
	  h1 {
	    font-size: 4em;
	  }
	}

CSS background-color


	background-color: crimson ;

CSS border


	border: blue solid 4px ;

CSS box-shadow


	box-shadow: .5em 1em 2em gray ;

CSS text-decoration


	text-decoration: underline dotted ;
	text-decoration: green wavy underline ;
	text-decoration: none ;

CSS text-shadow


	text-shadow: .2em .2em 1em black ;

CSS flex


	display: flex ;
	justify-content: space-between ;
	align-items: center ;

CSS grid


	display: grid ;