How do you go about customizing portal? Do you usually create your own custom class for each components?

Hello, 

I’ve been looking into manage portal customization and wanted to ask few questions to get some better understanding prior to start implementing any codes. 

1. For customizing pages, do you usually write your own custom class or start from scratch? 
2. Is there a documentation where I can look up about default classes (ex: quick-link, quick-link-widgets’ that are used? 
3. I am unable to change font size and color for h3 and h5 tag that’s in the below code. I tried both creating a class and injecting style/css directly into the tag (ie. h5). This was odd because I was able to change background color but not the two. Could someone please provide me an insight on this issue?  

<div class="quick-link">
  <div class="quick-link-wrapper">
    <ul class="quick-link-lister">

        <li id="support_solutions" class="test1">
          <a href={{portal.support_solutions_url}} class="quick-link-widgets">
            <span class="circle">
              <span class="icon-browse-solution"></span>
            </span>
            <h3> {% translate portal.browse_solutions %} </h3>
            <h5 style="font-size: 50px;"> {% translate portal.browse_solutions_desc %} </h5>
          </a>
        </li>
    </ul>
  </div>
</div>

/////////////////////////////////////

<style>
  .test1 {

       h3 {
        font-size: 200px; /* This doesn't work */
        background: yellow; /* This works! */
       }
  }
</style>

Thank you very much in advance and please let me know if you need any other info