CSS Styles to Hyperlink and CSS Text and Font Style

0 62

CSS Styles to Hyperlink and CSS Text and Font Style

in this session we will talk about CSS Styles to Hyperlink and CSS Text and Font Style

CSS Styles to Hyperlink

Styles to Hyperlink

Through CSS, we can change appearance and behavior of any hyperlinks as we need.to achieve this CSS has to define selectors/pseudoclasses and there are…

  • a
  • a:link
  • a:visited
  • a:hover
  • a:active

ID Specific Hyperlink Styles

To define a style for hyperlinks ID’s can also be used with div or span.

Class Specific Hyperlink Styles

Through the class, we can apply a style to Hyperlinks with div/span.one thing to keep in mind that id can only be used one time on a page whereas a class can be used unlimited times on a page.

Text Decoration

text-decoration property is used to remove underline from hyperlinks.

CSS Text and Font Style

Text and Font Style

In a web page to control the appearance of the text, text properties used. Through Text property, we can change the color of the text space between characters increase and decrease text size so on…

Property Description
Color To apply any type color for text
text-align To specify horizontal alignment in a text element
text-decoration This property is used for text decoration in a text element
text-indent To specify indentation of the first line of text
text-transform Used for the casing of text
word-spacing To increase and decrease spacing between word word-spacing property used

Font properties

Font properties allow you to specify the font for your text. There are the different attribute in font property that allows you to change size, style, and font. Web browser must be supported for your font which you have defined otherwise browser will show default browser fonts if it not supported

Property Description
font-family font family allows you to define fonts for text and also allows you to specify a specific family name such as serif or Time new Roman
font-size font-size used to specify a size of the font having both absolute or relative values.
font-style used for font styling.
font-variant font-variant used to specify whether a text should be display in small cap.

Text Styles

There are different text styles in CSS like text-align, text-indent, and text-transform allows you to align text,text indentation and casing of text .
Through text align property we can align text in center right left or justify.

Values of text-align property are.

Property Description
left Align the Text left of the web page.
right Align the Text right of the web page.
center Align the Text middle of the web page.
justify justify used to justify text both sides of web page.

As mentioned above text-indent used for indentation of text.

Values of text-intent properties are……

Value Description
Length length used for fixed indentation and its default value is 0.
% To specify indentation as the percentage of the width of the parents.

Values of Text-transform property are

Value Description
None none value will specify text same casing as written with the element.
capitalize This value will capitalize each letter of the word.
uppercase Used for uppercase letters.
lowercase Used for lowercase letters.


Values of text-decoration property are………

Value Description
None it will display text without any formatting.
underline an underline value will display underline the text.
overline an overline value will display overline in the text.
line-through used to line through the text.
blink blink used for flashing the text.

Values of word-spacing property are

Value Description
normal a normal value will specify normal spacing between words and it is the default value.
length this value will specify fixed value between the words.

inline Span

Inline Span can also be used to apply a style to one word or letter in a paragraph.

Span tag has different attributes and they also support to JavaScript event attributes.

Attribute Value Description
class classname To specify text direction for content in an element.
dir rtl ltr To specify text direction for content in a element.
id id id used to specify unique id for element.
lang language_code used for language cod for content in a element.
style style_definition used for inline elemtn style.
Title text used for extra information
xml:lang language_code used to specify language code in element in XHTML documents.

Indenting Paragraph

Through Indenting we can setting off the text from its normal position either to left or to right .in a paragraph there are three types indentation.

First line indent

First line indent property is used for indenting the first line of paragraph in CSS.

Horizontal Alignment

For horizontal alignment of text text-align property is used in CSS. This property aligns the inline content of a block.

Values of text-align property are.

Value Description
left left value align the text to left.
right right value align the text to right.
center center value align the text in center.
justify justify align the text both side adding space between word.
inherit inherit value of the text-align property should be inherited from the parent element.

Vertical Alignment

line-height is used in CSS for vertical alignment.

Values of line property are…

Value Description
normal this value will define normal line height and it is default value also.
number A number that will be multiplied with the current font size to set the line height.
length fixed line height in px cm pt and so on..
% line height will be in percent of the current font size.
inherit inherit value will specify line-height property should be inherited from the parent element.



Leave A Reply

Your email address will not be published.