Content style in html with example - PhpGurukul Tutorials

Content Style
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>

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 letterspacing can specify letter spacing.
Example 2
<html>
<head>
</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>
Output
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>
</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>
<div id="d2">
<p>EEEEEE</p>
<p>FFFFFF</p>
<p>GGGGGG</p></div>
</body>
</html>
Output
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>
</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:
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>
</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="b2">This is double 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

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

</head>
#b1{border-style: solid;border-width: 10px;padding: 10px}
#b2{border-style: dotted;border-width: 10px;padding: 20pxs}
</style>
<body>
</body>
</html>

Output:
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>
</head>
#b1{border-style: solid;border-width: 10px;margin: 30px}

#b2{border-style: dotted;border-width: 10px;margin:0px}
</style>
<body>
</body>
</html>
Output:
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>
</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:
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>
</head>
#b1{position: relative;top:3%;left: 5%}
</style>
<body>
<p id="b1">This is relatived position</p><br>
</body>
</html>
Output
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 with example - PhpGurukul Tutorials

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Content style in html with example - PhpGurukul Tutorials

Similar to Content style in html with example - PhpGurukul Tutorials (20)

Recently uploaded

Recently uploaded (20)

Content style in html with example - PhpGurukul Tutorials