Tuesday, September 13, 2011

05 - List of Properties and their Values- 01


   Selectors properties related to Text

1) Font: 

1. 1)  Property:  font-family
     Value:        Such as Times New Roman, Arial, or Verdana.


     The most commonly used are arial, verdana and times new roman but you can specify
     more than one font, separated by commas. The purpose of this is that if the user does not
     have the first font you specify, the browser will go through the list until it finds one it does
     have. 


Note: if the name of a font is more than one word, it should be put in quotation marks, such as font-family: "Times New Roman".

1.2)  Property:  font-size
        Value:       12px or 2em

1.3) Property:  font-weight
       Value:       bold, normal

     This state’s whether the text is bold or not. In practice this usually only 
     works as font-weight: bold or font-weight: normal. Some browser use 
     bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900, but 
     some browsers not, it's safer to stick with bold and normal.

1.4)  Property:  font-style
        Value:        Italic or normal

This states whether the text is italic or not.


   2) text-decoration

This states whether the text is underlined or not. This can be:

  • text-decoration: overline, which places a line above the text.
  • text-decoration: line-through, strike-through, which puts a line through the text.
  • text-decoration: underline should only be used for links because users generally expect underlined text to be links.
      Ex:

<html >
<head>
<title></title>
</head>

<body>
    <h2 style="text-decoration:overline">Line Over Text</h2>
    <h2 style="text-decoration:line-through">Line through Text</h2>
    <h2 style="text-decoration:underline">Line Under Text</h2>
</body>
</html>


Output in browser:
This property is usually used to decorate links, such as specifying no underline with text-decoration: none.


   3) Text Terformation
This will change the case of the text.
  • text-transform: capitalize turns the first letter of every word into uppercase.
  • text-transform: uppercase turns everything into uppercase.
  • text-transform: lowercase turns everything into lowercase.
  • text-transform: none I'll leave for you to work out.
  Ex:

<html >
<head>
<title></title>
</head>

<body>
    <h2 style=" text-transform:capitalize">First Capital</h2>
    <h2 style=" text-transform:lowercase">All letters small</h2>
    <h2 style=" text-transform:uppercase">All letters Capital</h2>
</body>
</html>


Output in browser:

First Letter of Each Word is Capital
all letters small
ALL LETTERS CAPITAL


powered by multimediagyan ©

No comments:

Post a Comment