OTHER PROPERTIES

NCD Style Sheet Guide v6.0

Sponsor's ADs:

+ Generated Content

Generate Text Content
TAG:before {content: # }
TAG:after {content: # }     #="text string"

The "content" property is used with :before and :after pseudo-elements.

<HEAD>
<STYLE TYPE="text/css">
 p:before {content: "Country Name: ";
           color:red}
</STYLE>
</HEAD>
<BODY>
  <p>Japan</p>
  <p>Belgium</p>
</BODY>

Japan

Belgium


Generate External Resource
TAG:before {content: url(#) }
TAG:after {content: url(#) }     #=URL

<HEAD>
<STYLE TYPE="text/css">
 p:before {content: url("maru.gif")}
</STYLE>
</HEAD>
<BODY>
  <p>Today is fine.</p>
</BODY>

Today is fine.


Generate Quotation Marks
TAG:before {content: open-quote }
TAG:after {content: close-quote } 

<HEAD>
<STYLE TYPE="text/css">
 p:before {content:open-quote; color:red}
 p:after  {content:close-quote; color:red}
</STYLE>
</HEAD>
<BODY>
  <p>Today is fine.</p>
</BODY>

Today is fine.


Specify the Type of Quotation Marks
{quotes: '#' '#' "$" "$"}
    #=first level quotation marks
    $=second level quotation marks

Netscape 6 doesn't support second level quotation marks.

<HEAD>
<STYLE TYPE="text/css">
 q {quotes:'[' ']' "{" "}"}
 q:before {content:open-quote; color:red}
 q:after  {content:close-quote; color:red}
</STYLE>
</HEAD>
<BODY>
  <q>This text is quoted from 
  <q>the book</q>.</q>
</BODY>
 This text is quoted from the book.


+ Page Breaks for Printing

{page-break-before: # }     #=auto, always


<p>HELLO.</p>
<p style="page-break-before:always">
BYE.
</p>
<p>HELLO.</p>
Sample Page | Printed Sample (PDF) 		Page View

HELLO.

BYE.

HELLO.

 Print Page

HELLO.

BYE.

HELLO.




{page-break-after: # }     #=auto, always


<p>HELLO.</p>
<p style="page-break-after:always">
BYE.
</p>
<p>HELLO.</p>
Sample Page | Printed Sample (PDF) 		Page View

HELLO.

BYE.

HELLO.

 Print Page

HELLO.

BYE.

HELLO.




+ Cursor

{cursor: # }
    #=auto, crosshair, default, hand, move,
        e-resize, ne-resize, nw-resize, n-resize,
        se-resize, sw-resize, s-resize, w-resize,
        text, wait, help 

<span style="cursor:#">
   <img src=heno03.gif> HELLO
</span>


cursor:auto

 HELLO

cursor:crosshair

 HELLO

cursor:default

 HELLO

cursor:hand

 HELLO

cursor:move

 HELLO

cursor:e-resize

 HELLO

cursor:ne-resize

 HELLO

cursor:nw-resize

 HELLO

cursor:n-resize

 HELLO

cursor:se-resize

 HELLO

cursor:sw-resize

 HELLO

cursor:s-resize

 HELLO

cursor:w-resize

 HELLO

cursor:text

 HELLO

cursor:wait

 HELLO

cursor:help

 HELLO

cursor:all-scroll

 HELLO

cursor:col-resize

 HELLO

cursor:row-resize

 HELLO

cursor:progress

 HELLO

cursor:not-allowed

 HELLO

cursor:no-drop

 HELLO

cursor:vertical-text

 HELLO

cursor:url('#')
  #=Cursor Image
  (.cur or .ani)

 HELLO


+ Scroll Bar Color

{scrollbar-base-color: # }
{scrollbar-arrow-color: # }
{scrollbar-face-color: # }
{scrollbar-highlight-color: # }
{scrollbar-3dlight-color: # }
{scrollbar-darkshadow-color: # }
{scrollbar-shadow-color: # }      #=color (#rrggbb or name)

scrollbar-base-color: red
Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather. 
scrollbar-base-color: skyblue;
scrollbar-arrow-color: darkblue;
scrollbar-face-color: white;
scrollbar-highlight-color:skyblue;
scrollbar-3dlight-color:blue;
scrollbar-darkshadow-color: blue;
scrollbar-shadow-color:skyblue
Long before the advent of TV weather forecasters, people used tabletop glasses like a spherical flask to predict upcoming changes in weather.

+ Zoom

{zoom: # }
    #=normal, number, %

<DIV STYLE="zoom:100%;
 border:solid 2px skyblue">
Today is fine.
<img src="heno02.gif">
</DIV>
Today is fine. 
<DIV STYLE="zoom:200%;
 border:solid 2px skyblue">
Today is fine.
<img src="heno02.gif">
</DIV>
Today is fine.


Style Sheet Guide | HTML Design Guide
Basic | Selector | Cascading
Font | Text | List | Color & Background | Box | Table | Position & Format | Other|
Selector List | Property List

BACK TO NCD HOME
Network Communication Design - /
 Copyright & Publishing 1994-2008 Network Communication Design