CSS style doesn't apply when javascript code is executed

I have no idea what you're doing. The fact that I don't speak Spanish doesn't help either, but I'll try my best.

• You left out the most important information: How do you import the CSS?

• Regardless ot that, the first thing to note is this: Do not use the same id twice.
  <span class="itemName" id="quantity_first_product"> should be <span class="itemName" id="somedifferentid">.

• Next thing is, when I tried to run this, the CSS worked, but I got complete gibberish. It looked like this:
  

• So I added a few rules to make it look better:

  li.row {
      clear: both;
      list-style-type: none;
  }
  

  And that margin on the description doesn't look good at all, so I removed that too:

  .description {
      [...]        
      margin:0px;
  }
  

  Now it looked like this:

  

• So the CSS cleary works on my end. Here's a working example:

  Source of the get-data:

  <form method="get" action = "newEmptyPHP.php">
      <input name = "transactionId" type="hidden" value="some-weird-id" >
      <input name = "transactionState" value="4">
      <textarea name = "mensaje"  rows="1" cols="50">Not everyone speaks spanish</textarea>
      <input type = "submit" value="Submit" >
  </form>
  

  Your php file:

  <?php
  $transactionId = $_REQUEST['transactionId'];
  if ($_REQUEST['transactionState'] == 4):
      $estadoTx = "Transacción aprobada"; ?>        
      <style>
          li.row {
              clear: both;
              list-style-type: none;
          }
          .itemName{  
              color: #727578;
              font-size :16px;
              font-weight: bold;
              float: left;
              padding-left:25px;
              margin-right: 25px;
          }
  
          .description{   
              color: #4ea6bc;
              font-size :18px;
              font-weight: bold;
              float : left;
              padding-left: 15px;
  
              margin: 0px;
          }
      </style>
      <div class="container-fluid"> 
          <ul>
              <li class="row">
                  <span class="itemName" id="quantity_first_product">Estado de la transaccion: </span>
                  <p class="description"><span class="description"  id="state">This description is in English, because I don't speak spanish.</span></p>
              </li>
              <li class="row">
                  <span class="itemName">ID de la transaccion: </span>
                  <p class="description"><span class="description" id="transactionID" >This description is in English, because I don't speak spanish.</span></p>        
              </li>                            
          </ul>
      </div>
  
      <script type="text/javascript">
          var transaction_state;
          var transactionState_span = document.getElementById("state");
          transaction_state = <?php echo json_encode($estadoTx); ?>;
          transactionState_span.innerHTML = transaction_state.toString();
  
          var transaction_id;
          var transactionID_span = document.getElementById("transactionID");
          transaction_id = <?php echo json_encode($transactionId); ?>;
          transactionID_span.innerHTML = transaction_id.toString();
      </script>
  <?php 
      else:
          $estadoTx = $_REQUEST['mensaje']; ?>
          <h1>Determinar que sucede</h1>
          Something's missing here, compadre.
  <?php endif; ?>