What is the Syntax for href In CSS

Cascading style sheets

[malcolmcroucher]

hi ,

Can someone explain how the href works in cascading style sheets because i cant seem to be able to link my style sheets to my form . Is it something to do with the address or the directory?

any help will be appreciated.

Regards

Malcolm

[beemerrider]

I'm making some assumptions here, but this should give you several examples. One is that I'm using a linked CSS file. This is one of the preferred methods, you would not want to generally have inline CSS or the rules in your htnl page. By having the linked file, you can use the same consistent rules on every page.

Typical link between the head tags:

<link href="styles/main.css" rel="stylesheet" type="text/css" />

Using a div tag that may hold your form. This way you could make the href unique for the form or at least wherever you use this div tag. The first one is using a h1 tag as a link. The second one is for any text that is not a h1 link in both the maincontent div tag and the footer div tag. If you aren’t using div tags, just delete the ID in the selector portion of the rule, leave the declaration the same. Note the first rule is removing the underline from a typical link by declaring the text-decoration as "none". Make sure you order the declarations in this specific order, otherwise you will have unintended results or no results. Use this term to help remember the order "LoVe HAte" or link, visited, hover and active. Note one of these examples also has focus in it, make sure it is in the order that the example is below.

#maincontent h1 a, #maincontent h1 a:visited, #maincontent h1 a:hover {
text-decoration: none;
cursor: text;
color: #333333;
}

#maincontent a, #footer a {
color: #333399;
}
#maincontent a:visited, #footer a:visited {
color: #666666;
}
#maincontent a:hover, #footer a:hover,
#maincontent a:active, #footer a:active,
#maincontent a:focus, #footer a:focus {
color: #FF6600;

[malcolmcroucher]

okay whats a div tag?
Im really new here

[malcolmcroucher]

Enter the DIV Tag
If you use the <div> tag combined with CSS, you will create a page that is easy to manage and manipulate later. Using the <div> tag allows you to define the page in terms of the logical divisions of the page, not just the locations in the layout (that will certainly change in the future). Most Web pages have fairly standard content chunks, and if you use the <div> tag to divide them, you'll be ready to style them however you'd like.

Be sure to use semantic markup to style the divisions that have specific semantic meanings with the appropriate tags.

A typical Web page has one or more of the following divisions:

header: defining the top banner and possibly navigation of the page - as it's a header, a header tag is appropriate
<h1>...</h1>
navigation: defining the navigation of the page - this is usually a list, so use a list
<ul id="navigation">...</ul>
left sidebar: defining a sidebar on the left
<div id="sidebar">...</div>
right sidebar: defining a sidebar on the right
<div id="subtext">...</div>
body: defining the main portion of the page
<div id="body">...</div>
footer: defining the footer and possibly sub-navigation of the page
<div id="footer">...</div>
Once you've defined the <div> elements of your page, you can then use CSS to style them however you'd like. Since you're using a tableless layout, you'll need to use CSS positioning to get the divisions to sit where you want them on the page. Luckily this isn't difficult.

Once you've designed your CSS for your divs, you should test your page in several different browsers. That way you can be sure your page will look okay no matter who comes to visit.

[edited by: SuzyUK at 3:25 am (utc) on Oct. 29, 2007]
[edit reason] clarifying that this is a quote from elsewhere [/edit]

[beemerrider]

Here is an example of a div tag layout versus a table based layout. Think about using any application to make a print layout, newsletter, etc. You use all of the tools available in the program to layout the information. But you only use the table feature when you have a structured list of information in a grid fashion. Like a price list with description, SKU, price, availability. This is a good way to think about laying out a web page, use DIV tags for the main layout of the page, header, content and footer and only use tables within the DIV tags for an organized list of items.

In your CSS document make a rule for a header, see example below. Then in your web page document use the "ID" for your DIV tag you created in the CSS document. The header will be formated exactly the way you have the CSS rule written.

code in your CSS document: Remember the CSS document has to be linked to every web page you create if you wan to access the rules. The beauty of this system is that you are creating a style sheet that is global across your entire site. So if you want to change the size of your header. Make the edit in the CSS style sheet and the header automatically changes on every page that you used the header ID.

In this example there is a background image that is in the header, and it does not repeat and a static height is declared so the header is always 85 pixels tall. This is a pretty basic header rule, you can add margins, location on the page, etc to this rule.

#header {
background-image: url(../Fireworks/interface/header.jpg);
background-repeat: no-repeat;
height:85px;
}

code in your web page:

div id="header">
<h1>We specialize.......</h1>
<p>No matter what industry you are in</p>
</div>

This link snip has a very good primer on CSS link styles and there are several other good CSS tutorials on this site that are free. Also there are at least a dozen very good books on CSS layout. They all cover your original question in lengthy detail. The missing manual CSS book is a decent one as are Eric Meyer books.

[edited by: SuzyUK at 3:27 am (utc) on Oct. 29, 2007]
[edit reason] No URIs thanks [/edit]

[SuzyUK]

Welcome malcolmcroucher!

As mentioned already there are loads of CSS Tutorial sites out there, my advice is to find one you like and stick with it until you have grasped the basics - there are some standard recommendations in the CSS Forum Charter [webmasterworld.com] - imho W3 schools is as good a place as any!

Also if you take a look in the CSS library [webmasterworld.com] you may well find some frequently asked questions. In there is a Cribsheet/Cheatsheet which covers a lot of the basics your question included [webmasterworld.com]