css cheat sheet


comments

/* comment goes here */

class selector

.className { }

id selector

#idName { }

applying fonts

body { font-family: Arial, sans-serif; }

text color

h1 { color: red; } h2 { color: #FF0000; }

background color

body { background-color: red; } .className { background-color: #FF0000; }

margins

body { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } body { margin: 100px 150px 100px 80px; }

padding

div { padding-top: 100px; padding-bottom: 100px; padding-right: 150px; padding-left: 80px; } div { padding: 100px 150px 100px 80px; }

lists

/* removes styles */ ul { list-style-type: none; margin: 0; padding: 0; } /* removes line breaks */ li { display: inline-block; }

links

/* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; }

connecting html to css file

<!-- add this to your html file's header --> <link rel="stylesheet" href="style.css">