</CSS3 @Import Rules>

What is an @import rule?

@import function is used to import CSS rules from another Style Sheets in HTML documents or it is used to add extra rules within CSS files. This function makes it possible to include external CSS files in a document.

Style_Sheets Structure Box_Model Background_Image Media_Queries Fonts Box_Shadow FlexBox Grid Transition Animations 2D_Transform 3D_Transform Filter_Property Inheritance Vertical_Centering Responsive_UI CSS_Quiz

</@import rules>

CSS @import is used to import CSS Rules from another Style Sheets

@import rule

Use of @import rule on Internal Style Sheet.

	
<style>
	@import url('style.css');
</style>

@import on external Style Sheet

	
	<style>
		@import '/tdb-style.css';
		@import 'https://fonts.googleapis.com/css?family=Lato';
	</style>

This code will import a CSS file named tdb-style.css and a font family from the specified google font's link.


<!DOCTYPE html>
<html>
<style>
	@import url('style.css');
</style>
<!--Body-->
<body>
	<button type="submit" class="tdb-school">
	Press
	</button>
</body>
</html>

Try it Yourself

</CSS3 Quiz Question>

Which is the correct way to apply @import rule?

1. @import '<style>/tdb-style.css</style>';
2. @import '/tdb-style.css';
3. @import '{color:red;}';
4. @import '<style>{color:red;}</style>';

Check Now

CSS3 QUIZ

Next: Structure of Cascading Style Sheet