How to embed CSS in HTML tags?

Asked

Viewed 758 times

4

I have a CSS file containing the following code.

.texto{

Color: Red;

}

I have the HTML file with these tags:

<html>
<body>

<span class="texto">TEXTO 1<span>
<span class="texto">TEXTO 2<span>
<span class="texto">TEXTO 3<span>

<body>
</html>

How do I embed CSS code in all tags that have the class .texto automatically?

Example:

<html>
<body>

<span class="texto" style="Color: Red;">TEXTO 1<span>
<span class="texto" style="Color: Red;">TEXTO 2<span>
<span class="texto" style="Color: Red;">TEXTO 3<span>

<body>
</html>

I need to send email with formatted HTML.

c# html css asp.net-mvc

  • Correction. Personal sorry, I did not mention that I use ASP.NET MVC C#. Possibly there must be something on the server side that can do this directly in the View when it is loaded. Only I searched but couldn’t find a practical solution.

  • 2

    He did. He’s in tags. http://meta.pt.stackoverflow.com/questions/297/quando-se-deve-colocar-o-nome-da-linguagem-no-t%C3%ADtulo/1911#1911

5 answers

5

Some email programs do well with declared CSS in HTML itself:

<html>
<head>
    <style type="text/css">
    .texto {
        color: red;
     }
    </style>
</head>
<body>

<span class="texto">TEXTO 1<span>
<span class="texto">TEXTO 2<span>
<span class="texto">TEXTO 3<span>

<body>
</html>

But certain things are likely to only work with the attribute style inline in each element, as you put in the question. In this case there is no simple solution, it is usually the case to do it manually even. Remember that CSS in email is always subject to failures (certain email programs accept some properties, others do not).

  • 1

    I agree, I use CSS declared in the CSS itself and have no problem. And it is easier for a possible future support.

3

There is a very interesting project in Github called Premailer.Net by Martin H. Normark to deal precisely with this subject:

C# library for moving CSS to style attributes inline, in order to gain maximum compatibility with email clients.

Example:

string htmlSource = File.ReadAllText(@"C:\caminho\para\email.html");

var result = PreMailer.MoveCssInline(htmlSource);

result.Html         // HTML com o CSS já no atributo `style`.
result.Warnings     // string[] com os eventuais erros durante o processamento.

The Blog to talk about this project:

Place CSS inline in C# and ASP.NET using Premailer.Net

1

Using jquery you can do the following:

<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function() {
    $('.texto').css('color', 'red');
  });
</script>

<body>
  <span class="texto">TEXTO 1<span>
<span class="texto">TEXTO 2<span>
<span class="texto">TEXTO 3<span>
<body>
</html>

This way, it will cause the style tag to be loaded into span when the page is loaded.

  • 1

    But he’s talking about email! No one will let this jQuery run inside an email message.

  • 1

    Thanks for the reply. But I can not use scripts in sending email because email clients do not let run the scripts. At least I tried and it didn’t work.

  • 3

    Missed more jQuery.

  • @Zuul You won the Internet today!

1

Hello, Before sending the text by email, prepare the text for sending, follow a short example with Jquery:

$( "#prepareToSend" ).one( "click", function() {
  $("[class=texto]").css( "color", "red" );
});
.texto{
  color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="texto">email</p>

<button id="prepareToSend">Prepara html para enviar</button>

As Zull posted, you have the Premailer.net Project: Install via Nuget (Package Manager Console):

PM> Install-Package PreMailer.net

See use in controller:

        public ActionResult TesteEmail()
    {
        string htmlFile = System.IO.File.ReadAllText(@"C:Emails\teste.html");

        var htmlToEmail = PreMailer.Net.PreMailer.MoveCssInline(htmlFile,true);// true para remover a tag style do html dps de copiar os estilos para tags no atributo syle:

        return Content(htmlToEmail.Html);
    }

From what I can see in this library, it only moves css to style inline if it is in the html page itself: - Entree:

<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
<style>
    .well {background-color: #f5f5f5;}
    .text-success {color: green;}
    .text-center {text-align: center;}
</style>
</head>
<body>
<div class="well">
    <h1 class="text-center text-success">Hello World</h1>
</div>
</body>
</html>

Exit from Content(htmlToEmail.Html);:

<div class="well" style="background-color: #f5f5f5">
<h1 class="text-center text-success" style="text-align: center;color: green">Hello World</h1>
</div>

I also read this article briefly: http://chrispebble.com/inlining-a-css-stylesheet-with-c/

  • 4

    Missed more jQuery, after all the browser is the one who sends the emails and not the server.

1

  • 1

    The idea is good, but the "sale" of it needs some attention: "converts your html to CSS" ?

Browser other questions tagged c# html css asp.net-mvc

You are not signed in. Login or sign up in order to post.