Re: [O] Applying style to a paragraph for HTML export

[Jambunathan K]

Nick Dokos <address@hidden> writes:

> Robert Pluim <address@hidden> wrote:
>
>> (I thought this would be a FAQ, but I can't find anything similar)
>> 
>> Hi,
>> 
>> I'm exporting from org to html, which is working well. Since my final
>> target is MSWord, I'd like to add style information to various
>> paragraphs, ie bold, underline etc. I can see how to do eg *bold* for
>> individual words, but how do I apply that kind of formatting to a span
>> of text?
>> 
>> (I'm CSS-ignorant, so please use small words and talk slowly)
>> 
>
> Reading section 12.5.8, "CSS support", and experimenting a bit,
> I came up with a short example that I hope will clarify that section
> for the CSS-ignorant (which I mostly am):
>
> #+OPTIONS: ^:nil
> #+STYLE: <style type=text/css> .bold {color: red;} </style>
> #+STYLE: <style type=text/css> .inner {color: blue;} </style>
>
> * Headline
>   :PROPERTIES:
>   :HTML_CONTAINER_CLASS: bold
>   :END:
> This is a bold section. This is done by using the HTML_CONTAINER_CLASS
> property of the subtree and giving it the value bold, then setting the
> style for class _bold_ to accomplish the desired goal.
>
> But you can selectively
> #+HTML: <span class="inner">
> change some things like this
> #+HTML: </span>
> if you want.

or like this:

--8<---------------cut here---------------start------------->8---
@<span class="inner"> change some things like this @</span>
--8<---------------cut here---------------end--------------->8---

Note the "at"s preceding the html tags.

>
> Here is what I know about CSS (but take it with the appropriate grain
> of salt - as I said, I'm mostly CSS-ignorant):
>
> The thing to remember is that you can add <span>...</span> to delimit
> HTML inline elements and <div>...</div> for HTML block elements.
>
> Each can be given a class: <span class="foo">...</span> or an id:
> <span id="bar">...</span>. Classes are hierarchical, ids are targeted.
>
> In the style definitions, you write
>
>  .foo { style info; ...}
>
> for classes and
>
>  #bar {style info; ...}
>
> for ids.
>
> So you can use #+HTML: ... to add spans or divs at the appropriate
> places, giving them a class or id as you see fit, and then add #+STYLE:
> definitions at the top to style them.
>
> Be careful when typing: the slightest error will cause the browser to just
> ignore whole swaths of styling, which makes debugging ... interesting.
> I tend to edit the html file one tiny thing at a time and redisplaying. When
> I've figured out what's wrong, I go back to the org file and try the result.
>
> Nick
>
>

--