Looking to enhance the visual appeal of my website by incorporating CSS properties for background changes. Take a peek at my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ceee3e3f8fff8feedfcccb9a2bfa2be">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg bg-body-light mt-4">
<div class="container-fluid">
<a class="navbar-brand" id="brandname" href="#">Mohit Tembhurkar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link p-4" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link p-4" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link p-4" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link p-4" href="#">Contact</a>
</li>
</ul>
</div>
<button type="button" class="btn btn-lg" id="hireme">Hire Me</button>
</div>
</nav>
<div class="container" id="hcon" >
<div class="row">
<div class="col-2">
column 1
</div>
<div class="col-5">
column 2
</div>
<div class="col-5">
column 3
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42202d2d36313630233202776c716c70">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Encountering issues when trying to style the background color and margins in the CSS stylesheet. Inline CSS resolves it temporarily:
body {
background-color: #fdf0d5;;
}
#hcon {
margin: 150px;
}
Seeking assistance on styling everything within the CSS file without interference from Bootstrap or inline CSS. Any guidance would be greatly appreciated.
Opting to exclusively use CSS stylesheet for styling but facing conflicting styles with Bootstrap and inline CSS. How should this be rectified?