The default stylesheet that materialize serves can be customised to your hearts content with Sass. (You should be using Sass anyway becasue it’s awesome).

Download the Sass version, and inside you’ll find a scss file for each component. In _typography.scss the global font size is set at the start:

html{
  line-height: 1.5;

  @media only screen and (min-width: 0) {
    font-size: 14px;
  }

  @media only screen and (min-width: $medium-screen) {
    font-size: 14.5px;
  }

  @media only screen and (min-width: $large-screen) {
    font-size: 15px;
  }

  font-family: $font-stack;
  font-weight: normal;
  color: $off-black;
}

You can see here that we start at 14px and move up to 15px responsively. If you change this and save, the sass will automatically re-compile a materialize.css with the updated values. Note if you want to change the global settings for header tags, you can do so in _variables.scss:

$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
$off-black: rgba(0, 0, 0, 0.87) !default;
// Header Styles
$h1-fontsize: 4.2rem !default;
$h2-fontsize: 3.56rem !default;
$h3-fontsize: 2.92rem !default;
$h4-fontsize: 2.28rem !default;
$h5-fontsize: 1.64rem !default;
$h6-fontsize: 1.15rem !default;

Lastly, it’s not good praqctice to have text floating loose in a div. I would wrap in a p tag:

<div class="col s6">
          <!-- And here is a lot of content that I want to contain -->
          <p>test test  test test  test test  test test  test test  test test</p>
        </div>

And actually lastly, you can always override the base font size in your css file like this:

body {
    font-size: 16px;
}

materializecss doesn’t have any native support for changing font-size so you are going to have to either add a separate id or class to hook your css.

in case you only want to change the font-size of the contained text (add #csshook to your stylesheet):

<div class="col s6" id="csshook">
       <!-- And here is a lot of content that I want to contain -->
       test test  test test  test test  test test  test test  test test 
</div>

in case you want to do both headers and text (add .csshook to your stylesheet):

h4 class="text-grey center-align csshook">Submissions</h4>
<div class="divider"></div>
   <div class="col s6 csshook">
      <!-- And here is a lot of content that I want to contain -->
      test test  test test  test test  test test  test test  test test 
   </div>

depending on which result you prefer use the id or class to change the font-size.

also make sure you initialize your stylesheet AFTER the materializecss stylesheet in your page.

You are using “id” and “class” to identify element which isn’t correct.

Try as below.

<section id="submissions">

If you want both text in large size just add same class in <section class="something"> and <div class="col s6 domething">

.submissions {
  font-size: 25px !important;
}

<section class="white submissions">
  <div class="row">
    <div class="col s12">
      <div class="section">
        <br/><br/>
        <h4 class="text-grey center-align">Submissions</h4>
        <div class="divider"></div>
        <div class="col s6 submissions">
          <!-- And here is a lot of content that I want to contain -->
          test test test test test test test test test test test test
        </div>
      </div>
    </div>
  </div>
</section>

or

Try two diff classes..

.submissions {
  font-size: 25px !important;
}

.submis {
  font-size: 18px !important;
}

<section class="white submissions">
  <div class="row">
    <div class="col s12">
      <div class="section">
        <br/><br/>
        <h4 class="text-grey center-align">Submissions</h4>
        <div class="divider"></div>
        <div class="col s6 submis">
          <!-- And here is a lot of content that I want to contain -->
          test test test test test test test test test test test test
        </div>
      </div>
    </div>
  </div>
</section>

I’m trying to fit in one page section large amount of text. I use materialize css framework on my website, but I don’t know how to change the font-size in this one section.

Here is my section:

#submissions {
  font-size: 10px !important;
}

<section id="submissions" class="white">
  <div class="row">
    <div class="col s12">
      <div class="section">
        <br/><br/>
        <h4 class="text-grey center-align">Submissions</h4>
        <div class="divider"></div>
        <div class="col s6">
          <!-- And here is a lot of content that I want to contain -->
          test test  test test  test test  test test  test test  test test 
        </div>
      </div>
    </div>
  </div>
</section>

To do this I’m trying to use styles.css something like this:

#submissions {
    font-size: 10px !important;
}

Can anyone can advise me something?