I tried to create a square but its not coming

I tried to create a square but its not coming
0

#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%;


#4

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


#5

Not necessary, because the CSS is in the file named square.css


#6

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


#7

It is all in the details. :wink:


#8

Thanks.
I thought the color property would change it.


#9

The color property is for changing text color.


#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;
}


#11

Center horizontally on the page? Vertically? Or both?


#12

horizontally
but i also like to know how to center vertically


#13

I created the following code you can play around with to see how everything centers.
HTML

<!DOCTYPE html>

<head>
  <title>csstransi</title>
  <link rel="stylesheet" type="text/css" href="shapes.css">
</head>

<body>
  <div class="shapes">
    <h1>Shapes</h1>
    <div class="shape square"></div>
    <div class="shape circle"></div>
    <div class="shape triangle"></div>
  </div>
</body>

</html>

CSS

body {
  height: 100%;
}

h1 {
  background: white;
  margin: 0;
}

.shapes {
  text-align: center; /* centers text or text elements like h1, h2, h2, p, span */
  border: 1px solid black;
  width: 90%;
  height: 200px;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.shape {
  display: inline-block; /* makes each shape be on same horizontal line */
  width: 100px;
  height: 100px;
  margin: 10px;
}

.square {
  background-color: gray;
}

.circle {
  border-radius: 50%;
  background-color: red;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent blue transparent;
}

#14

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