Entries Tagged 'CSS: Design' ↓

Author: Eric McArdle

Two types of style sheets: Internal and External

Internal – You insert your style code right into your html code. These stylesheets should only be used if you are intending to create a specific page with a specific style. If you want to be able to make global changes to your website using only one style sheet, you have to use….

External Stylesheets – Instead of putting all the style code into your html code, you can create a single document with your css code and link to it within your webpages code. It would look something like this

{head} {title}Webpage title{ itle} {link rel=”stylesheet” type=”text/css” href=”http://www.yourdomain.com/css“} {/head}

If you decide to use an internal stylesheet, you have to put your css style wihin the following tags:

{style type=”text/css”} {/style}

All css or links to the external stylesheets have to go in between the {head} tags

Now about Css Classes vs. ID’s

The one major difference between a class and an id is that classes can be used multiple times within the same page while an Id can only be used once per page.

Example:

ID – The global navigation of your site, or a navigation bar. A footer, header, etc. Only items that appear in only one place per page.

Class – Anything that you would use multiple times in your page, such as titles, subtitles, headlines, and the like.

Creating ID ’s

To create an Id in your css, you would start with the number sign (#) and then your label of the id. Here’s an example

#navigation { float:left; }

To insert the id in your html, you would do something like this

{div id=”navigation”} {/div}

You can also insert an id within another one like this

{div id=”navigation”} {div id=”left}

{/div} {/div}

Remember to close the id’s in order.

Now, onto css classes.

Creating Classes

To create a class in your css, use this

.subtitle { color: #000000; }

To insert the class into your html, do this

{p class=”subtitle”} {/p}

Now, you can use the same class repeatedly in the same page unlike Id’s.

I also want to tell you something about link attributes. You should always keep them in this order:

a { color: #006699; text-decoration: none; font-size: 100%; }

a:link { color: #006699; text-decoration: none; }

a:visited { color: #006699; text-decoration: none; }

a:hover { color: #0000FF; text-decoration: underline; }

a:active { color: #FF0000 }

Of course, you can change the colors and text-decorations. This is just something I cut out of my code!

Okay, these are the basics. What I highly recommend is to go and download Topstyle Lite by going here:

http://www.bradsoft.com opstyle slite/index.asp

It’s free and is a very helpful css editor. It not only color codes and organizes your code, but it provides you with tons of attributes that you can add to your class and id elements with just a click. They also provide a screen at the bottom to view your css code as you create it. Very useful for a free edition and I’m looking to buy the pro version soon.

Now, this was just a very very brief explanation of the vital elements needed when structuring your css. I have a good feeling that when you download top style lite, you will learn how to use the hundreds of attributes in your classes and id’s

Good Luck in Your Web Designing Efforts!

P.S Change { and } to < and >

About the author: Eric McArdle is the publisher of the TrafficaZine Online Marketing Newsletter which is a publication designed to assist the online marketing and/or web designing entrepreneur with the basic tools and resources that will greatly assist them in taking further steps into bettering their online business. http://www.trafficazine.com

Originally posted 2004-08-30 17:13:38. Republished by Old Post Promoter

From CSS Vault’s About page:

I needed a place where I could look at a list of sites that would inspire my creativity with CSS. I needed a site that linked to all the great CSS resources out there on the web. I couldn’t find a site that combined those two elements, so I created one myself. This site is useful for me as a designer and I hope that it is useful for you whether you are a designer, developer, programmer, manager, or just a CSS advocate.

CSS Vault

Originally posted 2003-11-05 07:25:00. Republished by Old Post Promoter

Author: Eric McArdle

Cascading Style Sheets

Two types of style sheets: Internal and External

Internal – You insert your style code right into your html code. These stylesheets should only be used if you are intending to create a specific page with a specific style. If you want to be able to make global changes to your website using only one style sheet, you have to use….

External Stylesheets – Instead of putting all the style code into your html code, you can create a single document with your css code and link to it within your webpages code. It would look something like this

{head} {title}Webpage title{ itle} {link rel=”stylesheet” type=”text/css” href=”http://www.yourdomain.com/css”} {/head}

If you decide to use an internal stylesheet, you have to put your css style wihin the following tags:

{style type=”text/css”} {/style}

All css or links to the external stylesheets have to go in between the {head} tags

Now about Css Classes vs. ID’s

The one major difference between a class and an id is that classes can be used multiple times within the same page while an Id can only be used once per page.

Example:

ID – The global navigation of your site, or a navigation bar. A footer, header, etc. Only items that appear in only one place per page.

Class – Anything that you would use multiple times in your page, such as titles, subtitles, headlines, and the like.

Creating ID ’s

To create an Id in your css, you would start with the number sign (#) and then your label of the id. Here’s an example

#navigation { float:left; }

To insert the id in your html, you would do something like this

{div id=”navigation”} {/div}

You can also insert an id within another one like this

{div id=”navigation”} {div id=”left}

{/div} {/div}

Remember to close the id’s in order.

Now, onto css classes.

Creating Classes

To create a class in your css, use this

.subtitle { color: #000000; }

To insert the class into your html, do this

{p class=”subtitle”} {/p}

Now, you can use the same class repeatedly in the same page unlike Id’s.

I also want to tell you something about link attributes. You should always keep them in this order:

a { color: #006699; text-decoration: none; font-size: 100%; }

a:link { color: #006699; text-decoration: none; }

a:visited { color: #006699; text-decoration: none; }

a:hover { color: #0000FF; text-decoration: underline; }

a:active { color: #FF0000 }

Of course, you can change the colors and text-decorations. This is just something I cut out of my code!

Okay, these are the basics. What I highly recommend is to go and download Topstyle Lite by going here:

http://www.bradsoft.com

It’s free and is a very helpful css editor. It not only color codes and organizes your code, but it provides you with tons of attributes that you can add to your class and id elements with just a click. They also provide a screen at the bottom to view your css code as you create it. Very useful for a free edition and I’m looking to buy the pro version soon.

Now, this was just a very very brief explanation of the vital elements needed when structuring your css. I have a good feeling that when you download top style lite, you will learn how to use the hundreds of attributes in your classes and id’s

Good Luck in Your Web Designing Efforts!

P.S Change { and } to < and >

About the author: Eric McArdle is the publisher of the TrafficaZine Online Marketing Newsletter which is a publication designed to assist the online marketing and/or web designing entrepreneur with the basic tools and resources that will greatly assist them in taking further steps into bettering their online business. http://www.trafficazine.com

Originally posted 2005-03-23 13:50:49. Republished by Old Post Promoter

Author: Michael Turner

CSS is a new option for website designers that have been using HTML and tables for most of their web designing careers. Of course, it is a huge change and requires learning a new language and skill, however most people are saying CSS is worth it and it will give you more control, options, and is easier to edit. Consider the following 7 reasons why using CSS is a must and see if it convinces you to change your method of web design.

Reason #1 Present Data Logically When you use CSS in the layout of your website you can present your data in a logical way and CSS can then manage how the information appears. This is significantly easier than other methods and is one reason why CSS is a must.

Reason #2 More Options With CSS you have more options for changing the location of information on your screen. This is important for a variety of reasons, especially if you anticipate the need to change columns or links at some time.

Continue reading →

Originally posted 2005-08-07 15:51:06. Republished by Old Post Promoter

Welcome to Box Builder. This is a little tool I wrote in PHP and XSLT to help me design liquid layouts for CSS-based web pages. Now you can use it too.

Box Builder

Originally posted 2003-12-09 07:09:01. Republished by Old Post Promoter

Note the caveat about IE 6 at the bottom of the page.

3 column layout generator

Originally posted 2003-04-16 12:03:35. Republished by Old Post Promoter

Another form generated CSS page layout creator:

CSS Variable Border 2/3 Columned Page Maker

Via Etc

Originally posted 2004-02-29 14:04:53. Republished by Old Post Promoter

A free trial is available.

Browser Cam creates screen captures of your web pages loaded in any browser, and on any operating system, so you’ll be 100% sure your web pages look good-and work right-on any platform.

Browser Cam

Originally posted 2003-09-04 08:43:41. Republished by Old Post Promoter

This page contains a neutral colors chart and a general-purpose color chart. You can use the colors in the palletes with either HTML or CSS. Click on the color code to select it, then you can copy and paste

CSS Color Chart

Author: Steve Chittenden

Like many other web designers, I began laying out web pages using graphical tools and discovered the wonders of tables for layout without anyone telling me to use them. Since browser support for CSS Is better than it used to be, and tables cause problems, CSS offers you a benefit you may not have thought about before, the benefit of better SEO.

Continue reading →