Facebooktwittergoogle_plusredditpinterestlinkedinmail

Text Style

Text style includes font-family, font-size, font-style, font-weight, font-variant.

Font Value
font-family Arial, Times New Roman, Courier New, Georgia, Verdana
font-size 9px, 10px…………….Large
font-style Normal, italic, oblique
Font-weight Normal, bold, number
Font-variant Normal, small-caps

Example 1

<html>
<head>
<title>Content Style</title>
</head>
<body>
<style >#f{font-family:Times New Roman;font-size:28px;font-style:italic;font-weight:bold;font-variant:normal</style>
<div id ="f">Hello Friend's Welcome to PHPGurukul</div>
</body>
</html>

Output

 

Hello Friend’s Welcome to PHPGurukul

Explanation

“font-family, font-size, font-style, font-weight, font-variant” specifies the text style for the font.

Spacing

The line-weight can specify line spacing.

The word-spacing can specify word spacing.

The letter- spacing can specify letter spacing.

Example 2

<html>
<head>
<title>Content Style</title>
</head>
<body>
<style >
	#lineSpacing{line-height: 500%}
	#wordSpacing{word-spacing: 10px}
	#letterSpacing{letter-spacing: 5px}
</style>
<p id ="lineSpacing">Line Spacing Sample.</p>
<p id ="wordSpacing">Word Spacing Sample.</p>
<p id ="letterSpacing">Letter Spacing Sample.</p>
</body>
</html>

Output

 

Line Spacing Sample.

Word Spacing Sample.

Letter Spacing Sample.

Explanation

line-height: 500%}specifies the line height as 500%.

“word-spacing: 10px” specifies the word spacing as 10px.

“letter-spacing: 5px” specifies the letter spacing as 5px.

Divided Style

The dividing <div></div> tags are used to group their content elements as blocks. <div> tags are useful for styling purposes.

<div class = “xxx”></div>
<div id = “xxx”></div>

The <div> tags can have id and class in CSS style.

Example 3

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<body>
<style >
	.d1{font-style: italic;color: red;}
	#d2{font-family:arial black; color: blue;}
</style>
<div class="d1"><p>AAAAA</p>
<p>BBBBB</p>
<p>CCCCC</p></div>
<div id="d2">
<p>EEEEEE</p>
<p>FFFFFF</p>
<p>GGGGGG</p></div>
</body>
</html>

Output

 

Explanation

<div class=”d1″></div> is divided as first group which contains three pairs of <p> tags they use “.d1” style.

<div class=”d2″></div> is divided as second group which contains other three pairs of <p> tags they use “#d2” style.

Span Style

<span></span> can be used to group elements for styling purposes(using the class or id attribute).

<span class =”xxx ”></span>
<span id =”xxx ”></span>

The <span> tag can have id and class attribute in CSS style.

Example 4

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >
	div{background-color: yellow;}
	.d1{font-style: italic;color: red;}
	#d2{font-family:italic; color: blue;}
</style>
<body>
<div><p>This is AAAAA text,<span class="d1">This is BBBBB text,</span>This is CCCCC text,<span id="d2"> This is DDDD text,</span>This is EEEEE text</p></div>
</body>
</html>

Output

 

This is AAAAA text,This is BBBBB text,This is CCCCC text, This is DDDD text,This is EEEEE text

Explanation

The above uses <span></span> tags to set the css style of two pieces of text within a paragraph which contained in a block.

<span> is very much like <div> element, but <div> is a block-level element whereas a <span> is an inline element.

Border Style

border-style: value

“border-style: value” can set the border style by specifying different value. The “value” may be “solid, double, dashed, dotes, groove, ridge, inset, outset”.

Example 5

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >
	
#b1{border-style: solid;border-width: 10px;}
    #b2{border-style: double;border-width: 10px;}
	#b3{border-style: dashed;border-width: 10px;}
	#b4{border-style: dotted;border-width: 10px;}
	#b5{border-style: groove;border-width: 10px;}
	#b6{border-style: ridge;border-width: 10px;}
	#b7{border-style: inset;border-width: 10px;}
	#b8{border-style: outset;border-width: 10px;}
</style>
<body>
<p id="b1">This is solid border</p><br>
<p id="b3">This is dashed border</p><br>
<p id="b4">This is dotted border</p><br>
<p id="b5">This is groove border</p><br>
<p id="b6">This is ridge border</p><br>
<p id="b7">This is inset border</p><br>
<p id="b8">This is outset border</p><br>
</body>
</html>

Output

 

This is solid border

This is dashed border

This is dotted border

This is groove border

This is ridge border

This is inset border

This is outset border

Explanation

The “border-style: value” may be “solid, double, dashed, dotted, groove, ridge, inset, outset”.

The “border-width: 10px” specifies the border width as 10 px.

Border Color

border-color: value

“border-color: value” can set the border properties for color.

Example 6

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >
#b5{border-style: groove;border-width: 20px;border-color: blue}
#b6{border-style: ridge;border-width: 20px;border-color: red}
</style>
<body>
<p id="b5">This is groove border</p><br>
<p id="b6">This is ridge border</p><br>
</body>
</html>

Output

 

This is groove border

This is ridge border

Explanation

“border-color: value” can set the border color.

Padding Style

The padding is the area around the text content in a content box. The padding width can be specified with a padding attribute.

padding:value

Example 7

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >
#b1{border-style: solid;border-width: 10px;padding: 10px}
    #b2{border-style: dotted;border-width: 10px;padding: 20pxs}	
</style>
<body>
<p id="b1">This is solid border</p><br>
<p id="b2">This is double border</p><br>
</body>
</html>

Output

 

This is solid border

Explanation

“padding-value” can set the padding width.

Margin Style

The margin is the area around the border edges.

The margin width can be specified with a margin attribute.

margin:value

Example 8

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >
#b1{border-style: solid;border-width: 10px;margin: 30px}
   #b2{border-style: dotted;border-width: 10px;margin:0px}	
</style>
<body>
<p id="b1">This is solid border</p><br>
</body>
</html>

Output

 

This is solid border

Explanation

“margin: value” can set the margin width.

Absolute Positioning

The content position can be specified by position attribute.

position: absolute ; top: value; left: value;

“position: absolute” sets the precise location of the contents.

“top:value” set the distance from the top edge of the window.

“left:value” set the distance from the left edge of the window.

Example 9

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >
#b1{position: absolute;top: 0px;left: 30px}
   #b2{position: absolute;top: 30px;left: 60px}
</style>
<body>
<p id="b1">This is position 1</p><br>
<p id="b2">This is position 2</p><br>
</body>
</html>

Output

 

This is position 1

Explanation

“position: absolute ; top: value; left: value;” specifies the absolute distance from the browser window edge.

Relative Positioning

position:relative;top:percentage;left:percentage

“position: relative” sets the relative location of the contents based on the browser resolution or window size.

“top: percentage” sets the distance from the top edge of the window. “left: percentage” sets the distance from the left edge of the window.

Example 10

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style >	
#b1{position: relative;top:3%;left: 5%}
   </style>
<body>
<p id="b1">This is relatived position</p><br>
</body>
</html>

Output

 

This is relatived position

Explanation

“position: relative;top:3%;left: 5%}” specifies the relative position based on the resolution or size of the browser window.