CSS in GoLive 5.0
Home
> Build
> Software > Adobe
GoLive
by Don Herion
(1)
(2) (3)
(4) (5)
(6) (7)
Cascading
Style Sheets provide Web designers the pixel-level control in creating Web pages
that Desktop Publishers have had for many years. CSS simplifies the process of
setting type and graphic properties for a single Web page or thousands. This allows
designers to create with incredible precision and speed. If the visitor's browser
supports CSS, that is. For the most part this means Netscape 4.0 + and Internet
Explorer 3.0+.
GoLive 5.0 has improved its support of CSS
in several ways. You can now drag a style from one sheet to another. You can apply
a style by dragging it from the Style sheet directly on a selected element. You
can also import style sheets originally designated as an external style sheet
and convert the into an internal style sheet, or vice versa. This tutorial will
explain how to set up a style sheet, apply it and edit it.
CSS
- 1, 2, 3
Creating a Style Sheet in GoLive is a fairly straightforward
process. You first define the sheet as external (AKA: linked) or internal (AKA:
embedded or inline). An external css can control multiple pages while an internal
css controls elements within the Web page it resides. Once you've created the
style you then apply it. Web pages can be controlled by external and internal
style sheets at the same time.
For an in depth explanation
of CSS check out this link - CSS
Rules.
External Style Sheet
Here is an example
of an External Style Sheet. All style sheets must have a .css extension. This
one is called style1.css and it sets parameters for the background color of everything
within the <body> tags and those for text inside all <p> paragraph
tags.
| <style>
<! - -
body {
background:
#CCCCFF;
}
p {
font-family: arial;
font-size: 12pt;
}
- - >
</style> |
To apply this
external CSS document to an HTML document, add one line of code within the <head>
tags. There are no close tags with this syntax.
| <head>
<link
rel=stylesheet href="style1.css" type="text/css">
</head>
|
Internal Style Sheet
Here is an example of an Internal Style Sheet. All internal styles reside with
the <head> tags.
| <html>
<head>
<title>Example of Embedded CSS</title>
<style>
<! - -
body {
background: #CCCCFF;
}
p {
font-family: times;
font-size: 14pt;
}
- - >
</style>
</head>
<body>
This is an example of embedded CSS.
</body>
</html>
|
