Selectors properties related to Text
1) Font:
1. 1) Property: font-family
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.
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.
<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
3) Text Terformation
This will change the case of the text.
<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:
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: underlineshould only be used for links because users generally expect underlined text to be links.
<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:
text-decoration: none.3) Text Terformation
text-transform: capitalizeturns the first letter of every word into uppercase.text-transform: uppercaseturns everything into uppercase.text-transform: lowercaseturns everything into lowercase.text-transform: noneI'll leave for you to work out.
<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