Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Complete CSS Guide By John Allsopp and Maxine Sherrin


Complete CSS Guide

By John Allsopp and Maxine Sherrin
The first four parts of this guide, including the all important sections on properties and selectors are available here for free as part of our collection of CSS resources, the House of Style.
What is the Complete CSS Guide?
When Cascading Style Sheets were introduced in late 1996, they represented an exciting new opportunity. They enabled much more sophisticated page design (typography and layout) than web developers had been used to, and they helped manage the complex tasks of developing and maintaining sites, and keeping them up to date. They also greatly simplified the process of making web pages accessible to as many people as possible, regardless of the device they use to read a page, and regardless of any disability they might have.
Since then, much about the web has changed. It's hard to believe now but in late 1996, Netscape Navigator was the browser of choice for the majority of web users. Internet Explorer from Microsoft lagged far behind in terms of features, performance, and number of users. Web browsing was something you did on a PC or Mac. HTML was not a single standard which was well adhered to, but a tangle of competing versions, with proprietary extensions. The dotcom boom was still gaining momentum, and the bust was just a twinkle in the naysayers' eyes.
Now, Internet Explorer dominates the browser scene even more than Netscape did back then. Browsers are built into mobile phones and people browse from television based systems, even games consoles. HTML has become a widely adhered to standard, and lots of those old proprietary extensions have either gone the way of all flesh, or become part of the standard. And slowly, slowly, intransigence, reluctance and skepticism towards CSS is fading away. Cascading style sheets are becoming a solid, well supported and easy to use technology for creating the appearance of web pages.
Many (internet) years ago, we put together a quite straightforward guide to getting up to speed with CSS. In time it's grown to accommodate changes in our knowledge and in CSS itself. This single guide has grown into a whole website, the "House of Style", with articles, tutorials, reference materials and more.

Comprehensive CSS Guide by Marcus Kazmierzak


Comprehensive CSS Guide

by Marcus Kazmierzak
CSS are text files, or special text in a HTML file, which allows you to specify styles, formatting, and positioning of HTML objects.
What do you mean style?
Style is what gives an item its distinctive look or feel. For text it could be what font is used, what color, size, or spacing. It also applies to other HTML objects such as links, images, backgrounds, margins and borders.
How can I benefit by using CSS?
Some of the benefits to using CSS are more consistency, better layout and visual design, plus easier HTML coding. Also you can do things with style sheets that could never be done before.
  • consistency: This would apply for larger sites, and many different developers, which is the environment I am currently working in for the Department of Education. A site-global style sheet could be set up, which all pages would refer to. This sheet could include the look and feel you want for the complete site. Each page would maintain the same attributes throughout the site. The ability to change one item, on one page can change the same attribute on your whole site.
  • easier coding: No more elaborate tables, and complicated HTML. This will also greatly benefits the large multi-contributor web environments. The HTML code using style sheets is much simpler. The code reverts back to what it was in the early simple days. Just using header tags (H1, H2, ...), and paragraph tags with style sheets can produce a rich document, with the help of a SPAN and DIV tag here and there. (but that's getting ahead of myself)
  • rich design and layout: Cascading Style Sheets bring professional layout and design control to HTML documents. Here's a brief listing of what you can do with style sheets that you could only do with an elaborate work around, or not at all.
    (1) exact positioning of elements
    (2) font control (size, color, family)
    (3) white space control, margins, leading
    (4) background control (placement, repeat, ...)

Cascading Style Sheets, level 1


Cascading Style Sheets, level 1

This document specifies level 1 of the Cascading Style Sheet mechanism (CSS1). CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents. The CSS1 language is human readable and writable, and expresses style in common desktop publishing terminology.
One of the fundamental features of CSS is that style sheets cascade; authors can attach a preferred style sheet, while the reader may have a personal style sheet to adjust for human or technological handicaps. The rules for resolving conflicts between different style sheets are defined in this specification.
This Recommendation results from W3C activities in the area of Style Sheets.

Cascading Style Sheets, level 2


Cascading Style Sheets, level 2

This specification defines Cascading Style Sheets, level 2 (CSS2). CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.
CSS2 builds on CSS1 (see [CSS1]) and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets. CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface.

Introduction to CSS3


Introduction to CSS3

The members of the CSS&FP Working Group have decided to modularize the CSS specification. This modularization will help to clarify the relationships between the different parts of the specification, and reduce the size of the complete document. It will also allow us to build specific tests on a per module basis and will help implementors in deciding which portions of CSS to support. Furthermore, the modular nature of the specification will make it possible for individual modules to be updated as needed, thus allowing for a more flexible and timely evolution of the spcification as a whole.
This document lists all the modules to be contained in the future CSS3 specification.
This is an official introduction, issued by the CSS Working Group, which details the modularization of the CSS3 specification and the CSS test suite. This document should be considered to be informative, not normative. See the Style overview pages for more information on W3C's work on style sheets, including CSS.
This is a public W3C Working Draft for review by W3C members and other interested parties. As a draft document, it may be updated, replaced, or obsoleted by other documents at any time. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress."

CSS Pointers Group's CSS Example


CSS Pointers Group's CSS Example

CSS Pointers Group provides various practical use examples of CSS. It includes -
  • Blockquote Usage
  • Border on BODY
  • CSS Columns
  • Deprecated examples
  • CSS Layers example
  • Drop Cap simulation
  • More Drop Cap simulations
  • Table example
  • Embedded CSS example
  • External CSS example
  • CSS Font Rules
  • CSS font-family
  • CSS font-size
  • CSS font-style
  • CSS font-variant
  • CSS font-weight (keyword)
  • CSS font-weight (numeric)
  • Table example (green bar paper)
  • CSS highlighting
  • Imported CSS example
  • Indenting with CSS
  • Inline CSS example
  • Text justification with CSS
  • List options with CSS
  • Pullquotes Examples
  • Shadowed text with CSS
  • Suppress Hypertext underlining
  • CSS table with named colors
  • Border workaround for Netscape
Click to Read More

CSS Frequently Asked Questions By Håkon Wium Lie and Bert Bos


CSS Frequently Asked Questions

By Håkon Wium Lie and Bert Bos
What is CSS?
CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. Every element type as well as every occurance of a specific element within that type can be declared an unique style, e.g. margins, positioning, color or size.
What are Style Sheets?
Style Sheets are templates, very similar to templates in desktop publishing applications, containing a collection of rules declared to various selectors (elements).
What is external Style Sheet? How to link?
External Style Sheet is a template/document/file containing style information which can be linked with any number of HTML documents. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file.
The file is linked with HTML documents via the LINK element inside the HEAD element. Files containing style information must have extension .css, e.g. style.css.

CSS-guide By Tapio Markula


CSS-guide

By Tapio Markula
Hi. You arrived to my CSS-guide. I handle in my CSS-guide almost everything, which relates with CSS. CSS-pages have following page groups in the main menu:
  • General info - general info about the CSS-guide, how topic groups relate with each others, last changes, functionality of pages, used colors, special markups and links; includes also a FAQ-page, where I answer either real question, which I have got or imaginary questions, which somebody might ask for me
  • Index pages - many kinds of index pages, for example alphabetical index and table of contents (the site map of CSS-guide)
  • Guide pages - the most important CSS-pages, where I handle systematic CSS - the actual CSS-guide
  • Extra pages - a group of mixed pages, which somewhat relate with CSS
  • Proposals - some CSS-related proposals
  • Practice - practice tasks and example pages
I hope that you could find from my site what you are looking for and my site could give for you much pleasure!

CSS Quick Tutorials


CSS Quick Tutorials

If you already know what a style sheet is and how to link it to your page, and how to specify selectors, properties and units with CSS, then in some ways the rest is detail. But, there can be a lot of detail to learn. The following is our ongoing collection of tips, tricks and quick tutorials.
The rising tide
When I redesigned the Westciv site (some time ago now - how it flies!) I included a neat little effect on the top left corner logo which I like to call "The Rising Tide". Scroll up and down the page a bit now if you've never actually noticed it before.
(Not seeing anything in particular? I'm guessing you're using Internet Explorer on Windows. Because a vital aspect of CSS is not supported by this browser, the technique doesn't actually work here. However it does no harm either, so in the spirit of progressive enhancement I decided to use it anyway.)
I've always been surprised by the number of people who have written in asking how the effect on the logo works, and now I've finally got round to writing a little tutorial to spell it out. There are two parts to the technique. One is simply the scrolling effect, and the way the westciv logo can always be seen no matter how far you scroll down the page. And then there is the fact that this logo is a live link to the Westciv home page, available right there in the top left of the viewport, no matter how far down the page has been scrolled.

Web Style Sheets CSS tips & tricks


Web Style Sheets CSS tips & tricks

A random collection of CSS examples and some help in using them.
  • Figures & captions
  • A pinned-down menu
  • Indented paragraphs
  • Alternative style sheets
  • A confetti menu
  • Getting rid of colored scrollbars (user style sheets)
  • Even/odd: coloring every other row
  • A tabbed interface
  • A chart comparing font styles
  • Horizontal and vertical centering
  • Boxes with drop shadows
  • Text shadows
  • Rounded boxes and unsharp shadows
Figures & captions
HTML doesn't have an element that allows to insert a figure with a caption. It was once proposed (see HTML3), but never made it into HTML4. Here is one way to simulate such a figure element:

Style Master CSS Tutorial


Style Master CSS Tutorial

This tutorial teaches CSS using both hand-coding and Style Master for Windows. You can also follow it using instructions for Style Master for Mac OS X. By working through the exercises you will learn all about CSS for text styling and page appearance including layout, and create a stylish looking page like this. If you want to learn CSS by hand-coding alone, simply work through all the exercises and code examples and skip all the specially styled Style Master instructions.
Style Master is a CSS editor which includes full support for hand-coding. It's a great way to start learning CSS: hand code when it suits, and fall back on the WYSIWYG editors when you're working with new properties and selectors. This tutorial is included as part of the 30 day demo download.

RichInStyle.com CSS1 tutorial


RichInStyle.com CSS1 tutorial

This is a CSS1 tutorial with a difference - unlike other tutorials, it has the following advantages:
It covers every aspect of the specification, including those that are frequently not touched upon by other tutorials such as cascading, box width calculations, etc.
It presents information in an efficient manner - it is short, so you learn faster.
What are style sheets
Style sheets provide a means for authors to specify how they wish documents written in a markup language such as XML or HTML to be formatted. For example, an author might wish to specify that a document should be green on pink - this could be done using CSS, an established standard for styling documents.
You might ask 'Why do we need style sheets - can't you use HTML; for example, the FONT element or the bgcolor attribute?'

RichInStyle.com CSS2 tutorial


RichInStyle.com CSS2 tutorial

This is one of very few CSS2 tutorials on the net. Not only does it have that advantage, but also has the following advantages:
  • It is easy to understand
  • It covers every aspect of the specification, including those that are frequently not touched upon by other tutorials such as cascading, box width calculations, etc.
  • It presents information in an efficient manner - it is short, so you learn faster
Why style sheets?
Style sheets have the following advantages:
  • They separate content from formatting. This means that instead of marking a quotation as italic, you mark it as a quote and then tell the browser that you want all quotes to be italic. This means that it is a two-second job to change quotes to bold, red, green or normal.
  • They reduce download time by removing formatting information from documents. Thus instead of having to specify that you want Times New Roman a few dozen times in a file for headings, you specify once that you want headings to be Times New Roman. They also are advantageous in that they need only be downloaded once for an entire website.
  • They give far more control over formatting than HTML - such features as background images and colors on all elements - not just the whole document, etc.
  • They ensure a consistent appearance across a site

CSS 2 Tutorial By Miloslav Nic


CSS 2 Tutorial

By Miloslav Nic
In this tutorial CSS 2 stylesheets are applied on XML documents. The text is written in pure HTML and can be therefore displayed in any browser. Each example contains one or more xml sources which can be displayed (and formatted) with CSS when the link View output is clicked on.
You can start from the Example 1, from the Contents, which contains descriptions of individual examples, or from Index which lists all used properties in the stylesheets with links to individual examples.

Cascading Style Sheets


Cascading Style Sheets

Style Sheets Now!
Change the appearance of hundreds of Web pages by changing just one file... Influence presentation without losing visitors... All with the power and flexibility of Web style sheets.
Quick Tutorial
A basic introduction to Cascading Style Sheets.
CSS Structure and Rules
An introduction to the various kinds of selectors, pseudo-classes, pseudo-elements, and cascading order.
CSS Properties
Descriptions of the various properties available in Cascading Style Sheets, level 1.
Linking Style Sheets to HTML
Various methods of incorporating style sheets into an HTML document.
Style Sheet Dependence
How to misuse style sheets and make your pages inaccessible.
CSSCheck
Check the syntax and style of your Cascading Style Sheets with this CSS lint.
CSS References
Links to CSS specifications and other documentation.

Introduction to CSS shorthand properties


Introduction to CSS shorthand properties

Shorthand properties?
One of the many great possibilities in CSS is the use of shorthand properties. It lets you specify several properties by using only one. If you have started learning about CSS and started implementing it on your web pages, you'll immediately see the benefit of using shorthand CSS properties. It makes it even easier for you to apply style to your markup, and it will make your CSS code shorter.
For you to have any value of this article you need to know the normal CSS properties and their values, they will be used here, but not extensively explained.
Browser support as indicated for every shorthand property is vague and only gives a general idea of the browser compatibility. For more detailed information about the nature in which a property is buggy or partially supported, check the link to Webreview and Stylemaster at the end of this article.
Now let us have a quick look at a sample CSS rule to refresh our memory on the different parts of CSS and what they are called:

CSS Attributes: Index -MSDN Library


CSS Attributes: Index -MSDN Library

This index lists all the supported Cascading Style Sheets (CSS) attributes by category, and indicates in which version of Microsoft Internet Explorer they were first available.
Version Keys
(5) Attribute available as of Internet Explorer 5
(5.5) Attribute available as of Internet Explorer 5.5
(6) Attribute available as of Internet Explorer 6
(7) Attribute available as of Windows Internet Explorer 7
Note When an attribute has multiple version keys, later version keys indicate significant updates to the attribute.
Attributes that have been proposed to the World Wide Web Consortium (W3C) but are not part of any standard are marked with "." Microsoftextensions to the CSS standard are indicated with "."

40 CSS Tutorial Reference


40 CSS Tutorial Reference

This tutorials and guides or ebook are for understanding and using Cascading Style Sheets (CSS). It also shows several method for implementing CSS. This reference make you clear how to code CSS and how to change different formats using CSS.
This all are free Cascading Style Sheet tutorials (CSS) tutorials or ebook from industry experts that feature extensive information on CSS basics, tags, programming, and scripts.

Style Sheets


Style Sheets

Style sheets represent a major breakthrough for Web page designers, expanding their ability to improve the appearance of their pages. In the scientific environments in which the Web was conceived, people are more concerned with the content of their documents than the presentation. As people from wider walks of life discovered the Web, the limitations of HTML became a source of continuing frustration and authors were forced to sidestep HTML's stylistic limitations. While the intentions have been good -- to improve the presentation of Web pages -- the techniques for doing so have had unfortunate side effects. These techniques work for some of the people, some of the time, but not for all of the people, all of the time. They include:
  • Using proprietary HTML extensions
  • Converting text into images
  • Using images for white space control
  • Use of tables for page layout
  • Writing a program instead of using HTML
These techniques considerably increase the complexity of Web pages, offer limited flexibility, suffer from interoperability problems, and create hardships for people with disabilities.

Tableless layout HOWTO


Tableless layout HOWTO

It has been advocated many times that tables shouldn't be use in HTML for layout purposes. This page shows one way to create a 3 columns layout using CSS only.
HTML is a structural language, which means it is - or should be - used to add structure into a text through tags. The table tag should then only be used to format data into a table to relate columns with rows.
But since the apparition of tables in HTML, it has been very often used for layout purpose, usually split a web page into columns. Besides the fact that it breaks the meaning of HTML, it doesn't help either in various cases that we could summarize by the difficulty to parse or render a table in some context (disabilities, view port restrictions, ...).
This document describes one way to create a 3 columns layout and links to other layout techniques.