Shopify

Only last style is applied because you are overriding the styles on the class. Either add the styles inline or create a unique class for each block using id. I am creating a different class for each block using block id in the code below.

<div class="page-width" data-section-id="{{ section.id }}">

  <style>
    {% for block in section.blocks %}
    .announcement-{{block.id}} {
      font-size: {{block.settings.fontSize | append: "px"}};
    }
    {% endfor %}
  </style>

  {% if section.blocks.size > 0 %}
        {% for block in section.blocks %}

        <div class="announcement-{{block.id}}">
            {{block.settings.announcementText}}
        </div>
        
        {% endfor %}
  {% endif %}

</div>



{% schema %}
{
  "name": "Test Section",
  "class": "test-section",
  "max_blocks": 5,
  "blocks": [
    {
      "type": "sample-block",
      "name": "Block",
      "settings": [
        {
          "type": "text",
          "id": "announcementText",
          "label": "Announcement Text"

        },
        {
            "type":   "range",
            "id":     "fontSize",
            "min":       10,
            "max":       50,
            "step":      4,
            "unit":      "px",
            "label":     "Font Size",
            "default":   10
        }
      ]
    }
  ]
}
{% endschema %}