For more thorough information here’s the official CSS reference. This official guide is also good.

I like this one too because it lets you play with values and see how they affect things.

The ShitWeb1.0

I sent a "message" on MSFT’s cringey career oriented website and I mentioned "xed.ch" as my email domain. Well, that dragged in a crazy out-of-context random image from my web page at http://xed.ch. What a dick move. No way to suppress or edit it! I couldn’t even change the web page - it was locked in as cached (sources tell me for 7 days). So what’s going on? What is this new extraneous abominable practice?

Well, it’s a thing called the Open Graph Protocol. And they say it "enables any web page to become a rich object in a social graph". Barf.

The way it seems to work (but we’ll never know since we don’t have control over what ultimately happens with it) is that if you put a bunch of bandwidth clogging cruft into your HTML, you can direct horrible platforms into selecting slightly less inappropriate bandwidth clogging cruft for their extraneous bandwidth clogging cruft needs.

The kindest interpretation I can think of for justifying this madness is to think of it like a movie poster or book cover. You can’t judge a book by its cover but, in fact, yes you can and most people do. Back when the web was envisioned as nice a thing for literate people (hTml, hTtp) you’d advertise a link by saying what it was (with anchor text) and making it available for people who wanted such a thing. Now web sites are experiences. Bad experiences usually, but that’s what we have to work with.

Here’s what I came up with that roughly stops the bleeding of wildly inappropriate things taken out of context and plastered all over some place where a link is shared.

<meta property="title" content="Chris X Edwards - xed.ch" />
<meta property="description" content="Chris X Edwards - xed.ch" />
<meta property="og:title" content="Chris X Edwards - xed.ch" />
<meta property="og:site_name" content="Chris X Edwards - xed.ch" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://xed.ch" />
<meta property="og:image"
content="https://xed.ch/project/nerdtext/ntlogo80.png" />
<meta property="og:image:type" content="image/png" />

Note that I find this reprehensible and want to know as little about it as possible — so these may not be best practices or even competent!

This sensible guy seems to have done the smart thing and analyzed what all the big "web" properties do with their OG garbage. His recommended settings seem very sensibly arrived at. However note that far from "standardized" this guy says, "No strong pattern emerged" from the analysis.

It seems that 1200x630 is the recommended size (or 1.9:1). He thinks that Twitter has their own tag (<meta property="twitter:image") and, more interestingly, has a minimum size of 300x157. This could reflect limitations on lightweight images - I noticed in testing LI scaling up my little logo — a lot.

The title tag is limited (by GOOG at least) to 60 characters. The description tag has a max of 105.

Here’s a decent web tool that checks how the main surveillance capitalism sites will be mangling your web site. N.b. I do not think they are as aggressive digging into your content to fish out random excerpts if the tags are not present.

Just when you think you’ve got a decent concept of how to handle this, you find out that Slack uses portrait.

They Keep Adding Weird Stuff To HTML

Just so I don’t forget about these newfangled HTML things. Here is a good reference.

<a>

Anchors. Still a classic.

<img>

Images. Mostly works like you’d expect.

<b>

Still barely hanging on, still more or less bold. But also with the semantic implication that the word is of equal "importance". The example often given is keywords. Maybe also stuff like parties in legalese, the first sentence of an article. Basically, these words aren’t more "important" per se, but it will help comprehension to visually distinguish them. If you’re not accepting the plain old "bold" story, this tag then becomes strangely similar to <mark>.

<strong>

Text that is "important". <strong>Do not touch bare wires!</strong>.

<mark>

(HTML5) To me this usually looks like a "highlighter pen" covered the text. It really seems semantically equivalent to <b> unless you accept the presentation implications and traditions. In theory this can be used to show highlighted terms in searches but I think its uses are bigger than that. I think this would be good in long quotes where you want to emphasize something, but the original author has already used some emphasis.

<ins>

The <del> tag seems poorly conceived, but this one seems quite mad. In theory for insertions to the HTML document. Is HTML a RCS now?

<del>

Text that has been deleted in editing. Like <ins> this also seems like a very bad idea. Compare with <s>.

<s>

Apparently this strike tag is more for things that are no longer relevant or accurate, but not because of (confusing?) document editing.

<em>

Emphasized. Not necessarily italicized, but in practice yes. The emphasis could be made by using comic sans. Whatever.

<i>

"Typically displayed in italic." They can’t even commit to italic with the classic tag that is an abbreviation of that word. This is apparently the correct tag for certain kinds of technical terms (T. maritima), showing off in a foreign language (Et alors?), fictional character thoughts (What a bad tag, thought Hermione.)

<small>

One size smaller generally. Semantically used to represent "fine print", copyright and legal boilerplate, side comments, stuff like that. Mostly stuff that if you didn’t read it, no loss. Also good for special messages exclusively for young people.

<sub>

These are terrible 1990s tags when Sir Tim was dreaming of having scientists use the WWW. Hilarious. For some reason they have not been deprecated. If you really need this but not a full LaTeX extravaganza, you have a very weird use case.

<sup>

Same as <sub>. I guess it could see use for footnote reference numbers or something like that, but shouldn’t that kind of a system have its own semantic tag?

<kbd>

Key presses. Possibly any kind of user input. Helpfully renders in monospace.

<code>

Computer code. I’m going to say this should be used more often!

<samp>

Sample output. Generally the kind of output you might expect a computer to dump at you. This is helpfully rendered in monospace.

<var>

Variable. Is this to set up JS hanky panky? Or is to to literally call out stuff like "$USER is a variable"? Either way would be ok I guess.

<output>

Contains the results of a calculation, presumed to have been the result of a script. Seems kind of pointless. What’s the difference with <samp> (sample output) then? Could there ever be a sensible distinction that a user’s rendering cares about between real output and hypothetical sample output? I can’t imagine that.

<data>

Probably not helpful. Seems to be a way to inject machine readable side channel stuff that humans don’t care about. The <data value="PN#1337">correct wrench</data> is required for assembly.

<link>

Can this "include"?

<address>

Seriously? This seems to be for snail mail physical addresses. Which is weird.

<time>

(HTML5) Designed for machine generated HTML to timestamp things in a way that is machine readable. Lots of annoying subtags instead of sticking with ISO8601. Fail.

<article>

(HTML5) Maybe to surround individual posts in a collection like my main page.

<aside>

(HTML5) Just like it says, something related, but not quite on the direct track. Sidebars, glossary, trivia, bio or profile info, "you might also like" kind of stuff.

<ruby>

(HTML5) A mostly Asian thing where text is used to describe other text. One use I thought of was for a certain video game with a horrendously unintuitive coordinate system to have X,Y,Z features labeled with north, up, east, etc. So those words would decorate the numbers making the nonsensical sensical. Another application that might be closer in spirit though not in Asian-ness is to annotate cases of nouns in an inflected language like Latin.

<blockquote>

Just like you’d imagine from the name. This has a cite="xed.ch" attribute for the obvious reasons.

<cite>

Wait, <blockquote> has a cite= attribute and yet there is a <cite> tag? Over at html.com they show the attribute when talking about the tag. Oops. Yes, confusing, isn’t it?

<q>

This is the inline little brother to <blockquote> for when you don’t want it separated out.

<figure>

(HTML5) Can be a figure obviously but also code listing though that seems less apt than <code>. Really, why is this different from <img>? I guess to highlight the "figureness" for CSS. Enjoy.

<figcaption>

(HTML5) Why this is not an attribute is why XML is bad.

<caption>

This tag, for table titles only, should be called <tabcaption> to match <figcaption>. But really this tag should be an attribute, caption= and work for all block elements.

<abbr>

Abbreviation. The tag itself is an abbreviation! Get it? Also less brilliantly covers acronyms just to preserve some confusion. If you want to semantically include the full grand term that the abbreviation stands for, use the title= attribute. E.g. <abbr title="Great Britain">GB</abbr>.

<meter>

(HTML5) A tag to highlight measured values. With attributes like high, low, min, max, optimum, and value. Interesting but overly complex and idiosyncratic?

<pre>

Still valid and maybe a better choice these days than <tt> which validators complain to me is obsolete. And really, why there needed to be two such tags was a mystery.

<button>

I do not think this is part of an old timey <form> arrangement though it might be. Seems to be a JS UI hook to the DOM.

<datalist>

Some kind of UI thing I think. Works with <option>.

<fieldset>

Groups <form> elements if, uh, you need them more grouped.

<legend>

Like a title for <fieldset>. Maybe.

<form>

Defines a UI section for user input.

<input>

Part of a <form> section often with something like <input type="radio" id="X">.

<label>

Caption for a form control <label>Search<input type="text"></label>.

<select>

Control for selecting multiple options.

<option>

Part of a form control. Perhaps contained by a <select> tag.

<optgroup>

Organizes your <option> tags.

<progress>

(HTML5) Progress bar stuff. JS is needed to update the thing of course.

<textarea>

A box for entering entire text passages, not just one line.

<map>

Sets up an image map.

<area>

Defines an active region on an image map.

<menu>

"Commands that a user can perform"… What? Is this still HTML? Maybe they mean simply, a "menu" looking thing. Hook up to JS as you wish for "commands".

<menuitem>

(HTML5) Subcomponents of <menu>.

<canvas>

What the Apple2 called hgr. Making JS not completely useless. Unfortunately.

<base href="https://xed.ch">

Only one per document. Sets where relative links are relative to. Also takes a target=.

<header>

(HTML5) Beginning of the document stuff. Could have logo, search bar, navigation junk, etc.

<main>

(HTML5) A way to highlight that you’ve just served up a bunch of cruft that the user did not ask for or want — this is the stuff they probably did want.

<footer>

(HTML5) End of the document stuff. Could have copyright, author info, et.

<hgroup>

I think this is a way to reset <H#> levels. Not 100% sure though.

<wbr>

(HTML5) Word break. Sometimes you have something like "the-phrase-that-is-too-long-for-a-sidebar". You can throw in some of these tags like this: the-<wbr>phrase-<wbr>that-<wbr>...

<hr>

No longer necessarily puts the line in. Now it’s some vague idea of paragraph-like separation when paragraph separation won’t do.

<div>

No semantic meaning. Just a tag you can use. This is block level.

<span>

No semantic meaning. Like <div> but in-line level.

<nav>

(HTML5) A section with links, presumably for navigation. In theory, maybe ThePage should be a big jumble of <nav>.

<section>

(HTML5) They say to immediately include an <h#> heading tag making me wonder if <h1> is now simply <section><h1>. I’m not seeing the profound semantic utility over headings but if you need those concepts separate, here you go.

<head>

Apparently not needed in modern times now that everything above <body> is assumed to be in the head.

<embed>

Hook for plug-ins.

<iframe>

Inline frame element. Put web pages in your web page. No possibility for confusion and mischief here!

<object>

Wait, wasn’t <iframe> enough? Apparently not. Same thing basically.

<param>

Do attributes not work in this XML world? Jeez. But this seems like basically an attribute for <object>. Yes, HTML is staggering around drunk here.

<source>

More bad cruft catching tags!

<audio>

Embed some noise. Caution: Lot’s of browser dependent behavior here!

<video>

Embed some video. I like how its "content" is basically something like "Sorry, your browser doesn’t support video playback but here’s a proper link to it: <a href=…"

<track>

Related to the <audio> and <video> tags, not creepy surveillance capitalism. Well, not by definition.

<details>

(HTML5) Read the definition and am still bewildered. Whatever it is, it seems like it’s perfect for terribly organized information. WTF is hypertext for if not to distribute "details". Ah, ok, I see… This is how one can create those fantastically annoying lists of popular questions in the "support" sections of enterprise websites — you know, the kind that don’t really answer your question. But a hallmark of those is that they hide the answers until you click each question; it’s sort of a collapsed thing. Well, this tag produces that directly (in conjunction with <summary>). Even if this were a good idea, can’t we do the peek-a-boo rendering in CSS? And if it were only a good idea and not the greatest idea ever, wouldn’t the extant and perfectly ok <dl><dd><dt> tags be semantically identical? What HTML5 changes should have done is simply deprecate the useless <dt>. Hopefully my critique is detailed enough for you to know that those details should not be semantically isolated. My $.02.

<summary>

(HTML5) Doesn’t seem to be a general summary or an "abstract" but rather something specific and annoying related to the <details> tag.

<dialog>

(HTML5) Seems to open a dialog box. A fine feature for a terrible OS.

<script>

Javascript. I’m not even sure you need to say it’s Javascript any more since in modern times "programming"=JavaScript.

<noscript>

Fallback content for when people have scripting turned off. I suppose a message of encouragement and support would be appropriate.

Deploying CSS

You can do things like this where ever a bit of CSS is needed:

<p style="font-size:20px;">Text in a font size of 20 pixels.</p>

Or you can make a style section in the <head> like this:

<html>
<head>
<title>Chris X Edwards - xed.ch</title>
<style type="text/css">
.css-class{ color:red; }
#css-id{ color:blue; }
</style>
</head>
<body>
<p class="css-class">Tomato</p>
<p id="css-id">Blueberry</p>
</body>
</html>

See the section on "ID Selectors" for a discussion of when to use class selectors and when to use IDs.

Note
 In general it’s polite XML syntax to put quotes around all attribute values. This is not the case in CSS. If you put things like blue in quotes like .css-class{ color:"blue" } then this style will most likely not work!

To save space in your document and to standardize and centralize your style definitions it’s usually not a bad idea to put the style sheet information in its own file and source it from your HTML like this:

<link rel="stylesheet" href="http://xed.ch/xed.css" type="text/css">

Testing CSS

Sometimes you might like to have the ability to switch styles quickly, perhaps you’d like a day and night them that’s selectable on the web page. This little bit of JavaScript switcheroo can make that happen.

<script>
    function chstyle(cssfile) {
        var l= document.getElementsByTagName('link');
        l[0].href= cssfile;
    }
</script>


<button onclick="chstyle('')">Hipster Zero</button>
<button onclick="chstyle('style.css')">Hipster Style</button>
<button onclick="chstyle('brewpub.css')">Hipster Brewpub</button>
<button onclick="chstyle('cafe.css')">Hipster Cafe</button>
<button onclick="chstyle('fixie.css')">Hipster Fixie</button>
<button onclick="chstyle('beard.css')">Hipster Beard</button>

Obviously you need to have all the files mentioned ready to go.

Pure CSS can do some surprisingly complex stuff!
This is done entirely with internal CSS and no JS.
Read the source to see how this is done.

CSS Syntax Structure

First interesting thing to note is that comments are done with the old C syntax and look like this:

/* This is a comment. */

Besides comments, CSS is formed by "rules" which have the format:

Selector{Declaration_1;...;Declaration_N;}

Note that the final semi-colon is optional but it seems to be regarded as good form.

"Selector" is usually the HTML tag to apply this rule to but it can be other things as shown below.

The Declaration is a "Property:Value" pair. This makes the CSS a list of rules that looks like these examples:

    a{text-decoration:underline;color:#006ac8;}
    p{margin:0 0 1.5em;}
    h1,h2{font-weight:normal;color:#cecece;}

It’s normal to define properties for styling various normal HTML tags, but it is also common to want to differentiate between two different types, from your perspective, of the same tag. For example, perhaps you sometimes want paragraphs to have a gray background and sometimes you want them to have a white background. To the HTML they are both paragraphs with the <p> tag but you know there is something else that should be specified. Here is how to do that:

    <style>
        p.red{background-color:#ff0000;}
        p.gray{background-color:#cecece;}
         .blue{background-color:#0000ff;}
    </style>

    <p class="red">This is a paragraph with a white background.</p>
    <p class="gray">This is a paragraph with a gray background.</p>
    <b class="blue">This bold sentence will be blue.</b>

As you can see with the blue example, any tag can pick up the properties of a selector that starts with just a dot.

ID Selectors

It is also possible to use the id attribute of tags to specify CSS rules. For example:

<style>
    #specialoffer{color:red;}
</style>

<p id="specialoffer">This should be red!</p>

Generally the idea is that if the style is to be applied to one specific element then it should get an id but if there are many such elements, it should get a class. ID selectors should be reserved for things like serial numbers which are absolutely unique. A good thing to keep in mind about id attributes is that browsers will search pages for them if given a URL that looks for them. For example http://xed.ch/help/gentoo.html#2 looks for the section (defined in the table of contents) labeled with the ID "2" in this document. Use ID selectors in those kinds of situations.

<div> Tags

Sometimes you want to style a portion of the document but it has no specific classic HTML tags associated with it. Using paragraph tags is common but if your styled section does not resemble a paragraph and conflicts with a paragraph’s natural rendering, you can use basically a "do nothing" tag. This is <div>Does nothing special.</div>.

Styling Links

Links have some special properties which can be styled. The syntax looks like this:

a:visited{underline;color:#0000c8;}
a:hover{color:#cc0000;}
a:active{color:#cccc00;}

Nested Selectors

Sometimes you’ll come across (or require) a syntax like this:

a img{border:none;} /* Images which are links. */

The following example explains how this works:

p{color:black;}
.edited{color:red}
.edited p{color:yellow}

The idea here is that while you may have a generally applicable style for <p> tags, you might want another style rule to take precedence. Here the edited class is applied first and if the tag is edited it is checked to see if it is a <p> tag and colored yellow. If it was a <p> tag without the edited class, then it would be colored black.

Media Types

Media queries are a mechanism which allows the web page (sort of) to "ask" the impending browser what sort of thing it is. It’s like a musician who has been requested to play a gig asking the requester, Ok, so what kind of venue is it? This allows the musician to make special accommodations which may be appropriate for a small club or a giant arena. The way it works in real life is that you set up different CSS effects in different categories depending on what sort of display facilities are available.

Media queries can check the width and height of the browser or device allowing correct layout for portrait or landscape; phones are constantly switching and apparently good implementations constantly adjust to match the correct media query section. Also the resolution can be queried presumably allowing somewhat accurate length scaling.

Although you might find a lot of chatter about how media types help with braille and other technologies for the blind, I couldn’t find any examples of it in use for that purpose. The real use which is massively deployed is to allow tablets and "smart" "phones" to receive optimized rendering instructions. This is often called "responsive web design" or "fluid layout".

Media query syntax uses @media and looks like this:

@media screen and (max-width: 1200px) {
    body{width:1000px; margin:0 auto;}
    #someid{width:700px;}
    .someclass{width:280px;}
}

Other media types (than the typical screen) include 3d-glasses, print (a printer), aural, handheld, projection, tty, and the all-encompassing all.

Some other conditions include:

(height:480dpi)
(min-resolution:90dpi)
(min-width:500px)
(device-width:600px) /* Could, but doesn't necessarily, have. */
(orientation:portrait)
(monochrome)
(min-color:8) /* 8 bit color device (or more) */
(device-aspect-ratio: 1280/720)

You can also bring in CSS from somewhere else depending on the media queries. This syntax starts with a @import.

You can also just embed the media queries and import the correct CSS:

<link rel="stylesheet" media="screen and (color)"
      rel="stylesheet" href="example.css" />

Here’s a full example.

A Media Query Sample With Left Side Menu
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <style type="text/css">
        li.xedmenu{color:#ce0000;font-size:.75em}
        body {padding-left:0em}
        ul.xedmenu{background-color:#cecece;
                   position:relative;
                   top:0em;width:12em;
                   padding-top:1em;
                   padding-bottom:1.5em;
                   margin-top:0em
        }
        @media screen and (min-width:600px) {
            body{padding-left:16em}
            ul.xedmenu{background-color:#cecece;
                       position:absolute;
                       top:2em;left:1em;
                       width:12em;
                       padding-top:1em;
                       padding-bottom:1.5em;
                       margin-top:5em
            }
        }
    </style>

</head>
    <body>
        <ul class="xedmenu">
            <li>Item #1</li>
            <li>Item #2</li>
            <li>Item #3</li>
        </ul>
        <h1>Menu With Media Query Example</h1>
        <p>
            This test shows media queries being used in a simple but
            effective way. There is a simple menu on the left of the page
            if the display is larger than 600 pixels wide. If not, the
            display is placed at the top of the page.
        </p>
    </body>
</html>

Responsive Images

Here’s an article on responsive images and the tricky things about them. This basically has to do with selecting the optimal sized image to give the user as much information as they might wish but minimize upload times.

Attribute Selectors

You can also style things based on their attributes. The syntax uses brackets.

[src=xedlogo.png]{border:1;}

Here’s an example:

<style>
    [src="http://xed.ch/xedlogo.gif"]{border:10px solid blue}
</style>
<img src="http://xed.ch/xedlogo.gif"/>

In theory, any tag with an attribute that defines src as this gif will get a blue border.

Tiling

Annoyingly a browser is one of the better ways to see images tiled. If you’re a tessellation artist or are working on seamless textures (Gimp → Filters → Map → Tile Seamless…) and want to see what your image looks like tiled, the following little HTML/CSS will do the job while demonstrating how to put backgrounds on HTML elements. To use this effectively, just symlink your test image to ./test.jpg.

<html> <body>
<style type="text/css">
.testtilingzone {
  background: url(./test.jpg);
  background-repeat: repeat; /*repeat,round,space,repeat-x,repeat-y,no-repeat*/
  min-width: 1200px;
  min-height: 700px;
}
body { margin: 0; display: grid; place-items: center; }
</style>
<h2>Original test.jpg</h2>
<img src="./test.jpg">
<h2>Tiled test.jpg</h2>
<div class="testtilingzone"> </div>
</body> </html>

Gradient

Here’s an interesting excerpt from a page at this website which shows how to use gradients on mostly nothing to get the effect that I did back in 1999 with 6x1 pixel gifs. I’m not sure this CSS is actually smaller (!), but the request transaction (or lack thereof) surely is.

.myitems::after {
  content: "";
  position: absolute;
  right: 0;
  top: 3rem;
  bottom: 3.6rem;
  width: 5px;
  border-radius: 5px;
  background:
  linear-gradient(130deg,#ff7a18,#af002d 41.07%,#319197 76.05%);
  box-shadow: -10px 0 20px 3px #000;
}

Key Press

The MC Wiki has a very smart looking style for a key press button look.

element {
    background-color: #f8f9fa;
    color: #222;
    font-size: 80%;
    font-family: inherit;
    font-weight: bold;
    border: 1px solid #c8ccd1;
    border-radius: 2px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 0 0 2px #fff inset;
    padding: 0.1em 0.4em;
    text-shadow: 0 1px 0 #fff;
    text-align: center;
}

This is with a reduced (80%) bold (700) font.

  • For Shift, Control, Alt keys they use "⇧ Shift", "Ctrl", "Alt" respectively.

Useful Properties

background-color

Values can be in hex #cecece, a name blue, or RGB decimal rgb(206,206,206).

background-image

Value can be url(http://xed.ch/cssnotes/example.jpg).

background-repeat

If none then don’t tile background images.

border

Describes the border of an element that can have them. Values are something like 5px dashed #cecece or 1em solid blue.

border-width

Same as border but individually.

border-style

Same as border but individually.

border-color

Same as border but individually.

clear

Clear sides of an element of floating elements. An example of floating is when text wraps around an image. Can be used to turn off floating elements completely. Values can be both, left, or right.

color

Main color of elements. For example font colors. Values can be in hex #cecece, a name blue, or RGB decimal rgb(206,206,206).

display

A value of none hides the item. A value of inline puts the item in with no line breaks, for example, an emoticon image in some text. A value of block puts line breaks before and after the item.

font-family

Main category of font. The five CSS generic fonts are serif, sans-serif, monospace, cursive and fantasy.

font-weight

Basically normal or bold. Anything else will probably not work for many people.

font-size

Values can be things like 24px, 50%, or 1.5em.

font-style

Basically italic or oblique or normal.

font-variant

Basically smallcaps or normal.

float

Causes element to float left or right. Or none to prevent floating.

height

Height of an element firmly set at a value. Can be auto (the default), a value in px, cm, em, etc, a percent 50%, or inherit to use an inherited value.

max-height

Constrain an element to be no higher than this value.

min-height

Constrain an element to be no shorter than this value.

letter-spacing

Puts the specified amount of space (.2em, 3px) between each l e t t e r. Looks quite silly usually.

line-height

A value of 100% is normal line spacing where 200% is double spaced and 50% is an unreadable compressed mess.

margin

How close the text is to other elements or borders it is adjacent to. Can be in px, em etc. Note that margin-right, margin-left, margin-top, margin-bottom set just that margin. And you can set all four of those with a margin value of something like 10px 20px 30px 40px which will give the top, right, bottom, left 10, 20, 30, 40 pixels of margin respectively.

padding

Just like margin with all its variants. It is specifying distance from the text to the edge of the text’s element. Margin is concerned more with this element’s position relative to the next element.

position

Values can be relative or absolute. Then use the attributes, top, bottom, left, and right. This allows an element to be placed very specifically in a certain spot. Better be sure the user has a pixel in the specified place!

text-align

Values are left, center, right, and (full) justify and orient text blocks accordingly.

text-decoration

Values can be none, underline, overline, line-through, blink, or inherit.

width

Same as height. Also there is max-width and min-width. Specifically img{max-width:100%;height:auto} looks useful if you want to waste bandwidth with image data that people never see.

word-spacing

Space between words. Like letter-spacing but less silly.

z-index

A quasi layer concept. With this value, you can prioritize which elements are drawn and which are obscured when they occupy the same space. A value of 1 will be under an element with a value of 2.