How so I display a rectangle using CSS?-CodePudding

I’m trying to create a rectangle in CSS but it does not show up.

My code is

h1 {
    font: Italic 28pt Ghotic;
}
h1 {color:darkslategray;
}
h1 { text-align: center;}


.rectangle {
    position: relative;
    width: 100px;
    height: 20px;
    background-color: rgb(24, 75, 75);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relightenment by Natalia</title>
    <link rel="stylesheet" href="relightenment.css">
</head>
<body>
    <h1> Relightenment </h1>
 <script src ="relightenment.js"></script>
</body>
</html>

I tried #rect , #rectangle and .rectangle instead of .rect & I tried doing it in html but both do not work. Watched a fee videos, weren’t helpful

CodePudding user response：

It looks like you define the class in your CSS but don't actually assign it to any elements in your HTML. Try adding a div and assigning it a class of "rectangle" - I've added it into your HTML below.

Now your CSS will look for ".rectangle" (interpreted by humans as "rectangle class") and apply the desired styling.

h1 {
    font: italic 28pt Gothic;
    color:darkslategray;
    text-align: center;
}

.rectangle {
    position: relative;
    width: 100px;
    height: 20px;
    background-color: rgb(24, 75, 75);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Relightenment by Natalia</title>
    <link rel="stylesheet" href="relightenment.css">
</head>
<body>
    <h1> Relightenment </h1>
    <div ></div>
 <script src ="relightenment.js"></script>
</body>
</html>

There is also an opportunity to consolidate some of your CSS. Any styling that is applied to the same element can be included in one set of curly braces. I've made those changes above. Lastly, keywords like "italic" must not be capitalized, and be certain to check spelling as Gothic was misspelled in your code.

Hope this helps - if you have more questions, I've found the WebDevSimplified YouTube channel to be super helpful with intro to CSS.

CodePudding user response：

Try adding a display: block to your styles, if didn't work try adding a class name to the element in html like this <div ></div>.

CodePudding user response：

Here's my solution.

h1 {
  font: italic 28pt Ghotic;
  color: darkslategray;
  text-align: center;
}

.rectangle:before {
  position: absolute;
  max-width: 220px;
  height: 20px;
  background-color: rgb(24, 75, 75);
  margin: 0 auto;
  text-align: center;
  content: '';
  top: 0;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Relightenment by Natalia</title>
  <link rel="stylesheet" href="relightenment.css">
</head>

<body>
  <h1 > Relightenment </h1>
  <script src="relightenment.js"></script>
</body>

</html>