![[Top]](../Kuvat/buttons/TopImage.gif "To the top of this page")
I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.
| ||||||||||||||||||||||||||||
 | Table of topic groups > Front page of CSS-guide > Practice > Model, test and example pages |
|---|
I list in this page referred model, test and example pages in my CSS-tutorial. They are related HTML, XML or CSS encoding. Some of them are very simple, but some are quite complex. I handle them in the same order as they are in my CSS-site, but it is a little bit inconsistent, because the numbering of the model pages isn't fully consistent. In addition I have put comparison pages and screen capture images. These can be use in practising.
![[S]](../Kuvat/buttons/S.gif)
![[Pw]](../Kuvat/buttons/Pw.gif)
- text
without any structure. It does have also a comparison page:
- text
with a simple structure.-
organized text. - a simple paragraph. - a document tree. - a centered paragraph. - an example of linked CSS. - comparison between a page
without style sheets and a the page 2,
which use style sheets. - an
example of simple XHTML-document. - a model of the usage of the
![[Prev]](../Kuvat/buttons/leftArrow.gif "The previous page or section")
![[Front p.]](../Kuvat/buttons/homeArrow.gif)
Front page
What's new?![[Alph.]](../Kuvat/buttons/lettersEn.gif)
Glossary![[Cont.]](../Kuvat/buttons/contents.gif)
Contents (TOC)
All topic groups![[Fback]](../Kuvat/buttons/Email.gif "Send me feedback!")
![[Print]](../Kuvat/buttons/Print.gif "Print this page!")
![[Fi]](../Kuvat/buttons/Fi.gif "The Finnish version of the page")
![[Copyr.]](../Kuvat/buttons/copyright.gif "Copyrights")
style attribute. Concerns also the page 11, How to put CSS into Web pages
(position:absolute). - a model
of the usage of the style attribute and external
style sheets. - a model
of the usage of the STYLE element and external style
sheets. - an example of an incorrect
set @import at-rule and concerning the page 4, What are selectors, classes and id-attributes examples of
invalid named selectors. It has also a parallel model page ./Models/Model6NoDTD.html. -
demonstrations of the differences of various browsers. - a model of using shorthand
properties (concerns also the page 8, How to set CSS for backgrounds and borders). - a model page of the usage of
text colors. - another
model page of the usage of text colors. - a model
page of the usage of relative font-size values. - a
comparison page of xx-small - xx-large
font sizes. - an example of the usage of
universal selectors. - a model
of the usage of an element type selector (H2). -
grouping examples. It has also a model of a table resembling
list, which concerns the page 9, How to set CSS for list elements. - a model
of the usage of class selectors. - a model
of the usage of attribute selectors. - a model
of the usage of id-selectors. - a test to attribute and
id-selectors. - a model
of the usage of paragraph related pseudo-elements. - a model
of contextual selectors. - another
model of contextual selectors. Concerns also the pages 9, What is the processing order of CSS. - a selector test with list
elements. Concerns also the pages 9, What is the processing order of CSS. - a model
of the usage of the !important rule. - models
of defining the FONT element. - a model
of basic font definitions to the BODY element. - a model
of defining the H2 element. - a model
of defining shorthand properties of font property
(concerns also the page 8, How to set CSS for backgrounds and borders). - in this place was intention to have a test concerning supporting the @font-face at-rule but I don't have a suitable font file at this moment. That's why there is not really a test. -
demonstrates the usage of link and dynamic pseudo-classes. -
tests the property display with image links. Concerns also the page 11, How to put CSS into Web pages. - a model
of border properties to a BLOCKQUOTE element. - demonstrates problems with
borders to inline level elements. - another
page, which has an example, which demonstrates problems with
borders to inline level elements. - a
model of using box dimension properties with following screen
captures:
![[S]](../Tests/mozilladim.gif)
- this
is ok.![[S]](../Tests/operadim.gif)
.![[S]](../Tests/iedim.gif)
.margin:33%; width:66%):
![[S]](../Tests/modelOP.gif)
- ok (also Netscape 6.x
renders correctly).![[S]](../Tests/modelIE.gif)
. - demonstrates the
previous problem. Concerns also the page 11, How to put CSS into Web pages
(position:fixed). - test
supporting of background-attachment:fixed and
position:fixed; I have taken three screen captures
of the page:
![[S]](../Tests/pict0.jpg)
- this is ok.![[S]](../Tests/pict1.jpg)
. A small background color problem, which is fixed in Mozilla 0.9.![[S]](../Tests/pict2.jpg)
.![[S]](../Tests/GirlIE6.jpg)
. - an
example of form elements and a screen capture ../Tests/model000.gif![[S]](../Tests/model000.gif)
from Mozilla 0.7. In this page is used dynamic
pseudo-classes, when this model concerns also the page 7, How to set CSS for anchors and links. - a model
of the usage of the list-style-image property. - an
example of using small faces as list markers. - test indents, when margin:0, but the padding is
undefined. I took two screen captures of it:
![[S]](../Tests/model001.gif)
.![[S]](../Tests/model002.gif)
- also Opera shows
approximately at the same way. - tests
generated contents, quotes and some values of the display property. This model concerns also the page 11, How to put CSS into Web pages. ../Tests/Quotes.html is an additional test page for quotes. -
demonstrations of border-collapse,
border, background and some other
properties in tables. -
another model, which demonstrations of
border-collapse, border and
background properties in tables. -
demonstrations of caption-side, border,
background and some other properties in tables. -
an example of a heavy table, which use the
table-layout:fixed table layout model. - a model
of using the float property. - another
model of using the float property. - an example page of using the float property. If you have Opera 4.x+, it gives also in the full screen mode an example of a "slide show" (change "slides" with PageUp/PageDown keys). - a model
of the usage of the position:absolute. - a model
of the usage of the display property as an
alternative to the visibility property. In this page is used
dynamic pseudo-classes, when this model concerns also the page 7, How to set CSS for anchors and links. - a model
of the usage of the visibility property as an
alternative to the display property. In this page is used
dynamic pseudo-classes, when this model concerns also the page 7, How to set CSS for anchors and links. - a
model of the usage of the display:none to hide
elements. - a model
of the usage of the position:fixed.-
another model of the usage of the
position:fixed. - model of
the usage position:fixed and
margin:auto. I have screen captures of it:
![[S]](../Tests/positionfixed.gif)
-
ok.![[S]](../Tests/offset.gif)
- the page is in
a lowered window, which cause horizontal offset. Fixed in Mozilla 0.9.![[S]](../Tests/Macposition.gif)
-
margin:auto doesn't work in this situation.![[S]](../Tests/operared.gif)
- a comparison
screen capture image of this site, if I would have defined
margin:auto and max-width properties to
the HTML element (Opera 5.01). - an example of XML + CSS,
which tests especially the display-property. It has
following comparison pages and a screen capture:
- a HTML version. - a XML + XSL(T) + CSS
version.-
a XSL-fo version. - a screen capture from the
XML version (Opera 4.x). - another
XML-example, which use the display-property. - an XML example page, which most
elements inside the head element are visible. It has
some variations:
- the referred CSS-file in the
xml-stylesheet declaration doesn't exist. - the file has no xml-stylesheet
declaration. - all elements inside the element
head are visible.![[S]](../Tests/Mozilla09Menu.gif)
- shows some positioning errors in some Mozilla 0.9 based builds. - a model of incorrect hiding of some elements. This model shows also other problems. Into this page has been referred also extra pages K What CSS-implementation errors are in Opera browsers and Q How to design dynamic menus. It has now two comparison pages: - this page shows the correct horizontal rendering in Opera 6.04 and Mozilla 1.1a browsers. - this page shows the incorrect horizontal rendering in Opera 6.04 and Mozilla 1.1a browsers... The CSS for dynamic menus is in the top of the file. It fits well for Opera 5.x+, MS IE 5.0+ and Netscape 6.x/ corresponding Mozilla browsers but not optimal for MS IE 4.0 for Windows.. CSS for Netscape 4.x browsers. (used in the Finnish CSS-pages; I have made into this version some new functions). (used in the English CSS-pages) (used in the Finnish CSS-pages; this version has shorter function calls (used in the English CSS-pages) (English) (Finnish) - a test case in order to demonstrate some problems especially in MS IE 5.x for Mac browsers. - a model, which has two background boxes for the whole menu. - a model, where each sub-menus have own "shadow boxes". - a model, where each sub-menus have own "shadow boxes". The lower boxes have bacground colors. - a test WML-page with a style sheet for Opera 4.x+. It has also an alternative page without a style sheet:
- a model page, where is used almost all CSS, which I have used in examples.![[Top]](../Kuvat/buttons/Top.gif "To the top of this page")
Tapio Markula 1999-2003, Salo, Finland 
![[Get Opera!]](../Kuvat/banner_itslove.gif "Get Opera. Opera 6.x prints best all my pages!"){kind=small}
![[Get Mozilla!]](../Kuvat/Mozilla.gif "Get Mozilla. It renders best most of my pages!"){kind=small}