Premier Web Templates» CSS

Planning Your Stylesheet – The Definitive Guide

Mark — Wed, 05 Nov 2008 08:06:07 +0000

The more we rely upon CSS, the larger and more complex stylesheet files become. Planning and organising your stylesheet is essential to creating a lean, manageable website. There are many ways of organising CSS code but the following are best practice…

Comment your stylesheet

Commenting your stylesheet makes it much easier to find the information or the commands you’re looking for.

Meaningful comments include:

Last updated – This information can quickly let developers know about recent changes made to the file:
/* WEBCREDIBLE Updated: Thu 1 Jan 2008 Author: John Doe Updates: Add new section 'Forum' ––––––––––––––––––––––––––––––––––––––––––––––––*/
References – Comments can also be used as a quick reference for the main style guides applied throughout the site:
/* COLORS Body Background: #FFFFFF; Main Text: #000000; Link: #F0F0F0; etc ... */
Organisation – Use comments to identify the different sections of the stylesheet:
/* =HEADER ––––––––––––––––––––––––––––––––––––––––––––––––*/

/* =FOOTER ––––––––––––––––––––––––––––––––––––––––––––––––*/
Reminders and notes – Leaving reminders and notes for yourself and other developers can help avoid confusion later:
/* The width is overwritten for IE 6 in: cssIE.css */ div {width: 150px;}

Define general rules and main classes at the top of the stylesheet

Set the styles of generic HTML elements, for example:
body { background: #FFF; font: Arial, sans-serif 75%; } h1 { font-size: 1.2em; color: #000; } h2 { font-size: 1em; color: #F0F0F0; } img {border: 0;}

Then, list the classes that will be most commonly used across the site, for example:
.hide { position: absolute; left: -9000px; } .required { background: url(#) no-repeat 100% 0; } .fl { float: left; } .fr { float: right; }

Order the CSS in the same order as the HTML

The order of the HTML should be used to determine the order of the CSS sections. CSS files can sometimes be large and commands difficult to find. Having some correlation between the HTML and CSS file makes it easier to locate how an element is being styled.

Know when to use elements, ids and classes

Using the correct selector type means your CSS file can be significantly reduced in size:

Elements – Elements such as body, (), paragraphs, (
) and headings, (
,
etc.) should be used to define general rules
IDs – These are unique identifiers and should only be used once within a document. IDs should be used to style major structural sections of a web page such as the header or the footer.
Classes – These can be used on any type of HTML element.

Too many ids or classes can overload the HTML and the CSS files unnecessarily. Try and define as many rules as possible by referencing elements and/or ids by nesting the selectors.

Imagine the following HTML code:



Item 1

Because each of the list items has a common parent, descendant selectors can simplify the CSS markup as follow:

#nav { properties listed here } #nav li { properties listed here } #nav li a { properties listed here }

Name classes and ids logically

Don’t name classes and ids based on their color or position as these may change in time. Try and give them a name that’s likely to remain relevant over time. Also, use hyphens ahead of underscores as certain old browsers have a hard time understanding the latter.

Use a common naming system for your classes and ids. It will save a lot of time and confusion when developing, debugging and updating documents.

Nest CSS selectors

By nesting CSS selectors (i.e. using more than one CSS selector in one command) we can apply styles by navigating the HTML document tree. For example, to apply a colour of red to all paragraphs within a div, we can use the following rule:
div p {color: red;}

Take advantage of inheritance

Some CSS commands inherit from their parents whereas others don’t. The use of nesting means you don’t have to declare the same properties over and over again.

Generally speaking, text-related CSS commands (e.g. font-size, color) are inherited by descendant elements, whereas layout-related commands (e.g. float, width) aren’t inherited .

Group selectors with common CSS declarations

You can avoid specifying the same set of properties several times by grouping the selectors that share the same CSS declarations together. For example:
h1, h2, h3 { color: black; padding: .2em; }

This article was written by Brigitte Simard. Brigitte’s crazy about accessibility and CSS – so crazy that she works for Webcredible, an industry leading user experience consultancy, helping to make the Internet a better place for everyone. She spends much of her time working on the world’s most accessible CMS and is very good at CSS training.

Note: There is a rating embedded within this post, please visit this post to rate it.

Writing Articles With Style – Create Quality Articles With CSS

Mark — Sat, 18 Oct 2008 04:55:47 +0000

Writing your quality articles using Cascading Style Sheets (CSS) will insure that your articles will be both easy to read and aesthetically pleasing to the viewer.

A CSS style sheet allows the HTML code for your articles to be cleaner, table-less, easily customizable, and “liquid.”

Removing the display attributes of your articles from the HTML code allows you to concentrate on using the HTML for organizing your document’s content.

When you use CSS, a new approach is possible to writing your articles for the Web:

First, you write your article in a very basic HTML document, using simple HTML code. At this stage, use only the most common HTML tags. Focus on organizing your article’s content first.
Next, you identify parts of your document for special display formatting.
Finally, you define the formatting in the CSS file.

Once you work through this process, you can reuse both the HTML document and the CSS file as templates for your future, quality articles.

This article will provide the tips, tricks, and sample code to give you a head start in creating your own quality articles and templates using CSS. If this all seems complex and intimidating at first, don’t despair – read on. I will explain the basic HTML and CSS terminology throughout the article.

THE BASIC HTML DOCUMENT

The basic HTML document is devided into several sections: html, head, and body.

Tags are used to demarcate document sections, or “elements.” Content lies between the tags. For example, the article you are now reading lies between the body tags of an html document.

Tags usually exist in pairs, a start tag and and end tag. The start tag is surrounded by less-than and greater-than angle brackets. An end tag is bracketed with the same symbols but the first character of the tag is a forward slash (/). For example, HTML code for a paragraph element would include the start and end “p” tags with the content sandwiched between the two.

The basic tag pairs found in web pages are:

html – These tags tell a browser that this is an HTML document and define the start and end of the document.
head – The head element can contain information about the document. Although the browser does not present the information to a viewer, the information can be “seen” and used by search engines.
title – The title tags define the title element that will be used by a browser for the document’s title.
body – The document’s content is placed between the body tags.

In HTML 4.01, not all tags exist in pairs. The “!DOCTYPE” and “meta” tags do not use an end tag, for instance.

The first line of code in the basic document is the Document Type Definition (DTD). The !DOCTYPE tag tells the browser which HTML or XHTML specification the document uses. HTML 4.01 specifies three document types: Strict, Transitional, and Frameset.

The first meta tag in the basic HTML document provides information about how the page-content characters are encoded so that a browser can interpret them correctly.

If you want your articles to be widely seen on the Internet, you need to be particularly interested in the meta tags for keywords and description. These can be seen and used by search engines.

Use the “keyword name” and its related “content” in a meta tag to list your keywords or keyword phrases.

Keywords ought to be appropriate for the article content. They should also reflect what internet surfers actually type into a search engine’s query box when hunting for the information you are offering.

Keyword research is a study in itself. Freeware is available on the Internet that can help you determine the best keywords to use in your article and keyword list. Keywords or keyword phrases within the meta tag need to be separated from each other with a comma.

Although not all search engines will utilize the description meta tag for their search results, you still need to include a good description for those that do.

If you had just a few characters to describe your article, or to entice a surfer to select yours from the results of a search, what would you write? What you would write is what should go into the description.

USING CASCADING STYLE SHEETS (CSS)

I have already suggested several reasons why today’s preferred method of creating web pages is to separate a page’s content from it’s display properties. It’s time for a demonstration of how this can be accomplished.

In the past, HTML tags included attributes to define how the content was to be displayed by a browser.

Today, CSS is used to concentrate these attributes in a single, separate file. Simple HTML code specifies “what” content is to be displayed; the CSS code defines “how” the content is to be displayed.

Before CSS can be used to format an HTML document, the name and location of the CSS file must be known to the browser. The browser gets this information through the HTML “link” tag that is coded between the head tags.

Once the CSS file is linked, the browser will check the CSS file for display attributes. For example, if the browser encounters an “h1″ tag in the HTML code, it will check the CSS file for “h1″ formatting. Here is the “h1″ formatting information I included in the article.css file I use for my article titles:

h1
{
  color: maroon;
  text-align: center;
}

When a browser encounters an “h1″ tag in the HTML code, it would display the title centered and maroon.

SELECTING CONTENT FOR FORMATTING

Content formatting can be applied to an HTML document only after the content to be formatted has been identified to the browser. An easy way to do this is to place a “class” or “id” attribute within a start tag. The same class name can be used many times on a web page; each id name should be used just once per page.

Once content is identified, the class or id name can be referred to in the CSS file and the browser will apply any formatting attributes found there.

Selections Using Class Names

As an example of using the class name, I used the following CSS for in an article about writing ad headlines. In the HTML code, I used divisions tags with a class name of “headline” to demarcate the headline text. I added the following code to the CSS file:

.headline
{
  font-size: 24px;
  color: red;
  font-weight: bold;
  text-align: center;
}

In the CSS file, I specified the font-size, color, font-weight, and text-align attributes. The class name was added to the CSS file by preceeding the name with a period. I used a semicolon to separate attributes in the list. The HTML and CSS code combine to produce a bold, 24px, red headline centered in the HTML page.

It should be noted that there are some basic HTML tags that are their own class names and do not require a preceding period in the CSS file. These include p, h, body, li, and others. That being said, these tags can be modified by appending an additional class name to them. For example, if I wanted to make the next paragraph blue, I could add a “blue” class attribute to the opening HTML “p” tag and then add this code to the CSS file:

p.blue
{
  color: #0000FF;
}

This would be a blue paragraph if this HTML were displayed in color.

Selections Using ID Names

The CSS syntax for an ID is a little different from that used for a class. In the CSS file, ID names are proceeded with a pound sign (#). The example below “floats” my 288px by 59px logo image to the left of the following paragraph: the text flows around the image. I added an ID attribute with a name of “logo” to the HTML “div” start tag I used to demarcate the image information. Here is the CSS code I used:

#logo
{
  float: left;
}

The HTML and CSS code would combine to produce the following results:

~~~LOGO WOULD FLOAT HERE~~ Text here would flow around the logo.

Selections Using Span Tags

If you want to format just a bit of content, you can use span tags

In the article.css file, I defined a background-color attribute for a “highlight” class that will put a yellow background behind selected text. For the next paragraph, I used span tags to bracket the text, “separate attributes.” Here is the CSS code:

.highlight
{
  background-color: yellow;
}

As a result, and if this were in color, the phrase “separate attributes” would be highlighted with a yellow background.

LOOKS AND LAYOUT

A careful selection of the “global” characteristics used for the body element of your web page will insure that your articles will be both easy to read and aesthetically pleasing to the viewer. These characteristics include font, font color, page background color, and page margins.

I use the “body” code in the CSS file to define the default body display attributes. Here is the CSS body code from the article.css file:

body
{
  background: #fffef2;
  color: black;
  line-height: normal;
  margin: 3% 25% 3% 25%;
}

Fonts

In the CSS body code, I specify the font family I want to use. The first font listed, Verdana, will be used by a browser if it exists on a viewer’s PC. If Verdana is not available, the other fonts will be checked, in order. If none of the specific fonts are available, the browser will default to any available sans-serif font.

If you use a commonly available font/font-family for your articles, the chances are good that a reader will see the article as expected. Otherwise, your article might not look the way it should.

Verdana was designed for easy readability on computer monitors and, for this reason, is my font of choice. Since Verdana is commonly available on PCs, using this as the default font will also increase the likelihood that my article text will be displayed as I intended.

Page Background

I set the background color to a light color, the font color to black, and the line height, or spacing between lines, to normal. The background color I like to use (#fffef2) shows colored text and graphics to good advantage.

Margins

I like to adjust the article on my page to show content in roughly the middle half of the page. I think it is easier for the eye to process than content that goes edge to edge. I use the CSS margin attribute to adjust this. The margin attribute defines the top, right, bottom, and left margins respectively (margin: top right bottom left).

In the CSS body code above, I set the left and right margins to 25% of the available display width. Using 25% places about 60 characters per line of text on my 1024×768 pixel full-screen display. I also set a small 3% margin above and below the content.

Lists

If you use a list in your article, you can use the CSS file to customize the way your list looks. Two important considerations of list design are the list bullet and the spacing between list elements. The example below shows how to change the bullet graphic and element spacing of an unordered list:

li
{
  list-style-position: inside;
  list-style-image: url (http://www.elizabethadamsdirect.com/articles/images/small_blob.gif);
  list-style-type: none;
  margin-bottom: 1em;
}

I added two list attributes to customize the list:

list-style-image – used to specify the URL to a bullet image (not shown below), and
margin-bottom – used to provide some extra space between list items.

For a complete description of possible list attributes – as well as great tutorials on using HTML and CSS – you can visit http://www.w3schools.com

Entity Names

Some characters have special meaning in HTML documents. When you want to use these characters in your text, you can use their “entity names” to prevent browsers from misinterpreting them for HTML code. I used entity names extensively for my web version of this article to display many symbols, particularly in the code samples.

Most commonly, I use entity names in my HTML code for quote marks. By doing this, I get the look and feel I want in my text when I use quotes. For example, when I want to use distinctly different left and right quote-marks in my web-based titles and headlines, I use specific entity names to do so.

Careful attention to the entity names you use can add “that extra touch of class” to your articles.

For HTML 4.01, there are entity names for both ASCII and extended characters and symbols. I use an entity name to insert a copyright symbol at the bottom of all of my web pages. You can find a complete list of entity names at w3schools.

I use Dreamweaver 8 for my HTML and CSS editing. With Dreamweaver, I can validate my code as I write it. I have optioned the validator to warn me when entity name substitution might be appropriate.

Validating Your HTML and CSS Code

I like to write valid HTML code for the “!DOCTYPE” version I use. If you click on the w3 validation icon at the bottom of my full-color, web-site version of this article, you will see that the HTML code for the article is valid and error free. You can use the validator accessible through w3schools to check your code, too.

CONCLUSIONS

When you separate your article’s content from the code browsers use to display your article, you can focus on using simple, basic HTML code to organize your content. A Cascading Style Sheets(CSS) can accomplish the separation.

A CSS style sheet allows the HTML code for your articles to be cleaner, table-less, easily customizable, and “liquid.”

You can look at one of my recently published articles to see the results of using the techniques outlined in this article. The article is “Profitable Ads: How to Write Ads that Pull.”

Elizabeth Adams has been writing direct sales copy since the early 1990’s, when she employed several people to handle mailings and product fulfillment for her postcard marketing business. Elizabeth learned in direct mail how to tweak her sales copy on the run and improve her sales conversion by as much as 400% in only one mailing. She learned how to write a great headline and effective sales copy. Get “Great Headlines — Instantly” today to learn how to do for yourself what Elizabeth learned in the trenches: http://www.elizabethadamsdirect.com/greatheadlines/

Using CSS Instead of Tables

Mark — Sat, 11 Oct 2008 00:16:44 +0000

The following article will show you why to stay away from tables when designing a site.

Most web developers and designers will tell you to stay away from tables when developing web sites, of course there are some exceptions, like forms, and data. Instead they will tell you to use CSS. When designing your web site you should use CSS, along with the HTML tag. Now, you may be asking, why? The reasons are below!

1. Tabular Data. Not layouts.

Tables are for Tabular Data. They simply are not for designing a page. Here is a good page at about.com that explains Tabular Data.

2. Nested Tables

Nested tables is a common way to make layouts with tables. With nested tables, one, or more, tables are placed inside each other. There is a problem when designing a page this way, it takes the browser longer to render your page. With CSS there is way less code, and your code is cleaner, therefor it is easier on the browser.

3. Changing fonts, colors, and layouts.

Lets say you had a site with 100 pages, with tables, and you wanted to change the header of every page to blue instead of red. With CSS you could go into the CSS file, included on every one of those 100 pages, and change the font-color to blue. It would then update all of your pages with the color blue. With tables you would have to open every one of those pages and change the color.

4. Invalid XHTML

When using tables for your web page layout, you are writing invalid XHTML. You should only use tables when you are working with Tabular Data, as I stated above.

5. Smaller HTML files

No one wants a huge HTML file, full of messy code, right? Well, this is just another reason to use CSS. Since you can call your CSS style sheet from external file, it doesn’t even need to be in your HTML file to work, making it even smaller.

Article written by Joe S O
LeetWebmasters.com is home to tutorials, tips, resources, and scripts for your web sites!
Home Page – http://www.leetwebmasters.com
Community Forum – http://www.leetwebmasters.com/community

The Concept Behind CSS

Mark — Thu, 09 Oct 2008 00:50:58 +0000

What is The Concept Behind CSS?

The concept behind CSS (a.k.a. cascading style sheets or style sheets) is really simple. CSS allows you to create a single document of code, similar to an HTML file, that lets you specify the colors, fonts, backgrounds, etc. of a web page. The CSS file is then linked to from the web page(s) that you want to have the same styles that you specify.

CSS allows you to make changes to all of the web pages that link to the CSS file at once by changing a style in the style sheet, instead of having to manually change every style in every HTML file.

If CSS did this and only this, they would save you a lot of time to say the least, especially if you have a large or multiple web sites. This alone is worth learning CSS, however, style sheets allow you to do this and much more.

CSS also allows you to:

Position text and graphics precisely where you want to.
Add rollover effects to links.
Control the spacing between letters, lines, margins, web page borders.
Specify the units such as centimeters, pixels, points and more.
Hide content from certain web browsers in certain situations. An example of this is when you have some content that you want to appear only in your web pages, but not in print.

Some Benefits of CSS

Your web pages load faster because there is less code to transfer.
There is less code to type.
It is easier to have a consistent look and feel to your entire web site.
Updating and maintaining websites is much easier and less time consuming.

In the end, CSS can save you a lot of time and effort and is very easy to learn.

Jose Valdez is the webmaster of FreeCSSTutorial.com
Article Source: http://www.ArticleGeek.com – Free Website Content