css help

Goat · Nov 22, 2001

Hi all

In the site I am currently working on I have a need to have two different styles for my links. One is for the navigation on the left the other is for the body of the pages and the links contained with.

So I need to know how can I have two styles for links?

thanks for your help?

Arion23 · Nov 22, 2001

You can set up a number of different classes for each style of links...

eg

In your stylesheet:
A.linkstyle1 { styles.... }
A.linkstyle2 { styles.... }

Then you can reference them in your HTML document:

<a href="..." class="linkstyle1">link</a>
<a href="..." class="linkstyle2">link</a>

Hope this helps....

jasonsalas · Nov 23, 2001

This will definetly help you...Tech Republic's Guide to Understanding CSS:

http://www.techrepublic.com/download_item.jhtml?id=dr00320000906eng01.htm

jasonsalas · Nov 23, 2001

Also, this is an excellent article from Les Hamilton:

Understanding the syntax of CSS

In order to design and code DHTML pages that include all the functionality and ease of use that enterprise users demand, developers need to understand several object models and languages. For the client side of Web applications, we have HTML, CSS, XML, XSL and XSLT, JavaScript, and the latest, XHTML, and they are interchangeable to suit display requirements.

HTML tags were designed to define the content of a document. They express such things as "This is a header," "This is a paragraph," "This is a table," etc., by using tags like <h1>, <p>, <table>, and so on. The layout of the document is controlled by the browser without using any special formatting tags.

Styles or Cascading Style Sheets (CSS) define how the HTML elements are displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved as external files to your HTML documents. External style sheets allow you to simultaneously change the appearance and layout of all the pages in your Web site by editing a single CSS document. If you have ever tried to change the font or color of hundreds of headings in a Web site, you will understand how CSS can save you a lot of time.

Because CSS allows the developer to control the style and layout of multiple pages with one style sheet, you can define a style for each HTML element and apply it to as many pages as you want. To make a global change, simply change the style, and all elements on the Web will update automatically.

Style sheets allow multiple style specifications. Styles can be specified inside a single HTML element, inside the <head> element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.

What does the Cascading in CSS mean? The priority order of Cascading style definitions: Styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

Browser default
External style sheets are linked in the document <head>:

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>

An external style sheet can be written in any text editor. The file should not contain any HTML tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif&quot

}

Internal style sheets are defined inside the <head> tag:

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif&quot

}
</style>
</head>

Inline styles are defined inside the HTML elements:

<p style="color: sienna; margin-left: 20px">

This is a paragraph

</p>

So an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag in an external style sheet.

The CSS syntax is made up of three parts: a selector, a property, and a value:

selector {property: value}

The selector is normally the element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon and surrounded by curly braces:

body {color: black}

If the value is multiple words, put quotes around the value:

p {font-family: "sans serif"}

If specifying more than one property, you should separate each property with a semicolon. The example below shows how to define a center-aligned paragraph with a red text color:

p {text-align: center; color: red}

To make the style definitions more readable, you can describe one property on each line, like this:

P
{
text-align: center;
color: black;
font-family: arial
}

You can group selectors and separate each selector with a comma. In the example below, we have grouped all the header elements. Each header element will be green:

h1, h2, h3, h4, h5, h6
{
color: green
}

With the class attribute, you can define different styles for the same element. Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}
p.center {text-align: center}

You have to use the class attribute in your HTML document:

<p class="right">

This paragraph will be right-aligned.

</p>
<p class="center">

This paragraph will be center-aligned.

</p>

You can also omit the tag name in the selector to define a style that can be used by many elements:

.center {text-align: center}

In the code below, both the h1 element and the p element are classed with "center". This means that both of the elements will follow the rules in the "center" selector:

<h1 class="center">
This heading will be center-aligned
</h1><p class="center">

This paragraph will also be center-aligned.

</p>

The id attribute has to be unique on the page. There can only be one element with a given id in a document. They are marked in the HTML document with id instead of class:

<p id="intro">

This paragraph will be right-aligned.

</p>

The id attribute can be defined in two ways. It can be defined to match all elements with a particular id or to match only one element with a particular id. In this example, the id attribute will match all elements with id="intro":

#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

In this example, the id attribute will match only p elements with id="intro":

p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

css help

Goat

Programmer

Arion23

IS-IT--Management

jasonsalas

IS-IT--Management

jasonsalas

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor