CSS Tutorial

CSS Tutorial

Lesson 5: Text

Formatting and adding style to text is a key issue for any web designer. In this lesson you will be introduced to the amazing opportunities CSS gives you to add layout to text. The following properties will be described:

Code: 
text-indent
text-align
text-decoration
letter-spacing
text-transform
Text indention [text-indent]

The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a 30px is applied to all text paragraphs marked with <p>:

Code: 
	p {
		text-indent: 30px;
	}

Text alignment [text-align]

The CSS property text-align corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the left, to the right or centred. In addition to this, the value justify will stretch each line so that both the right and left margins are straight. You know this layout from for example newspapers and magazines.

In the example below the text in table headings <th> is aligned to the right while the table data <td> are centred. In addition, normal text paragraphs are justified:

Code: 
	th {
		text-align: right;
	}

	td {
		text-align: center;
	}

	p {
		text-align: justify;
	}

Text decoration [text-decoration]

The property text-decoration makes it is possible to add different "decorations" or "effects" to text. For example, you can underline the text, have a line through or above the text, etc. In the following example, <h1> are underlined headlines, <h2> are headlines with a line above the text and <h3> are headlines with a line though the text.

Code: 
	h1 {
		text-decoration: underline;
	}

	h2 {
		text-decoration: overline;
	}

	h3 {
		text-decoration: line-through;
	}

Letter space [letter-spacing]

The spacing between text characters can be specified using the property letter-spacing. The value of the property is simply the desired width. For example, if you want a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in headlines <h1> the code below could be used.

Code: 
	h1 {
		letter-spacing: 6px;
	}

	p {
		letter-spacing: 3px;
	}

Text transformation [text-transform]

The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code.

An example could be the word "headline" which can be presented to the user as "HEADLINE" or "Headline". There are four possible values for text-transform:

capitalize
Capitalizes the first letter of each word. For example: "john doe" will be "John Doe".

uppercase
Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE".

lowercase
Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe".

none
No transformations - the text is presented as it appears in the HTML code.
As an example, we will use a list of names. The names are all marked with <li> (list-item). Let's say that we want names to be capitalized and headlines to be presented in uppercase letters.

Try to take a look at the HTML code for this example and you will see that the text actually is in lowercase.

Code: 
	h1 {
		text-transform: uppercase;
	}

	li {
		text-transform: capitalize;
	}

Summary

In the last three lessons you have already learned several CSS properties, but there is much more to CSS. In the next lesson we will take a look at links.
 
Lesson 6: Links

You can apply what you already learned in the previous lessons to links (i.e. change colors, fonts, underline, etc). The new thing is that CSS allows you to define these properties differently depending on whether the link is unvisited, visited, active, or whether the cursor is on the link. This makes it possible to add fancy and useful effects to your website. To control these effects you use so-called pseudo-classes.

What is a pseudo-class?

A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag.

Let's look at an example. As you know, links are specified in HTML with <a> tags. We can therefore use a as a selector in CSS:

Code: 
	a {
		color: blue;
	}

A link can have different states. For example, it can be visited or not visited. You can use pseudo-classes to assign different styles to visited and unvisited links.

Code: 
	a:link {
		color: blue;
	}

	a:visited {
		color: red;
	}

Use a:link and a:visited for unvisited and visited links respectively. Links that are active have the pseudo-class a:active and a:hover is when the cursor is on the link.

We will now go through each of the four pseudo-classes with examples and further explanation.

Pseudo-class: link

The pseudo-class :link is used for links leading to pages that the user has not visited.

In the code example below, unvisited links will be light blue.

Code: 
	a:link {
		color: #6699CC;
	}

Pseudo-class: visited

The pseudo-class :visited is used for links leading to pages that the user has visited. For example, the code below would make all visited links dark purple:

Code: 
	a:visited {
		color: #660099;
	}

Pseudo-class: active

The pseudo-class :active is used for links that are active.

This example gives active links a yellow background color:

Code: 
	a:active {
		background-color: #FFFF00;
	}

Pseudo-class: hover

The pseudo-class :hover is used when the mouse pointer hovers over a link.

This can be used to create interesting effects. For example, if we want our links to be orange and be italicized when the cursor is pointed at them, our CSS should look like this:

Code: 
	a:hover {
		color: orange;
		font-style: italic;
	}

Example 1: Effect when the cursor is over a link

It is particular popular to create different effects when the cursor is over a link. We will therefore look at a few extra examples related to the pseudo-class :hover.

Example 1a: Spacing between letters

As you will remember from lesson 5, the spacing between letters can be adjusted using the property letter-spacing. This can be applied to links for a special effect:

Code: 
	a:hover {
		letter-spacing: 10px;
		font-weight:bold;
		color:red;
	}

Example 1b: UPPERCASE and lowercase

In lesson 5 we looked at the property text-transform, which can switch between upper- and lowercase letters. This can also be used to create an effect for links:

Code: 
	a:hover {
		text-transform: uppercase;
		font-weight:bold;
		color:blue;
		background-color:yellow;
	}

The two examples gives you an idea about the almost endless possibilities for combining different properties. You can create your own effects - give it a try!

Example 2: Remove underline of links

A frequently asked question is how to remove the underlining of links?

You should consider carefully whether it is necessary to remove the underlining as it might decrease usability of your website significantly. People are used to blue underlined links on web pages and know that they can click on them. Even my mum knows that! If you change the underlining and color of links there is a good chance that users will get confused and therefore not get the full benefit of the content on your website.

That said, it is very simple to remove the underlining of links. As you will recall from lesson 5, the property text-decoration can be used to determine whether text is underlined or not. To remove underlining, simply set the value of text-decoration to none.

Code: 
	a {
		text-decoration:none;
	}

Alternatively, you can set text-decoration along with other properties for all four pseudo-classes.

Code: 
	a:link {
		color: blue;
		text-decoration:none;
	}

	a:visited {
		color: purple;
		text-decoration:none;
	}

	a:active {
		background-color: yellow;
		text-decoration:none;
	}

	a:hover {
		color:red;
		text-decoration:none;
	}

Summary

In this lesson you have learned about pseudo-classes, using some of the properties from the previous lessons. This should give you an idea of some the possibilities CSS provides.

In the next lesson we will teach you how to define properties for specific elements and groups of elements.
 
somo langu litaendelea pindi nitakapoona ninawanafunzi maana kwenye html nilikuwa na wanafunzi wakutosha
 
Shaffin Simbamwene said:
Mkuu Srebrina Samahani kwa kufukua makaburi ndiyo kwanza naziona hizi nyuzi za kitambo sana.
Je kuna mwendelezo wake au naomba link kama ipo
Click to expand...
Du ni long kweli alaf samahani sikuiona hii cooment yako jibu ni kwamba nilikosa response nikapunguza na kuamia kwa watu waliokuwa wananifata PM ila kama utaitaji naweza kukupatia muendelezo wa hii seminar
 
Just kwa msaada tu

tafakari kali said:
Asante mkuu Sasa nimejaribu kutengeneza web(kwa kuanzia si mbaya ) na nimejumuisha vitu vyote ulivyotufundisha ila kuweka picha bado nachemka . Picha zangu zipo kwe my pictures na nimeipa jina zinja sasa nikaweka hiv <img src="zinja.png"alt=Zinja"/> haijaja katika page zangu.. NACHEMSHA WAPI MKUU?
Click to expand...

unapochemka ni hapa <img src="zinja.png"alt=Zinja"/> ilipaswa iwe ivi <img src="file where images are stored/zinja.png"alt=Zinja"/>
 
keen salva said:
Just kwa msaada tu



unapochemka ni hapa <img src="zinja.png"alt=Zinja"/> ilipaswa iwe ivi <img src="file where images are stored/zinja.png"alt=Zinja"/>
Click to expand...

Mkuu after <img SRC="pic.PNG" alt="pic" />

Kumbuka pic folder na izo fungua na funga semi
 
Srebrina
Mkuu mimi Nina swali bado halijapatiwa usumbuzi.
Nimetengeneza folder langu lenye Web page nimezilink each other kwa kutumia frame yaani nimegawa top, left na main tatizo Niki upload kule 000webhost.com inadai index is missing.
Nimejaribu Kurename main.html kuwa index.html but haifunguki ila Niki weka page moja moja zinafunguka .
Nita upload file langu ucheck na unipe msaada Jinsi ya kufanya.
Natanguliza shukrani
 

Attachments

Shaffin Simbamwene said:
Srebrina
Mkuu mimi Nina swali bado halijapatiwa usumbuzi.
Nimetengeneza folder langu lenye Web page nimezilink each other kwa kutumia frame yaani nimegawa top, left na main tatizo Niki upload kule 000webhost.com inadai index is missing.
Nimejaribu Kurename main.html kuwa index.html but haifunguki ila Niki weka page moja moja zinafunguka .
Nita upload file langu ucheck na unipe msaada Jinsi ya kufanya.
Natanguliza shukrani
Click to expand...
Your welcome
 
You must log in or register to reply here.

Similar Discussions

Our Community

Coming Soon

Regional Communities

Coming Soon
Back
Top Bottom
Menu
Forums
New posts
Log in
Register