CSS @Rules - CSS Advanced

What are CSS @rules?

This tutorial will cover the below important @ rules −
  • @import: This rule imports another style sheet into the presentstyle sheet.
  • @charset : This rule signifies the character set of the style sheet uses.
  • @font-face: This rule is utilized to exhaustively describe a font face to use in a document.
  • !important: This rule indicates that a user-defined rule should take priority over the author's style sheets.
NOTE − There are other set of @ rules which will be covered in next tutorials.

What is the @import rule?

The @import rule allows one to import their desired styles from another style sheet. It will appear right at the top of the style sheet before any of the rules, and its value is always a URL.

It can be written in any of the following two ways −

The importance of the @import rule is that, it lets one to develop their style sheets with a different modular approach. One can create different style sheets and then it includes them wherever they need them.

What is the @charset Rule?

If any learner is making their document using a character set rather than ASCII or ISO-8859-1,then they might want to set the @charset rule on the top of their style sheet to indicate in which character set., the style sheet is being written in.

The @charset rule must be placed right at the top of the style sheet even without a space before it. The value is kept in quotes and it should be one of the standard character-sets.

For example −

What is the @font-face Rule?

The @font-face rule in CSS is applied exhaustively to define a font face in using within a document. @font-face may be managed to even define the position of a font while the user views a download option, although sometimes this may run into implementation-specific limits.

Over all, @font-face is highly complicated, and its usage is not much recommended for any except for those who are expert in font metrics.

Here is an example −

What is the !important Rule?

CSS cascade means that the styles are implemented the same order as they are read in the browser. At first,the first style rule is applied, then the second one is applied, and so on.

The !important rule in CSS provides a way to make learner's CSS cascade. This includes the rules that are to be implemented always. A rule having this !important property will always gets applied in the document, regardless of where that rule appears in the CSS document.

Let us see an example,

In the below represented style sheet, the paragraph text will be displayed in black color, even though the first style property applied is red:

So, if one wants to make sure that a property is applied or not, they should add this !important property to that tag. In order to make the text always look red, one should write code as follows −

Here we have made p { color: #ff0000 !important; } as mandatory, now this rule will always apply even we have defined another rule p { color: #000000; }

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

CSS Advanced Topics