Google Plus Facebook Twitter RSS YouTube

CSS font-style Property

font-style is a cascading style sheet font styling property that sets style of the generic font family. It is applied to every HTML and user defined Non HTML web elements. Normally, every web element shows its text content in its default font style usually in normal but CSS web designing professionals can apply different styles to font family by defining the font-style property to every web element at styling area. In CSS web designing, font-style property is applied to elements through internal CSS system and external CSS system.

CSS font-style Property

Syntax

This property was introduced in CSS1 but it well supports to CSS2 and CSS3 styling methodologies. The principle syntax of the font-style is written as given in the code box.

CSS Code

font-style: value;

The styling property introduced in CSS level 1, accepts four types of values but primarily, font-style property is set to normal value automatically. When user sets a different value to font-style property to web element at style section, the font family is adjusted to that style in web documents.

For understanding purpose, consider a generic font family Arial, Helvetica, sans-serif and specify some font-size to element at styling area. It can be used even font-family or font-size or both are not defined at styling section. If font-family and font-size or either of them is not mentioned at styling area, web browser displays every element’s text content in a particular generic font family (installed in user computer) and font size. In such cases, web browser gives priority to the generic font family’s default styling properties.

List of font-style values

  1. normal
  2. italic
  3. oblique
  4. inherit

1. value: normal

Assume a non-HTML element and also assume it is used once in web document. So, that Non HTML element must be defined at styling section by the CSS id system. Assume its name is new-element. According to CSS id protocol, the font-style property along with its supporting properties, are placed as given in the code box.

CSS Code
#new-element{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 20px;
     font-style: value;
}

Once a Non HTML user defined element’s properties are defined at styling section through either internal or external CSS methodologies. Apply that id to any HTML web element to style the text content of that element. In this example, paragraph element is used and user defined Non HTML properties are inserted to HTML element through id attribute.

HTML Code
<body>

  <p id="new-element">Text Content is placed inside the paragraph element but the
content placed inside this element is styled by font-style property.
</p> <body>

Web element used here is p tag and it sets the text font to normal and shows text content placed inside it normally in web browser.

Output in Web Browser

Text Content is placed inside the paragraph element but the content placed inside this element is styled by font-style property.


2. value: italic

Include italic keyword in font-style property’s value place to apply italic style to web element through user defined property as demonstrated in code box.

CSS Code
#new-element{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 20px;
     font-style: italic;
}

Once you set value to italic, p tag gets instructions from user defined style property and changes the text style to italic as shown in web browser.

Output in Web Browser

Text Content is placed inside the paragraph element but the content placed inside this element is styled by font-style property.


3. value: oblique

Place oblique keyword in the place of value of font-style property, it slants the text content in respective web element.

CSS Code
#new-element{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 20px;
     font-style: oblique;
}

In this example, oblique keyword is inserted at font style’s value position. The user defined property instructs p tag to show its text content in slant.

Output in Web Browser

Text Content is placed inside the paragraph element but the content placed inside this element is styled by font-style property.

italic and oblique both values give us almost same result and in some cases both are same but in some cases, there is a slight variation takes place.

4. value: inherit

CSS font-style property can be inherited. When css web designing professionals set a particular element to inherit, that element considers its parent element’s  font size as its own size of the text and it displays the text in that style.

CSS Code
#new-element{
     font-family: Arial, Helvetica, sans-serif;
     font-size: 20px;
     font-style: inherit;
}

As demonstrated in above four cases, you can use css font-style property in setting the style of the text content of any web element.

Follow Us
Google Plus Facebook Twitter RSS YouTube
Subscribe via Email
Save or Share This CSS Tutorial with Your Friends
Save or Share CSS Tutorial