skip to content
.
logo picture logo text

Using CSS on Eons

Note: Before Eons went down, we played with inline styles in The Studio group on Eons. However, some of these styles can be used on other sites that allow HTML in group messages, PM's or on your profile page.  If you are creating a web site, most of your CSS would be put in an external style sheet. The Methods of Incorporating CSS help page explains the differences in external stylesheets, internal CSS and Inline CSS.

Inline CSS Styles

The best way to learn is to try doing it. In the past, we could play with messages in The Studio or in The Playground (private sister group). But, that's not possible now. But you could download Kompozer and/or SeaMonkey or another HTML editor and paste the code into the "source" view. Then save the page and use your browser to view the page and see how it looks. So, to help you learn, take the code and play with it. It's easiest for me to have two windows open. Then I can copy and paste the code, make changes and see what happens. But, you can do what is easiest for you. Have Fun!

To add CSS inline styles to an element, put this in the beginning HTML tag:

style=""

Then put the styles you want in between the quotations marks. Separate the different attributes with a semi-colon. You can style different elements, but we'll play with the div.

Adding a border:

<div style="border: solid 5px; maroon;">YOUR TEXT</div>

Adding a font color:

<div style="color: #660000;">YOUR TEXT</div>

Adding a background color:

<div style="background: #ffffcc;">YOUR TEXT</div>

Adding a background image:

It is recommended to also have a background color similar to the main color of the image. Some folks set their browsers to not load images. The second example is contains a link to a background from the Studio Photo section. Notice it starts with http and end with .jpg. The image could also end with .jpeg, .gif or .png

<div style="background: #ffffcc url(DIRECT LINK TO IMAGE);">YOUR TEXT</div>

<div style="background: #ffffcc
url(http://www.eons.com/images/members/2008/10/12/5/9/59968732219355518187.jpg);">
YOUR TEXT</div>

Putting Some Styles together:

We're pausing here to see how you could put in more than one styling. The example has code for the color of the text, the background code and code for a border.

<div style="color: #660000; background: #ffffcc
url(http://www.eons.com/images/members/2008/10/12/5/9/59968732219355518187.jpg);
border: solid 5px; maroon;">YOUR TEXT</div>

Adding a width: 

I added a border so you could see the "box" (div).

<div style="width: 200px; border: solid;">YOUR TEXT</div> 
OR  <div style="width: 50%; border: solid;">YOUR TEXT</div>

Adding a height:  

I added a border so you could see the "box" (div). The box will adjust in height at you add words, but not if you add images. So you can a height if you want. Check out the difference if you don't specify the width.

<div style="height: 200px; border: solid;">YOUR TEXT</div>

<div style="width: 200px; height: 300px; border: solid;">YOUR TEXT</div>

Again Putting Some Styles together:

The example uses an image from The Studio group. A width and a height are added here:

<div style="width: 200px; height: 300px; color: #660000; background:
#ffffcc
url(http://www.eons.com/images/members/2008/10/12/5/9/59968732219355518187.jpg);
border: solid 5px; maroon;">YOUR TEXT</div>

More Examples

You can find links to more examples in The Studio group on Eons.com. You can also join Eons and The Studio group and post questions, if you want.