Cascading Style Sheet(CSS) is a text file with .css extension and is commonly used to defien styles and layouts of Web pages written in HMTL and Extensible Hypertext Markup Language(XHTML).CSS simplifies the task of maintaining a Web document by separating its style information such as font size.

  • CSS3 Version`provide rounded corners for any box using border-radius and background position.
  • Provides the box-shadow property to add shadow effect to the elements.
  • Allows multi-column text without using a table.
  • Provides CSS selectors
  • Supports RGBA colors.
  • Provides custom fonts
  • Provides attribute selectors

Syntax of CSS :-


{ first property : value;

Second property : value;

Third property: value;




The Type of Selector :- 

The tpe selector matches all the elements specified in a list iwth the given value to determine the elements to which the CSS rules are to be applied. The rules applied to several elements of an HTML or XHTML document are similar to the ones applied toa CSS file.

Example of type selector :-

h1,h2,h3,p{ font-family: sans-serif);

In the preceding code snippet , We have specified the font-family property for the different heading elements (h1,h2, and h3) and for the paragraph elements(p).

The Class Selector :

Let’s consider that you have an element, H1 with a class attribute whose value is intro, as shown in the following code snippet:

<H1 class="abc"> Header </H1>

You can use a class selector in either of the two ways:

  • Applying the CSS rule to all the elements that have the class attribute of the same value. The followings code snippet shows how to apply the CSS rule:

.abc{font-family: sans-serif}

  • Applying the CSS rule to the H1 elements, whose class attribute contains intro as its value.
  • The following code snippet shows how to apply the CSS style on H1 elements:{font-family:sans-serif; font-size:22px; }

 The Child Selector : –

The child Selector matches the Element that is a immediate child of another element. In the child selector, greater than sumbol(>) is uded as the combinator, as shown in the following code snippet:

tb> b{font-family: sans-serif; font-size: 24px; }

The Descendant Selector : –

The descendant selector matches an element that is a descendant of another element. A descendant element is an element that is nested inside another element. In case of the descendant selector, white space is used as the combinator, as shown in the following code snippet:

abc  h1{ font-size:22px; background-color:#b0cdde; }

Follow Us

Contact Us

Back to Top