HTML element CSS (border-width, border-style, border-color)

We must now get the idea that every element that is created within an HTML page generates a box.
Let's imagine the controls we have created h1, h2, h3, p, em, etc.

if we set the background-color property we will see that the content is inside a rectangle.

We can access the border properties of that rectangle using CSS style sheets; The most important properties we have access to are:

border-width
border-style
border-color

Let's look at an example that initializes these properties:

<!DOCTYPE html>
<html>

<head>
    <title>Problem</title>
    <meta charset="UTF-8">
    <link rel="StyleSheet" href="styles.css" type="text/css">

</head>

<body>
    <p class="question">Who discovered America
        and what year was it?</p>
    <p class="answer">Columbus in 1492</p>
</body>

</html>

CSS CODE:

.Question {
  background-color:#ffff00;
  border-width:1px;
  border-style:solid;
  border-color:#000000;
}
.response {
  border-width:1px;
  border-style:dashed;
  border-color:#000000;
}

As we can see, we have defined two classes, .question which initializes the background color to yellow and then sets the border-width to 1px, the style is solid and the border line color is black.

Then remember that to indicate that an element has this style we must initialize the class property of the respective HTML element:

<p class="question">Who discovered America
and what year was it?</p>

We have done the second defined style with the class .response

.response {
  border-width:1px;
  border-style:dashed;
  border-color:#000000;
}

In this one we have changed the border style to dashed value.

We have the following border styles:

none
hidden
dotted
dashed
solid
double
groove
ridge
insert
outset

Robort Gabriel

Lagos, Nigeria

Skills