We now have a youtube channel. Subscribe!

@ Rules

Hello guys! evening and welcome to a brand new episode  of my tutorial on CSS. I know you guys are not really happy that i don't update my tutorial posts regularly, i apologize.

In my last tutorial post on CSS i talked about Pseudo elements which i explained in details the various Pseudo elements and their applications. Now in this tutorial post i want to talk about the @ Rules and their applications.

This tutorial will cover the following important @ rules:
  • The @import: rule imports another style sheet into the current style sheet.
  • The @charset: rule indicates the character set the style sheet uses.
  • The @font-face: rule is used to describe a font face for use in a document.
  • The !important rule indicates that a user-defined rule should take precedence over the author's style sheets. 
Note: There are other @ rules which i will cover in subsequent chapters.

You can also read our tutorial post on: Css Positioning

The @import Rule

The @import rule allows you to import styles from another style sheets. It should appear right at the start of the style sheet before any of the rules, and its value is a url.

It can be written in one of the two ways below:

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

The importance of @import rule is that it allows you to develop your style sheets with a modular approach. You can create various style sheets and then include them wherever you need them.

You can also read our tutorial post on: Css Visibility

The @charset Rule

If you are writing your document using a character set than ASCII or ISO-8859-1 you might want to set the @charset rule at the top of your style sheet to indicate what character set the style sheet in written in.

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

The below example shows how we can write the @charset rule in two ways:

<style   type="text/css">
          @charset "iso-8859-1"
          -------other css rules goes in here--------

The @font-face Rule

The @font-face rule is used to describe a font face for use in a document. @font-face may be used to define a location of a font for download, although this may run into implementation-specific limits.

In general, @font-face is extremely complicated, and its use is not recommended for any except those who are experts in font matrics.

Below is a short example:

<style   type="text/css">
          @font-face  {
                 font-family: "Times New Roman";
                 src: url("https://www.fonts.com/font/ monotype/times-new-roman");   

          @font-face  {  
                 font-family: Santiago;
                 src: Local ("Santiago"),
                 url ("https://www.myfonts.com/fonts/contrafonts/cf-santiago/")
                 format ("truetype");
                 unicode-range: U+??, U+100-220;
                 font-size: all;
                 font-family: sans-serif; }

You can also read our tutorial post on: Css List

The !important Rule

Cascading style sheets cascade. This means that the styles are applied in order as they are read by the browser. The first style is applied and then the second and so on.

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where the rule appears in the CSS document.

For example in the following style sheet below, the paragraph text will be black, even though the first style property is applied red:

<style   type="text/css">
          p { color: #ff0000; }
          p { color:#000000; }

So if you want to make sure a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, you should write it as follows:

          <style   type="text/css">
                      p { color: #ff0000  !important; }
                      p { color: #000000;}

          <p>This is web design tutorialz</p>

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

Alright guys we have come to the end of this tutorial, feel free to ask your question in areas that you don't understand very well. Don't forget to like our facebook page and also follow us on google + and finally subscribe with us to get our tutorial posts delivered directly to your emails.

See you guys in my next tutorial, bye for now.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain