The first-letter and first-line CSS selectors are among the pseudo-selectors. Pseudo-selectors exist not as discrete elements, but as variable elements that exist only as a factor of context or browser state.
First-letter is used to select only the first letter of an element. The syntax is:
p:first-letter {font-size: 1.8em;}
The CSS properties that can be styled for the first-letter selector are font, color, background, text-decoration, vertical-align, text-transform, line-height, margin, padding, border, float and clear.
First-line works with similar syntax.
p:first-line {font-style: italic;}
You can use descendant selectors. For example, if you applied a class called .first to the first paragraph of each section of your page, then a selector like
Several new rel attributes for the <a> and <link> elements have been proposed for HTML5. Existing attributes from HTML4 may be redefined somewhat. They include:
<rel='alternate'>
may be used with link, a, and area elements
meaning depends on the values of the other attributes such as 'stylesheet' or 'type'
<rel='icon'>
may be used with link elements
specified resource is an icon representing the page or site
<rel='nofollow'>
may be used with a and area elements
the link is not endorsed by the original author or publisher of the page
<rel='prefetch'>
may be used with link elements
preemptively fetches and caches the specified resource
<rel='archives'>
may be used with link, a, and area elements
indicates that the referenced document describes a collection of records, documents, or other materials of historical interest.
<rel='external'>
may be used with a and area elements
indicates that the link is leading to a document that is not part of the current site
<rel='license'>
may be used with link, a, and area elements
the referenced document provides the copyright license terms
<rel='noreferrer'>
may be used with link, a, and area elements
user agent must not include a Referrer HTTP header in the request
<rel='pingback'>
may be used with link elements
usage is still being defined, but it creates a hyperlink
<rel='sidebar'>
may be used with link, a, and area elements
the referenced document, if retrieved, is intended to be shown in a secondary browsing context (if possible). It isn’t clear if this means a new tab, a new window, or an iFrame.
<rel='tag'>
may be used with link, a, and area elements
the tag that the referenced document represents applies to the current document
The best I can tell from looking at the current specs, these relative types of links are current in the HTML5 proposal. I hope I haven’t missed any.
How do you add borders to data tables with CSS? Depending on how you want the borders to display, it can normally be accomplished with three steps.
I constructed a small table and will show it to you as I move through the three steps. I’ll use a medium width, solid style border in the color #00f (blue) for all the border rules. With a width assigned to the entire table, and a border rule added to the table, here’s the beginning CSS.
table {
width: 40em;
border: medium solid #00F;
}
Here’s how that looks (in Firefox).
As you can see, applying a border rule to the table selector adds a border to the table only. Step two is to apply the border property to the td and th selectors as well. Here’s the new CSS.
table {
width: 40em;
border: medium solid #00F;
}
th, td {
border: medium solid #00F;
}
This is what you see now.
You may choose to accept this appearance. But you see that you have some spacing between the table cells between the borders of each data cell. If you don’t like that appearance, the third step will correct it. This step involves the border-collapse property. It is applied to the table selector, like this:
table {
width: 40em;
border: medium solid #00F;
border-collapse:collapse;
}
th, td {
border: medium solid #00F;
}
This rule eliminates the space between cells, but is implemented in a slightly different way in some browsers. Look at the effect in Firefox and Safari.
Rendering of border-collapse: collapse in FirefoxRendering of border-collapse: collapse in Safari
To my eye, there is a thicker border on the top and left in Firefox. (Before you decide that’s unacceptable and write rules to correct it, it would be good to see how other major browsers render the border.)
You can change the border style or width or color, but these three simple steps take care of getting a data table presented with borders.
Writing about HTML5 while it is still in a state of flux is like standing upright on a water bed while shooting a carnival rifle at a moving row of ducks. What I’m about to tell you is based on the HTML 5 working draft dated 4 March 2010.
In HTML5 terms, the <article> element is considered sectioning content, as is the <section> element. Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element. A blog post, therefore, makes the most semantic sense to me when it is marked up as an <article> element. It can be syndicated as a unit.
An <article> element can include a <header> element, which could contain <h1> through <h6> elements marking up things like the article title, author’s name, publication dates, and other material that makes sense. Within a <header> element, you can nest an optional <hgroup> element, which is header group, or a related group of elements within a <header>. In HTML5, each <article> can have its own <header>.
An <article> element can include a <footer> element. The <footer> could contain links to comments, various permalinks, options to share the post on Twitter or Facebook or StumbleUpon, an hCard, or other material relevant to the article content. In HTML5, each <article> can have its own <footer>.
Based on that background information, here’s sample markup for one way to format a blog post with HTML5. I suggest a few ways to add content, but there are many more ways to deal with this. For example, you might want the pubdate in the footer.
<article>
<header> <a href="#" rel="bookmark" title="post title"><h1>Article title</h1></a>
<h2>Author's name</h2>
<p>Published <time pubdate datetime="2010-03-26T18:26-07:00"></time>.</p>
</header>
<p>A lot of great article content.</p>
<footer>
Footer info here: comment links, whatever.
</footer>
</article>
Several CSS properties are involved in understanding how to use background images. As you probably know, a background image can be added to any element on a page of HTML using a CSS rule for background-image which points to a URL for the image you are using. The CSS syntax looks like this:
The graphic shows how a small graphic applied to a body element would render as a repeated background image, a background image repeated on the x axis and a background image repeated on the y axis. Remember, you can apply a background image to any element, not just the body element. The principle involved in using a background-image repeat behind a list item in a navigation bar would be the same, but the effect would be constrained to the list item.
Diagram from "Mastering Integrated HTML and CSS"
The third CSS property that comes into the mix with background images is background-position. Values for the background-position property include top, center, bottom, left, right, <percentage>, <length>.
The keywords can be replicated with percentage or pixel values, but percentages and pixel lengths allow for more precise placement than simply choosing top or center or left or right.
When positioning, you use two values, one for the x axis and one for the y axis. Here’s an example of the syntax. And, you don’t want the image to repeat.
In the example just given, the percentage of 0% would be the same position as the keyword left. A percentage of 100% would be the same position as the keyword bottom or this: background-position: left bottom;. There’s no keyword for a position on either the x or y axis like 33% or 47px.
Some graphic examples of background-position.
Diagram from "Mastering Integrated HTML and CSS"
Let me repeat the reminder that the illustrations show a small graphic used as a background image on a body element. The principle would be the same on some smaller part of a page such as a blockquote or a table. With a large graphic instead of a small one, the effect would be different even though the principle would be the same.
A less often used property is background-attachment. The possible values for this property are fixed and scroll. This is used less often because it’s a bit buggier than other background properties in various browsers. With a fixed background image, the image stays in a the same relative position as the user scrolls down a page. Scroll is the default.
You can highlight the form field a user is in. It’s a small visual cue as to where the cursor is in the form. Here’s a simple example.
The cursor is in the Name field in the image. The cursor position is highlighted with a dark border to indicate which form field is in focus. This highlight is created with a CSS pseudo property called :focus. Text boxes are input fields. In this example, the CSS rule is applied to the input selector. A border is added to input fields when they are in the :focus state. Here’s how the rule looks.
input:focus {
border: 2px solid #333;
}
This rule only works for input fields. Other types of form elements such as checkboxes would need separate CSS rules of a similar kind to create an outline when receiving focus.
Let’s talk about emphasis and italics and getting bold. There’s an extended family tree of HTML elements that can be used to format text as emphasized, italic or bold at our disposal. These HTML elements are not interchangable and each has a distinct position in the text formatting family.
First there’s <em>. Depending on the browser and the web page author’s style sheet, <em> can be rendered in several ways. Most often it’s visually rendered in italics, but not always. But there is one thing that’s always true of <em>. That one truth is that text marked up as <em> is always emphasized. <em> means emphasized. <em> is one of many self-describing HTML tags that tells you with its name exactly what it does to text. It emphasizes text. Maybe that emphasized text is rendered in italics, but may not. Semantically speaking, the italics aren’t the point. The emphasis is the point.
When you mark up text with <em>, do it because you intend to emphasize the text.
Then there’s <strong>. Using <strong> is a form of emphasis as well, but it differs semantically because it means strong emphasis. Depending on the browser and the web page author’s style sheet, <strong> is often rendered as bold, but not always. (On this blog, <strong> is rendered as both bold and with small caps.) The bold isn’t the point. The semantic point is that <strong> indicates strong emphasis.
When you mark up text with <strong>, do it because you intend strong emphasis.
Next we have <cite>. In the formatting world of self-describing semantic HTML, <cite> is used to mark up a citation. It most often is rendered as italic. Visually, you can’t tell a difference between <em> and <cite>. But the underlying meaning is different, the underlying semantic message is different. I can quote from Mastering Integrated HTML and CSS by using the <cite> element to indicate a book title. This element can also indicate a title of a web site or a blog.
Those are the semantic elements that may render as italic or bold.
There are two non-semantic HTML elements that render visually as italic or bold. These are <i> and <b>. If a user happens to be looking at your text, then they will see the visual cues to meaning that <i> and <b> provide. But not all users look at text. For text rendered by some means other than visual—say a screen reader or braille—there’s no meaning conveyed by <i> and <b> at all. It’s invisible. No hint of emphasis or clues to citations. <i> and <b> are presentational HTML with no semantic underpinnings.
When you use <i> and <b>, do it for visual reasons only. Such reasons do exist. Perhaps you want to italicize the opening paragraph of a long essay for no other reason than appearance. Use <i>. Perhaps you want the links in your menu to look bold for visual reasons, but not be emphasized. Use <b>.
ADDENDUM 3/11/2010: The latest draft of HTML5, issued this week, defines the <strong> element as showing strong importance rather than strong emphasis. Presumably this semantic change will be rendered differently by a screen reader.
