Stylesheets Tutorial

Pagini: 1

Child
Membru RSB
Din: HELL
Postari: 85

XSLT 2.0 Programmer's Reference (Programmer to Programmer)
By: Michael Kay
$26.39

Xslt
By: Doug Tidwell
$27.57

CSS Hacks and Filters: Making Cascading Stylesheets Work
By: Joseph W. Lowery
$19.79

HTML Stylesheet Sourcebook (Sourcebooks)
By: Ian S. Graham

Introduction

After the last part you should know that CSS is an extremely powerful web language which can create amazing websites.

How To Include Stylesheets

There are 3 ways to include stylesheets on your page. You can create a link to an external file in the head of your document. This is very useful if you would like to make sitewide updates by changing one file. The second way is to include the stylesheet information in the head of the document. This allows you to have a style applied to the whole page without being the same as the rest of the site. Finally you can have inline styles, which let you change the style of one piece of text.

At this point I should mention that linked stylesheets are not supported by Netscape apart from versions 6.x

To insert a linked stylesheet you need to put the following into the head of your document:

<link rel="stylesheet" type="text/css" href="url/of/stylesheet.css">

The URL of the stylesheet can either be relative or can use an http://

To insert a stylesheet into the head of a page insert the following into the head of your document:

<style type="text/css">

</style>

Inline styles are added differently and I will cover these in detail next week.

Rollover Links

One of the most popular uses of stylesheets is to create mouse rollover effects on links on your site (like you can see on Gowansnet). They are extremely easy to create and are very versatile.

The code you should insert should either go in a file (saved as a .css) for linked stylesheets or in the <style> section of your pages:

A:link {text-decoration: underline; color: #0000FF}
A:visited {text-decoration: underline; color: #990099}
A:hover {text-decoration: none; color: #FF0000}
A:active {text-decoration: none; color: #FF0000}

Here is an explanation of what it all means:

A:

This tells the browser you are making changes to the <a> tag (for links).

link
visited
hover
active

This tells the browser what to do to each type of link (hover is when the mouse is over the link).

The information inside the {} tells the browser what to apply to each tag.

text-decoration: underline;
text-decoration: none;

This tells the browser whether the text should be underlined or not.

color: #FF0000

This tells the browser the color to make the text (using an RGB code). You can also add:

text-weight: bold;

to the stylesheet to make that text bold.

When you are adding new elements you must always remember to have a ; after each one.

What Now?

In the next part I will show you some of the other effects you can acheive with stylesheets and how to apply them to other tags.

Inline Styles

Inline styles are added into an HTML tag so that you can just change the content of that tag. Apart from that, they are used exactly the same as a normal stylesheet. To include one in your H1 tag for example:

<H1 STYLE="stylesheet information">Text</H1>

The stylesheet information included is the same as what you would put inside the { } of a standard stylesheet.

Classes

Another way of making different styles for different parts of your text is to use classes. These allow you to, for instance, have three different types of <p> tag stylesheet changes on your site. To do this you give each one a class. This is basically a word which corresponds to a change. For example you could have two classes called 'maintext' and 'footnote' for your <p> tag with different formatting information.

In your stylesheet you would have:

P.maintext (stylesheet information}
P.footnote {stylesheet information}

Then in your HTML you would have the following:

<p class="maintext">All the information</p>

<p class="footnote>All the information</p>

in your HTML to use the different styles.

Other Font Formatting Options

Here are some of the other things you can do to your font's using stylesheets and the code they require. All of these should be placed inside the { } of your stylesheet or in inline styles. If you use more than one you should separate each with a semicolon:

font-family: fontname, "font name", font;

This sets the font the text will be displayed in. If the font has more than 1 word in the title use quotes. Each font should be separated with a comma.

font-size: 16pt;

This is the font size and can be specified using standard point sizes using pt after it or with one of the following:

px - pixels
in - inches
cm - centimeters
mm - millimeters

font-style: italic;

This either makes fonts italic or normal (by changing italic to normal above)

font-weight: bold;

This makes text bold or normal (as above). You can also use numbers to represent how bold the text is from 100-900.

text-decoration: underline;

As well as putting an underline on your text this can put an overline (a line over the text) and strike through (using line-through). To take all lines away use underline.

_______________________________________

Pagini: 1

Mergi la