CSS Implementation Options
Embedded CSS
- There are multiple ways of associating CSS with an HTML document.
- The easiest one to start with when learning CSS is the embedded approach.
- Embedded CSS is placed entirely within the
<head></head>of the HTML document. - The CSS is surrounded by
<style></style>tags.
Embedded CSS Example
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Embedded CSS</title>
<meta charset="utf-8" />
<style>
body {font-size: 1rem;}
h1 {font-size: 1.5rem;}
</style>
</head>
<body>
<h1>A Sample Level 1 Heading, Sized at 1.5rem</h1>
<p>Some content, sized at 1rem because it is using the 'body' settings.</p>
</body>
</html>
Inline CSS
- Inline CSS closely intermingles structure and presentation because the CSS is located inside the HTML tag using the style attribute.
- Due to this very close integration of structure and presentation, inline CSS should be used only in rare cases, such as for one-time style changes that occur on only one page in a website.
- Drawbacks of inline CSS:
- Time-consuming to update/maintain
- Impossible to reuse and cache
- Adds to HTML file sizes due to all the repetition
- Inline styles will override other CSS instructions if there are conflicting instructions. Learn more about the CSS Cascade, which is why inline overrides other styles.
| Attribute | Usage and Effect | Values |
|---|---|---|
| style | Used to specify CSS for an element. Can be applied to any tag valid inside <body>, including <body> itself. |
Any CSS property: value combination |
Inline CSS Example
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>Inline CSS</title> <meta charset="utf-8" /> </head> <body> <h1 style="color: green; font-size: 1.5rem;"> This level 1 heading is styled</h1> <h1>This level 1 heading uses browser defaults because the inline styles applied to the other heading are restricted to that one tag.</h1> </body> </html>
External CSS using <link />
- This is the preferred approach to implementing CSS for a website, as it separates structure from presentation.
- External CSS files can also be cached, reducing downloads (and speeding up page display) as the user moves from page to page in a website.
- The styles are typed into a text editor and the stylesheet file is saved with an extension of
.css - These files contain only CSS. They do not contain any HTML.
- It uses the
<link />tag, which is not a container (there is no closing tag) so it is self-terminated. - The
<link />tag should be located between the<head></head>tags (but not within<style></style>tags). - It is possible to locate it inside of
<body></body>, but inside<head></head>is best for performance and is the recommended practice. - Multiple stylesheets can be brought in using separate
<link />tags.
| Attribute | Usage and Effect | Values |
|---|---|---|
| href |
Contains the stylesheet address.
If the stylesheet is not found, browsers render the page without the styles (using browser defaults). |
|
| media | Specifies the environment / device type where the stylesheet will be applied. |
Multiple values can be supplied. Values are comma-separated, such as |
| rel |
Specifies the relationship between the documents.
The Be sure to always specify this attribute. |
|
| type |
Specifies the content type of the linked document.
Be sure to always specify this attribute, as it allows unsupportive devices to skip downloading the file. |
|
<link /> Example
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>link CSS</title> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="link.css" /> </head> <body> <h1>This level 1 heading is styled by an external CSS file</h1> <h2>This level 2 heading is also styled by an external CSS file</h2> </body> </html>
The link.css file contains:
h1 {font-size: 1.5rem; color: green;}
h2 {font-size: 1.25rem;}
External CSS using @import
@importis specified one of two ways:- Within
<style></style>tags as the first line of CSS code - As the first content in a
<link />stylesheet
- Within
- If not listed first in both cases,
@importwill fail to work. - Multiple stylesheets can be brought in using separate
@importdirectives (all directives must precede other CSS rules). - Historically, the most common usage of
@importwas to bring in a stylesheet containing rules that ancient browsers should not download, because they did not recognize the @import directive. - Because it involves rules in an external document,
@importshares all the other advantages of the<link />approach (such as caching and separating structure from presentation).
@import Example
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title>@import CSS</title> <meta charset="utf-8" /> <style> @import url(link.css); </style> </head> <body> <h1>This level 1 heading is styled by an external CSS file</h1> <h2>This level 2 heading is also styled by an external CSS file</h2> </body> </html>
The link.css file contains:
h1 {font-size: 1.5rem; color: green;}
h2 {font-size: 1.25rem;}