html with css inside textarea

Question

I have html page where I define my style as code in head:

< style type="text/css" style="margin: 0;padding: 0;font-family: Helvetica, Arial, sans-serif;">

    * { margin:0; padding:0; }
    * { font-family: Helvetica, Arial, sans-serif; }
    body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; width:100%!important; height:100%; }
    a { color:#2BA6CB; }
    .btn { text-decoration:none; color:#FFF; background-color:#2a2c2d; padding:14px 16px; font-weight:bold; margin-right:10px; text-align:center; cursor:pointer; display:inline-block; }
    table.social { background-color:#ebebeb; }
    table.body-wrap { width:100%; padding-top:50px; }
    table.footer-wrap { width:100%; clear:both!important; }
    .footer-wrap .container td.content  p { border-top:1px solid rgb(215,215,215); padding-top:15px; }
    .footer-wrap .container td.content p { font-size:10px; font-weight:bold; }
    h1,h2,h3 { font-family:Helvetica, Arial, sans-serif; line-height:1.1; margin-bottom:15px; color:#2a2c2d; }
    h1 { font-weight:700; font-size:40px; color:#2a2c2e; }
    h2 { font-weight:700; font-size:22px; margin-top:25px; }
    h3 { font-weight:700; font-size:16px; margin-top:25px; }
    p, ul { margin-bottom:10px; font-weight:normal; font-size:14px; line-height:1.4; }
    p { color:#6c6f70; }
    div.lead p { font-size:17px; font-weight:700; color:#2a2c2d; }
    ul li { margin-left:5px; list-style-position:inside; }
    .container { display:block!important; max-width:600px!important; margin:0 auto!important; clear:both!important; }
    .content { padding:25px; max-width:600px; margin:0 auto; display:block; }
    .content table { width:100%; font-size:14px; }
    .log-details { background-color:#2a2c2d; color:#FFF; padding:20px; margin-bottom:15px; }
    .log-details td { padding-top:2px; padding-bottom:2px; }
    th { width:110px; text-align:left; }

    @media only screen and (max-width: 600px) {

    a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important; }
    div[class="column"] { width: auto!important; float:none!important; }
    table.social div[class="column"] { width:auto!important; }

    }
</style>

It is used to send newsletter. Then I have to render this HTML page inside a TextArea on an other page. All good so far.

After I save it to the database when it renders the code into TextArea I have broken css on my primary page. What happens is, it takes css it finds in textarea and adds it to primary page. This is the tag it adds to header.

< link rel="stylesheet" href="?1409044831" type="text/css">

Can anyone help me to avoid that? Many thanks!

Kyle Kyle · Accepted Answer · 2014-08-26T08:58:37

You have malformed the style tag in your head section, the correct way to structure it is:

<style type="text/css">
    .selector {margin: 0;padding: 0;font-family: Helvetica, Arial, sans-serif;
    * { margin:0; padding:0; }
    * { font-family: Helvetica, Arial, sans-serif; }
    body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none;}
</style>

The CSS selectors and rules must reside within a properly closed set of <style> tags.

html with css inside textarea

1 Answers