edit css for html(bluedict)

user_16326782 0
Viewed 67

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

css html
3 Answers

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>

user_12982890

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!

user_82045250

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>

user_169344670
Related