Entry
Inline, embedded, and linked styles: which do I use, and how?
Apr 29th, 2000 11:05
Rey Nuņez,
Styles for Web documents can be implemented in the following ways,
depending on the need and the desired result:
- to apply a style to individual HTML elements, we use inline styles
- to apply similar styles to specified elements within a page, we use a
style sheet embedded on the page
- to apply similar styles to specified elements across multiple pages,
we use an external style sheet and link the pages to the style sheet
For inline styles, we set the value of the element's style attribute as
a style declaration enclosed in either single (') or double (") quotes.
The style is applied only to the particular element where the attribute
is declared. This example sets the font size and color of a specific
paragraph.
<p style="font-size:12pt; color:blue">...text...</p>
For embedded and linked style sheets, styles are specified as a set of
CSS "rules", which consists basically of a style "selector" and a style
declaration block.
A style sheet selector is simply an identifier that specifies the scope
that each style rule will be applied to. Specifically, CSS rules may be
declared for the following selectors:
- all instances of a specific HTML element (ex. all P elements, all H1
elements, etc.)
- all instances of an HTML element belonging to a specific class
(setting an element's class attribute to some value and defining a
style for that class)
- single instances of an HTML element (setting an element's id
attribute and defining a style for that ID)
A style declaration block is simply the list of CSS property:value
declarations separated by semicolons (;), like in our inline example
above, but enclosed in curly braces {}.
Embedded Styles
To embed a style sheet in a page, we define the rule sets within
<STYLE></STYLE> tags in the HEAD of a document, for example:
<head>
<style type="text/css">
<!--
body {
font-family: verdana, sans-serif; font-size:10pt}
h1 {
font:bold 18pt Verdana; color:#ffc; text-align:right}
p {
font-size:10pt; text-indent:1em; text-align:justify; margin-left:1em;
margin-right:1em}
.myClass {
font-size:18pt; color:maroon}
#myId {
color:navy}
-->
</style>
</head>
This would apply the styles to all H1 and P elements, to all elements
with class="myClass", and to the element whose id="myId" on the page.
Linked Styles
In this case, we define the CSS rule sets in a separate file and save
it with the extension .css, as in filename.css, and reference it with a
LINK element that should be placed in the HEAD of each HTML file that
will use it.
<head>
...
<LINK rel="stylesheet" type="text/css" href="path/filename.css">
</head>
For larger sites, this is the most efficient method, as it allows us to
use a single style sheet for all or selected pages of a site. Any
change to the style sheet reflects the style in all linked pages. This
works well for formatting pages that do not vary considerably, which
generally is a good idea, in terms of communicating effectively.
Note that the CSS file must contain only the CSS rule sets, and NOT
include the <STYLE></STYLE> tags used for embedded style sheets. Also
note that the LINK element requires only a start tag.
