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.