Content Style in HTML

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 type="text/css">#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>

<html>

<head>

<title>Content Style</title>

</head>

<body>

<div id ="f">Hello Friend's Welcome to PHPGurukul</div>

</body>

</html>

Output

Content Style

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 type="text/css">
	#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>

<html>

<head>

<title>Content Style</title>

</head>

<body>

#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

Content Style

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 type="text/css">
	.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>

<!DOCTYPE html>

<html>

<head>

<title>Content Style</title>

</head>

<body>

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

<p>EEEEEE</p>

<p>FFFFFF</p>

<p>GGGGGG</p></div>

</body>

</html>

Output

Content Style

AAAAA

BBBBB

CCCCC

EEEEEE

FFFFFF

GGGGGG

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 type="text/css">
	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>

<!DOCTYPE html>

<html>

<head>

<title>Content Style</title>

</head>

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

Content Style

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

1	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 type="text/css">
	
#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>

<!DOCTYPE html>

<html>

<head>

<title>Content Style</title>

</head>

#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

Content Style

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

1	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 type="text/css">
#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>

<!DOCTYPE html>

<html>

<head>

<title>Content Style</title>

</head>

#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

Content Style

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

1	padding:value

Example 7

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style type="text/css">
#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>

<!DOCTYPE html>

<html>

<head>

<title>Content Style</title>

</head>

#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

Content Style

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

1	margin:value

Example 8

<!DOCTYPE html>
<html>
<head>
<title>Content Style</title>
</head>
<style type="text/css">
#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>

<!DOCTYPE html>

<html>

<head>

<title>Content Style</title>

</head>

#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

Content Style

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;

1	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 type="text/css">
#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>

<!DOCTYPE html>

<html>

<head>

<title>Content Style</title>

</head>

#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

Content Style

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

1	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 type="text/css">	
#b1{position: relative;top:3%;left: 5%}
   </style>
<body>
<p id="b1">This is relatived position</p><br>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Content Style</title>

</head>

#b1{position: relative;top:3%;left: 5%}

</style>

<body>

<p id="b1">This is relatived position</p><br>

</body>

</html>

Output

Content Style

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.

Content Style in HTML

Recommended Tutorials for you

You may also like...

Content Style in HTML

Recommended Tutorials for you

You may also like...

HTML Text Format

HTML Links

HTML Attributes