CSS-properties

Setting Fonts using CSS:

1.font-family

2. font-style

3. font-variant

4. font-weight

5. font-size

1. The font-family property is used to change the face of a font.

2. The font-style property is used to make a font italic or oblique.

3. The font-variant property is used to create a small-caps effect.

4. The font-weight property is used to display bold or light a font appears

5. The font-size property is used to increase or decrease the size of a font.

Example:

This text is rendered in either georgia, garamond, or the default

serif font depending on which font you have at your system.

</p>

<html>

<head>

<style>

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

</style>

</head>

<body>

<p class="normal">This is a paragraph, normal.</p>

<p class="italic">This is a paragraph, italic.</p>

<p class="oblique">This is a paragraph, oblique.</p>

</body>

</html>

This font is bold.

</p>

This font is bolder.

</p>

This font is 900 weight.

</p>

This font size is 20 pixels

</p>

This font size is small

</p>

This font size is large

</p>

<head>

p.normal {font-variant:normal;}

p.small {font-variant:small-caps;}

</style>

</head>

<body>

<p class="normal">My name is SubbaRaju.</p>

<p class="small">My name is SubbaRaju.</p>

</body>

font Example:

<html>

<head>

p.ex1

{

font:25px tahoma;

}

</style>

</head>

<body>

<p class="ex1">This is a paragraph. This is a paragraph. This is a paragraph.</p>

</body>

</html>

CSS Basic Text Properties:

1. color

2. direction

3. letter-spacing

4. word-spacing

5. text-indent

6. text-align

7. text-decoration

8. text-transform

9. white-space

10. vertical-align

Manipulating Text using CSS

1. The color property is used to set the color of a text.

2. The direction property is used to set the text direction.

3. The letter-spacing property is used to add or subtract space between the letters that make up a word.

4. The word-spacing property is used to add or subtract space between the words of a sentence.

5. The text-indent property is used to indent the text of a paragraph.

6. The text-align property is used to align the text of a document.

7. The text-decoration property is used to underline, overline, and line-through text.

8. The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.

9. The white-space property is used to control the flow and formatting of text.

10. vertical-align property sets the vertical alignment of an element.

1. The color property is used to set the color of a text.

Syntax:

color:colorName/ColorCode

Example:

<head>

{

color:blue;

}

</style>

</head>

<body>

<p>Welcome to CSS Text Properties..!!</p>

</body>

Example:

<body>

<p style="color:blue">Welcome to CSS Text Properties..!!</p>

</body>

Examples

This text will be renedered from right to left

</p>

This text is having space between letters.

</p>

<head>

{

text-indent:50px;

}

</style>

</head>

<body>

<p>jQuery is a fast and concise JavaScript library created by John Resig in 2006 with a nice motto: Write less, do more. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for Rapid Web Development. jQuery is library of JavaScript file, containing all jQuery functions. jQuery developing Ajax base Application.</p>

</body>

This will be right aligned.

</p>

This will be center aligned.

</p>

This will be left aligned.

</p>

This will be underlined

</p>

This will be striked through.

</p>

This will have a over line.

</p>

This text will have blinking effect

</p>

This will be capitalized

</p>

This will be in uppercase

</p>

This will be in lowercase

</p>

<head>

{

white-space:nowrap;

}

</style>

</head>

<body>

<p>

This is some text. This is some text. This is some text.

</p>

</body>

If your browser supports the CSS text-shadow property,

this text will have a blue shadow.</p>

vertical-align Property Values

baseline

sub

super

top

text-top

middle

bottom

text-bottom

0px

10px

Example:

<head>

{

background-color:yellow;

vertical-align:super;

}

</style>

</head>

<body>

vertical alignment of an <b> element </b>

</body>

CSS - Images:

CSS plays a good role to control image display. You can set following image properties using CSS.

1.The border property is used to set the width of an image border.

2. The height property is used to set the height of an image.

3. The width property is used to set the width of an image.

The image border Property:

<br />

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 %.

<img style="border:1px solid red; height:100px;"

src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/html.png" />

<br />

<img style="border:1px solid red; height:50%;"

src="https://file-hosting.dashnexpages.net/sahrudayahelpinghands-students-org/html.png" />

CSS - Links

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.

Set the color of Links:

a:link {color:#000000}

</style>

<a href="nit1.html">Black Link</a>

Set the color of Visited Links:

a:visited {color: #006600}

</style>

<a href="nit1.html">Click this link</a>

Change the color of links when mouse is over:

<head>

a:hover

{

color: #FFCC99;

}

</style>

</head>

<body>

<a href="goodmorning.gif">Bring Mouse Here</a>

</body>

Change the color of active links:

a:active {color: #FF00CC}

</style>

<a href="nit1.html">Click This Link</a>

​ Setting Fonts using CSS:

Setting Fonts using CSS: