vigils

One of the main differences between LJ and DW and how they let you code is that DW allows inline CSS in comments. This is a wonderful thing that can make your comment formatting much more elegant, because you can handle all of your formatting with a single string of code instead of using a string of !

First, some codebabble

In the beginning, HTML was invented by programmers, and it made some really ugly looking Geocities c. 1997 style sites. Designers, wanting to make things not ugly, distorted the <table> tag in hideous ways in an attempt to trick webpages into looking presentable. But this was a trick, and it made for some really complicated coding that didn't translate well across browsers. As the web has evolved, best practices teach to separate content (the text, ideas, and meaning of the code) from style (the font and color and background images and fun stuff) by using HTML for content and CSS for style.

If you've been around LJ/DW for a while, or are watching this community, you probably know something about copy+pasting CSS into a "customize style" area, and that's a good way to understand what CSS does. It can radically change the look of a site, without changing its basic ingredients! This is important because it means that the basic "stuff" of a site can be interpreted even if the style doesn't load, which means screenreaders work better, search engines work better, mobile devices work better and the internet is a happier place.

Some people recognize CSS when it's written out like this:

span.demo {
font-size: 12px;
font-family: Georgia, serif;
font-weight: bold;
font-style: italic;
color: blue;
}

It follows a basic formula of property-name: value; and is framed off by curly brackets. You can probably guess from that code that this makes some bolded, italicized Georgia-fonted blue text sized 12px, and that's what I'd put in a CSS file if I wanted to make something bold and blue.

But you can also stick CSS directly into a tag you are writing up by way of the style property. Something like this:

This is the exact same bit of formatting, but instead of sticking it at the beginning of the document, I'm dumping it directly into the tag I'm applying to. Instead of using curly brackets, I'm using style="", but it follows the exact same property-name: value; rule. And look, blue text.

The great thing about CSS is how flexible it is. You can apply the style declaration to most HTML tags. I.e.

Makes your i tag red!

It's pretty nifty!

And now, a word about 

I see a lot of people using when they should be using . , as a tag, is deprecated— meaning it's been declared out of date and marked off for future termination. (Read about it here, here and here.) is its closest new-fangled replacement. A tag doesn't do anything on its own, but it provides a container to stuff CSS in. Basically, if you want to make text look different and pretty, but don't want to change anything else about it, is the tag for you.

Because CSS is so powerful, you can do all kinds of great stuff by putting and the style property together. Here are some examples.

Georgia is a nice font.

Georgia is a nice font.

This text is large and in charge.

This text is large and in charge.

This is the skin of a killer!!

<span style="background-image: url(http://i361.photobucket.com/albums/oo54/crackysparkles/sparkles/sparkle.gif);">This is the skin of a killer!!</span>

Fourth-walling! Lolrandom! Chimichanga!

Fourth-walling! Lolrandom! Chimichanga!

TH1S 1S 4 TROLL T3XT QU1RK

TH1S 1S 4 TROLL T3XT QU1RK

For more of these, someone put together a whole big list of 'em.

Get the picture? If you want to experiment, here is a list of all the CSS properties, sorted alphabetically. If you have any questions, I'll do my best to answer them.

Flat | Top-Level Comments Only

From:

jotunheim

THANKS PROFESSOR ALEX

glorious

This is amazingly helpful. Thank you!

tropicsbear

Does the span tag also work for text alignment?

terra

That's a bit tricker, but yes, it can!! The CSS property for text alignment is text-align:;, so if you want to make a centered paragraph:

THIS IS CENTERED TEXT

THIS IS CENTERED TEXT

BUT WAIT, if you try RIGHT ALIGNMENT POWERS, ACTIVATE:

RIGHT ALIGNMENT POWERS, ACTIVATE

The results are not impressive. This is because the text-align property only applies to block elements, and span is, by default, an inline element. The easiest way to explain the difference is that block elements take a linebreak by default, whereas inline elements do not. Here is a more in-depth explanation. However, you can use CSS to switch a block element to an inline element and vice versa with the display property. So, if you want to use span to make something align right, this is how it would look:

RIGHT ALIGNMENT POWERS, ACTIVATERIGHT ALIGNMENT POWERS, ACTIVATE

The answer is, therefore, yes and no.