HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel = "stylesheet" href = "style.css"/>
<meta charset="UTF-8">
<title>Book Fair</title>
</head>
<body>
<div class= "page">
<header class="header">
<div class="name">
<button class="sidebarbtn" onclick="Menu()">
→
</button>
Book Fair
</div>
<div class="left-side">
Cart
SignIn
</div>
</header>
<!-- Side bar -->
<aside class = "sidebarcon">
<h3>Book Categories</h3>
<ul>
<li>Action</li>
<li>Romance</li>
</ul>
</aside>
</main>
</div>
<!-- JS -->
<script>
function Menu(){
document.querySelector(".sidebarbtn").classList.add(".sidebarcon.open");
}
</script>
</body>
</html>
CSS code
.sidebarbtn{
font-size: 30px;
border: none;
color: brown;
padding: 10px;
background: none;
}
.sidebarcon{
position: fixed;
transform: translateX(-10rem);
width: 10rem;
}
.sidebarcon.open{
transform: translateX(0);
}
I have create a navbar, from that I wanted to create a sidebar. I suspect there is a problem with my JS script but I am unable to find the fault. I am trying to use the classList.add() method here. I have searched everywhere and tried all possibility.
Unlike querying a selector, when you add a style class to an element using classList.add() you do not include the leading .. Additionally, in this case, you want to add the opening style class to the sidebar, not the button.
Try something like this:
.sidebarbtn{
font-size: 30px;
border: none;
color: brown;
padding: 10px;
background-color: blue;
}
.sidebarcon{
position: fixed;
transform: translateX(-10rem);
width: 10rem;
background-color: red;
}
.openSidebar{
transform: translateX(0);
}
ML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel = "stylesheet" href = "style.css"/>
<meta charset="UTF-8">
<title>Book Fair</title>
</head>
<body>
<div class= "page">
<header class="header">
<div class="name">
<button class="sidebarbtn" onclick="Menu()">
→
</button>
Book Fair
</div>
<div class="left-side">
Cart
SignIn
</div>
</header>
<!-- Side bar -->
<aside class = "sidebarcon">
<h3>Book Categories</h3>
<ul>
<li>Action</li>
<li>Romance</li>
</ul>
</aside>
</div>
<!-- JS -->
<script>
function Menu(){
document.querySelector(".sidebarcon").classList.add("openSidebar");
}
</script>
</body>
</html>
Related
I've all my CSS and Javascript inside my HTML file on Django which looks as follows:
<!doctype html>
<html lang="en">
<head>
<title>Dashboard</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script>
function toggleSidebar(){
document.getElementsByClassName("sidebar");
}
</script>
<style type="text/css">
.toggle-btn {
position:absolute;
left:180px;
top:70px
}
.toggle-btn span {
display:block;
width:30px;
height:5px;
background:#000000;
margin: 5px 0px;
}
.sidebar {
height:100%;
width:160px;
position: fixed;
z-index:1;
top:0;
let:0;
background-color:#111;
overflow-x: hidden;
padding-top:70px;
}
.sidebar.active {
left:0px
}
.sidebar a {
padding:6px 8px 6px 16px;
text-decoration: none;
font-size:18px;
color: #818181;
display:block;
}
.sidebar a:hover {
color:#ffffff;
}
</style>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://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>
<div class="toggle-btn">
<span></span>
<span></span>
<span></span>
</div>
<div class="sidebar">
Categories
Test 1
Test 2
Test 3
Test 4
</div>
</body>
<header class="site-header">
<nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="#">Home.com</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="#">Logout</a>
</div>
</div>
</div>
</nav>
<section class="hero">
<div class="hero-inner">
<h1>Centered Text</h1>
</div>
</section>
</header>
</body>
</html>
I wanted to toggle the sidebar, that means triggering a hide function when someone clicks on the hamburger menu indicated by the spann tag, as you can probably tell by the following:
<script>
function toggleSidebar(){
document.getElementsByClassName("sidebar");
}
</script>
So far it's not working yet as excepted, given that I'm an absolute beginner to CSS & Javascript. I would be super appreciative if someone could point out the things I might have done wrong.
In CodePen
I could fix the toggle functionality, hope this helps:
function toggleSidebar() {
var x = document.getElementsByClassName("sidebar")[0];
if(x.classList.contains('active')) {
x.classList.remove('active')
return;
}
x.classList.add('active')
}
if you check the sidebar div you'll see that class is being added and removed on toogle
You can use jQuery's toggle method. You need to have an onclick event on your .toggle-button with the name of your method (toggleSidebar), so it knows to call it when it's clicked.
You can also add an EventListener to your button instead of onclick.
.toggle-btn {
position: absolute;
left: 180px;
top: 70px;
}
.toggle-btn span {
display: block;
width: 30px;
height: 5px;
background: #000000;
margin: 5px 0px;
}
.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 70px;
}
.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 18px;
color: #818181;
display: block;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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://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>
<script>
function toggleSidebar() {
$(".sidebar").toggle();
}
</script>
</head>
<body>
<div class="toggle-btn" onclick="toggleSidebar()">
<span></span>
<span></span>
<span></span>
</div>
<div class="sidebar">
Categories
Test 1
Test 2
Test 3
Test 4
</div>
</body>
So I am trying to show some content that's inside of a div but for some reason when I use the chrome debug tools to inspect the code, it's just grayed out.
I can't see anything that's inside the class modal why is that?
#mainDiv {
margin: 10px;
}
.modal-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-content: center;
}
.modal{
background-color: white;
width: 30%;
height: 30%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>EasyModal</title>
<link rel="stylesheet" href="./style/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div id="mainDiv">
<h1>Easy Modal</h1>
<Button id="modal-btn" type="button" class="btn btn-primary">Buy Now</Button>
</div>
<div class="modal-bg">
<div class="modal">
<h2>Hello World</h2>
<label for="email">Email: </label>
<input type="text">
<button>Subscribe</button>
</div>
</div>
</body>
</html>
This is due to modal class. If you inspect, you'll observe that there is a display: none; property in modal class, which i guess is default bootstrap .modal class.
To solve this, use a different name for .modal class.
i'm trying to change the active class to the selected item but i could not did it right i've searched on google and here on stack overflow as well and i found the toggle() method so i give it a go on my code but i think i didn't use it right
here is my code:
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<nav class="main-nav">
<div class="logo">
<p class="text">company logo</p>
</div>
<ul class="main-nav-items">
<li class="main-nav-item active" onclick="active()">home</li>
<li class="main-nav-item active" onclick="active()">contact</li>
<li class="main-nav-item active" onclick="active()">about</li>
</ul>
</nav>
<script src="script.js" charset="utf-8"></script>
</body>
</html>
CSS
.main-nav{
display: flex;
align-items: center;
}
.main-nav-items{
display: flex;
width: 1200px;
list-style-type: none;
justify-content: flex-end;
align-items: center;
font-size: 18px;
padding: 10px;
}
.main-nav-item{
font-size: 18px;
padding: 10px;
border-radius: 10px;
}
.main-nav li.active{
background-color: #542188;
padding: 10px;
border-radius: 10px;
color: white;
}
.main-nav-item:hover{
background-color: #ddd;
color: white;
}
JS:
function active(){
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList=items[i].classList.replace("active","")
}
document.querySelector(".main-nav-item").classList.toggle("active");
}
thank you in advance
first add Jquery to your html doc like this
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<nav class="main-nav">
<div class="logo">
<p class="text">company logo</p>
</div>
<ul class="main-nav-items">
<li class="main-nav-item" onclick="active(1)" id="1">home</li>
<li class="main-nav-item" onclick="active(2)" id="2">contact</li>
<li class="main-nav-item" onclick="active(3)" id="3">about</li>
</ul>
</nav>
<script src="script.js" charset="utf-8"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!-- here is jquery plugin -->
<script>
function active(id){
$("#"+id).on("click",function(){
$(this).toggleClass("active");
});
}
</script>
</body>
</html>
<li class="main-nav-item active" onclick="active(this)">home</li>
<li class="main-nav-item active" onclick="active(this)">contact</li>
<li class="main-nav-item active" onclick="active(this)">about</li>
you need to pass the element that was clicked, to get a reference on which element would remain to be active.
function active(target){
/* this block is to remove all the active class on all main-nav-item
* [if this scenario is the one you really needed to do
* else remove this part]
*/
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList.remove("active");
}
/* use the parameter "target" on which you passed using the html code
* "onclick(this)" and toggle the class "active"
*/
target.classList.toggle("active");
}
PS.
if all your main-nav-item has the same flow,
you could use, "querySelectorAll" to get all the main-nav-item and from there, add an event listener for click, and you remove all the "onclick" on your HTML
<ul class="main-nav-items">
<li class="main-nav-item active">home</li>
<li class="main-nav-item active">contact</li>
<li class="main-nav-item active">about</li>
</ul>
var mainNavItems = document.querySelectorAll(".main-nav-item");
Array.forEach(mainNavItems, function( navItem ) {
navItem.addEventListener("click", function(){
/* again, you could remove this block of codes, if you
* just intend to toggle the active class */
var items=document.getElementsByClassName("main-nav-item");
for(var i=0;i<items.length;i++){
items[i].classList.remove("active");
}
this.classList.toggle("active");
});
});
I try to load different pages using an ajax call. But the pages are not appearing on the main page.
This is the file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
<script src="Scripts/jquery.min.js"></script>
<link href="Content/site.css" rel="stylesheet">
<style>
#newslinks li {
display: inline-block;
margin-right: 20px;
}
#newslinks li a {
padding: 5px 10px;
background-color: white;
color: black !important;
text-decoration: none;
}
#newslinks li a:hover {
background-color: rgb(110,138,195);
color: white !important;
}
#headlines #newsItem {
margin-top: 10px;
padding: 20px;
border: 1px solid white;
}
</style>
<script>
$(document).ready(function() {
$('#newslinks a').click(function () {
var url = $(this).attr('href');
$('#healines').load(url + ' #newsItem');
//evt.pr.preventDefault();
return false;
});
}); // end ready
</script>
</head>
<body>
<div class="wrapper">
<header>
JAVASCRIPT <span class="amp">&</span> jQUERY: THE MISSING MANUAL
</header>
<div class="content">
<div class="main">
<h1>News Headlines</h1>
<ul id="newslinks">
<li>Today’s News</li>
<li>Yesterday’s News</li>
<li>Last Week’s News</li>
</ul>
<div id="headlines"></div>
</div>
</div>
<footer>
<p>JavaScript & jQuery: The Missing Manual, 3rd Edition, by David McFarland. Published by O'Reilly Media, Inc.</p>
</footer>
</div>
</body>
</html>
So you see three links. But if you click on one of the links nothing happens. I am using IIS. And yes it is enabled.
Thank you
Misspelled headlines in $('#healines').load(url + ' #newsItem');.
I have got a code for navbar which is working perfectly... Also i have got the code for a collapsable side bar which is also working perfectly. But now i dont understand how to add these two together so that i get a page with navbar and sidebar together.
This is my code for navbar - (complete with html):
<html>
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
<!-- Font styles -->
<style type="text/css">
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
</style>
</head>
<body style="background-color:#E6E6FA">
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
</body>
</html>
Those links in the head tag - i got it by simply googling.
Also, my sidebar code is here -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
But not now. how do I combine these? I want a page which will have both the top navbar and the sidebar. I have all combinations of pasting the codes but with no luck. What i have latest now - after combining these two is this -
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<link rel="stylesheet" href="styles.css">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
<!-- Sidebar nav -->
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<!-- Sidebar Ends -->
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
By combining it like this, The side bar is working correctly but the top navbar is just a big white block. Nothing in there.
Divide both the sections differently. Put both in one row and give col-2 to the sidebar side and col-10 to the nav-bar side. This way you'll be having a side and nav-bar both side by side, you can also use the nav-bar side for creating a normal webpage. All the best!
First of all, your missing an opening style tag just after your <title>both</title>. (You have a closing /style tag just before your nav). This will apply inline styles for the time being. You should see what you want to achieve now.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
/* styles */
</style>
</head>
But ultimately, you need to copy these styles into a CSS file and then link the CSS file in your HTML like this: <link rel="stylesheet" href="css/styles.css">. That is presuming, your stylesheet is called "styles.css" and is inside a 'CSS' folder.
Have a look at the HTML link tag for linking your external CSS file.