Use element to style inside <div>-CodePudding

The emb is not a class but an element. Can I use this element to style the div or, the only way to do it is making emb a class such as .emb?

<div style=emb>
  Hello
</div>

<style>
  emb {
    font-weight: 500;
    font-style: italic;
    background: transparent;
    font-size: 18px
  }
</style>

CodePudding user response：

This is not how it works. You need to do e.g.:

<div >
  Hello
</div>

<style>
  .emb {
    font-weight: 500;
    font-style: italic;
    background: transparent;
    font-size: 18px
  }
</style>

CodePudding user response：

No, you cant use things like that to style element. Here, style is a attribute to div tag. You can use it directly to style your div.

<div style="font-weight: 500;
       font-style: italic;
       background: transparent;
       font-size: 18px;"> 
Hello
</div>

But inorder to define class or id, you need to use class or id attribute. Or you can use tagname to style.

<div class='emb'> 
Hello
</div>

<style>

   .emb {
       font-weight: 500;
       font-style: italic;
       background: transparent;
       font-size: 18px
    }
    
</style>

CodePudding user response：

You need to use emb as a class or id for styling your div tag and you can also use a separate css file.

<div > 
Hello
</div>

<style>

    .emb {
   font-weight: 500;
   font-style: italic;
   background: transparent;
   font-size: 18px
    }

</style>

Here you can also use in-line css also.

<div style="font-weight: 500;
       font-style: italic;
       background: transparent;
       font-size: 18px;"> 
Hello
</div>

CodePudding user response：

Mistake in OP's code

style=emb is not a correct way to assign the class to an element.

Correction

To use an element to style inside div, you have to give it a class or id that maps the element to the style.css where you define the styles. Also ,replace emb with .emb, you have to add . decorator while using class

Some info

We have mainly 3 types of CSS decorators which we use to associate the HTML component with CSS component.

Simple tag like

<div > 
        Hello
</div>

<style>
   div {
   font-weight: 500;
    }
</style>

Use class decorator with .

<div > 
        Hello
</div>

<style>
   .emb {
   font-weight: 500;
    }
</style>

Use class decorator with .

<div id="emb"> 
        Hello
</div>

<style>
   #emb {
   font-weight: 500;
    }
</style>

Working code

<div >
  Hello
</div>

<style>
  .emb {
    font-weight: 500;
    font-style: italic;
    background: transparent;
    font-size: 18px
  }
</style>

Alternate method with code

<div id="emb">
  Hello
</div>

<style>
  #emb {
    font-weight: 500;
    font-style: italic;
    background: transparent;
    font-size: 18px
  }
</style>