Lecture 15: Inline and External Styles
Overview:
Inline CSS
- Up to this point in the class all the CSS has been embedded, which associates structure and presentation fairly closely (because your CSS is in the (X)HTML file).
- Inline CSS even more closely intermingles structure and presentation because the CSS is located inside the (X)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. It is time-consuming to update/maintain, impossible to reuse, and adds to file sizes due to all the repetition.
- Inline CSS will also not be cached, since it is integrated into the (X)HTML tags of each page.
- Inline styles will override other CSS instructions, including classes and IDs, if there are conflicts.
| Attribute | Usage and Effect | Values Accepted | Deprecated? |
|---|---|---|---|
| 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 | Not deprecated |
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline CSS</title>
</head>
<body>
<h1 style="color: green; font-size: 24px; letter-spacing: 3px;">
This level 1 heading is styled</h1>
<h1>This level 1 heading is unstyled 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 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
- It uses the <link /> tag, which is not closed normally so it needs to be self-terminating.
- The <link /> tag needs to be between the <head> </head> tags (but not within <style> </style> tags).
- Multiple stylesheets can be brought in using separate <link /> tags.
| Attribute | Usage and Effect | Value(s) to Use | Deprecated? |
|---|---|---|---|
| href | Contains the stylesheet address. Relative paths are preferred.
If the stylesheet is not found, modern browsers render the page without the styles. Netscape 4.x returns the server error page. This needs to be included for the link to work. |
File name of stylesheet, as well as directory path if the stylesheet is in a different directory than the (X)HTML file. Relative paths preferred. | Not deprecated |
| media | Specifies the environment / client device where the stylesheet will be applied.
This is covered in INP 170: Web Coding II. media="all" can be used to 'hide' a style sheet from Netscape 4.x Opera uses media="projection" in its full-screen mode We will not be using the media attribute in this class. |
all | aural | braille | embossed | handheld | print | projection | screen | tty | tv | Not deprecated |
| rel | Specifies the relationship between the documents. The <link /> tag can be used for more than just calling estylesheets.
Be sure to always specify this attribute. |
rel="stylesheet" | Not deprecated |
| title | Useful only if you have 2 or more stylesheets brought in via <link />. The one with the title is given a secondary priority, as it is considered to be a preferred stylesheet, rather than a persistent stylesheet.
Persistent stylesheets are always applied, while preferred stylesheets are applied unless an alternate stylesheet is selected (at which point preferred stylesheets turn off). Alternate stylesheets are covered in the more advanced coding classes. This attribute is usually not included. |
Text (e.g., title="larger") | Not deprecated |
| type | Specifies the content type of the linked document.
Be sure to always specify this attribute, as it allows the client device to skip the file if it does not support that content type. Thus a device not supportive of CSS could just skip the stylesheet and not waste time and bandwidth downloading the file. |
type="text/css" | Not deprecated |
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><link /> CSS</title>
<link rel="stylesheet" type="text/css" href="link.css" />
</head>
<body>
<h1>This level 1 heading is styled by an external CSS file</h1>
<h1>This level 1 heading is also styled by an external CSS file</h1>
</body>
</html>
The link.css file contains:
h1 {color: green; font-size: 24px; letter-spacing: 3px;}
External CSS using @import
- @import goes within the <style> </style> tags as the first line of CSS code or as the first item in a <link /> stylesheet. If not listed first, @import will fail to work.
- Multiple stylesheets can be brought in using separate @import directives.
- The most common usage of @import is to bring in a stylesheet containing rules that Netscape 4.x should not see. The @import method 'hides' these styles because Netscape 4.x doesn't recognize @import; it skips right over it. The @import approach also hides rules from IE 3, iCab 2.51 (on the Mac), Konqueror 2.1.2, and Amaya 5.1; if set up a certain way it hides rules from IE 4.x
- Because it involves rules in an external document, @import shares all the other advantages of the <link /> approach.
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Imported CSS</title>
<style type="text/css"><!--
@import url(link.css);
--></style>
</head>
<body>
<h1>This level 1 heading is styled by an external CSS file</h1>
<h1>This level 1 heading is also styled by an external CSS file</h1>
</body>
</html>
The link.css file contains:
h1 {color: green; font-size: 24px; letter-spacing: 3px;}