Created
September 5, 2023 11:38
-
-
Save bh1995/608a75528f475b8b754639e7feeda4af to your computer and use it in GitHub Desktop.
CSS Cheat Sheet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
<title>CSS Cheat Sheet</title> | |
<link rel="stylesheet" href="styles.css" /> | |
</head> | |
<body> | |
<header> | |
<h1>CSS Cheat Sheet</h1> | |
</header> | |
<div class="container"> | |
<table> | |
<thead> | |
<tr> | |
<th>Property</th> | |
<th>Command</th> | |
<th>Explanation</th> | |
</tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td rowspan="3">Text Properties</td> | |
<td>color</td> | |
<td>Sets the text color.</td> | |
</tr> | |
<tr> | |
<td>font-size</td> | |
<td>Sets the font size.</td> | |
</tr> | |
<tr> | |
<td>font-family</td> | |
<td>Defines the font family.</td> | |
</tr> | |
<tr> | |
<td rowspan="3">Box Model</td> | |
<td>margin</td> | |
<td>Sets the outer margin of an element.</td> | |
</tr> | |
<tr> | |
<td>padding</td> | |
<td>Defines the inner padding of an element.</td> | |
</tr> | |
<tr> | |
<td>border</td> | |
<td>Creates a border around an element.</td> | |
</tr> | |
<tr> | |
<td rowspan="3">Layout</td> | |
<td>width</td> | |
<td>Sets the width of an element.</td> | |
</tr> | |
<tr> | |
<td>height</td> | |
<td>Defines the height of an element.</td> | |
</tr> | |
<tr> | |
<td>display</td> | |
<td>Controls how an element is displayed.</td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: monospace, Arial, sans-serif; | |
background-color: #E6E6FA; | |
margin: 0; | |
padding: 0; | |
} | |
header { | |
background-color: #333; | |
color: #fff; | |
text-align: center; | |
padding: 10px; | |
} | |
h1 { | |
font-size: 36px; | |
} | |
.container { | |
max-width: 800px; | |
margin: 20px auto; | |
background-color: #fff; | |
padding: 20px; | |
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
border-radius: 5px; | |
} | |
h2 { | |
font-size: 24px; | |
margin-top: 0; | |
} | |
.property { | |
margin-bottom: 20px; | |
} | |
.property h3 { | |
font-size: 18px; | |
margin-top: 0; | |
} | |
.property p { | |
font-size: 16px; | |
} | |
table th, | |
table td { | |
padding: 10px; | |
text-align: left; | |
border: 1px solid #ddd; | |
background-color: #f5f5f5; | |
} | |
table th { | |
background-color: #333; | |
color: #fff; | |
} | |
table tr:nth-child(even) { | |
background-color: #e0e0e0; | |
} | |
table tr:nth-child(odd) { | |
background-color: #f0f0f0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment