edit css for html(bluedict) - html

Question

I'm a beginner and I need help.
I want to put a Word between two borders
My Code
#hw {
font-family: Nazanin;
font-size: 200%;
font-weight: normal;
direction: rtl;
text-align: center;
color: #6dbaee;
}
.h1{
border-top: 1px solid #00bdf2;
border-bottom: 1px solid #00bdf2;
padding: 10px 0;
line-height: 150%;
position: relative;
}
<p id="hw">beauty</p>
What should I do to put my word between two borders(like the one in my CSS)?

Answer 1

In your example you use .h1 but there is no class called h1 in your html.
In CSS these things are called selectors.
With your HTML we can directly use the p selector to bind the CSS to it.
Note: that this will be set on every p element in your document, so it's important to think to what CSS you bind to what element.
#hw {
font-family: Nazanin;
font-size: 200%;
font-weight: normal;
direction: rtl;
text-align: center;
color: #6dbaee;
}
p {
border-top: 1px solid #00bdf2;
border-bottom: 1px solid #00bdf2;
padding: 10px 0;
line-height: 150%;
position: relative;
}
<p id="hw">beauty</p>

Answer 2

You already have all you need. Just add the class h1 to the paragraph element, like so:
<p id="hw" class="h1">beauty</p>
Perfecto! 🤌

Answer 3

You could do everything more simple. Put word into h1 tag and give him an id. For tag h1 you should make not .h1, but h1 selector.
#hw {
font-family: Nazanin;
font-size: 200%;
font-weight: normal;
direction: rtl;
text-align: center;
color: #6dbaee;
}
h1 {
border-top: 1px solid #00bdf2;
border-bottom: 1px solid #00bdf2;
padding: 10px 0;
line-height: 150%;
position: relative;
}
<h1 id="hw">beauty</h1>