CSS – Pseudo Formats

 

 

We have just seen a lot of CSS properties in the previous chapter. You now know how to modify the size of text, its font, its colour etc etc…
In this chapter we’ll see a new aspect of CSS : what we call…pseudo formats

We won’t learn any new CSS properties (you already know quite a few), we are going to see how to apply them in precise cases. For example, we will see how to change the looks of a link when the mouse passes over it, how to automatically change the first letter of a paragraph etc…

All these elements should allow you to add more dynamism to you web site. Happy times

If you followed the previous chapters properly, you know how to modify the appearance of links. You just need to apply styles to the tags and that’s it.

By default, links are shown in blue and are underlined. Let’s suppose that you don’t want to underline them, you would use :
text-decoration: none;

…which will get rid of the underline. Therefore your links will no longer be underlined.

Right, up to there I hope I’m not teaching you anything new
Okay, a quick example, just to get started, then we’ll pass on to the serious things. Here’s a CSS that applies 2-3 styles to change the ugly default links :

a { text-decoration: none; /* The links will not be underlined */ color: red; /* The links will be red instead of blue */ font-style: italic; /* The links will be in italic (why not ?) */}

We’re going to learn how to change the appearance of links :

…when the visitor’s mouse hovers over them…when the visitor clicks on them…when the visitor has selected them…when the visitor has already seen a page

The first pseudo format I’m going to show you is called :hover. Like all the pseudo formats that I’m going to show you, it’s information that we add after a tag (or class) in CSS, like this :

a:hover { /*properties go here*/}

:hover means over.
a:hover therefore means when the mouse is over the link.
To the left you write the concerned tag (here it is , the link tag), and to the right you put the pseudo format.

And from there, it’s up to you to say what you want your links to look like when you go over them.
Here’s an example of links presentation, but don’t hesitate to try your own :

Code : CSS

a { text-decoration: none; /* The links won't be underlined */ color: red; /* The links will be red instead of blue */ font-style: italic; /* The links will be in italic (why not ?) */}a:hover { /* When the mouse goes over the link */ text-decoration: underline; /* The link will become underlined */ color: green; /* The text will go green */}

…and as we’ll be working on a few link examples here’s an XHTML code I made quickly :

Code : HTML

A Few Useful Addresses

Do you know Google ? It's the most used search engine in the world !
Do you know W3C ? They define the standards of XHTML & CSS.
Do you know Euro PC Solutions ? Errmmm yes, what a stupid question...

Sweet, isn’t it ?

The good news is that you can apply the pseudo format :hover to any tag.
The bad news is that on Internet Explorer 6 :hover only works on links. However, from memory this was fixed in Internet Explorer 7.

On all the other browsers (including Mozilla Firefox, which I hope you downloaded a while ago ) it works perfectly.

Here’s an example with :hover on a paragraph :

p:hover { background-color: #CFE1EB /* The background will become pale blue when the mouse goes over */ text-indent: 20px;}

When you go over the paragraphs, they will change colour. It’s not very useful, but after all the purpose of CSS is to decorate isn’t it ?

The pseudo format :active allows us to apply a particular style at the moment of the click. This style won’t be seen for very long : only when the visitor clicks on the link with the mouse. Really, it’s not always very visible.

Personally, I don’t really bother with this pseudo format, however if I were to use it I’d probably change the background colour of the link so that you can tell if you’ve properly clicked :

a:active { /* when the visitor clicks on the link */ background-color: #FFCC66;}a:hover { /* when the visitor goes over the link */ text-decoration: underline; color: green;}a { /* normal link */ text-decoration: none; color: red; font-style: italic;}

It’s hardly different to what we’ve just seen. The pseudo format :focus applies a style when the link is selected.

Meaning ?

This means that it’s a bit like :active, it’s at the moment of the click (for a link anyway).
This pseudo format, applied to other XHTML tags that we haven’t seen yet, will let us create some nice effects, you’ll see

Unfortunately, this doesn’t work on any of the versions of Internet Explorer before IE8.
Differently to :link which only worked on links, this won’t work at all on older versions of IE.

I’ll give you a very similar example to the last one (changing the background colour) so that you can see :

a:focus { /* When the visitor selects the link */ background-color: #FFCC66;}a:hover { /* When the visitor goes over the link */ text-decoration: underline; color: green;}a { text-decoration: none; color: red; font-style: italic;}

As you can see : the link keeps its background colour for longer. Personally, I prefer using :focus to :active because it’s more visible.
However, as IE can’t understand everything, I apply the same style to :focus and :active, as I showed you in the first chapter on CSS, by separating the names with a comma :

a:active, a:focus { /* Apply the same style to active and focus links */ background-color: #FFCC66;}

The advantage to doing this is that if the browser is older than IE8, it will use a:active (and the background will change briefly), but if the visitor has another browser, :focus will be used and the background colour will be more visible.

It’s up to you to do what you want, I’m not making you do anything

It’s possible to apply a style when a page has already been seen. By default, browsers put links in an ugly purple colour (even worse than the underlined blue links )

Personally, I avoid changing the looks of links that have already been seen because I find that in the end it looks a bit unpleasant visually. But once again, that’s just a personal opinion and you’re free to do what you wish

The pseudo format that does this is :visited. A fun use of this pseudo format (although not very useful) would be to cross out the links that have been visited :

a:visited { /* When the visitor has already seen the page */ text-decoration: line-through;}a:focus, a:active { /* When the visitor clicks on the link */ background-color: #FFCC66;}a:hover { /* When the visitor goes over the link */ text-decoration: underline; color: green;}a { /* The normal link */ text-decoration: none; color: red; font-style: italic;}

If you’ve used the same XHTML example as before and already clicked on all the links, all the links will be crossed out and you won’t see a lot

More seriously, if you want to apply a precise style to links that have already been visited, I suggest putting a slightly lighter colour than the normal links.
However, it’s only a suggestion, but I find that it can look good.

Right, I’m going to stop giving you all my ideas, or else all your sites will look like eachother
We’ve finished talking about pseudo formats for links. We’ll now have a look at the pseudo formats to change the first letter or first line of a paragraph.

In CSS, it’s possible to automatically modify the appearance of the fist letter and first line of text in a tag.
Once again we’ll be using pseudo formats to achieve this. Even though most of my examples will be on paragraphs don’t forget that it also works on other tags (such as titles etc…).

To modify the appearance of the first letter, you use the pseudo format :first-letter.

We can use it to write the first letter of your paragraphs in bold and bigger.
If you also want to indent your text with text-indent, we’ll end up by thinking we’re in a storey or newspaper article

Code : CSS

p:first-letter { /* the first letter of each paragraph */ font-weight: bold; /* in bold */ font-size: 1.2em; /* a bit bigger than normal */ color: blue; /* written in blue */}p { text-indent: 20px;}

…and I’ll give you a new example to work with :

Code : HTML

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ornare tristique pede. Aliquam arcu leo, imperdiet eget, dapibus non, accumsan quis, est. Sed eget massa. Praesent mi. Cras sollicitudin erat non tellus. Quisque sit amet leo. Sed volutpat faucibus eros. Duis eget libero. Ut luctus. Nullam sit amet nibh vel quam accumsan aliquam. Curabitur elementum. Nulla purus dolor, aliquet ac, gravida sit amet, vehicula non, elit. Morbi neque quam, viverra eget, bibendum dictum, condimentum sit amet, nibh. Nunc sit amet nisl eu eros ullamcorper dictum. In orci ligula, viverra non, tempus sit amet, dapibus sit amet, lectus. Pellentesque pharetra. Nam gravida. Pellentesque dignissim. Ut eu leo sed urna ullamcorper aliquam. Nunc ultricies quam sed mauris bibendum iaculis.

Vivamus pulvinar diam sit amet quam. Nunc dui elit, mattis ut, rhoncus quis, accumsan in, tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur eu mauris at risus ullamcorper consequat. Praesent vulputate metus ac pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum orci leo, euismod vitae, pulvinar a, aliquet a, tellus. Morbi tincidunt malesuada leo. Proin tincidunt libero at nibh. Cras sollicitudin vulputate nunc. Suspendisse blandit purus vel magna. Nulla dignissim lectus euismod odio.

Ut ultrices dapibus velit. Aliquam erat volutpat. In tempus libero. Proin tempus. Aenean odio wisi, laoreet nec, viverra et, congue ac, risus. Morbi consectetuer elit et turpis. Vivamus pulvinar. Donec ornare dapibus nibh. Sed odio. In eget turpis.

Maecenas pretium eros nec tortor. Morbi at ipsum quis massa varius tempus. Morbi placerat eros sit amet quam. Nulla in lorem ut neque volutpat adipiscing. Pellentesque erat magna, volutpat non, rhoncus sollicitudin, tincidunt vitae, felis. Praesent eget magna. Sed dictum. Mauris vehicula auctor risus. Curabitur neque nunc, interdum et, vestibulum id, placerat sit amet, elit. Etiam nec elit id nisl molestie dictum. Maecenas elementum lectus ut magna. In ut sem. Proin suscipit, metus non viverra sodales, elit diam fermentum est, a feugiat eros lorem id risus.

Nunc ac quam. Curabitur neque orci, malesuada eget, imperdiet ac, tincidunt vel, nisl. Fusce faucibus. Aliquam eleifend, nisl vitae molestie posuere, erat velit sollicitudin wisi, in laoreet est sapien et quam. Sed tincidunt. In sodales neque vel dui. Nunc ut orci in metus molestie tempor. Sed urna. Etiam ut neque auctor sem elementum rutrum. Etiam ac lectus. Sed mollis sem nec tortor. Sed volutpat risus sed magna.

Another pseudo format that can be interesting is :first-line.

When applied to paragraphs. It allows us to change the whole first line. For example, you could put the first line in small capitals to make it more attractive :

p:first-line { /* The first line of each paragraph */ font-variant: small-caps; /* In small capitals */}p { text-indent: 20px;}

Well, we won’t spend 3/4 hour on that, it’s easy to use so I’ll just leave you to mess around with it

The pseudo formats we are now going to see are very interesting and change a bit from what we’re used to in CSS. It’s also a bit more difficult than the rest, so pay attention, it’s worth it.
As always, there’s a small detail that will get in our way (again !). These pseudo formats don’t work at all on Internet Explorer before IE8. Nothing will happen on this browser.

As several people still use Internet Explorer 7 and 6, you shouldn’t use too many of these pseudo formats so that you don’t penalise these visitors (or you could do just to teach them a lesson…)
They do however work without any problems on all the other browsers and I think it best that you learn how to use them. It’s not an old browser, that isn’t up to date, that should limit your knowledge

Right, so what are we talking about ?
We’re talking of the possibility to automatically add text before and after certain paragraphs, to reduce the amount of text you have to write.

For example, let’s suppose that I want to ask a lot of questions in a web page. Normally I would write the following in XHTML to ask a question :

Question : How old is the webmaster ?

Right, now let’s suppose that I’m a lazy webmaster (you don’t have a clue how many lazy webmasters there are, and I’m included :p ). I would like to automatically insert Question : at the beginning and a question mark at the end so that I don’t have to repeat it 50 times in my XHTML code.
I will create a class question which will allow me to automatically sort out the questions in my text.

Here’s the XHTML code to help you understand :

A Lot Of Questions

I created the Euro PC Solutions' Blog because I was fed up of not being able to find good tutorials.

When was this site created

The Blog was started in 2010

What was the first name of the site

It's not old enough to have changed name ! It's always been called "Euro PC Solutions"

How long did you spend looking for a name

About two weeks, and then it wasn't even me who found it ! A friend did

How old is the webmaster of this site

Who ? Me ? My age won't interest anyone !
Right, okay, one small clue, with that you'll be able to find my age : I started creating this site when I was 20.

Now we’ll use the following pseudo formats :

:before : what we want to add in front:after : what we want to put at the end

We’ll also be using a new CSS property to insert the text : content.
Look at how I use :before and :after on paragraphs that are part of question :

Code : CSS

.question:before { /* before each question */ content: "Question : "; /* start by Question : */}.question:after { /* after each question */ content: " ?" /* add a question mark */}

content truly is a peculiar property, as it allows us to indicate the text that we want to add before or after. It is a bit different to what we have seen previously(and I promise you, it’s the only strange property).

You don’t have to just put content inside :before and :after. You can also use all the other CSS styles that you know. These styles will be applied to the text added by :before and :after.

Code : CSS

.question:before { content: "Question : "; font-weight: bold; /* Question will be put in bold */ color: blue; /* Question will be in blue */}.question:after { content: " ?";}

As you can see, the text in :before has become blue and bold.

If you apply the pseudo format :first-letter to the class question, for example to make the first letter bold, it’s the first letter of Question : (the Q) that will become bold and not the first letter just after Question : . :first-letter will therefore be applied in the :before pseudo function.

It is possible to insert images instead of text with :before and :after.

Save the following image in your images folder :

We still use the CSS property content, but instead of writing text, we give a url value like this :

.question:before { content: url("../images/qst.gif"); /* put an image before the question */}.question:after { content: " ?";}Don’t forget that the related path to your image is from the CSS file and not the XHTML file. If the path is wrong the image won’t be shown.

What I have shown you are only examples, you will certainly find more useful things to do with them in your web site
Don’t forget however that these pseudo formats don’t work on older versions of IE, so make sure that everything still looks alright in this browser.

Pseudo formats are a very interesting aspect of CSS, even though they do sometimes bring confusion.
Really, pseudo formats aren’t used very often on the internet apart from those concerning links. It’s true that making your links change colour etc is a nice feature to have
:first-line and :first-letter work well on every browser (including Internet Explorer) but aren’t used very often which is a shame because they can make sites look nicer
:before and :after only started working in Internet Explorer when IE8 came out so they’re not used a lot either. It’s a shame because a lot of webmasters, including myself, would like to use them more often. Until most people have started using IE8 or a different browser I recommend that you don’t use them either

That’s already the end of part II of these lessons.
However the four chapters were very rich in new properties to learn

If we summarise what we have done up until now :

In part 1 I taught you the basics of XHTML, so that you could make pages with text and images. The pages were a bit ugly but well…In part II we introduced CSS. Now, without changing anything in the XHTML code, you can give a nice look to your pages using .css files. The possibilities are practically unlimited.However, we still haven’t seen everything on creating web sites. There are still the more complicated XHTML tags to see, mainly the tags for creating tables and forms (mixed with CSS to give them a nice look). Then we need to create a fully functional web site

So in part III we will be mixing CSS and XHTML which will finally let you control the full design of your web site

When you are ready you can carry on to part III