Book

Suggestions

Enter your email address:

Delivered by FeedBurner


Home Page

Bloglines

1906
CelebrateStadium
2006


OfficeZealot

Scobleizer

TechRepublic

AskWoody

SpyJournal












Subscribe here
Add to 

My Yahoo!
This page is powered by Blogger. Isn't yours?

Host your Web site with PureHost!


eXTReMe Tracker
  Web http://www.klippert.com



  Thursday, January 21, 2010 – Permalink –

CSS Coding

Put by the keyboard

Cascading Style Sheets (CSS) is a simple way to define styles (e.g. fonts, colors, spacing) on Web pages.
Of course there is coding involved. Here is a printable cheat sheet you can keep close at hand.

LeslieFranke.com




See all Topics

Labels: , ,


<Doug Klippert@ 3:36 AM

Comments: Post a Comment


  Tuesday, September 29, 2009 – Permalink –

Collection of the Good Ones

Striking sites


Here is a collection of well designed sites that make use of CSS.

How do you pick the sites?

Well first they have to be done in CSS. Tables can only be used for tabular data. Second they just have to look good to me. Beauty is in the eye of the beholder so I do not expect every site that is posted to be liked by everyone or even anyone. Also do not expect a site to be posted just because you sent it in.

With the large amount of submissions I get daily and the increasing number of showcase sites, getting your site into the Vault will now be more challenging. I look for use of color, typography, whitespace, IA and how they all fit overall in the site's structure.



CSSVault.com




See all Topics

Labels: , ,


<Doug Klippert@ 3:01 AM

Comments: Post a Comment


  Wednesday, September 16, 2009 – Permalink –

Relative Font Sizes

What size are your relatives?



Relative font sizes make websites more accessible and easier to read - but they're not much help unless the person using the site can find a way to actually change text size.

Here's a simple solution for text resizing:

Power To The People: Relative Font Sizes
Article by Bojan Mihelac

Original link from Lockergnome




See all Topics

Labels: , , , ,


<Doug Klippert@ 3:49 AM

Comments: Post a Comment


  Friday, July 03, 2009 – Permalink –

CSS, PHP, and all that stuff

Collections of suggestions


Under the belief that more information leads to more understanding, here is a site that may help you round the corners of web design and function. Besides CSS templates there are PHP code nibblets.


In 2003 artypapers was created by R. Marie Cox as a springboard for ideas and a working space of technical implementation -- a place to test and build an extendable collection of core classes (alliteration!) that acts as an application framework for a diverse set of projects and applications.

artypapers.com

Also:
Links and Discussion About the Best CSS Resources Available on the Web.
CSS Help Pile




See all Topics

Labels: ,


<Doug Klippert@ 3:59 AM

Comments: Post a Comment


  Thursday, May 07, 2009 – Permalink –

More Cascading Style Sheet Help

Tutorials, Tools, and Links

"Cascading Style Sheets separate the presentation from the structural markup of a web site. By applying a CSS style you have the ability to keep the structure of your document lean and fast, while controlling the appearance of the content.

HTML was intended as the structural markup language. This language focuses on the roles that the different elements of a document have to play, not how they have to look. CSS has been invented and developed for the Internet. It is not an adapted tool from print or programming, but a means of enhancing HTML."

Mako4CSS.com
  • CSS Creator site is a place for you to learn about and create CSS, Cascading Style Sheets. The CSS Forum is a place where you can discuss CSS page layouts, positioning, bugs and just about anything related to cascading style sheets. The forum is new, free and most of all needs people like you to create a community. Talk about CSS, ask questions, find solutions, and help each other learn at the CSS Forum.

  • The original CSS Creator is a CSS generator, which you can use to create styles and test them on your site. If you are learning CSS have a look and see how changes will affect your site and generate the styles. The CSS Creator has been used tested on 5266 urls.

  • The CSS Layout Generator will generate layouts with a flexible center column and fixed width left and or right column. All columns will be the same length, the layout can be centered on the page or full width and a header and footer can be easily added. 10545 CSS Layouts have been generated.

  • A light weight multi level menu, which uses a very small JavaScript file for browsers with bad CSS support. The markup of the menu is simply unordered lists, it can support multiple levels and will degrade to a simple unordered list if CSS is turned off.

  • A Useful CSS Links page has been added to the site and contains great links to CSS tutorials, tools, tips from all over the web.

CSS Creator.com Also see: New York Public Library Online Style Guide See all Topics

Labels: ,


<Doug Klippert@ 3:27 AM

Comments: Post a Comment


  Tuesday, April 14, 2009 – Permalink –

Border Magic with CSS


Consistent formatting



Cascading Style Sheets can be helpful in applying dependable format characteristics to web sites. Like Styles, CSS provides a reference point when a certain look is called for.

Stu Nicholls provides directions for "Fluid" borders:
"If you resize your browser window you will see that these borders are fluid and stay in shape. Resize the text and they will also stay in shape."


Even in this static shot, you can see some nice possibilities.

Fluid Borders to with CSS




See all Topics

Labels: , ,


<Doug Klippert@ 3:03 AM

Comments: Post a Comment


  Monday, March 23, 2009 – Permalink –

More CSS

Can't get enough


Demonstrations, Layouts, Menus


This site provides a wealth of examples about how to use Cascading Style Sheets.

Poke around and then come back when your project calls for something different.


"Because my site deals with experimental CSS that is exactly what you get JUST CSS, no javascript or any other programming language has been used in any of the demonstrations."


CSS Play by Stu Nicholls





See all Topics

Labels:


<Doug Klippert@ 3:40 AM

Comments: Post a Comment


  Monday, February 09, 2009 – Permalink –

Photo Gallery

A CSS exercise


FrontPage had a Photo gallery template, and you can also save a PowerPoint show as a web page.

For another take on the problem, here are the instructions needed to create a gallery using CSS.

Click here to see what it might look like:



How to Create a Photographic Gallery Using CSS
By Stu Nicholls




See all Topics

Labels: , , , ,


<Doug Klippert@ 3:19 AM

Comments: Post a Comment


  Thursday, October 23, 2008 – Permalink –

Alternate Bullets

High caliber


There are other images that can be used as bullets in Word, PowerPoint, and HTML.
Allan Wyatt's Word Tips:

Using Words as Bullets


Netmechanic.com:

Make Custom Bullets
Using CSS


Shauna Kelly:

How to control bullets in Microsoft Word

Ins and outs of bullets and numbering in Word


Dubbo College :
(an easy five hours drive from Sydney, four hours from Newcastle and a ten hour drive from Melbourne and Brisbane.)



Paragraph Bullets


Troubleshooting Bullets and numbering


Also see:
Beyond Bullets.com

Beyond Bullet Points, the book



See all Topics

Labels: , ,


<Doug Klippert@ 2:23 AM

Comments: Post a Comment


  Thursday, July 24, 2008 – Permalink –

HTML/CSS Resource

"The Ultimate"


You may be put off by the home page for this site, but drill deeper.
Blooberry.com
Brian Wilson

The Author has compiled a very well arranged collection of references.


You might want to go directly to:

Index D O T HTML
T h e A d v a n c e d H T M L R e f e r e n c e

Or

Index D O T CSS
T h e A d v a n c e d C S S R e f e r e n c e

Brian is looking for volunteers to expand the authoring base for this site. If you would like to participate, here is a link to his email address:
Blooberry Email



See all Topics

Labels: , ,


<Doug Klippert@ 4:36 AM

Comments: Post a Comment


  Wednesday, July 09, 2008 – Permalink –

Cascading Style Sheets

Good tutorial and reference


"Cascading Style Sheets (abbreviated CSS) add a new dimension to our pallet of Web design tools. They have the potential to allow a webmaster to control the appearance of countless web pages with one single file.

This file, known as a "Style Sheet", can be referenced by any number of web pages to define how certain areas of text appear on those pages.

With a simple change to this style sheet (to the font face, color, size, highlighting, border, or other properties), any page in the entire web site can instantly and easily be altered, eliminating the need to go through and change every single HTML tag.

In addition, style sheets add a number of other features, such as being able to specify text size in terms of points, highlighting text, using borders without the hassle of tables, defining paragraph indents, margins, and object positioning. They even provide the ability to layer elements over one another!"



University of Miami at Coral Gables:
Cascading Style Sheets


Also:
Documents and Materials

  • Beginning HTML
  • Advanced HTML
  • Cascading Style Sheets
  • Microsoft Excel
  • Microsoft PowerPoint
  • Microsoft Word

These documents are "PDF" files



See all Topics

Labels: ,


<Doug Klippert@ 6:44 AM

Comments: Post a Comment


  Wednesday, July 02, 2008 – Permalink –

Very Clever CSS Playground

I didn't know you could do that!


"This site documents my attempts at understanding and exploring the possibilities of CSS. From standard navigation links to my more bizarre experimental techniques.

All my examples are produced with JUST CSS, no javascript, or any other language, has been used in any of the examples. The demonstrations are designed to work in all the latest browsers, but, if you're lucky, some may also work in earlier versions."


Stu Nicholls' Navigation Gallery.

Here are two of the examples demonstrated:

Messing about in boats
Hover over a picture and it enlarges to 100%

Also:



The Streaker
A piece of animation done with CSS alone, no Java.

(I haven't figured out how to use situational CSS in a blog, so you'll have to go to Stu's site to see if the guy gets to the other door.)



See all Topics

Labels: , , ,


<Doug Klippert@ 4:52 AM

Comments: Post a Comment


  Saturday, June 21, 2008 – Permalink –

CSS Crib Sheet

Information rich site


When you get serious about web design, CSS or Cascading Style Sheets will add flexibility to your toolbox.


Mezzoblue .com has a wealth of information including:

CSS Crib Sheet

"You will no doubt come across many quirky layout issues when building a site with CSS. You'll end up banging your head against a wall time and again. This is an attempt to make the design process easier, and provide a quick reference to check when you run into trouble."


And:

A Roadmap to Standards
"The old-timers had to figure out the hard way all the tricks and techniques we now take for granted; lucky folks who came in later (myself included) can benefit from their sweat and tears.

In the end, when your skill using standard-based design eclipses your skill using old-school table-based methods, you’ll look back and marvel at how much more sense it makes to layout a page with CSS."


The RSS link is here




See all Topics

Labels: , ,


<Doug Klippert@ 5:09 AM

Comments: Post a Comment


  Monday, June 09, 2008 – Permalink –

Low Vision

Screen-magnification or zoom




Creating a Web site that accommodates people with low vision should be a goal of designers. Accessibility laws require it in some cases.

The online magazine AListApart.com, has some interesting articles:

Big, Stark & Chunky

"[Participants] told us that they often copied and pasted material into Word where they could enlarge the font even more and make it bold, thus rendering it easier for them to see."

"We have not done a good job of catering to these screen-magnification or zoom users. Using CSS, it's easy to do, as we shall soon see. And moreover, using CSS to develop zoom layouts is almost exactly what developers of handheld and PDA browsers are doing in their quest for small-screen rendering of wide, multicolumn web pages."


Also:


Web Accessibility



See all Topics

Labels: , , ,


<Doug Klippert@ 8:09 AM

Comments: Post a Comment


  Monday, January 21, 2008 – Permalink –

Page-break CSS

Before or after


You can put a break on a web page like you can in a document.
A Cascading Style Sheet makes it simple

"The stub-ends left when paragraphs end on the first line of a page are called widows. They have a past but not a future, and they look foreshortened and forlorn."


Orphans are parts of a paragraph that begin on the previous page. An orphan has a future, but no past.

The only paging properties supported by Internet Explorer 7, Safari 3 and Firefox 2 are page-break-before and page-break-after.
The page-break-before and page-break-after properties enable you to say that a page break should occur before or after the specified element. The following example starts a new page every time an h1 heading is encountered and after every .section block.
h1 {
page-break-before:always }
.section {
page-break-after:always}


Etiquette of Pagination



See all Topics

Labels: , ,


<Doug Klippert@ 6:23 AM

Comments: Post a Comment


  Thursday, October 11, 2007 – Permalink –

Guide to CSS

Map through the forest


Dustin Diaz:
"Ok. Let's set the record straight. There is no official guide for each and every CSS shorthand property value. So let's work together and put one together shall we?

Ok. Straight to the business. Anytime I've ran into a specification (besides the confusing mess at the W3C), it turns into showing off a couple of examples and you're supposed to be set on your way.

Well well. Over the years, I've found quite some interesting unknown quirky facts about these shorthands. . . hence this Guide was born."



CSS Guide



See all Topics

Labels: , ,


<Doug Klippert@ 8:06 AM

Comments: Post a Comment


  Saturday, August 18, 2007 – Permalink –

CSS

Cascading Style Sheets



As a web page is formatted in FrontPage, the style choices are applied to each element.
To format the body of the page, the HTML code might be:

<body background="blue" color="white" font-family="times, serif" font-size=10pt>

Every page on the site would need to be coded this way in order to have a consistent look.
Cascading Style Sheets will simplify the problem. On an external page the elements can be defined like this:

body {
background: blue;
color: white;
font-family: times, serif;
font-size: 10pt


Each page would contain a reference to the CSS definitions:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


When the element "body" is used it will now use the CSS references.

For more information see:

Using Cascading Style Sheets on Your Web Site
David Berry

and
Eric Meyer's Site

In this Blog:
CSS Links
and:
More Cascading Style Sheet Help

[Edited entry 9/4/2004]



See all Topics

Labels: , , ,


<Doug Klippert@ 6:53 AM

Comments: Post a Comment


  Monday, March 19, 2007 – Permalink –

Menus Via CSS

Code and directions


"The core of any Web site is the navigation mechanism, the menu. If Web sites are primarily about organizing and presenting content, a site's menu provides the means of traversing this information set.

In designing a Web navigation system, it is often difficult to balance the competing objectives of simplicity, flexibility, usability, and maintainability. Often very simple designs are not flexible; flexible designs trade off with usable ones; and easily maintainable designs are rarely even considered."


Build a Flexible CSS Web Navigation Architecture



See all Topics

Labels:


<Doug Klippert@ 7:18 AM

Comments: Post a Comment