Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS Cheatsheet Project
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="styles.css">
<title>CSS Selectors and Specificity</title>
<body>
<h1>CSS Selectors and Specificity</h1>
<p>If you are going to use an external CSS style sheet, you need to link it in the html, like so:</p>
<pre>
<code>
&ltlink rel="stylesheet" type ="text/css" href="styles.css"&gt;
</code>
</pre>
<div class="thinline"></div>
<p>If you want to use inline styles, use this:</p>
<pre>
<code>
&ltp style="color:blue;"
</code>
</pre>
<div class="thinline"></div>
<br>
<table>
<tr>
<th>Selectors</th>
<th>CSS</th>
<th>HTML coding</th>
<th>Description</th>
<th>Notes</th>
</tr>
<tr>
<td>Class</td>
<td>.toast</td>
<td> &ltp class="toast"&gt&lt/p&gt</td>
<td>Selects all elements with a class of toast</td>
<td>Can be used for multiple elements</td>
</tr>
<tr>
<td>ID</td>
<td>#beans</td>
<td>&lth1 id="beans"&gy&lt/h1&gt</td>
<td>Selects all elements with an ID of beans</td>
<td>Typically only used once</td>
</tr>
</table>
<br>
<div class="thinline"></div>
<h2>Common CSS Selectors</h2>
<ul>
<li>color</li>
<li>background color</li>
<li>font</li>
<li>padding</li>
</ul>
</body>
</html>
body {
background-color: lightgrey;
}
header, title, h1, h2, th, p {
font-family: monospace;
color: blueviolet
}
pre code {
background-color: #eee;
border: 1px solid blueviolet;
display: block;
padding: 20px;
}
table, th, td {
border: 2px solid black;
background-color: rgb(147, 135, 224);
padding: 10px;
}
.thinline {
border: 2px solid black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.