How to Add External Style Sheets:

External Style Sheets:

External style sheets are the most flexible because they allow you to assign the same styles to multiple Web pages. You can attach external style sheets in two ways:



@import url(addonstyles.css);

The Difference Between CSS and XSLT

Cascading Style Sheets or CSS were developed a few years ago to define the look and feel of markup languages. Extensible Style Sheet Language for Transformations or XSLT were created to transform documents. They are both style sheets, but they serve vastly different purposes.

What CSS Can Do

* Modify the font size, color, family, and style of text in markup
* Define the location and size of an element
* Change the background image and color of elements
* Create a new look and feel for markup pages to display on the Web

What CSS Cannot Do

* Change the order of elements in a document
* Make computations based on the content of the document
* Add content to the document
* Combine multiple documents into one

XSLT is a powerful language for transforming documents. It was created to allow developers the ability to create data and then transform it to various different formats. It is meant to keep the distinction between content and design separate.

What XSLT Can Do

* convert data in a standard XML format to SQL statements, tab-delimited text files, or other database formats for data sharing
* transform XSLT style sheets into new style sheets
* turn Web pages (written in XHTML) to VoiceML or XHTML Basic for handheld devices
* add CSS style sheets to XML documents for view in a browser

If all you're looking for is a style sheet to manipulate the way your content looks in a document, then you should use CSS. But if you're looking to actually transform one document into another, then XSLT is your tool. The Difference Between CSS and XSLT

What's the Difference Between @import and link for CSS?

Question: What's the Difference Between @import and link for CSS?

External style sheets are an important part of every Web designer's bag of tricks, but there are two ways to include them in your pages: @import and . How do you decide which method is better? This FAQ discusses the differences between the two methods, why you might use one over another, and how to decide.

Answer:

The Difference Between @import and

Before deciding which method to use to include your style sheets, you should understand what the two methods were intended to be used for.
- Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet. It is added to the of your H T M L document like this:

@import - Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. But if you include an @import in the head of your HTML document, it is written:

From a standards viewpoint, there is no difference between linking to an external style sheet or importing it. Either way is correct, and either way will work equally well (in most cases). But there are a few reasons you might want to use one over the other.

Why Use @import?

The most common reason given for using @import instead (or along with) is because older browsers didn't recognize @import, so you could hide styles from them. Specifically:

• hides the style sheet from Netscape 4, IE 3 and 4 (not 4.72)
  

  @import url(../style.css);

• hides the style sheet from Netscape 4, IE 3 and 4 (not 4.72), Konqueror 2, and Amaya 5.1
  

  @import url("../style.css");

• hides the style sheet from Netscape 4, IE 6 and below
  

  @import url(../style.css) screen;

• hides the style sheet from Netscape 4, IE 4 and below, Konqueror 2
  

  @import "../styles.css";

Another use for the @import method is to use multiple style sheets on a page, but only one link in your . For example, a corporation might have a global style sheet for every page on the site, with sub-sections having additional styles that only apply to that sub-section. By linking to the sub-section style sheet and importing the global styles at the top of that style sheet, you don't have to maintain a gigantic style sheet with all the styles for the site and every sub-section. The only requirement is that any @import rules need to come before the rest of your style rules. And remember that inheritance can still be a problem.

Why Use ?

The number one reason for using linked style sheets is to provide alternate style sheets for your customers. Browsers like Firefox, Safari, and Opera support the rel="alternate stylesheet" attribute and when there is one available will allow viewers to switch between them. You can also use a JavaScript switcher to switch between style sheets in IE. This is most often used with Zoom Layouts for accessibility purposes.
One of the drawbacks to using @import is that if you have a very simple with just the @import rule in it, your pages may display a flash of unstyled content (FOUC) as they are loading. This can be jarring to your viewers. A simple fix to this is to make sure you have at least one additional or element in your .

What About the Media Type?

Many writers make the statement that you can use the media type to hide style sheets from older browsers. Often, they mention this as a benefit to using either @import or , but the truth is you can set the media type with either method, and browsers that don't support media types won't view them in either case. For example, Netscape 4 doesn't recognize media types, so you can use the link tag to hide a style sheet from that browser just as easily as the @import rule:

And some versions of IE (6 and below) don't support the media type on the @import rule, so you can use that to hide the style sheet from them:

So Which Method Should You Use?

Personally, I prefer to use and then import style sheets into my external style sheets. That way I only have 1 or 2 lines of code to adjust in my HTML documents. But the bottom line is that it's up to you. If you're more comfortable with @import, then go for it! Both methods are standards compliant and unless you're planning on supporting really old browsers (like Netscape 4) there's no strong reason for using either.

 

How to Build a Website

How to Build a Website Step 1 - Hosting:

Hosting is where you put your website and all the Web pages. While it's possible to build a website on your personal computer and never move it online, it's somewhat pointless. No one but you will ever be able to see it. So the first thing you'll want to do is find a Web hosting provider.
There are several types of Web hosting options you can choose from:

• Free Web hosts
• Standard Web hosting
• Dedicated, Virtual, and Shared Hosting
• Colocation

Most people gravitate to free Web hosting without too much thought, but there can be drawbacks to free hosting. You don't always get as much space, you might be required to run their ads on your site, or there may be bandwidth limits. Be sure to read all the fine print before you put your website on a free Web host. I recommend using free hosting providers for testing Web pages and for personal pages.

• Find a Web Hosting Provider - links to other sites for help finding a good host
• Web Hosting Reviews - find out what other users think
• Web Hosting Profiles - overviews of several hosting providers

How to Build a Website Step 2 - Do You Need a Domain Name?:

You don't need a domain name to put up a website. You can put up a site on free hosting or even paid hosting plans without a domain name. A domain name provides extra branding for your site and makes it easier for people to remember the URL. But domain names cost money, typically between $8 and $35 a year.

• Get a URL that People can Find
• How to Buy a Domain Name with Network Solutions
• How to Register a Web Site Domain - Video

How to Build a Website Step 3 - Plan Your Website:

Once you've gotten a domain and decided on your URL, you can start planning your site. You need to decide:

• Type of site - Most websites are either news/information, product, or reference sites. As such they each have a slightly different focus.
• Navigation - The navigation affects the information architecture of your site.
• Content - Content is the actual pages you'll be building.

If you can recognize page types, you'll be able to recognize what types of pages you need for your site. Play the Web Page Types game.

How to Build a Website Step 4 - Build Your Website Page by Page:

Building a website requires that you work on one page at a time. To build your site you should be familiar with:

• Design Basics - The elements of good design and and how to use it on websites.
• Learning HTML - HTML is the building block of a Web page. While it's not absolutely required, you'll do better if you learn HTML than if you don't.
• Learning CSS - CSS is the building block of how pages look. And learning CSS will make it easier for you to change your site's look when you need to.
• Web Page Editors - Finding the perfect editor for your needs will help you learn design, HTML, and CSS.

How to Build a Website Step 5 - Publish Your Website:

Publishing your website is a matter of getting the pages you created in step 4 up to the hosting provider you set up in step 1. You can do this with either the tools that come with your hosting service or with FTP clients. Knowing which you can use depends upon your hosting provider. Contact them if you are not sure.

• How to Upload
• Best FTP Clients for Windows
• Best FTP Clients for Macintosh

How to Build a Website Step 6 - Promote Your Website:

The easiest way to promote your website is through search engine optimization or SEO. You build your Web content so that it ranks well in search engines. This can be very difficult, but it is inexpensive and can result in good results if you work at it.
Other ways to promote your site include: word of mouth, email, and advertising. You should include your URL on all professional correspondence and whenever it makes sense in personal messages. I put my URL in my email signature along with my email address.

• Improve Your Page Views - With More Hits
• Boosting Your Hits
• Create a Great Home Page
• Web Marketing Articles

How to Build a Website Step 7 - Maintain Your Website:

Maintenance can be the most boring part of website design, but in order to keep your site going well and looking good, you need to do it. Testing your site as you're building it and then after it's been live for a while is important. And you should also work on content development on a regular basis.

 

Why Use Heading Tags Rather than DIVs and Styling

Why Use Heading Tags Rather than DIVs and Styling

1. Search engines like heading tags.
   This is the best reason to use headings, and use them in the correct order (ie. h1, then h2, then h3, etc.). Search engines give highest weighting to text included inside heading tags, because there is a semantic value to that text. In other words, by labeling your page title H1, you tell the search engine spider that that is the #1 focus of the page. H2 headings have #2 emphasis, and so on.
2. You don't have to remember what classes you used to define your headlines.
   When you know that all your Web pages are going to have an H1 that is bold, 2em, and yellow, then you can define that once in your style sheet and be done. 6 months later, when you're adding another page, you just add an H1 tag to the top of your page, you don't have to go back to other pages to find out what style ID or class you used to define the main headline and sub-heads.
3. They provide a strong page outline.
   Outlines make text easier to read. That's why most U.S. schools taught students to write an outline before they write the paper. When you use heading tags in an outline format, your text has a clear structure that becomes apparent very quickly. Plus, there are tools that can review the page outline to provide a synopsis, and these rely on heading tags for the outline structure.
4. Your page will make sense even with the styles turned off.
   Not everyone can view or use style sheets (and this comes back to #1 - search engines view the content (text) of your page, not the style sheets). If you use heading tags, you're making your pages more accessible because the headlines provide information that a DIV tag would not.

Style the Text and Font of Your Headlines

The easiest way to move away from the "big, bold, and ugly" problem of heading tags is to style the text the way that you want them to look. In fact, when I'm working on a new Web site, I typically write the paragraph, h1, h2, and h3 styles first thing. I usually stick with just font family and size/weight. For example, this might be a preliminary style sheet for a new site:

body, html { margin: 0; padding: 0; }
p { font: 1em Arial, Geneva, Helvetica, sans-serif; }
h1 { font: bold 2em "Times New Roman", Times, serif; }
h2 { font: bold 1.5em "Times New Roman", Times, serif; }
h3 { font: bold 1.2em Arial, Geneva, Helvetica, sans-serif; }

You can modify the fonts of your headline or change the text style or even the text color. All of these will turn your ugly headline into something more vibrant and in-keeping with your design.

h1 {
font: bold italic 2em/1em "Times New Roman", "MS Serif", "New York", serif;
margin: 0;
padding: 0;
color: #e7ce00;
}

Different heading tags in css file

H2 style sheet code

"style type="text/css">
h2 {
font-size: 16px;
color: #FFFF00;
background-color: #000000;
margin-left: 20px;
margin-right: 20px;
padding-top: 2px;

padding-left: 4px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
}
/style>"

=============
header h1 with background image
"
style type="text/css">

h1 {
margin: 0;
background-color: #ce530d;
color: #dfc07d;
font-size: 90%;
padding: 3px 5px 3px 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
background-repeat: repeat;
font-weight: bolder;
background-image: url(yourimage.gif);
font-family: Georgia, "Times New Roman", Times, serif;
}


/style>

How to Create Custom Headers With CSS

Create Custom Headers With CSS

Many designers resist using header tags (H1, H2, H3, H4, H5, etc.) on their Web pages because the spacing around the tags can break a tight page layout. When designers ignore header tags, they can't take advantage of the structure that header tags give the document. They also lose the boost to search engine promotion that header tags provide.

If design issues cause you to shun header tags, read on. We'll show you how to quickly customize those headers using cascading style sheets.

Structure And Promotion

One of the great things about header tags is that they have multiple uses.

Their primary purpose is to define a document's structure. Remember that HTML is a structural language. You use it to describe the document's content, not the content's style.

Think of a house under construction. There's always a wood or metal frame that goes up first. You can't tell much about the finished structure just by looking at the frame - you have to wait until the granite countertops, the carpet, and the wallpaper is installed. Well, on a Web page, the HTML code is the house's frame and the style sheet is the decorative part of the house.

Header tags define what information is the most important or most deserving of attention. H1 tags are more important than H2 tags. H3 tags are subsections of H2 tags, and so on.

They're important to search engine algorithms too. Ranking formulas often give more weight to keywords that you include in header text. Search engines assume that if header tags contain important information, the keywords inside header tags must be equally important.

Standard Headers Take Up Space

Why aren't such handy and versatile little tags used all over the Web? It's because standard header tags take up room on the page - sometimes a lot of room.

Here's an example. We used a graphic image to make sure that everyone will see the same example. This is an H1 tag with some text under it.

Notice the amount of space between the H1 element and the text? You can't change that in standard HTML and it drives designers crazy.

So they spurn header tags and instead use font attributes and bold tags to mimic headers. While they gain more layout control, they lose the benefits of the header tags.

Customize With CSS

You can use CSS to get the best of both worlds: layout control with structural and promotion benefits! All you have to do is adjust the header tag's margin and padding values.

Remember that a header tag is a block-level element. Other block-level elements include images, paragraphs, and lists.

You can adjust the space around any block-level element by changing the properties that control spacing:

• Padding: the area between text and the border.
• Border: the area between the padding and the margin.
• Margin: the area outside the border that separates one element from another element.

To change the amount of space around the header tag, you need to adjust the margin-top and margin-bottom properties. The tricky part is that 0 is the default value (the one that causes all the space!). So when you look at a regular header tag, the value of the margin is 0 - even though there's a lot of space around it.

To decrease the size of an element's margin, you have to use a negative value like this:

This header will display in blue, 24-pixel type and be nestled snugly between the other page elements.
Here's part of the screen shot of a Web page. One H1 tag has no styles applied. Contrast the basic tag to the one below that has negative margins.

Browsers Like It!

Unlike many style sheet techniques, this renders fine in all recent browsers: Opera, Netscape 6.x, and Explorer. It doesn't work for Netscape 4.x browsers, but those versions have very poor CSS support and you have to deal with a lot of other Netscape CSS bugs too. Still, you don't get a broken page in Netscape 4.7, just the standard header with all that space around it.

Refer to our May 2001 newsletter story, Structure Documents With Header Tags for even more information about document structure and layout.

Looking for other tips to improve your page and promote your Web site? Search Engine Power Pack contains the valuable Page Primer tool. It analyzes your page, alert you to problems, and even give you browser-specific tips on how to make your page more search engine friendly.

The Difference Between ID and Class in css

The Difference Between ID and Class

We need ways to describe content in an HTML/XHTML document. The basic elements like( h1), and

will often do the job, but our basic set of tags doesn’t cover every possible type of page element or layout choice. For this we need ID’s and Classes. For example
, this will give us the chance to target this unordered list specifically, so that we may manipulate it uniquely to other unordered lists on our page. Or we might have a section on our page that has no relevant tag to signify it, for example a footer, where we might do something like this:
. Or perhaps we have boxes in our sidebar for keeping content over there separated in some way:

. These ID’s and Classes the “hooks” we need to build into markup to get our hands on them. CSS obviously needs these so that we may build selectors and do our styling, but other web languages like Javascript depend on them too. But what is the difference between them?

ID’s are unique

• Each element can have only one ID
• Each page can have only one element with that ID

When I was first learning this stuff, I heard over and over that you should only use ID’s once, but you can use classes over and over. It basically went in one ear and out the other because it sounded more like a good “rule of thumb” to me rather than something extremely important. If you are purely an HTML/CSS person, this attitude can persist because to you, they really don’t seem to do anything different. Here is one: your code will not pass validation if you use the same ID on more than one element. Validation should be important to all of us, so that alone is a big one. We’ll go over more reasons for uniqueness as we go on.

Classes are NOT unique

• You can use the same class on multiple elements.
• You can use multiple classes on the same element.

Any styling information that needs to be applied to multiple objects on a page should be done with a class. Take for example a page with multiple “widgets”:

You can now use the class name “widget” as your hook to apply the same set of styling to each one of these. But what if you need one of them to be bigger than other other, but still share all the other attributes. Classes has you covered there, as you can apply more than one class:

No need to make a brand new class name here, just apply a new class right in the class attribute. These classes are space delimited and most browsers any number of them (actually, it’s more like thousands, but way more than you’ll ever need).

There are no browser defaults for any ID or Class

Adding a class name or ID to an element does nothing to that element by default. This is something that snagged me as a beginner. You are working on one site and figure out that applying a particular class name fixes a problem you are having. Then you jump over to another site with the same problem and try to fix it with that same class name thinking the class name itself has some magical property to it only to find out it didn’t work. Classes and ID’s don’t have any styling information to them all by themselves. They require CSS to target them and apply styling.

Barcodes and Serial Numbers

Maybe a good analogy here is bar codes and serial numbers. Take an iPod in a store. On the packaging will be a bar code. This tells the store what the product is, so when it is scanned, the system knows exactly what the product is and what it costs. It might even be able to know what color it is or where it was kept in the store. All iPod of this same type have the exact same bar code on them. The iPod will also have a serial number on it which is absolutely unique to any other iPod (or any other device) in the world. The serial number doesn’t know the price. It could, but for the store this wouldn’t be a very efficient way to store and use that data. Much easier to use the barcode, so that for example, if the price changed, you could just change the price for that bar code and not every individual serial number in your system. This is much like ID’s and Classes. Information that is reuseable should be kept in a class and information that is totally unique should be kept in an ID.

ID’s have special browser functionality

Classes have no special abilities in the browser, but ID’s do have one very important trick up their sleeve. This is the “hash value” in the URL. If you have a URL like http://yourdomain.com#comments, the browser will attempt to locate the element with an ID of “comments” and will automatically scroll the page to show that element. It is important to note here that the browser will scroll whatever element it needs to in order to show that element, so if you did something special like a scrollable DIV area within your regular body, that div will be scrolled too. This is an important reason right here why having ID’s be absolutely unique is important. So your browser knows where to scroll!

Elements can have BOTH

There is nothing stopping you from having both an ID and a Class on a single element. In fact, it is often a very good idea. Take for example the default markup for a WordPress comment list item:

It has a class applied to it that you may want for styling all comments on the page, but it also has a unique ID value (dynamically generated by WordPress, nicely enough). This ID value is useful for direct linking. Now I can link directly do a particular comment on a particular page easily.

CSS doesn’t care

Regarding CSS, there is nothing you can do with an ID that you can’t do with a Class and vise versa. I remember when I was first learning CSS and I was having a problem, sometimes I would try and troubleshoot by switching around these values. Nope. CSS doesn’t care.

Javascript cares

JavaScript people are already probably more in tune with the differences between classes and ID’s. JavaScript depends on there being only one page element with any particular, or else the commonly used getElementById function wouldn’t be dependable. For those familiar with jQuery, you know how easy it is to add and remove classes to page elements. It is a native and built in function of jQuery. Notice how no such function exists for ID’s. It is not the responsibility of JavaScript to manipulate these values, it would cause more problems than it would be worth.

If you don’t need them, don’t use them

As you can see, classes and ID’s are very important and we rely on them every day to do the styling and page manipulation that we need to do. However, you should use them judiciously and semantically. This means avoiding things like this:

CSS-Tricks.com

We already know this element is a link, it’s an anchor element! No particular need here to apply a class, as we can already apply styling via its tag. Also avoid this:

ID is appropriately used here as the page will likely only have a single right column, but the name is inappropriate. Try and describe the context of the element, not where it is or what it looks like. An ID here of “sidebar” would be more appropriate.

Microformats are just specific class names

Think microformats are over your head? They aren’t! They are just regular markup that make use of standardized class names for the information they contain. Check out a standard vCard:

CommerceNet
  

Work:
    

169 University Avenue
Palo Alto,
    CA
    94301
    

USA
Work +1-650-289-4040
  
Fax +1-650-289-4041
  
Email:
   info@commerce.net