HTML CSS SQL Meta tag Generator ScrollBar design Generator Encode Decode images

CSS Basics

Introduction Syntax Selectors Attribute Selectors Specificity Combinators !important Comments Colors

CSS Need to Know

Box Model Pseudo-class Pseudo-element Inline-block Math Functions Max and Min Opacity Outline Overflow Z-index Float

Most used

Align Backgrounds Borders Text Units Padding Margins Position Tables Display Fonts Lists Height and Width

CSS Reference

CSS Properties reference CSS Pseudo-Classes reference CSS Pseudo-Elements reference CSS Selector reference

CSS @import

The CSS @import rule allows you to import a CSS file into another CSS file. This can be useful when you want to separate your styles into different files for organization purposes. The imported file will be included in the CSS at the point where the @import rule is declared.

Here's an example of how to use the @import rule:

Result:

    @import url("styles.css");
  

In this example, we are importing a file called styles.css into our main CSS file. This will merge the styles from styles.css with the styles in the main CSS file.

It's important to note that the @import rule must be the first thing in your CSS file, before any other rules. This is because CSS is processed from top to bottom, and the styles in the imported file will override any conflicting styles in the main file.

You can also import multiple CSS files by using multiple @import rules:

Result:

    @import url("reset.css");
    @import url("typography.css");
  

In this example, we are importing two different CSS files, reset.css and typography.css, into our main CSS file.

By using the @import rule, you can modularize your styles and make your CSS files more maintainable and organized.

.autobots{
   transform: translate3d();
}