Search code examples
htmlcssinline

Override User Agent Stylesheet to make text accessible

I am trying to make a simple, standalone page with menus that populate the text box (the one with "Left 1"). The text in the box is way to small on mobile and on desktop computers.

enter image description here

I am trying to make this text box legible but can't find a way to. I tried adding code to override the User agent but it didn't work - ideally I would want to do this inline.

enter image description here

Here's an anonymized codepen because I don't want to share the whole project publicly

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="css-ta-mere.css" />
        <title>martians on earts?</title>


<script src="html2canvas-example-master/html2canvas.min.js"></script>



<script type="text/javascript">



</script>

</head>

<body>

<div>



</div>
  
  <span style="color:#FFFFFF;"><h1 style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;">
  


  
        
        

          <style>
    .button {
        background-color: #ff7676;
        border: none;
        color: white;
        padding: 8px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 25px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 8px;
    }
    .button:hover {
        background-color: #7d7d7d;
    }
    
    
            @font-face {
            font-family: Metropolis-Thin;
            src: url(fonts/Metropolis-Thin.otf);
        }

        html,
        body {
            /* height: 100%;
            width: 100%;
            overflow: auto; */
            /* pointer-events: none; */
            background-color: black;
            /* margin: 0; */
            font-family: Metropolis-Thin;
            /* overscroll-behavior: contain; */
        }
    
    a:link {
  color: deeppink; 
  background-color: transparent; 
  text-decoration: none;
}

a:visited {
  color: coral;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: wheat;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: darkturquoise;
  background-color: transparent;
  text-decoration: underline;
}

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



</style>
            
  
  <table width="800" border="0" align="center">

<tr>
    <span style="color:#FFFFFF;"><span style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;"><span style="font-size:72px;"><td colspan="2" align="center">bleep bloop<br />
<br />

</td></span></span></span></span>
</tr>


    <tr>

          

    <td align="center">LEFT
    <br/>
  
  
<input type="text" id="leftLabel" value="Left 1" style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;" style="font-size:22px;">



<br/>

<select id="leftSelect" style="font-size:22px;">
  <option value="l1" selected>Flow</option>


</select>


  </td>
  
    
    <td align="center">RIGHT
    <br/>




<input type="text" id="rightLabel" value="Right 1" style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;" style="font-size:22px;" class="override";>

<br/>

<select id="rightSelect" style="font-size:22px;">
  <option value="r1" selected>Flow</option>


  
</select>



<br/>

</td>

</tr>

<tr>

<td colspan="2" align="center">
<button id="pandabear" class="button" style="h1">BUTTON</button>
</td>
</tr>


</table>




</body>
</html>
Solution

  • The issue is that you have 2 style properties in the same tag. This causes the second style tag to be unaccounted for. The code you currently have is: <input type="text" id="leftLabel" value="Left 1" style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light;" style="font-size:22px;">. The second style="" is ignored. you can combine them into one by replacing it with <input type="text" id="leftLabel" value="Left 1" style="font-family:Metropolis-Thin,arial,helvetica,sans-serif,light; font-size:22px;">. Though it is best practice to have a separate <style> tag and add all the custom properties inside there.