|
|
|||
|
|
||
Cascading Style Sheets (CSS) are an easy way to make site-wide display functions appear on your pages. This convention is currently supported by
Internet Explorer and, to a limited degree, Netscape. The following example shows how to make text links change color on mouseover. It works only in
Explorer, but it's so cool and easy to use, we'd like to share it with you. First off, you need to create a file to contain your style definitions. This
can be done in any text or html editor. We will save the file with the extension .css -- in this case we'll create a file called mystylesheet.css.
This file could contain many, many functions, but we'll limit this example to creating hyperlinks that change color on mouseover. Finally, we will
upload this file to our server for reference by the page calling it.
Copy the CSS code below and paste it into your editor and save it as mystylesheet.css. Then upload it to your server (root directory is good).
A { color: blue;
font-family: verdana,arial,sans-serif;
font-weight: normal;
font-size: 8pt;
text-decoration: none; }
A:hover { color: red;
font-size: 8pt;
font-weight: normal;
text-decoration: none; }
This defines the color of the hyperlink (blue) and the color for the mouseover (red) as well as the font size (9 points -- approx. font size=2).
To make this work, we need to reference this file in the head of each page that will access the stylesheet. We do this by embedding a link to the
stylesheet as shown below in the Head Section of our page (of course, it
won't work if you forget to upload the stylesheet first!):
<LINK TYPE="text/css" HREF="mystylesheet.css" REL=stylesheet
TITLE="mystylesheet">
MORE CSS: NON-UNDERLINED LINKS
Last issue we introduced Cascading Style Sheets (CSS) and showed you how to create a mouseover hover effect in Internet Explorer with very little
programming. This time we'll show you how you can eliminate browser-defaulted underlines in hyperlinked text. You do this with CSS and
it works in both Internet Explorer and Netscape Navigator!
Remember, with CSS you have the opportunity to define the style either in a separate file, as a reference on each page, or directly into the
display-specific code. Let's analyze all three possibilities for removing underlines on hyperlinks.
AS A FILE INCLUDE:
Using Stylesheets as file includes is really the way they were meant to be used. You define the styles for your site in one file, then reference that
file in each instance of your pages. You can have all kinds of definitions in your file, from how to show fonts to hyperlinks to headers, margins ...
you name it! First you need to create a file to contain your style definitions. This can be done in any text or html editor. We will save the
file with the extension .css -- in this case we'll create a file called
mystylesheet.css. This file could contain many, many functions, but we'll limit this example to removing underlines from hyperlinks. Finally, we will
upload this file to our server for reference by the page calling it.
Copy the CSS code below and paste it into your editor and save it as
mystylesheet.css. Then upload it to your server (root directory is good).
A { text-decoration: none; }
To make this work, we need to reference this file in the head of each page that will access the stylesheet. We do this by embedding a link to the
stylesheet as shown below in the Head Section of our page (of course, it won't work if you forget to upload the stylesheet first!):
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<LINK TYPE="text/css" HREF="mystylesheet.css" REL=stylesheet
TITLE="mystylesheet">
</HEAD>
<BODY>
<a href="file.html">A link without underline</a>
</BODY>
</HTML>
AS A PAGE REFERENCE:
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<style type=text/css>A { text-decoration : none; }</style>
</HEAD>
<BODY>
<a href="file.html">A link without underline</a>
</BODY>
</HTML>
AS A DISPLAY REFERENCE:
You write the code manually into the <A HREF> tag and define it.
<HTML>
<HEAD>
<TITLE>Test</TITLE>
</HEAD>
<BODY>
<a href="file.html" style="text-decoration : none">A link without
underline</a>
</BODY>
</HTML>
CSS: CUSTOM HEAD FONTS
Did you know you can customize the Head Fonts (H1, H2, etc.) using Cascading Style Sheets? It's a simple and effective solution that lets you pre-define
how your heads will display. In HTML, heads are defaulted as a Bold Times font, but you can change them with CSS to add a new font, color and size.
Here's how to do it. First, you create your stylesheet, or include it as a reference in the head section of the page you're coding. It's easiest to use
just one stylesheet and reference that as an included file, like this.
<LINK TYPE="text/css" HREF="mystylesheet.css" REL=stylesheet
TITLE="mystylesheet">
Otherwise, you can write the style directly to a page inside the Head
section, but within the STYLE tag.
H1 { font-family: verdana,arial,sans-serif;
color: #000000;
font-size: 16pt;
font-weight: normal;
text-decoration: underline }
H2 { font-family: tahoma,arial,sans-serif;
color: #003366;
font-size: 12pt;
font-weight: heavy;
text-decoration: none; }
As you can see, we are able to define the Heads with color, font size in points, font weight and decoration. Play with these attributes and have some
fun ... Finally, unlike some other CSS functions, this will work in both Explorer and Netscape, although the displays are somewhat different