In Part-1 keyboard game, I developed entire game using only JavaScript and HTML. Now in Part-2, I have added CSS for styling. There are no code changes in JavaScript from the previous article. So please refer ‘app.js‘ from Part-1.
Here is updated Glitch project:
External style sheet can be linked to an HTML document using the <link> tag. The <link> tag goes inside the <head> section. Our ‘index.html‘ looks like:
<!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" />
<link rel="stylesheet" href="style.css" />
<script type="module" src="./app.js"></script>
<title>Document</title>
</head>
<body>
<div class="center">
Let's Play Game:
<div id="kbgame-app"></div>
</div>
</body>
</html>
In ‘style.css‘ I have tried to give good look and fit contents in the web page as per screen size. Our ‘style.css‘ looks like:
.center {
background-color: yellow;
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100%;
font-size: 30px;
}
h1 {
font-size: calc(85vh);
padding: 0px;
margin: 0px;
}
Adding CSS made styling and controlling the UI components much easier.