As a beginner in a coding bootcamp, I have been introduced to the world of bootstrap. While some of my friends shy away from using it for various reasons, I have no choice but to learn it in class. I've experimented with different techniques to style elements, such as adding new classes and being more specific in my CSS selectors, all followed by the !important declaration. However, I'm starting to suspect that my external stylesheet may not be linked properly despite checking multiple times and making adjustments. Unable to get help from my friends who are busy working, I'm turning to the community for assistance!
Here is a snippet of my HTML and CSS code for your review. The CSS may seem basic as it's for testing purposes to figure out how to override the HTML styles. Your time and insight are greatly appreciated.
On a side note, my classmates poke fun at my coding spacing habits. If you think this could be a problem, please feel free to share your thoughts! I'm open to feedback and eager to refine my coding practices before they become ingrained.
.jumbotron h1
{
background-image: url(/img/pizza.png) !important;
}
title
{
font-family: cursive !important;
}<!DOCTYPE html>
<html
lang="en"
>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
>
<link
rel="stylesheet"
type="text/css"
href="/css/custom.css"
>
<meta
charset="UTF-8"
>
<meta
name="viewport"
content="width=, initial-scale=1.0"
>
<meta
http-equiv="X-UA-Compatible"
content="ie=edge"
>
<title>
Pizza World
</title>
</head>
<body>
<nav
class="navbar navbar-expand-lg navbar-light bg-light"
>
<a
class="navbar-brand"
href="#"
>
Pizza World
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span
class="navbar-toggler-icon"
>
</span>
</button>
<div
class="collapse navbar-collapse"
id="navbarSupportedContent"
>
<ul
class="navbar-nav mr-auto"
>
<li
class="nav-item active"
>
<a
class="nav-link"
href="#"
>
Order Online
<span
class="sr-only"
>
(current)
</span>
</a>
</li>
<li
class="nav-item"
>
<a
class="nav-link"
href="#"
>
Menu
</a>
</li>
<form
class="form-inline my-2 my-lg-0"
>
<input
class="form-control mr-sm-2"
type="search"
placeholder="Zip Code"
aria-label="Zip Code"
>
<button
class="btn btn-outline-success my-2 my-sm-0"
type="submit"
>
Search stores near you!
</button>
</form>
</div>
</nav>
<div
class="jumbotron"
>
<h1
class="display-12 myh1class"
>
Hello, world!
</h1>
<p
class="lead"
>
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
</p>
<hr
class="my-4"
>
<p>
It uses utility classes for typography and spacing to space content out within the larger container.
</p>
<p
class="lead"
>
<a
class="btn btn-primary btn-lg"
href="#"
role="button"
>
Learn more
</a>
</p>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js" i
ntegrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
>
</script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
>
</script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
>
</script>
</body>
</html>