skip to Main Content

I have the following div with style:

<div class="icon red" style="flex: 0.8">
If I want to move the style from the div attribute , is this the correct way:

    <div class="iconred">
      <style>
        div.iconred {
          flex: 0.8;
        }
      </style>
    </div>

2

Answers


  1. No, this is not correct, if you want to add style to an element, you have options:

    Inline style like how you do first,

    Internal style defined in the section of an HTML page, within a <style> element.

    External style add a link to it in the <head> section of HTML page

    In your case you want to use Internal style so you have to move your style element to the <head> section.

    The correct way:

    <head>
     <style>
          div.iconred {
             flex: 0.8;
          }
     </style>
    </head>
    <body>
        <div class="iconred">
              
        </div>
    </body>
    

    Read more in documentation

    Login or Signup to reply.
  2. <div class="icon red" style="flex: 0.8">

    That div has two different classes: icon and red.

    In CSS you used div.iconred which indicates an element with a single class, the class iconred.

    So you actually should use div.icon.red as it then looks for a div element with both the classes icon and red.

    <head>
      <style>
        div.icon.red {
          flex: 0.8
        }
      </style>
    </head>
    <body>
      <div class="icon red"></div>
    </body>

    The <style> tag has to be always placed within the head element. With the deprecation of the scope attribute, it is no longer valid to place it within the body.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search