Check Content Style in HTML from Coding section on e akhabaar
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
Content Style
Hello Friend's Welcome to PHPGurukul
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
Content Style
Line Spacing Sample.
Word Spacing Sample.
Letter Spacing Sample.
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
tags are used to group their content elements as blocks.
The
Example 3
Content Style
AAAAA
BBBBB
CCCCC
EEEEEE
FFFFFF
GGGGGG
Output
Explanation
is divided as first group which contains three pairs of
tags they use “.d1” style.
is divided as second group which contains other three pairs of
tags they use “#d2” style.
Span Style
can be used to group elements for styling purposes(using the class or id attribute).
The tag can have id and class attribute in CSS style.
Example 4
Content Style
This is AAAAA text,This is BBBBB text,This is CCCCC text, This is DDDD text,This is EEEEE text
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 tags to set the css style of two pieces of text within a paragraph which contained in a block.
is very much like
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
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
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
Content Style
This is groove border
This is ridge border
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:valueExample 7
Content Style
This is solid border
This is double border
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:valueExample 8
Content Style
This is solid border
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
Content Style
This is position 1
This is position 2
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
Content Style
This is relatived position
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.
Post your more queries related to Content Style in HTML below.