CSS Basics 106c - More Text Styling

Home Tutorials Reviews Weblog
Featuring: More advanced text stylings are explored here.
Motivation: Again browser implementations vary widely.

Samples of CSS style rules that will be explained in the tutorial below:
Stylings
p:first-letter {color: red; font-size:166%;}
h6:first-line {color: white ; background-color: brown;}
.outlined { outline: 2px solid brown; color: green;}
.bounder { border: 2px solid brown; color: green;}
span:hover{ background:blue ; color: white;}


In the past tutorial, text as snaking inlines or rectangular blocks were examined and CSS implementations by the browser vendors were were found to be either very good or very bad - legacy of the rapid rush to development in Web browsers; but also the deliberate delay and sabotage by Microsoft of many web standards. As more advanced text effects are explored in this tutorial there will be unfortunately more of the same. This review will try to identify some of the safer places to go.

First-Letter, First-Line Text Properties

In many DTP-programs, the test of worthiness for the program is how they render Dropcaps - the highlighting of the first letter of each paragraph. Well I have the first-letter property on for this complete review - see the first Styling in the list at the top. And as you can see, no browser implements first-letter.

However, for first-line which I have added to the <h6> tag for the Featuring: and Motivation: leads into this review most of the browsers do implement that. Notice that both first-letter and first-line are among CSS's pseudo elements. The idea behind pseudo elements are special non-HTML properties (they are more DTP and XML oriented) . The next styling :hover is another pseudo element.

The Hovering Span

One of the things I have really wanted to be able to do is change the background and color of the type associated with text - especially when the user hovers their mouse over the text. This reduces the glare of a page but still indicates some important points when the user is near the text. It also works well in tables of values as shown below. Below I have applied a span:hover { color:white; background-color:blue} to the table rows. This styling works in al browsers but IE.

However, there were unintended consequences - the styling gets carried along to every <span> tag. So I tried a .hovering span:hover { color:white; background-color:blue} styling - but then no browser would display the styling. So you win some and lose some in the world of CSS standards.
There are 4 positionings in CSS - absolute is co-ordinate based but relative to the parent container;
relative uses co-ordinate variances from the current tag - and leaves a gap behind
fixed uses co-ordinates relative to the browser Window port
static allows no co-ordinates to be used :Hover with a mouse over these lines and they should light up

There are a number of pseudo elements in CSS 2 including before, first-child, lang, left and right. In CSS 3 there are many more. The problem is that implementation of these pseudo classes is also quite variable among browser vendors. I shall cover this as a special review later in this CSS series.

Outline Property

Here is a nother example of being able to do specialized DTP-like operations - put an outline around some anonymous text so that its it not set-off from the core paragraph. In this paragraph I have tried to do so with a <span> on this very text. But as you can see the <span> borders every line - or at least does so in many browsers. What I really want is for the border to surround the text as in the screen shot below:

Currently, Safari is the only browser which implements the outline property correctly. Familiar story line, oh woe to Web developers like you and me - especially with more advanced CSS text stylings.

Border, Margin, Padding Shortcuts

CSS allows users to apply some time savings shortcuts when specifying border, margin and padding settings. Here are listed some examples followed by a statement of the general rule.
border: 3px solid blue is equivalent to these 4 CSS stylings:
border-top: 3px solid blue;
border-right: 3px solid blue;
border-: 3px solid blue;
border-top: 3px solid blue;

This is the simple 1 value rule - the same value(s) is(are) applied to all sides.

margin: 20px 2em is equivalent to these 4 CSS stylings:
margin-top: 20px;
margin-bottom: 20px;
margin-left: 2em;
margin-right: em;
This is the 2 values rule: 1=top and bottom 2=

and padding: 5cm 0.5in 3pc is equivalent to these 4 CSS stylings:
padding-top: 5cm;
padding-bottom: 0.5in;
padding-left: 3pc;
padding-right: 3pc;
This is the 3 values rule: 1=top 2=bottom 3=right and left for the third value.

while margin: 20px 2em 10pc 30mm is equivalent to these 4 CSS stylings:
margin-top: 20px;
margin-right: 2em
margin-bottom: 10pc
margin-left: 30mm;
This is the clockwise from the top rule: 1=top 2=right 3=bottom 4=left when 4 values are given.
Two things to note. First, Second note in the shorthand there are no commas separating the values. Add commas and for most browsers the styling will not work. Second, the even better news is that all the browsers follow these shorthand rules. Whew!

Summary

Again we meet mixed implementations of CSS rules in Web browsers. Safari appears to be the best, IE the worst along with the Dreamweaver CS3 preview. What can I say that I have not said before - except demand better of your Web vendors. For more details on these CSS text stylings , check pages 88-89 inCSS in Easy Steps by Mike McGrath while Beginning CSS by Richard York covers first-line, fisrt-letter and other pseudo elements indetail from pages 108 to 121.



Top of Page  Tutorials Home  CSS references