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
Entries Tagged 'CSS: Design' ↓
CSS Color Palletes
September 23rd, 2005 — CSS: Design
CSS’s SEO Benefits
September 4th, 2005 — CSS: Design
Author: Steve Chittenden
This article is most useful if you are somewhat familiar with HTML and CSS. I explain the concepts well enough that you do not have to be an expert, but I want to provide material that will introduce you to more advanced design in ways you can understand.
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.
Why your site should be developed with CSS and semantic markup
August 28th, 2005 — CSS: Design
Author: James Kendall
One thing that I have learned in over a decade developing web sites is that the Net is continually changing, and to keep up you need to change with it. One of the more recent developments in web design is the use of CSS and semantic markup. CSS and semantic web design has several benefits: clarity in code, browser and other web-enabled devices compatibility, seperation of content and presentation, smaller burden on bandwith, and better visibility to search engines.
CSS Browser Detection
August 28th, 2005 — CSS: Design
CSS Browser Detection - The complete guide
Author: Afonso Ferreira Gomes
Different browsers, different CSS interpretations! There will be a time when you’ll need to hide some CSS rules from a particular browser, or even all the CSS file! In this articles I’ll try to compile all possible types of Browser detection technics and provide examples. So let’s start with the easier one!
CSS in Flash the return of crisp and legible fonts
August 21st, 2005 — CSS: Design
Author: David Collado
A typical challenge faced by Flash developers like me is getting fonts to look like you want then to. For any project choosing the right font face and size is a process that requires both you and ultimately the client to see eye to eye.
In Flash MX and earlier versions fonts were by default anti-aliased, meaning that the edges of the text are smoothed. This is good when dealing with large type but it causes small text to appear blurry. Earlier versions of Flash also had other issues. For instance if one were to realign textfields around other objects fonts might come out of focus (because of positioning), and getting it right could take several tries.
More recently with the advent of Flash MX 2004 came the “alias text” option but, more importantly the TextField.StyleSheet() class. What is the TexFiled.StyleSheet() class? I’ll get to that but first let me tell you about this new “alias text” feature. The latter hides the anti-aliasing to make small text sharper and more legible yada, yada, yada. However, most often than not, fonts appear overly pixilated and cracked. In my opinion “alias text “ is nothing more than a little ransom note generator making every character appear as if it had been cut out of a magazine. Adding insult to injury if you are publishing for the Flash 6 player or earlier versions on Flash MX 2004 the “alias text” feature does not work on dynamic and or input textfields.
Seven Reasons Why Using CSS is a Must
August 7th, 2005 — CSS: Design
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.
Some thoughts about CSS hacks
May 14th, 2005 — CSS: Design
Hacked Off With CSS?
Author: Andrew Faulkner
Many webmasters/designers are now using CSS for layout purposes on their sites to ensure web current web standards are met. But with current trends it can be hard to predict the exact look of a site across the complete range of browsers. Some are flawed and some have their ‘special quirks’ when displaying a website. Designers, being the types that need perfection in their design, often ‘Hack’ their CSS code to create a design that ‘works’ across browsers or platforms. But is this the way forward?
For those not familiar with CSS Hacks, they are ways of using styles/classes that only apply to particular browsers. They are used to overcome the display problems mentioned previously by exploiting CSS structure and code. Most involve simple punctuation tricks to fool the problematic browser into accepting a different style to the browsers that display correctly.
CSS Hacks work, but there are two main points to consider.
Firefox as a CSS learning tool
May 7th, 2005 — CSS: Design
Teach yourself CSS the easy way
Author: Erich Bihlman
I taught myself HTML back in the mid-nineties and was proud of the fact that I was able to accomplish the design of fairly complex web pages with nothing more than a starter HTML book, an HTML reference book, and the knowledge I had stored in my head. But back in those days, we web designers had what looking back was a fairly limited amount of tools with which to work, and the quality (or lack thereof) of sites on the web was lackluster at best.
Fast-forward to today: The hand-coder has more powerful and intuitive software packages available that will still allow us “to get our hands dirty”, which brings us to the purpose of this article. With the standardization of the much anticipated Cascading Style Sheets (CSS) in the late-nineties, the web design community has become familiar with a much more powerful and precise method of web page layout.
How To Design Your Web Site With CSS
March 29th, 2005 — CSS: Design, Website Design
Author: Herman Drost
Cascading Style Sheets (CSS) allows you to create fast loading pages, increase your search engine rankings, and modify your whole site with one style sheet. So why don’t more people use them? This is because they got so used to html design and are afraid or too lazy to upgrade their skills. Some will also use ready made templates that contain flashy graphics, bloated code and sometimes even contains hidden code embedded in the page.
In this series of articles I will show you how to create a simple web site using CSS, so you will have no excuse to begin incorporating them into your future designs.
What are Cascading Style Sheets?
Cascading Style Sheets is the name of a simple language that allows you to add any style (font, colors, graphics, links, layouts) to your web pages.
Benefits of Cascading Style Sheets
1. Separate content from presentation – you can separate your HTML markup, text, graphics and multimedia from presentation.
2. Consistent site wide look and feel consistency – you can apply one style for 100s of web pages all at once. So if you had to change the color of all pages on your site, you only have to edit one style sheet. This saves you a huge amount of time, especially if you had to edit each page separately.
3. Web site maintenance - apart from being able to make site wide changes easily through one CSS file, the clean code it generates makes it easier to update. Properly marked up web pages permit them to be maintained by more than one person. It will also work in more browsers. Web site redesigns will take much less time.
4. Improve search engine rankings – search engines generally spider the code at the top of your web page first. For most sites that means the navigation bar will be spidered first (resides at top of page code). CSS enables you to position the code for your content at the top making your page search engine friendly. Properly marked up HTML pages can easily found and properly categorized by search engines
5. Fast loading – CSS reduces the amount of tags used therefore producing clean code. Tableless design can reduce your load time by 25% to 50%.
6. Reduce bandwidth – compacting the amount of code used will reduce the amount of bandwidth needed to host your web pages. Therefore you won’t have to pay higher fees when adding more web documents to your site.
7. Accessibility - increasing accessibility with CSS means being able to serve web content to a larger audience, increasing web site usability, even for non-disabled people. Content can easily be formatted for projection as well as screen display. Tableless layouts display well on hand-helds.
8. Improve the printing of web pages – most printers will only allow you to print a portion of the web page. With CSS your whole document can be printed.
When you use CSS it becomes quick and easy to apply new styles that can not only effect all styles on your web page but even your whole site.
In the next article I will explain how to layout a web page using CSS.
About the author: Herman Drost is the Certified Internet Webmaster (CIW) owner and author of http://www.iSiteBuild.com. Affordable Web Site Design and Web Hosting. Subscribe to his “Marketing Tips” newsletter for more original articles. mailto:subscribe@isitebuild.com. You can read more of his in-depth articles at: http://www.isitebuild.com/articles
CSS: The Basics - ID’s and Classes … Correct
March 23rd, 2005 — CSS: Design
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