How to apply CSS in HTML

It is not always possible to apply custom styles in the normal view of the editor in some areas it may be necessary to do this in HTML Code
when you wish to style some content using you custom CSS you may need to edit the formatted text and
images part in html view to add this manually.  In order to achieve this first of all find the CSS
class you wish to use by looking in the style sheet for the correct class name e.g. in the following
CSS:

.headings
{
background-color:#ff9900;
}
.bodytext
{
color:red
}


The classes would be bodytext and headings.  To apply one of these styles to some text find the text in html view (using
ctrl+f may help with this) and add class="yourclass" to the opening <p> or <div> tag in front of it e.g.
<p class="yourclass"> Some text</p> in the following code snippet you would edit the first<p> tag to
style the words Welcome back.. as body text

<img src="ausersdomain.tld/image.jpg" style="float:right">
<p>
Welcome back to your home page. Check out upcoming events and&nbsp;announcements below. Now that you have logged in, you have access to manage your account as well as network with other members. Communicate with members&nbsp;from your network or&nbsp;create new connections with our professional networking section. Don't forget to&nbsp;
<a href="http://bbe-tandd-alcr/page.aspx?pid=308">update your profile</a>
to keep us updated with your latest information.&nbsp;
</p>
<p>
Find out about the latest news and updates with Grow Education by following us on Twitter. Follow our updates on your social networking page.
</p>

Like this:

<img src="ausersdomain.tld/image.jpg" style="float:right">
<p class="bodytext">
Welcome back to your home page. Check out upcoming events and&nbsp;announcements below. Now that you have logged in, you have access to manage your account as well as network with other members. Communicate with members&nbsp;from your network or&nbsp;create new connections with our professional networking section. Don't forget to&nbsp;
<a href="http://bbe-tandd-alcr/page.aspx?pid=308">update your profile</a>
to keep us updated with your latest information.&nbsp;
</p>
<p>
Find out about the latest news and updates with Grow Education by following us on Twitter. Follow our updates on your social networking page.
</p>


If you also wished to style the text beginning Find out... you would have to edit the <p> tag in front
of this section like this:

<img src="ausersdomain.tld/image.jpg" style="float:right">
<p>
Welcome back to your home page. Check out upcoming events and&nbsp;announcements below. Now that you have logged in, you have access to manage your account as well as network with other members. Communicate with members&nbsp;from your network or&nbsp;create new connections with our professional networking section. Don't forget to&nbsp;
<a href="http://bbe-tandd-alcr/page.aspx?pid=308">update your profile</a>
to keep us updated with your latest information.&nbsp;
</p>
<p class="bodytext">
Find out about the latest news and updates with Grow Education by following us on Twitter. Follow our updates on your social networking page.
</p>

Environment

 6.35.1001.14

Was this article helpful?