CASCADING STYLE SHEETS TUTORIAL

Written by jon on 9:21 AM

In this CSS tutorial I will not be able to show you everything there is about CSS, but you will learn how to create nice looking CSS styled web pages.

After completing this tutorial, you should have enough information to explore CSS and web design even further.

  • You can download the CSS and HTML files we build in this tutorial: CSS files
  • You can check out what the page should look like here: CSS example page

THINGS TO REMEMBER ABOUT CSS:

Remember that CSS code is simply written instructions that tells Web browsers (like FireFox and Internet Explorer) how to display things on a page. For example:

  1. make text bold.
  2. position things a page.
  3. set the font style for a page or paragraph etc.

The sister language to CSS is HTML: code that tells the Web browser WHAT is actually in the page.

... I know you knew that already, I just wanted to remind you!

CSS REDUCES THE NUMBER OF TAGS USED

Because of the power of CSS, we will be able to reduce the number of HTML tags we use in a page big time, all the while still being able to layout great looking pages using only 6 types (for lack of better words) of HTML tags.

The tags we will use to layout the content:

1. The Heading tags which range from '' to '', are going to be used to mark/tag headings in our pages. So the most important heading will be wrapped in a

tag and the least important in a

tag.

An example of a heading:

CSS Template Layout

This tells the browsers and the search engines too, that this page is primarily about: 'CSS Template Layout'

All browsers have a default size (for each tag) as to how it renders text when placed between these tags. Many of these defaults can be unusable (especially

) because they come out too big. But never fear, CSS is here. We will use CSS to make the text sizes more to our liking.

2.

The Paragraph tag is used to mark parts of the pages as being 'paragraphs', simple enough. Paragraph tags are what they call a 'block element'; that means that it acts like a block where a space is automatically inserted before and after each

tag pair. You see it work in the examples coming up.

3.

No Comment comment | Posted in » ,  

Comparison of tokenization in CSS2 and CSS1

Written by jon on 11:39 AM

There are some differences in the syntax specified in the CSS1 recommendation ([CSS1]), and the one above. Most of these are due to new tokens in CSS2 that didn't exist in CSS1. Others are because the grammar has been rewritten to be more readable. However, there are some incompatible changes, that were felt to be errors in the CSS1 syntax. They are explained below.

  • CSS1 style sheets could only be in 1-byte-per-character encodings, such as ASCII and ISO-8859-1. CSS2 has no such limitation. In practice, there was little difficulty in extrapolating the CSS1 tokenizer, and some UAs have accepted 2-byte encodings.
  • CSS1 only allowed four hex-digits after the backslash (\) to refer to Unicode characters, CSS2 allows six. Furthermore, CSS2 allows a whitespace character to delimit the escape sequence. E.g., according to CSS1, the string "\abcdef" has 3 letters (\abcd, e, and f), according to CSS2 it has only one (\abcdef).
  • The tab character (ASCII 9) was not allowed in strings. However, since strings in CSS1 were only used for font names and for URLs, the only way this can lead to incompatibility between CSS1 and CSS2 is if a style sheet contains a font family that has a tab in its name.
  • Similarly, newlines (escaped with a backslash) were not allowed in strings in CSS1.
  • CSS2 parses a number immediately followed by an identifier as a DIMEN token (i.e., an unknown unit), CSS1 parsed it as a number and an identifier. That means that in CSS1, the declaration 'font: 10pt/1.2serif' was correct, as was 'font: 10pt/12pt serif'; in CSS2, a space is required before "serif". (Some UAs accepted the first example, but not the second.)
  • In CSS1, a class name could start with a digit (".55ft"), unless it was a dimension (".55in"). In CSS2, such classes are parsed as unknown dimensions (to allow for future additions of new units). To make ".55ft" a valid class, CSS2 requires the first digit to be escaped (".\55ft")
No Comment comment | Posted in » , ,  

Spacing, alignment, and positioning

Written by jon on 11:29 AM

CSS2 allows authors to control the visual placement of content on the page through text indentation, margins, floats, and absolute and relative positioning. By using CSS properties to achieve visual effects, authors can write simpler HTML and eliminate images and non-breaking spaces ( ) used for positioning.

The following properties give control over spacing, alignment, and positioning:

  • 'text-indent', 'text-align', 'word-spacing', 'font-stretch'. Each of these properties allows users to control spacing without adding additional spaces. For example instead of writing "H E L L O" (which users generally recognize as the word "hello" but users of speech recognition tools would hear as individual letters), authors may create the same visual effect with the 'word-spacing' property applied to "HELLO".
  • 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'. With these properties, authors can create space on four sides of an element's content instead of adding non-breaking spaces ( ), which are non-standard mark-up, to create space around an element.
  • 'float', 'position', 'top', 'right', 'bottom', 'left'. With these properties, the user can control the visual position of almost any element in a manner independent of where the element appears in the document. Authors should always design documents that make sense without style sheets (i.e., the document should be written in a "logical" order) and then apply style sheets to achieve visual effects. The positioning properties may be used to create margin notes (which may be automatically numbered), side bars, frame-like effects, simple headers and footers, and more.
  • The 'empty-cells' property allows users to leave table cells empty and still give them proper borders on the screen or on paper. A data cell that is meant to be empty should not be filled with white space or a non-breaking space just to achieve a visual effect.
No Comment comment | Posted in » ,  

How Style Sheets Benefit Accessibility

Written by jon on 11:26 AM

CSS benefits accessibility primarily by separating document structure from presentation. Style sheets were designed to allow precise control - outside of markup - of character spacing, text alignment, object position on the page, audio and speech output, font characteristics, etc. By separating style from markup, authors can simplify and clean up the HTML in their documents, making the documents more accessible at the same time.

CSS allows precise control over spacing, alignment and positioning. Authors can thereby avoid "tag misuse" - the practice of misusing a structural element for its expected stylistic effects. For example, while the BLOCKQUOTE and TABLE elements in HTML are meant to mark up quotations and tabular data, they are frequently used to create visual effects instead such as indentation and alignment. When specialized browsing software such as a speech synthesizer encounters elements that are misused in this way, the results can be unintelligible to the user.

In addition to preventing element misuse, style sheets can help reduce image misuse. For instance, authors sometimes use 1-pixel invisible images to position content. This not only bloats documents, making them slow to download, but can also confuse software agents looking for alternative text (the "alt" attribute) for these images. CSS positioning properties mean that invisible images are no longer required to control positioning.

CSS provides precise control over font size, color, and style. Some authors have used images to represent text in a particular font when they are uncertain of the availability of the font on the client's machine. Text in images is not accessible to specialized software such as screen readers, nor can it be cataloged by search robots. To remedy this situation, the powerful WebFonts of CSS allows users much greater control of client-side font information. With WebFonts, authors can rely on fallback mechanisms on the client when the author's preferred fonts are not available. Fonts can be substituted with more accuracy, synthesized by client software, and even downloaded from the Web, all according to author specification.

CSS allows users to override author styles. This is very important to users who cannot perceive a page with the author's chosen fonts and color. CSS allows users to view documents with their own preferred fonts, colors, etc. by specifying them in a user style sheet.

CSS provides support for automatically generated numbers, markers, and other content that can help users stay oriented within a document. Long lists, tables, or documents are easier to navigate when numbers or other contextual clues are provided in an accessible manner.

CSS supports aural style sheets, which specify how a document will sound when rendered as speech. Aural style sheets (or "ACSS" for short) allow authors and users to specify the volume of spoken content, background sounds, spatial properties for sound, and a host of other properties that can add effects to synthesized speech analogous to those achieved with styled fonts for visual output.

CSS provides more precise control over the display of alternative content than HTML alone. CSS2 selectors give access to attribute values, often used to provide alternative content. In CSS2, attribute values may be rendered in a document along with an element's primary content.

CSS Implementations

At the publication of this NOTE, widely deployed browsers do not implement CSS consistently. However, the latest generation of browsers from a number of vendors demonstrates solid implementations of most of CSS1 and much of CSS2, and implementations continue to improve.

Obviously, the benefits of the features described in this document will not be realized without proper implementation of CSS1 and CSS2. Part of designing an accessible document with CSS involves ensuring that the document remains accessible when style sheets are turned off or not supported.

Until most browsers support CSS consistently, content developers may still create accessible documents that mix supported features of CSS with some presentation features of HTML. Documents that use HTML presentation features instead of CSS must transform gracefully. For example, tables used for layout must make sense when rendered serially.

No Comment comment | Posted in » ,  

Make Printable Page using CSS Print Properties

Written by jon on 10:31 AM

CSS has done it again, with a single file of CSS a complicated page layout turns to a simple, clear, and friendly for printing purposes, but sadly the properties are not fully supported by recent browsers. Some days ago, I created a print version page for a client, and I would share the experiences in this post.

Include the Print Version

You can make a css file for the print-version style, such print.css and call it to your page with a single line:

href="print.css" media="print" />

If you are lazy enough to create a new file, you can write directly into the same css file as the layout managed. @media make you able to do this:

@media print {

/*Your CSS for Print Goes Here*/

body {

       margin: 1cm; /*Set the margin*/

       background: none;

      }

#banner {

       display: none;

      }

/*End of CSS for Print*/

}

If you don’t have authorize to the HTML files, but still wants a separated css file for the print, you can use @import rule in to existing css file:

@import url(print.css) print;

@media and @import supported in most recent browsers.

Get Rid the Unwanted and Clearer Contents

Let‘s say, you don’t want all banners, graphics, menus, and header appears on the printed version:

 .banners, #graphics, #menus, #header {

       display: none;

       }

Don’t display all background images in all HTML tags:

 * {

       background: none;

       }

Make the content fill all the paper:

 #container, #content {

       width: 100%;

       }

The Pagebreaks

CSS provides properties to arrange breaks on documents to make it as separate pages in print mode. You can clearly recognize the function by properties’ name.

page-break-before:
Value: auto | always | avoid | left | right | inherit
Initial: auto
Applies to: block-level elements
Inherited: no
Media: visual, paged

break-before.gif
page-break-before

page-break-after:
Value: auto | always | avoid | left | right | inherit
Initial: auto
Applies to: block-level elements
Inherited: no
Media: visual, paged

break-after.gif
page-break-after

page-break-inside:
Value: avoid | auto | inherit
Initial: auto
Applies to: block-level elements
Inherited: yes
Media: visual, paged

break-inside.gif
page-break-inside

Those values means:
Auto: Neither force nor forbid a page break before/after/inside the element.
Always: Always break before/after/inside the element.
Avoid: Avoid a page break before the element.
Left: (For rendering to left and right pages.) Force one or two page breaks before the element so that the next page is formatted as a left page.
Right: (For rendering to left and right pages.) Force one or two page breaks before the element so that the next page is formatted as a right page.
By default, auto will be used if no value specified.

No Comment comment | Posted in » ,  

Rethinking CSS Image Replacement

Written by jon on 10:31 AM

When I say CSS image replacement, I mean taking a page element that isn’t normally an image and turning it into an image. This is a very common trick and popular because of it’s semantic meaningfulness and SEO benefits. A common place to use this is with a header tag.

The OLD Way


  CSS-Tricks
h1.main-logo {
 width: 350px; height: 75px;
 background: url(images/header-image.jpg);
 text-indent: -9999px;
}

PROBLEM:
If you turn CSS off, this will just degrade into text. Not a bad thing, but just because someone has their CSS turned off doesn’t necessarily mean they want their images turned off too.

The NEW Way


  
      CSS-Tricks

WHY THIS IS BETTER:
With CSS turned off you can still display an image. With CSS and images turned off, you will get the ALT text from the image. You can even use a different image inside than you used for your CSS image, if there is a good contextual reason to do so.

REMAINING PROBLEMS:
Neither of these techniques are perfect yet. While the latter solves one piece of the puzzle, there is still one missing piece. That is CSS ON, images OFF. In this scenario you will get blank space instead of either text or an image. Not great. The other issue is turning these elements into links. You can wrap the header tag in an anchor element, but wrapping a block element in an inline element is bad form. Make sure you change your anchor link to block level if you do this. The other option is a javascript onClick event.

NOTE:
I’m sure this has been thought of and used by people before, so “old” and “new” are kind of subjective here.

[EXAMPLE PAGE]

No Comment comment | Posted in »  
Subscribe to: Posts (Atom)

RECENT COMMENTS

SUBSCRIBE TO CSS3 EXAMPLES
 Subscribe to css3 Examples via RSS
Or, subscribe via email:
Find CSS3 Examples Entries :