Introduction to Inline Style Sheet, Class and ID Selector in HTML

Inline Style Sheet :

In Inline Style sheet we can use style element as an attribute of any tag. To include the style definition with the tag, we can use STYLE property. For example, to define a style for <p> with the properties a font face Arial and text italicized, user can use following code.

<p style="font-family:Arial; font-style:italic">

This came from a paragraph tag with a style </p>

An inline style affects only element for which the style is defined.

In the code line, the first <p> tag has an inline style defined as "font-family: Arial; font-style:italic". This style will be only applied to the text written within that <p> tag.

Let's understand with an example

Programe :

Output :

Class and ID Selector :

Class Selector : The CLASS Selector is used for formatting variations of different instances of a single element. For example, using the CLASS selector, user can define different styles for the different instances of the H1 element in an HTML document. The class selector can be used to share the same format.

A class selector definitions starts with a period (.) followed by a name, and then the style definition.

See the following example

Programe :

In the above code .xyz is class name. <H1> tag share the same styles defined in the class .xyz. The second <p> tag does not take this because the class is not applied to it.

Output :

Notice although <H1> and <p> tags are of the different types, they pick up the styles defined by the .xyz class. An ID is similar to CLASS selector. However there is difference between ID Selector and a CLASS selector. Unlike a CLASS selector, an ID selector applies to exactly an element in an HTML document. ID gives identification to a particular element.

ID Selector : An ID selector starts with (#) hash symbol, followed by name, and then the style defination.

Consider the following code

Programe :

In the above code #pqr is the name of ID selector. When the ID, pqr is applied to the <p> element, the ID is not applied to any other element.

Output :