Page 26 - CSS
P. 26
When someone first visits your website, their browser downloads the HTML of the current page
plus the linked CSS file. Then when they navigate to another page, their browser only needs to
download the HTML of that page; the CSS file is cached, so it does not need to be downloaded
again. Since browsers cache the external stylesheet, your pages load faster.
Internal Styles
CSS enclosed in <style></style> tags within an HTML document functions like an external
stylesheet, except that it lives in the HTML document it styles instead of in a separate file, and
therefore can only be applied to the document in which it lives. Note that this element must be
inside the <head> element for HTML validation (though it will work in all current browsers if placed
in body).
<head>
<style>
h1 {
color: green;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>I ♥ CSS</p>
</body>
Inline Styles
Use inline styles to apply styling to a specific element. Note that this is not optimal. Placing style
rules in a <style> tag or external CSS file is encouraged in order to maintain a distinction between
content and presentation.
Inline styles override any CSS in a <style> tag or external style sheet. While this can be useful in
some circumstances, this fact more often than not reduces a project's maintainability.
The styles in the following example apply directly to the elements to which they are attached.
<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>
Inline styles are generally the safest way to ensure rendering compatibility across various email
clients, programs and devices, but can be time-consuming to write and a bit challenging to
manage.
CSS @import rule (one of CSS at-rule)
The @import CSS at-rule is used to import style rules from other style sheets. These rules must
https://riptutorial.com/ 4
