This post provides several code snippets that make it easy for beginning (or otherwise) web designers to grab and go. Browse the library and use what is helpful.
Custom CSS stylesheet
Your CSS stylesheet must be linked in your HTML file. This link appears in the <head> tag of the HTML document. Be sure the filename matches exactly your CSS filename. Additionally, be sure that your link to your CSS stylesheet is the last item that appears in your <head> tag. Finally, make sure the CSS stylesheet is in the same folder as your HTML file.
HTML Code Snippet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A blank HTML template</title>
<meta name="description" content="Blank HTML template">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><!--notice that bootstrap styles come BEFORE your custom stylesheet-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Level 1 heading</h1>
<h2>Level 2 heading</h2>
<h3>Level 3 heading</h3>
<h4>Level 4 heading</h4>
<p>Paragraph text exmaple</p>
<ul>
<li>List Items</li>
</ul>
<a href="#">Anchor Tag Text</a>
<!-- BOOTSTRAP JS STYLES GO AT THE END OF THE DOCUMENT-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>CSS Code Snippet - save as style.css
You can add any custom CSS to any of these components
/* YOUR CUSTOM STYLESHEET */
/* GLOBAL TYPOGRAPHY STYLES */
h1 {
font-size:3rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
p, li, a {
font-size: 1rem;
}Result
Level 1 heading
Level 2 heading
Level 3 heading
Level 4 heading
Paragraph text exmaple
- List Items