I tried to create a square but its not coming

HTML-CSS
1

Tell us what’s happening:
I saw the syntax from w3schools “https://www.w3schools.com/howto/howto_css_shapes.asp”.
I know I must have done something silly, please help.

Your code so far


<!DOCTYPE html>
<head>
	<title>csstransi</title>
	<link rel="stylesheet" type="text/css" href="square.css">
</head>
<body>
	<h1>This is a square</h1>
	<div class="square">
	</div>
</body>
</html>

...CSS

.square{
	width:50px;
	height:50px;
	border-radius:50%;
	color:black;
}
2

You have to put css in <style></style> tags.

3

There is a circle there, but you can not see it, because you did not change the background-color property of the square class. If you want a square, you need to remove the border-radius: 50%;

2 Likes
4

border-radius: 50% will turn a square into a circle.

1 Like
6

Ah, okay. I seem to have missed that detail.

8

Thanks.
I thought the color property would change it.

10

How can I get the square to center

html

<!DOCTYPE html>
<head>
	<title>csstransi</title>
	<link rel="stylesheet" type="text/css" href="shapes.css">
</head>
<body>
	<h1>Shapes</h1>
	<div class="body">
	</div>
</body>
</html>

css

.body{
	width: 70px;
	height: 100px;
	background-color: gray;
	justify-content: center;
}
12

horizontally
but i also like to know how to center vertically

14

how can i position the shapes at various places in the screen