Text in CSS

font-family

This is the font itself, like Times New Roman, Ariel, or Vardana.

The user's browser should be able to find the font you specify, in most cases it means that it should be on their computer, so there is very little to use the fuzzy fonts that are just sitting on your computer. There are some selected "secure" fonts (the most used aerial, wordana and times new roman), but you can specify more than one font, it can be separated by commas. The purpose of this is that if the user does not have the first font that you specify, then the browser will go to that list until it has any such thing. This is useful because sometimes different fonts are installed in different computers. So font-family: Ariel, Helvetica, serif, will first search for aerial font, and if the browser can not find it, then it will search for hevelista, and then there will be a normal serif font.

font-family: "Times New Roman".

font-size

Be careful with the size of the font-size font, with this - Text like header should not be just an HTML paragraph (p) in large font - still you use headings (H1, H2 etc.) Even if, in practice, you can create font-size larger than paragraph title (not recommended for discerning people).

h1 {
    font-size: 40px;}

h2 {
    font-size: 30px;}

p {
    font-size: 14px;}

font-weight

The font-weight indicates whether the text is bold or not. Normally it is used as font-weight: Bold or Font-Weight: Normal but other values include boulders, lighter, 100, 200, 300, 400 (in the same form), 500, 600, 700 (bold Similar), 800 or 900.

p.normal {
    font-weight: normal;}

p.thick {
    font-weight: bold;}

font-style

Font-style indicates whether the text is italic or not it can be font-style: italic or font-style: normal.

text-decoration

Text-decoration shows whether the text is running under a line, above, or through it.

Text-decoration: Underlined, What would you expect

Text-decoration: Holds a line over the overline text

Text-decoration: Inserts a line through line-through text ("strike-through")

This property is usually used to decorate the link and you can not underline any text-decoration: none.

text-transform

text-transform 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.

   Example - 

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 14px;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

a {
    text-decoration: none;
}

strong {
    font-style: italic;
    text-transform: uppercase;
}

Share on Google Plus

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.