Embedding CSS in HTML Files

Ken S · Post by **Ken S** » Wed Aug 19, 2009 2:01 pm

Is there a way in Flare to "embed" the CSS code in an HTML file rather than referring to it in a separate file? By "embed", I mean something like this:

Code: Select all

<head>
     ...
     <style>
      body
      {
	font-family: Arial;
      }
      h1
      {
	font-weight: bold;
	font-size: 24.0pt;
      }
     ...   
     </style>
     ...
</head>

Rather than this:

Code: Select all

<head>
        ....
        <link href="Resources/Stylesheets/Styles.css" rel="stylesheet" type="text/css" />
        ...
</head>

carolynmwallace · Post by **carolynmwallace** » Wed Aug 19, 2009 2:37 pm

Are you talking about for one HTML file or for all of them?

If it's just one file, you could do it with the Text Editor. I don't know a method that would let you do it for all HTML files.

Is there a particular reason you need to do this? It's ordinarily discouraged because it makes it more difficult to change styles down the road since, instead of making one change to the master style sheet, you have to update every HTML file that has embedded styles.

Ken S · Post by **Ken S** » Wed Aug 19, 2009 3:10 pm

Thanks Carolyn.

The reason I asked about this is that I'm working on a project that includes, among other items, an e-mail newsletter. One of the requirements for the e-mail newsletter is embedded CSS. I'm thinking of using Flare for this project and wanted to verify that it can support this.

wclass · Post by **wclass** » Wed Aug 19, 2009 3:35 pm

I have done it in one file using a text editor - I put it into a html page that I wanted to reuse outside Flare. You could probably put it into a template but I haven't tried that.

The code was inserted into the head and looked like ...

Code: Select all

    <head>
        <style type="text/css">
		body {
			font-family: Verdana, sans-serif;
			font-size: 8pt;
		}    	
		p {
			font-family: Verdana, sans-serif;
			font-size: 8pt;
			margin-top: 2pt;
			margin-bottom: 2pt;
		}
		ul {
			font-size: 8pt;
			margin-top: 2pt;
			list-style-type: square;
		}
		
		li {
			font-size: 8pt;		
			margin-bottom: 2pt;
			margin-top: 2pt;
			padding-left: 6pt;
		}
		    	
    	</style>
    </head>

GregStenhouse · Post by **GregStenhouse** » Wed Aug 19, 2009 4:10 pm

I think any code you place in the head of a topic (after opening in the text editor) is wiped after you build, and replaced with code from the masterpage. So I think you'd need to create a special master page and apply that to your topic.

Post by **RamonS** » Thu Aug 20, 2009 4:22 am

How many styles are that? I'd put them into the main CSS and name them differently or craft a second CSS and reference that for the topic.

KevinDAmery · Post by **KevinDAmery** » Thu Aug 20, 2009 5:13 am

RamonS wrote:How many styles are that? I'd put them into the main CSS and name them differently or craft a second CSS and reference that for the topic.

Wouldn't work for an email unless you could host the css somewhere.

To answer the OP's question, you might be able to embed the style info in the master page (I haven't confirmed that that doesn't get stripped out, but in theory it should work...); failing that, you could generate the HTML output, then manually add the style info to the head prior to putting the HTML into the email. Presumably you have to copy the HTML into an email client anyway for sending since Flare doesn't output directly to email formats, so adding the style info as part of that process shouldn't be too onerous.

carolynmwallace · Post by **carolynmwallace** » Thu Aug 20, 2009 7:25 am

Ken S wrote:The reason I asked about this is that I'm working on a project that includes, among other items, an e-mail newsletter. One of the requirements for the e-mail newsletter is embedded CSS. I'm thinking of using Flare for this project and wanted to verify that it can support this.

Will styles in the HEAD section work for email newsletters? I produce an email newsletter for my company, and the only way I can get embedded CSS to work is if I use inline styles. Anything CSS I put in the HEAD section is ignored.

(I'm using a regular HTML page and Outlook.)

KevinDAmery · Post by **KevinDAmery** » Thu Aug 20, 2009 8:57 am

carolynmwallace wrote:
Ken S wrote:The reason I asked about this is that I'm working on a project that includes, among other items, an e-mail newsletter. One of the requirements for the e-mail newsletter is embedded CSS. I'm thinking of using Flare for this project and wanted to verify that it can support this.
Will styles in the HEAD section work for email newsletters? I produce an email newsletter for my company, and the only way I can get embedded CSS to work is if I use inline styles. Anything CSS I put in the HEAD section is ignored. (I'm using a regular HTML page and Outlook.)

It should in theory, but of course the difference between theory and practice is that in theory there's no difference.

Post by **RamonS** » Thu Aug 20, 2009 9:17 am

KevinDAmery wrote:
RamonS wrote:How many styles are that? I'd put them into the main CSS and name them differently or craft a second CSS and reference that for the topic.
Wouldn't work for an email unless you could host the css somewhere.

Then I misunderstood. So the email message itself is supposed to get styling via CSS?? I guess I exclude myself from this discussion then, because I am a strong believer that HTML and CSS are meant for web pages, not emails.

carolynmwallace · Post by **carolynmwallace** » Thu Aug 20, 2009 10:57 am

RamonS wrote:Then I misunderstood. So the email message itself is supposed to get styling via CSS?? I guess I exclude myself from this discussion then, because I am a strong believer that HTML and CSS are meant for web pages, not emails.

But in this case, the web page IS the email. Bwah-ha-ha-ha!

KevinDAmery · Post by **KevinDAmery** » Thu Aug 20, 2009 11:25 am

RamonS wrote:
KevinDAmery wrote:
RamonS wrote:How many styles are that? I'd put them into the main CSS and name them differently or craft a second CSS and reference that for the topic.
Wouldn't work for an email unless you could host the css somewhere.
Then I misunderstood. So the email message itself is supposed to get styling via CSS?? I guess I exclude myself from this discussion then, because I am a strong believer that HTML and CSS are meant for web pages, not emails.

It is supported by the email spec and by some email clients, so it's not an invalid idea. Sure, someone could inject some malicious code into the email HTML, but they could do the same with a website, too.

MadCap Software Forums

Embedding CSS in HTML Files

Embedding CSS in HTML Files

Re: Embedding CSS in HTML Files

Re: Embedding CSS in HTML Files

Re: Embedding CSS in HTML Files

Re: Embedding CSS in HTML Files

Re: Embedding CSS in HTML Files

Re: Embedding CSS in HTML Files

Re: Embedding CSS in HTML Files

Re: Embedding CSS in HTML Files

Re: Embedding CSS in HTML Files

Re: Embedding CSS in HTML Files

Re: Embedding CSS in HTML Files