How can I have two different styles in the same page - php

Question

I have inside the loop two DIV and I need put a style to one and another to the other DIV.
I do not know if I can do it with PHP, JS or CSS. This is my code:
-- the styles (this styles are in the same page, because I have a general style that I include) --
<?php
$style_1 = '<style>
.content .postcontent-0 .layout-item-0 { margin-bottom: 7px; }
.content .postcontent-0 .layout-item-1 { border-spacing: 10px 0px; border-collapse: separate; }
.content .postcontent-0 .layout-item-2 { border-top-style:solid; background: #ffffff; }
</style>';
$style_2 = '<style>
.content .postcontent-0 .layout-item-0 { color: #083752; background: ; border-collapse: separate; }
.content .postcontent-0 .layout-item-1 { color: #083752; }
.content .postcontent-0 .layout-item-2 { border-style:Double; border-radius: 15px; }
.content .postcontent-0 .layout-item-3 { padding-right: 10px;padding-left: 10px; }
</style>';
?>
-- the view
<?php for ($i = 0; $i < $contador; $i++) { ?>
<!--Here begin the STYLE_1-->
<div class="content-layout-wrapper layout-item-0">
<div class="content-layout layout-item-1">
<div class="content-layout-row">
<div class="layout-cell layout-item-2">
<p> Text #1 </p>
</div>
</div>
</div>
</div>
<!--Here END the STYLE_1-->
<!--Here begin the STYLE_2-->
<div class="postcontent postcontent-0 clearfix">
<div class="content-layout-wrapper layout-item-0">
<div class="content-layout-row">
<div class="content-layout layout-item-1">
Text #2
</div>
<div class="layout-cell layout-item-2" >
<p>
Text #3
</p>
</div>
</div>
</div>
<div class="content-layout">
<div class="content-layout-row">
<div class="content-layout layout-item-3">
<p>Text # 4</p>
</div>
</div>
</div>
</div>
<!--Here END the STYLE_2-->
<?php } // for i ?>

Answer 1

You can use different class name for two separate div but if you want to use this without change the existing class name then use inline css.Try this code:
<?php for ($i = 0; $i < $contador; $i++) { ?>
<!--Here begin the STYLE_1-->
<div class="content-layout-wrapper layout-item-0" style="margin-bottom: 7px;">
<div class="content-layout layout-item-1" style=" border-spacing: 10px 0px; border-collapse: separate; ">
<div class="content-layout-row">
<div class="layout-cell layout-item-2" style="border-top-style:solid; background: #ffffff;">
<p> Text #1 </p>
</div>
</div>
</div>
</div>
<!--Here END the STYLE_1-->
<!--Here begin the STYLE_2-->
<div class="postcontent postcontent-0 clearfix">
<div class="content-layout-wrapper layout-item-0" style="color: #083752; background: ; border-collapse: separate;">
<div class="content-layout-row">
<div class="content-layout layout-item-1" style="color: #083752;">
Text #2
</div>
<div class="layout-cell layout-item-2" style"border-style:Double; border-radius: 15px;">
<p>
Text #3
</p>
</div>
</div>
</div>
<div class="content-layout">
<div class="content-layout-row">
<div class="content-layout layout-item-3" style="padding-right: 10px;padding-left: 10px;">
<p>Text # 4</p>
</div>
</div>
</div>
</div>
<!--Here END the STYLE_2-->
<?php } // for i ?>