Explain Different Types of Cascading Style Sheet (CSS) With Suitable Examples

Last updated on August 27th, 2020 at 09:42 pm

Cascading Style Sheet (CSS):

CSS is used with HTML to define styles for different HTML elements or set of HTML elements. As its name includes, a primary thing about CSS is that it cascades. Developer can define one style for all the elements and then override that style for a one or specific element. For example, initially it can be defined that all links in a page will be of red color, and then we can also define that links with a specific class will be of a different color. In this way, using CSS we gain more control over styling elements and latest version of CSS also supports basic animation with CSS.

Types of Cascading Style Sheet (CSS):

There are three different ways in which CSS can be applied to HTML, which are as follows

1. Inline CSS
2. Internal or Embedded CSS
3. External CSS

1. Inline CSS:

In this way, we can write the CSS properties and values right in the TAG description as value of an attribute called “style”. Inline CSS are handy when we just need to style one element and that style is not needed any further.Following code snippet uses inline styling in the tag description

See the Pen Inline CSS by TanmayChakrabarty (@tanmaychakrabarty) on CodePen.

2. Internal or Embedded CSS:

Beside writing CSS styles in the tag description, we can also write CSS styles in a special tag called <style type=”text/css”></style>. This is called internal or embedded CSS. In the following code snippet all CSS styles has been written in the page but in the STYLE tag.

See the Pen Embedded Internal CSS by TanmayChakrabarty (@tanmaychakrabarty) on CodePen.

3. External CSS:

We can create separate files with extension .css and put our styles in that file and then can include that file by linking that file to our HTML file (or PHP or any that supports). This is more prefearable and recommended way for using CSS. In this way it is not only neat and more managable but also it is reusable in different HTML pages as we can link a single CSS file to any number of HTML files. Thus can have all our CSS styles in a .css file and just can link that CSS file to everywhere it is needed. Following snippet shows how this can be done.

See the Pen External CSS by TanmayChakrabarty (@tanmaychakrabarty) on CodePen.
Among these 3 different ways of using CSS, the inline css has the highest priority, second priority is internal css and third priority is external css. Such if we declare blue as the color of all links in the page as internal css and declare red as the color of a link as inline css, then all link will have the color blue but that particular link where we declared inline css will have color red.

Leave a Reply

Your email address will not be published. Required fields are marked *