edit css for html(bluedict)-CodePudding

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)?

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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!