Page 27 - CSS
P. 27
precede all other types of rules, except @charset rules; as it is not a nested statement, @import
cannot be used inside conditional group at-rules. @import.
How to use @import
You can use @import rule in following ways:
A. With internal style tag
<style>
@import url('/css/styles.css');
</style>
B. With external stylesheet
The following line imports a CSS file named additional-styles.css in the root directory into the
CSS file in which it appears:
@import '/additional-styles.css';
Importing external CSS is also possible. A common use case are font files.
@import 'https://fonts.googleapis.com/css?family=Lato';
An optional second argument to @import rule is a list of media queries:
@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);
Changing CSS with JavaScript
Pure JavaScript
It's possible to add, remove or change CSS property values with JavaScript through an element's
style property.
var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';
Note that style properties are named in lower camel case style. In the example you see that the
css property font-family becomes fontFamily in javascript.
As an alternative to working directly on elements, you can create a <style> or <link> element in
JavaScript and append it to the <body> or <head> of the HTML document.
jQuery
https://riptutorial.com/ 5
