UPDATED 00:05 04/08/2005 following a suggestion from Gareth-E - thanks Gareth

If you already know some HTML then you might want to use the DSI Cascading Style Sheet to help you format your posts. Tags are listed and then followed by an example...

DSI CSS reference

Most examples are followed by a line of unstyled "Lorem ipsum" to illustrate trailing line padding...


<p>Text</p> example text:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque interdum ante sit amet magna. Morbi laoreet elit nec nisl. Integer aliquet risus sit amet tortor. Duis sed ante sed eros tincidunt dictum. Sed at mi vel est dignissim pretium. Aliquam posuere varius nulla. Donec ultrices bibendum dui. Nunc non nisl quis mi pretium commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur vitae magna vitae nibh lacinia lobortis. Mauris mattis quam et lacus. Integer mollis volutpat purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris pulvinar, odio vitae vulputate faucibus, libero magna vulputate elit, fermentum porttitor arcu wisi nec elit. Fusce tempus, nibh ac luctus pulvinar, arcu odio ornare nisl, et faucibus orci metus sit amet orci. In hac habitasse platea dictumst. Suspendisse facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nisl ligula, tempor sit amet, mollis eget, eleifend ac, dui.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<small>Text</small> example text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<h1>Text</h1> example text:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<h2>Text</h2> example text:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<h3>Text</h3> example text:

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<ul><li>First bullet point</li>
<li>second bullet point</li></ul> example text:

• Lorem ipsum dolor sit amet


• Lorem ipsum dolor sit amet


• Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<ol><li>First bullet point</li>
<li>second bullet point</li></ol> example text:

1. Lorem ipsum dolor sit amet


2. Lorem ipsum dolor sit amet


3. Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<em>Text</em> example text:
Lorem ipsum dolor sit amet


<blockquote>Text</blockquote> example text:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque interdum ante sit amet magna. Morbi laoreet elit nec nisl. Integer aliquet risus sit amet tortor. Duis sed ante sed eros tincidunt dictum. Sed at mi vel est dignissim pretium. Aliquam posuere varius nulla. Donec ultrices bibendum dui. Nunc non nisl quis mi pretium commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur vitae magna vitae nibh lacinia lobortis. Mauris mattis quam et lacus. Integer mollis volutpat purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris pulvinar, odio vitae vulputate faucibus, libero magna vulputate elit, fermentum porttitor arcu wisi nec elit. Fusce tempus, nibh ac luctus pulvinar, arcu odio ornare nisl, et faucibus orci metus sit amet orci. In hac habitasse platea dictumst. Suspendisse facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce nisl ligula, tempor sit amet, mollis eget, eleifend ac, dui.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<pre>Text</pre> - when using this tag ALWAYS put in line breaks, either with br tags or with enter. DSI will crop lines at about 64 characters if you don't. Example text:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Quisque interdum ante sit amet magna. Morbi laoreet elit nec 

nisl. Integer aliquet risus sit amet tortor. Duis sed ante sed 

eros tincidunt dictum. Sed at mi vel est dignissim 

pretium. Aliquam posuere varius nulla. Donec ultrices bibendum 

dui. Nunc non nisl quis mi pretium commodo. Class aptent taciti 

sociosqu ad litora torquent per conubia nostra, per inceptos 

hymenaeos. Curabitur vitae magna vitae nibh lacinia lobortis. 

Mauris mattis quam et lacus. Integer mollis volutpat purus. 

Vestibulum ante ipsum primis in faucibus orci luctus et 

ultrices posuere cubilia Curae; Mauris pulvinar, odio vitae 

vulputate faucibus, libero magna vulputate elit, fermentum 

porttitor arcu wisi nec elit. Fusce tempus, nibh ac luctus 

pulvinar, arcu odio ornare nisl, et faucibus orci metus sit 

amet orci. In hac habitasse platea dictumst. Suspendisse 

facilisis. Class aptent taciti sociosqu ad litora torquent 

per conubia nostra, per inceptos hymenaeos. Fusce nisl 

ligula, tempor sit amet, mollis eget, eleifend ac, dui.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


<hr /> this doesn't format text as such, but it does create a nice horizontal line you can use to "partition" messages - important the HR tag was specific to Internet Explorer, that is, users of other, older browsers mightn't see it! New browsers shouldn't have a problem though. Example:

---

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.


Ok, I think tables are evil - so I stopped here...

Use of inline style

In some cases the CSS (Cascading Style Sheet) provided by DSI won't let you do everything that you need to do. In this case you should use inline styles to format your post. One thing to bear in mind is that using an inline style will "overwrite" the contents of the DontStayIn CSS for the tags you apply it to. So how do you get around this problem if you want to do something like the following...

In a post I might have an unordered list set up using "ul" and "li" tags, for example:

• Item one in my list


• Item two in my list


• Item three in my list

Which I set up using the following code:

<ul><li>Item one in my list</li>
<li>Item two in my list</li>
<li>Item three in my list</li></ul>

This is fine until I realise that I need to change the second of the list items and draw attention to the fact it has changed...

So how can I do this? In the case of a few words, which is what we have here I can use a "span" tag to mark text. Span Tags are unique in HTML text tags in that they do not have any style associated with them, so all they do is add style into the existing format that's being applied. So how to use them? Like this:

<ul><li>Item one in my list</li>
<li><span STYLE="color:red">UPDATED! The New</span> item two in my list</li>
<li>Item three in my list</li></ul>

Which will display as:

• Item one in my list


• UPDATED! The New item two in my list


• Item three in my list

Note that in the "Span" tag I have added an inline style by inserting:

STYLE="color:red"

Note the American spelling of "color", also there are no spaces used... to get an idea of the other styles you might want to use you need to consult a reference since there are too many to go through here!

One that is worth a mention is the font-size property, when using this it is best to use "em"s as the unit since this means that:

1. People using screen magnifying software will be able to see the layout as you intend it to look.


2. If the DSI CSS changes, for example to change to a larger font size, your text will change in size by the same amount

An "em" is at it's most simple a relative measure, so a size of 1em matches exactly the size of the other text in a block, whereas a size of 2.5em is 2.5 times bigger.

For example, we might want to make our changed bulletted list item stand out a little more by increasing the text size. Changing the STYLE declaration to:

STYLE="color:red; font-size:1.5em"

Note the semi-colon used to separate the two formatting commands! This results in our second list item looking like this:

• UPDATED! The New item two in my list

But I want to style more than just a few words

I'll explain how to use div tags to format sections of a message tomorrow!

Are you like a reference book for wanna be nerds or what like????

OK i read HTML then i read XHTML now ya tellin me i need to read CSS to do all the colour bits too.

Is there ever an end to this?

ITS OFFICIAL :



IAINC IS THE


MATRIX !!

Nice one, cheers Ian.

Any chance you could tell us how to underline a heading.

Thanks

Like this?

<h1><u>Like this?</u></h1>

But underlining is generally considered to be bad form since it makes text look like a link!

Moochas Gracias Ian....

Nice one Iain - are you training a super HTML army ???

Nice one Iain - are you training a super HTML army ???

All hail IainC! LoL!

Great job Iain. Thanks

heres one for ya - how do i get a coloured glow round my text? say if i have it all in biggish black letters and want a nice glowing outline in red around the edge of it all?

i must learn these wise skills

TEACH ME

wisedom is power

i took the red pill

i must learn these wise skills

its considered not top form to use underline as looks like a link but lookin goooood doolittle :)

its considered not top form to use underline as looks like a link but lookin goooood doolittle :)

you are so pickey

tis true!

heres one for ya - how do i get a coloured glow round my text? say if i have it all in biggish black letters and want a nice glowing outline in red around the edge of it all?

You can't do that degree of decoration in (X)HTML - you'll have to create an image and hotlink that in instead.

You can't do that degree of decoration in (X)HTML - you'll have to create an image and hotlink that in instead.

There is a way to make text glow afaik, but its non-standard and only supported by IE so it wont display in other browsers...

non-standard and only supported by IE so it wont display in other browsers

Yup - so it's not (X)HTML as recommended by the W3C or "official" HTML which is specified in ISO/IEC 15445:2000(E).

Yup - so it's not (X)HTML as recommended by the W3C or "official" HTML which is specified in ISO/IEC 15445:2000(E).

Yeah, it would be horribly bad practice to use it on a proper website, but I dont think most of the people making profiles on here particularly care whether they conform to standards or not, they just want their profile to look pretty, :-/