fbpx
April 6, 2020
css @rules
CSS

CSS @ RULES | Understanding The Importance of Some @Rules In CSS

In this tutorial we will be looking at some CSS @rules and how important they are when styling with CSS. In our previous tutorial we looked at CSS pseudo elements and how you can add special effects using the pseudo elements in CSS. If you haven’t gone through the tutorial you can do so using the link below

Read previous tutorial on: CSS PSEUDO ELEMENTS | Add Special Effect Using Pseudo Element

CSS @RULES

CSS allows us to make use of some important @rules to carry out different activities when coding. Some of this @rules can be used to import styles from an external style sheet or to indicate the character set a style sheet is making use of. The list below shows some of the common @rules used in CSS.

  • The @import rule – use to import styles from an external style sheet
  • The @charset rule – use to indicate the character set a style sheet uses
  • The @font-face rule – use to specify a font face for use in a web document
  • The !important rule – use to specify that a user defined rule should take precedence over the main style sheet

The @import rule

The @import rule is used by developers to import styles from an external style sheet. This rule must come first at the start of the style sheet before any other rule and it takes in a url as value.

syntax Illustration shown below

<style type = "text/css">
      <!--
         @import "mystyle.css";
         or
         @import url("mystyle.css");
      -->
   </style>

The @charset rule

if you dont intend writing your web document using character set such as ASCII or ISO-8859-1 . You might want to specify the character set you are working with. You can do this using the @charset rule at the top of the web document. The @charset must be placed at the beginning of the style sheet without spaces. Illustration shown below

<style type = "text/css">
   <!--
      @charset "iso-8859-1"
   -->
</style>

The @font-face rule

The @font-face rule is used to define the font face used in the style sheet document and the download source. illustration shown below

<style type = "text/css">
   <!--
      @font-face {
         font-family: "micro fonts";
         src: url("font link ");
      }
      @font-face {
         font-family: cambria;
         src: local ("cambria"),
         url("font download link here")
         format("truetype");
         unicode-range: U+??,U+100-220;
         font-size: all;
         font-family: new times roman;
      }
   -->
</style>

The !important rule

When developing web pages you should have it in mind that web browsers process the web page codes according to how they were written from the top to the bottom in split seconds. This is where the !important rule comes in. The !important rule is use to inform the browser about how important and mandatory a web page property is. in other words, a rule having the !important property will always be applied no matter where the rule is located in the web document. Example shown below

In the below example we will ignore the use of the !important rule.

<!DOCTYPE html>
<html lang="en">
<head>
   <style >
    p{
       color: black;
       color: red;
    }
   </style>

   <title>ILLUSTRATION !IMPORTANT  PROPERTY</title>
</head>
<body>
  <p >This is the first line
  </p>
  
</body>
</html>

RESULT

ILLUSTRATION !IMPORTANT PROPERTY

This is the first line

In the above example, color red was declared after color black but the paragraph text took the red color. This is because the web browser processes the codes from the top to the bottom and color red was the last rule for the paragraph text.

example using the important property

<!DOCTYPE html>
<html lang="en">
<head>
   <style >
    p {
       color: black !important;
       color: red;
    }
   </style>

   <title>ILLUSTRATION !IMPORTANT  PROPERTY</title>
</head>
<body>
  <p>This is the first line
  </p>
  
</body>
</html>

RESULT

ILLUSTRATION !IMPORTANT PROPERTY

This is the first line

From the above illustration, using the !important property at the side of the black color makes the web browser apply the black color and ignoring the red.

CONCLUSION

CSS @rules helps developers setup special rules for elements. This is a very important property when constructing web pages. A good knowledge of this will help you structure a good web page with the use of @rules in CSS. Lets move on to the next topic on CSS TEXT EFFECTS

Leave a Reply

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