title: Shopify Theme Development - How to use section.block.variable in CSS or inline style?
body: <p>I am trying to use a variable in my Shopify code to declare the background and font color...</p>
  
  <p>Please can someone direct me as to where I am going wrong?</p>
  
  <p>Massive thanks, here is my code:</p>
  
  <pre><code>&lt;div class="section contacts-section" style="background-color: {{ block.settings.contacts-background-color }}; color: {{ block.settings.contacts-color }};"&gt;
      &lt;div class="section-inner"&gt;
  
          {% for block in section.blocks %}
              {% if block.type == 'chemical-contact' %}
  
                  &lt;div class="a-contact"&gt;
                      &lt;a class="contact-link box-link" href="{{ block.settings.contact-link }}"&gt;&lt;/a&gt;
  
                      &lt;div class="a-contact-icon"&gt;
                          &lt;img class="contact-icon" alt="Contact Icon" src="{{ block.settings.contact-icon | img_url: 'master' }}"&gt;
                      &lt;/div&gt;
                      &lt;div class="a-contact-content"&gt;
                          {{ block.settings.contact-text }}
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              {% endif %}
          {% endfor %}
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  {% schema %}
      {
          "name": "Chemical Contacts",
          "id": "contacts-section",
          "max_blocks": 2,
          "settings": [
              {
                  "type": "color",
                  "id": "contacts-background-color",
                  "label": "Contacts Background Color",
                  "default": "#EEEDF0"
              },
              {
                  "type": "color",
                  "id": "contacts-color",
                  "label": "Contact Color",
                  "default": "#E20437"
              }
          ],
          "blocks": [
              {
                  "name": "Chemical Contact",
                  "type": "chemical-contact",
                  "settings": [
                      {
                          "id": "contact-icon",
                          "type": "image",
                          "label": "Contact Icon",
                          "type": "image_picker"
                      },
                      {
                          "id": "contact-text",
                          "type": "text",
                          "label": "Contact Text",
                          "default": "info@example.com"
                      },
                      {
                          "id": "contact-link",
                          "type": "url",
                          "label": "Contact Link"
                      }
                  ]
              }
          ]
      }
  {% endschema %}
  
  {% stylesheet %}
  {% endstylesheet %}
  
  {% javascript %}
  {% endjavascript %}
  </code></pre>
  
  <p>Note this is my attempt, I have also tried putting it in the style section underneath:</p>
  
  <pre><code>&lt;div class="section contacts-section" style="background-color: {{ block.settings.contacts-background-color }}; color: {{ block.settings.contacts-color }};"&gt;
  </code></pre>
  
  <p>Any pointers you can give would be really appreciated, thanks.</p>
  
  <p>Solution: Make sure you're not trying to use block settings if you are only using the section settings...</p>