CSS Import Rule

0 3819

@import rule - The @import CSS at-rule is used to import style rules from other style sheets.

!important rule - Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. !important rules used for

Height Priority

@font-face rule - The @font-face rule allows custom fonts to be loaded on a webpage.

@charset rule - It is important to understand that, although the @charset declaration looks like a CSS at-rule.

@charset-rule is useful when using non-ASCII characters in some CSS properties, like the content.

<meta charset="ISO-8859-1">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<title> CSS Import Rule </title>
<style type="text/css">
.important{
font-size:18px !important;
}

@font-face {
font-family: 'sans-serif';
src: url('../fonts/sans-serif-webfont.eot?v=4.6.3');
src: url('../fonts/sans-serif-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/sans-serif-webfont.woff2?v=4.6.3') format('woff2'), url

('../fonts/sans-serif-webfont.woff?v=4.6.3') format('woff'), url('../fonts/sans-serif-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/sans-serif-webfont.svg?

v=4.6.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

.import{
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic);
font-size:14px;
}
</style>
</head>

<body>
<div class="div-dotted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie quis purus vitae bibendum. Sed vitae est vitae mauris maximus vehicula id ac nulla. Cras a mollis urna. Nullam nibh magna, maximus maximus tristique eget, sollicitudin vel enim. Duis leo est, iaculis lobortis fringilla a, iaculis ac mauris.
</div>

<div class="import">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie quis purus vitae bibendum. Sed vitae est vitae mauris maximus vehicula id ac nulla. Cras a mollis urna. Nullam nibh magna, maximus maximus tristique eget, sollicitudin vel enim. Duis leo est, iaculis lobortis fringilla a, iaculis ac mauris.
</div>
<br>
<div style="font-family:sans-serif;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie quis purus vitae bibendum. Sed vitae est vitae mauris maximus vehicula id ac nulla. Cras a mollis urna. Nullam nibh magna, maximus maximus tristique eget, sollicitudin vel enim. Duis leo est, iaculis lobortis fringilla a, iaculis ac mauris.
</div>
<br>
<div class="important">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque molestie quis purus vitae bibendum. Sed vitae est vitae mauris maximus vehicula id ac nulla. Cras a mollis urna. Nullam nibh magna, maximus maximus tristique eget, sollicitudin vel enim. Duis leo est, iaculis lobortis fringilla a, iaculis ac mauris.
</div>
</body>
</html>