CSS Beginner Tutorial

Author: prince vio

Like the HTML Beginner Tutorial, the CSS Beginner Tutorial assumes that you know as much about CSS as you do about the cumulative effects of sea squirt discharge on the brain chemistry of Germanic ammonites. The purpose of this guide is to teach the bare essentials - just enough to get started. The CSS Intermediate Tutorial and CSS Advanced Tutorial go into more depth about CSS.

HTML Dog, The Book HTML Dog book cover

HTML Dog is hosted by Titan Internet

CSS, or Cascading Styles Sheets, is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.

Styles don't smell or taste anything like HTML, they have a format of 'property: value' and most properties can be applied to most HTML tags.

Contents

0 Comment
 

css design tips

Author: prince vio

and-picked, carefully selected, extensive listing of over 2,400 annotated resources. Our Web Resources section includes annotated links to best-practice tutorials, articles, resources, software programs, helpful Web design tools, and information on the Web for beginners and novices to experts — such as HTML and CSS tutorials, color charts, fonts, search engine optimization (SEO) and marketing (SEM), graphics and graphics software programs tutorials, accessibility, usability, information architecture, and more.

Visit the Web Resources Table of Contents or jump to:
Design: Color and color charts and tools at this site, Creativity, Inspiration, Design and Layout, Fonts, Graphics, Typography;
Markup and Code: CSS, DHTML, HTML, JavaScript, ECMAScript, AJAX, PHP, SSI, XHTML, XML;
User Science: Accessibility, Information Architecture, Usability;
Discussion Lists, Online Forums, and Newsgroups; Search Engine Optimization (SEO), Marketing (SEM); Web Content, Writing for the Web; Web Design Business; Tools, and more.

0 Comment
 

web 2.0

Author: prince vio

We are looking for a skilled Web Designer with expert CSS layout skills to assist on development of a next generation web 2.0 application (Social Network).

We need your advanced creative visual layout skills to complement our ideas and visions.

Required Skills:

  • CSS Layout / CSS Styling
  • Web Usability Analysis
  • DHTML/AJAX Methodologies
  • Flash (ActionScript)

0 Comment
 

Css Design

Author: prince vio

A demonstration of what can be accomplished visually through CSS-based design. Select any style sheet from the list to load it into this page.

Download the sample html file and css file

The Road to Enlightenment

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support.

Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser creators.

The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.

So What is This About?

There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.

CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. To date, most examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers have yet to make their mark. This needs to change.

Participation

Graphic artists only please. You are modifying this page, so strong CSS skills are necessary, but the example files are commented well enough that even CSS novices can use them as starting points. Please see the CSS Resource Guide for advanced tutorials and tips on working with CSS.

You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.

Download the sample html file and css file to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your .css file to a web server under your control. Send us a link to the file and if we choose to use it, we will spider the associated images. Final submissions will be placed on our server.

Benefits

Why participate? For recognition, inspiration, and a resource we can all refer to when making the case for CSS-based design. This is sorely needed, even today. More and more major sites are taking the leap, but not enough have. One day this gallery will be a historical curiosity; that day is not today.

Requirements

We would like to see as much CSS1 as possible. CSS2 should be limited to widely-supported elements only. The css Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.

Unfortunately, designing this way highlights the flaws in the various implementations of CSS. Different browsers display differently, even completely valid CSS at times, and this becomes maddening when a fix for one leads to breakage in another. View the Resources page for information on some of the fixes available. Full browser compliance is still sometimes a pipe dream, and we do not expect you to come up with pixel-perfect code across every platform. But do test in as many as you can. If your design doesn’t work in at least IE5+/Win and Mozilla (run by over 90% of the population), chances are we won’t accept it.

We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum; tasteful nudity is acceptable, outright pornography will be rejected.

This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission guidelines), but we ask you release your CSS under a Creative Commons license identical to the one on this site so that others may learn from your work.

Bandwidth graciously donated by DreamFire Studios. Now available: Zen Garden, the book.

0 Comment
 

Variables in CSS

Author: prince vio


Simon has a feature request for CSS3, which is the oft-heard “please let me define variables in my stylesheets” complaint. I’ve thought this more than once (and I’m sure I brought it up somewhere on a mailing list for discussion, too; I thought it was css-discuss, but I can’t find it in the archive). So, I thought, that’d be an interesting little Javascript hack, wouldn’t it; have JS look at the stylesheet rules and fix ones where you’ve used a “user defined variable”. Ah, but no. After some testing, both Mozilla and IE just don’t make invalid rules (or rulesets) available to the DOM at all. Given this stylesheet as the first and only in the document:

h1 { font-size: 1.2em; color: red; }
@media screen {
 pre { color: blue; }
}
@define {
 reddish: #f00;
}
h2 { font-size: 1.1em; color: &reddish; }
h3 { font-size: 1.0em; color: red; }

p>You’d expect document.styleSheets[0].cssRules (or ...rules for IE) to contain 5 entries, right, one for each of the rules? Nuh-uh. Walking through the rules and displaying .cssText for each (in Moz; displaying stylesheet.cssText in IE), the stylesheet looks like this:

h1 { font-size: 1.2em; color: red; }
@media screen {
  pre { color: blue; }
}
h2 { font-size: 1.1em; }
h3 { font-size: 1em; color: red; }

Note how both the entire invalid @define ruleset and the invalid color: &reddish rule have both been removed. No trace of them at all. So the only way I can think of making this work is to use XMLHttpRequest() (or MSXML) to grab external stylesheets, document.getElementsByTagName(’style’) to grab inline stylesheets, and parse them yourself. For something which will only work in very modern browsers (and not anything without XMLHttpRequest or an equivalent) with Javascript turned on, that’s way, way too hard, especially since half the point of CSS is to be cross-browser and not require scripting. Since this isn’t get implemented in CSS, looks like server-side parsing is the way to go. Bah. As Simon points out from the w3c-style discussion, it breaks compatibility in older browsers, although I can’t see why you can’t do:

h1 {
   color: red;
   color: &myred;
}

since the latter declaration is ignored by non-supporting browsers, just like all other CSS stuff.

0 Comment
 

Sponsored Ads

Powered by iPhone Blogger Template | Geek Hacks | Jack Book