CSS TEXT

Dr. Fareed Ahmed Jokhio

 CSS TEXT
• You can set the following text properties of an
element:
• The color property is used to set the color of a
text.
• The direction property is used to set the text
direction.
• The letter-spacing property is used to add or
subtract space between the letters that make up
a word.
 CSS TEXT
• The word-spacing property is used to add or
subtract space between the words of a sentence.
• The text-indent property is used to indent the
text of a paragraph.
• The text-align property is used to align the text
of a document.
• The text-decoration property is used to
underline, overline, and strikethrough text.
 CSS TEXT
• The text-transform property is used to
capitalize text or convert text to uppercase or
lowercase letters.
• The white-space property is used to control
the flow and formatting of text.
• The text-shadow property is used to set the
text shadow around a text.
 Set the Text Color
• The following example demonstrates how to
set the text color.
• Possible value could be any color name in any
valid format.
• <p style="color:red;">
• This text will be written in red.
• </p>
• It will produce the following result:
 Set the Text Direction
• The following example demonstrates how to
set the direction of a text.
• Possible values are ltr or rtl.
• <p style="direction:rtl;">
• This text will be renedered from right to left
• </p>
• It will produce the following result:
Set the Space between Characters
• The following example demonstrates how to
set the space between characters.
• Possible values are normal or a number
specifying space.
• <p style="letter-spacing:5px;">
• This text is having space between letters.
• </p>
• It will produce the following result:
 Set the Space between Words
• The following example demonstrates how to
set the space between words.
• Possible values are normal or a number
specifying space.
• <p style="word-spacing:5px;">
• This text is having space between words.
• </p>
• It will produce the following result:
 Set the Text Indent
• The following example demonstrates how to
indent the first line of a paragraph.
• Possible values are % or a number specifying
indent space.
 Set the Text Indent
• <p style="text-indent:1cm;">
• This text will have first line indented by 1cm
• and this line will remain at its actual position
• this is done by CSS text-indent property.
• </p>
• It will produce the following result:
 Set the Text Alignment
• The following example demonstrates how to
align a text.
• Possible values are left, right, center, justify.
 Set the Text Alignment
• <p style="text-align:right;">
• This will be right aligned.
• </p>
• <p style="text-align:center;">
• This will be center aligned.
• </p>
• <p style="text-align:left;">
• This will be left aligned.
• </p>
 Set the Text Alignment
• It will produce the following result:
 Decorating the Text
• The following example demonstrates how to
decorate a text.
• Possible values are none, underline, overline,
line-through, blink.
 Decorating the Text
• <p style="text-decoration:underline;">
• This will be underlined </p>
• <p style="text-decoration:line-through;">
• This will be striked through. </p>
• <p style="text-decoration:overline;">
• This will have a over line. </p>
• <p style="text-decoration:blink;">
• This text will have blinking effect </p>
 Decorating the Text
• It will produce the following result:
 Set the Text Cases
• The following example demonstrates how to
set the cases for a text.
• Possible values are none, capitalize,
uppercase, lowercase.
 Set the Text Cases
• <p style="text-transform:capitalize;">
• This will be capitalized </p>
• <p style="text-transform:uppercase;">
• This will be in uppercase </p>
• <p style="text-transform:lowercase;">
• This will be in lowercase </p>
 Set the Text Cases
• It will produce the following result:
Set the White Space between Text
• The following example demonstrates how
white space inside an element is handled.
• Possible values are normal, pre, nowrap.
• <p style="white-space:pre;">This text has a
line break and the white-space pre setting tells
the browser to honor it just like the HTML pre
tag.</p>
Set the White Space between Text
• It will produce the following result:
 Set the Text Shadow
• The following example demonstrates how to
set the shadow around a text.
• This may not be supported by all the
browsers.
• <p style="text-shadow:4px 4px 8px blue;">
• If your browser supports the CSS text-shadow
property,
• this text will have a blue shadow.</p>
 Set the Text Shadow
• It will produce the following result:
 IMAGES
• Images play an important role in any webpage.
• Though it is not recommended to include a lot
of images, but it is still important to use good
images wherever required.
• CSS plays a good role to control image display.
• You can set the following image properties
using CSS.
 IMAGES
• The border property is used to set the width
of an image border.
• The height property is used to set the height
of an image.
• The width property is used to set the width of
an image.
• The -moz-opacity property is used to set the
opacity of an image.
 The Image Border Property
• The border property of an image is used to set
the width of an image border.
• This property can have a value in length or in
%.
• A width of zero pixels means no border.
• Here is an example:
 The Image Border Property
• <img style="border:0px;" src="/images/css.gif"
/>
• <br />
• <img style="border:3px dashed red;"
src="/images/css.gif" />
 The Image Border Property
• It will produce the following result:
 The Image Height Property
• The height property of an image is used to set
the height of an image.
• This property can have a value in length or in
%.
• While giving value in %, it applies it in respect
of the box in which an image is available.
• Here is an example:
 The Image Height Property
• <img style="border:1px solid red;
height:100px;“ src="/images/css.gif" />
• <br />
• <img style="border:1px solid red; height:50%;"
src="/images/css.gif" />
 The Image Height Property
• It will produce the following result:
 The Image Width Property
• The width property of an image is used to set
the width of an image.
• This property can have a value in length or in
%.
• While giving value in %, it applies it in respect
of the box in which an image is available.
• Here is an example:
 The Image Width Property
• <img style="border:1px solid red;
width:100px;“ src="/images/css.gif" />
• <br />
• <img style="border:1px solid red;
width:100%;“ src="/images/css.gif" />
• It will produce the following result:
The Image Width Property
 The -moz-opacity Property
• The -moz-opacity property of an image is used
to set the opacity of an image.
• This property is used to create a transparent
image in Mozilla.
• IE uses filter:alpha(opacity=x) to create
transparent images.
 The -moz-opacity Property
• In Mozilla (-moz-opacity:x), x can be a value from
0.0 - 1.0.
• A lower value makes the element more
transparent (The same things goes for the CSS3-
valid syntax opacity:x).
• In IE (filter:alpha(opacity=x)), x can be a value
from 0 - 100.
• A lower value makes the element more
transparent.
 The -moz-opacity Property
• Here is an example:
• <img style="border:1px solid red;-moz-
opacity:0.4;filter:alpha(opacity=40);"
• src="/images/css.gif" />
• It will produce the following result:
 LINKS
• You can set the following properties of a hyperlink:
• We will revisit the same properties when we will
discuss Pseudo-Classes of CSS.
• The :link signifies unvisited hyperlinks.
• The :visited signifies visited hyperlinks.
• The :hover signifies an element that currently has
the user's mouse pointer hovering over it.
• The :active signifies an element on which the user
is currently clicking.
 LINKS
• Usually, all these properties are kept in the
header part of the HTML document.
• Remember a:hover MUST come after a:link
and a:visited in the CSS definition in order to
be effective.
• Also, a:active MUST come after a:hover in the
CSS definition as follows:
 LINKS
• <style type="text/css">
• a:link {color: #000000}
• a:visited {color: #006600}
• a:hover {color: #FFCC00}
• a:active {color: #FF00CC}
• </style>
• Now, we will see how to use these properties
to give different effects to hyperlinks.
 Set the Color of Links
• The following example demonstrates how to
set the link color.
• Possible values could be any color name in any
valid format.
• <style type="text/css">
• a:link {color:#000000}
• </style>
• <a href="/html/index.htm">Black Link</a>
 Set the Color of Links
• It will produce the following black link:
 Set the Color of Visited Links
• The following example demonstrates how to
set the color of the visited links.
• Possible values could be any color name in any
valid format.
• <style type="text/css">
• a:visited {color: #006600}
• </style>
• <a href="/html/index.htm">Click this link</a>
 Set the Color of Visited Links
• It will produce the following link.

• Once you click this link, it will change its color

to green.
 Change the Color of Links when Mouse is
Over
• The following example demonstrates how to
change the color of links when we bring a
mouse pointer over that link.
• Possible values could be any color name in any
valid format.
 Change the Color of Links when Mouse is
Over
• <style type="text/css">
• a:hover {color: #FFCC00}
• </style>
• <a href="/html/index.htm">Bring Mouse
Here</a>
 Change the Color of Links when Mouse is
Over
• It will produce the following link.

• Now, you bring your mouse over this link and

you will see that it changes its color to yellow.
 Change the Color of Active Links
• The following example demonstrates how to
change the color of active links.
• Possible values could be any color name in any
valid format.
• <style type="text/css">
• a:active {color: #FF00CC}
• </style>
• <a href="/html/index.htm">Click This Link</a>
 Change the Color of Active Links
• It will produce the following link.

• It will change its color to pink when the user

clicks it.