HTML email doesn't work :/

I got a problem with my HTML newsletter. When you run the code as an Internet website, all's clear. But when I import it on Outlook, all the CSS doesn't count. Is it normal? Thank's

Email here

HTML & CSS here

  

    <style>
        body {
            max-width: 600px;
            background-color: rgb(67, 153, 186);
        }
        
        h1 {
            color: rgb(214, 196, 0);
        }
        
        h2 {
            font-weight: bold;
        }
        
        * {
            font-family: "Univers LT 45", sans-serif;
        }
        
        p {
            background-color: rgba(255, 255, 255, 0.2)
        }
        
        #NewsletterPRONA {
            flex-direction: column;
            rgb(67, 153, 186);
        }
        
        #news {}
        
        #yellow {
            background-color: rgb(214, 196, 0);
            width: 100%;
            margin-bottom: auto;
            overflow: hidden;
        }
        
        #yellowL {
            float: left;
            width: 50%;
        }
        
        #yellowR {
            position: relative;
            float: right;
            width: 50%;
        }
        
        #h1v2 {
            color: rgb(67, 153, 186);
            background-color: rgb(214, 196, 0);
        }
        
        #personnel {
            flex-direction: column;
        }
        
        #qsum {
            background-color: rgb(214, 196, 0);
            overflow: hidden;
        }
        
        #divers {
            overflow: hidden;
        }
    </style>

 

<body id="NewsletterPRONA">
   <div id="blue" style="background-color:rgb(67, 153, 186);">
    <div id="news">
        <h1>News</h1>
        <p></p>
    </div>
    <div id="yellow">
        <h1 id="h1v2">Geschäftsverlauf / Déroulement des affaires</h1>
        <div id="yellowL">
            <h1 id="h1v2">Offerten</h1>
            <p>

            </p>
            <h1 id="h1v2">Projekte</h1>
            <p>

            </p>
        </div>
        <div id="yellowR">
            <h1 id="h1v2">Offres</h1>
            <h2>Bruit</h2>
            <p>

            </p>
            <h2>Sols</h2>
            <p>

            </p>
            <h2>Déchets</h2>
            <p>

            </p>
            <h2>EIE</h2>
            <p>

            </p>
            <h2>Physique et acoustique du bâtiment</h2>
            <p>

            </p>
            <h1 id="h1v2">Projets</h1>
            <h2>Bruit</h2>
            <p>

            </p>
        </div>
    </div>
    <div id="personnel">
        <h1>Personal / Personnel</h1>
        <h2>Neueinstellungen / Nouveaux engagements</h2>
        <p></p>
        <h2>Austritte / Départs</h2>
        <p></p>
        <h2>Jubiläum / Jubilé</h2>
        <p></p>
        <h2>Geburtstage / Anniversaires</h2>
        <p></p>
    </div>
    <div id="qsum">
        <h1 style="color: rgb(67, 153, 186);">QSUM/MQSE</h1>
        <div id="yellowL">
            <p></p>
        </div>
        <div id="yellowR">
            <p></p>
        </div>
    </div>
    <div id="divers">
        <h1>Diverses / Divers</h1>
        <div id="yellowL">
            <p></p>
        </div>
        <div id="yellowR">
            <p></p>
        </div>
    </div>
</div>
</body>

Solution

Outlook doesn't support background opacity.

The code you supplied works as a website (as you said), but unfortunately will fall apart in most email clients (not just Outlook). Emails need to use <table>s for layout instead of <div>s. Flexbox won't work in emails, either.

Email code looks more like this:

<table cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td valign="top" style="vertical-align: top;background: #aaaaaa;">
      <span style="color: #333333;">text</span>
    </td>
  </tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" align="center">
  <tr>
    <td valign="top" style="vertical-align: top;">
      <img src="full path to image" alt="alt text" width="50" height="50">
    </td>
  </tr>
</table>

If you rebuild your email by replacing <div>s with <table>s while using CSS that email clients support, this should solve your display issues in Outlook and everywhere else.