If you read the previous chapters carefully, you already know how to modify the appearance of your links. All you need to do is to apply styles on <a> tags.
By default, links are displayed in blue and are underlined. Let's imagine you don't want them to be underlined; you shall use:
text-decoration:none;
...which will cancel the underlining. Your links then, won't be underlined anymore.
I hope I haven't taught you too much 'till now
How about a little reviewing to get warmed up? After that, we will get on with serious business. Here is a CSS code that applies a few styles to make those horrible blue underlined links look better
Code: CSS1
2
3
4
5
6 | a
{
text-decoration: none; /* Links will no longer be underlined */
color: red; /* They will become red instead of being blue */
font-style: italic; /* They will be italicized (why not?) */
}
|
You are going to learn how to modify the way links are displayed:
- ... when the visitor's mouse pointer goes over it.
- ... when the visitor clicks on it.
- ... when he has already selected the link.
- ... when he has already visited the web page.
When the mouse pointer goes over a link
The first pseudo-format that I will show you is called :hover. Exactly like all the other pseudo-formats I am going to show you, it's a parameter that is to be added right after the name of the tag (or of the class) in the CSS code. It goes like this:
Code: CSS
"a:hover" means: "When the mouse is above a link" (when the pointer is on it).
On the left part, you put, as usual, the concerned tag (here it is <a>, the link tag). On the right part is where you put the pseudo-format.
From there, it is your job to define the appearance links should have when they are hovered. Make your imagination go crazy if you wish to, there's no limit
Here is an example of what you can do, but don't hesitate to make up your own:
Code: CSS 1
2
3
4
5
6
7
8
9
10
11
12 | a
{
text-decoration: none; /* The links won't be underlined anymore */
color: red; /* They will become red instead of being blue */
font-style: italic; /* They will be italicized (why not?) */
}
a:hover /* When the mouse pointer hovers the link */
{
text-decoration: underline; /* The link will become underlined when it is hovered */
color: green; /* It will also become green when it is hovered */
}
|
Isn't it nice?
The good news is that you can apply the ":hover" pseudo-format to any tag.
The bad news is that ":hover" only works for links.
On every other web browser (such as Mozilla Firefox, which I hope you have downloaded by now
), it works perfectly.
Here is an example of how to use :hover for a paragraph (to be tested with any other browser than IE):
Code: CSS1
2
3
4
5 | p:hover /* We the pointer goes over the paragraph */
{
background-color: #CFE1EB; /* The colour of the background changes */
text-indent: 20px;
}
|
If your mouse pointer goes over the paragraph, you will see that its colour changes. Not that useful, but isn't CSS made to decorate, after all?
During the click
The
:active pseudo-format allows you to apply a specific style
during the actual click. The link will keep that appearance for a very short time: only while one clicks on it with the mouse button. Therefore, it won't always be very visible.
As far as I am concerned, an effect that I think is nice with
:active is to change the background colour of the link. This way, you can definitely make sure that you have clicked on it.
Code: CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | a:active /* When the visitor clicks on the link */
{
background-color: #FFCC66;
}
a:hover /* When the visitor puts the cursor over the link */
{
text-decoration: underline;
color: green;
}
a /* Normal link */
{
text-decoration: none;
color: red;
font-style: italic;
}
|
Once the link is selected
It's almost the same thing. The
:focus pseudo-format applies a style when
a link is being selected.
What does that mean?
It means... that it's about the same as
:active, during the click (at least for a link).
This pseudo-format, applied to other xHTML tags that we haven't seen yet will give us the possibility to create pretty neat effects, you'll see
Unfortunately, :focus does not work at all with IE.
As opposed to :hover, which worked on links at least, :focus will not work at all on this browser.
That's why we'll need to try it with another browser and see how it turns out.
Concerning links, here is an example that's very similar to the previous one (the background is changed), so that you can compare:
Code: CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | a:focus /* When the visitor selects a link */
{
background-color: #FFCC66;}
a:hover /* When the visitor points on the link with the cursor */
{
text-decoration: underline;
color: green;
}
a /* Normal link */
{
text-decoration: none;
color: red;
font-style: italic;
}
|
You can see that the link keeps its blue background a bit longer. Personally, I prefer using
:focus instead of
:active, because I think it's more visible.
But, since IE doesn't understand focus, I apply the same style to both :focus and :active, as we learned how to do it in the first CSS chapter, by separating the names with commas:
Code: CSS1
2
3
4 | a:active, a:focus /* Applying the same style to :focus and :active */
{
background-color: #FFCC66;
}
|
The advantage of this technique is that if IE is the browser, it will only take :active (and the background will be a little bit coloured), whereas if it's another browser, the backround will stay longer, thanks to :focus.
It is up to you to judge which is the best thing to do. I am not forcing you to do anything
When the page has already been seen...
It is possible to apply a style to a link toward a webpage which has already been seen. By default, the browser puts the link into a horrible purple colour (even more horrible than the underlined blue one
)
Personally, I prefer not to modify the way links look when they have already been visited, because I think it's a little disturbing after all. But, again, it's just my point of view. I don't want to influence you
The pseudo-format we're dealing with here is called
:visited. A funny application (but not a very useful one) of this pseudo-format could be to cross off all this links which have already been visited:
Code: CSS 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | a:visited /* When the visitor has already visited the concerned web page */
{
text-decoration: line-through;
}
a:focus /* When the visitor selects the link */
{
background-color: #FFCC66;
}
a:hover /* When the visitor puts his cursor over the link */
{
text-decoration: underline;
color: green;
}
a /* Normal link */
{
text-decoration: none;
color: red;
font-style: italic;
}
|
If you have clicked on all the links, they will all be crossed off and you won't see much anymore
To be a little more serious, if you want to apply a precise style to links that have already been visited, I can advise you to colour them in a slightly lighter colour tone than the normal one. If your unvisited links are green, put your visited links in lime.
In the end, it's only a suggestion, but I think it's a pretty nice effect.
OK, I'll stop proposing my ideas to you, otherwise your sites will all look alike
Besides, we're done with pseudo-formats which are used with links. Now, we are going to focus on pseudo-formats that modify the first letter or first line of a paragraph.
Using CSS, it is possible to automatically change the appearance of the first character and the first line of a text within a tag.
Once again we will use pseudo-formats. Although it is mostly used with paragraphs, it also works very well with other tags (like titles).
First character
To change the appearance of the first character, you have to use the
:first-letter pseudo-format.
You can use it to bold each paragraph's first character in your page, and to make it bigger.
Also, if you decide to indent your text with
text-indent, it will end up looking like a novel or a newspaper article.
Code: CSS 1
2
3
4
5
6
7
8
9
10 | p:first-letter /* The first character from each paragraph */
{
font-weight: bold; /* Bold */
font-size: 1.2em; /* Slightly bigger */
color: blue; /* Blue */
}
p
{
text-indent: 20px;
}
|
First line
Another interesting pseudo-format can change the whole first line. Its name is
:first-line.
Applied to a paragraph, it would lead your visitor to read the text. For example, you could automatically write the first line of each paragraph in small capitals, to make it more attractive:
Code: CSS1
2
3
4
5
6
7
8 | p:first-line /* The first line of each paragraph */
{
font-variant: small-caps; /* Small Caps */
}
p
{
text-indent: 20px;
}
|
As you can see, it is pretty easy to do, no need to spend hours on this, so I will let you play around with these new features.
Pseudo-styles we are about to see are really interesting and quite different from what we have been doing with CSS until here. However, it is a bit more difficult than what we have done before, so you will have to keep your focus on it.
Foremost, I must tell you that those pseudo-styles are not supported by Internet Explorer; in other words, nothing will happen if you use them with this browser.
As many people still use IE nowadays, you should avoid using pseudo-styles.
Meanwhile, most of the other browsers support them so I advise you to learn them anyway; we are not going to let some old-fashioned browser bother us, are we?
So, what are those pseudo-styles about?
They allow you to add text at the beginning or at the end of your paragraphs so you do not have to write recurrent text yourself.
Let's say my webpage contains many questions. Usually, I would write the following xHTML code:
Code: HTML1 | <p>Question: How old is the webmaster?</p>
|
Now, let's say I am a lazy webmaster (and I am not the only one
). I would like to add the word "Question:" at the beginning of my questions and an "?" at their end.
I will create a "question" class to write this automatically.
Here is the xHTML code:
Code: HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | <h1>Many questions</h1>
<p>I created Newbies Paradise because I was sick and tired I could not find correct tutorials on the Internet.</p>
<p class="question">When was the website created</p>
<p>The french website was created around 1999</p>
<p class="question">What was the website's original name</p>
<p>The french site's name never changed: it has always been "Le Site du Zér0"</p>
<p class="question">How much time did you need to find such a stupid name</p>
<p>About fourty seconds. I know, it is already too long for a name like that but it is the best I could do ;o)</p>
<p class="question">How old is the webmaster</p>
<p>Huh? My age? Oh come on, I am sure you do not care about it<br />Okay, I will tell you: I began making that website when I was fourteen.</p>
|
Now let's use the following pseudo-styles:
We will use a new special CSS property to insert text:
content
Look at that CSS code for the "question" class:
Code: CSS1
2
3
4
5
6
7
8 | .question:before /* Before each question */
{
content: "Question: "; /* Start with Question: */
}
.question:after /* After every question */
{
content: "?"; /* To add a question-mark */
}
|
As you see,
content is a very special CSS property because it allows us to add text (before and after) and this is quite different of what we have been doing up to now (but do not worry, this is the only really special CSS property).
You can also use other CSS styles with :before or :after, you do not have to use
content only.
Code: CSS 1
2
3
4
5
6
7
8
9
10 | .question:before
{
content: "Question: ";
font-weight: bold; /* "Question" will be bold */
color: blue; /* "Question" will be blue */
}
.question:after
{
content: "?";
}
|
As you see, the text within :before will be displayed in bold and blue.
If you use the :first-letter pseudo-style with the "question" class to bold the first letter, it will only be the first letter of the "Question:" word (Q) which will be bold; :first-letter will be used on the first letter typed inside the :before pseudo-style only.
Using a picture instead of text?
You can also add a picture instead of some text with :before and :after.
For this, we still use the
content property but instead of text, we will type a "url" value, like this:
Code: CSS1
2
3
4
5
6
7
8 | .question:before
{
content: url("../../pictures/qst.gif"); /* To set a question picture*/
}
.question:after
{
content: "?";
}
|
Do not forget that relative path to the picture is based on your CSS file's position. If you specify the wrong path, the picture will not be displayed.
The situation I described is just an example and you need to adapt it yourself to your website.
However, keep in mind that those pseudo-styles are not supported by Internet Explorer so make sure your site works using this browser.
Even though they may be sometimes confusing, pseudo-styles are a very interesting aspect of CSS.
If your quiz answers were all correct: you got it right. If you made mistakes, no worries, it is not easy to figure it out at first. Try to make some more tests with the CSS codes we used, you will finally make it.
Basically, there is not much pseudo-format on the web besides links. As a matter of fact, links which have a different colour when you touch them are fun.
:first-line and :first-letter work well with every browser (even Internet Explorer) but they are not much used and that is a pity because they can easily make your webpage look better.
However, :before and :after are very rarely used because they do not work at all with IE and that is too bad since they would be useful for many webmasters (including me!). Until IE can understand pseudo-styles (hopefully in the next release), I would advise you to not use them.
Here ends the second part about CSS. Yes, it was short.
You have to admit that these last four chapters were filled with heaps of innovations for you!
Here is what we have done so far:
- The first part was about xHTML basics. Enough to be able to code your first webpage with links and pictures. The page was a bit ugly, but still...
- In this second part, we introduced CSS. From there, and without changing the xHTML file, you gave a better shape to your webpage using .css files. CSS features quasi unlimited options, it is only up to you to mix properties to achieve what you need.
- However, we do not know everything yet: there are still some more complex xHTML tags, mainly used to design tables or forms (combined with CSS). Also, you need to know about "layers", a must for website design.
Basically, in the third part, you will mix xHTML and CSS to eventually master the design of your website.
Stay tuned, we are down the last straight line and there is plenty of things to discover again.
Whenever you are ready, I'll meet you in the third part.
How-to
Community
User Menu
Search
Guestbook
Advertising
7 Newbies Connected |
10 Requests |
0.1084s (0.092s)
