(back to main)

More detailed information on CSS

As mentioned before, a CSS rule has two parts: the element and the property/values. By far the trickiest part of customzing CSS on plurk is identifying the element you want to change. Some of it is mapped out on the anatomy of a plurk page, but here are some general tips.

HTML looks basically like this:

<span>some text<span>

span is a tag, an HTML (or sometimes called "DOM"") element, and in contains the text "some text". To change the appearance of "some text", we would write a CSS rule for span. Say we want it to appear in bright blue:

span { color:#0000ff }

That's it!

IDs and Classes

Just kidding, it's more involved than that. The above changes all spans to bright blue. Sometimes that's desired- for example, you might want to change the appearance of all the links (which use the tag <a>) on the page:

a { color:#CF682F }

and all your links will be orange. But in many cases, you don't want to affect all of a certain tag type, you just want to affect a certain one. That's where IDs and classes come in.

IDs are unique specifiers - in theory, there can only be one of that ID on a given page (in practice, people make mistakes and sometimes put more than one, but that hasn't been the case with plurk. IDs are specified like this in HTML:

<span id="plurk_span">this is a cool span</span>

To target this, and only this span in your CSS, you use the "#" token to indicate an element of a given ID, like this:

#plurk_span { color:#ff0000 }

This would turn the text "this is a cool span" bright red.

More to come!