How to embed CSS in HTML tags?

Question

How to embed CSS in HTML tags?

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (1 votes)
#4 by (1 votes)
#5 by (1 votes)

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 the 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 mail with formatted HTML.

html c# css asp.net-mvc

asked by anonymous 05.11.2014 / 19:54

5 answers

How to go to a link when clicking a div without using href How to return to the default settings of the Visual Studio editor?

score 5 · Answer 1

Some email programs do well with CSS declared in the 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>

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

score 3 · Answer 2

There is a very interesting project in GitHub called Martin H. Normark's PreMailer.Net to deal precisely with this subject:

C # library to move CSS to inline style attributes to gain maximum compatibility with e-mail 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:

Inline CSS in C # and ASP.NET using PreMailer.Net

score 1 · Answer 3

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><spanclass="texto">TEXTO 1<span>
<span class="texto">TEXTO 2<span>
<span class="texto">TEXTO 3<span>
<body>
</html>

This will cause the style tag to load inside the span when the page loads.

score 1 · Answer 4

1

Hello, some email servers do not support CSS, only inline visit this site link which does the conversion of your html to inline CSS

05.11.2014 / 21:04

score 1 · Answer 5

Hello, Before sending the text by email, prepare the text for sending, follow a small 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><pclass="texto">email</p>

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

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

PM> Install-Package PreMailer.net

See usage on 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 could see in this library, is that it only moves the css to style inline if it is in the same page html: - Entry:

<!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>

Output 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 quickly: link