MENU
Featured

    Featured Posts

CSS import Rule

Filed Under: on



 What is CSS @import Rule?

  §  Using CSS @import rule we can include one CSS file in another?

      

  §  The import rule is used to import style sheets into other style sheets and any documents where @import can be applied.

  §  The @import rule is used to import style rules from other style sheets. 

  §  The @import keyword must be followed by the URL of the style sheet to include, and a semicolon.

Syntax:

   @import url("url_path");

Example:-

  §  Let’s here we create an index.html page and two CSS files example1.css and  example2.css.

index.html

<html>
<head></head>
<body>
<h1>Welcome to CSS Import Rule:</h1>
</body>
</html>

 example1.css

body
{
background: papayawhip;
}

example2.css

h1 {
color: red; font-size: 50px;
}

Now we embedded example1.css into index.html page

<html>
<head>
<link href="example1.css" rel="stylesheet" >
</head>
<body>
<h1>Welcome to CSS Import Rule:</h1>
</body>
</html>

Output

Now we include example2.css in example1.css file.

@import url("example2.css");
body
{
background: papayawhip;
}

Now Run this code again and check the changes

<html>
<head>
<link href="example1.css" rel="stylesheet" >
</head>
<body>
<h1>Welcome to CSS Import Rule:</h1>
</body>
</html>

Output



This example shows how to import style sheets into index.html directly.

<html>
<head>
<style>
@import url("example1.css");
@import url("example2.css");
</style>
</head>
<body>
<h1>Welcome to CSS Import Rule:</h1>
</body>
</html>

Output
























author

Author Name

Author Description!

Get Free Email Updates to your Inbox!

Post a Comment

www.CodeNirvana.in

Powered by Blogger.

About

Site Links

Popular Posts

Translate

Total Pageviews