Academic Tutorials

English | French | Portugese | German | Italian
Home Advertise Payments Recommended Websites Interview Questions FAQs
News Source Codes E-Books Downloads Jobs Web Hosting

CSS 2.0
CSS 2.0 Introduction
CSS 2.0 Attaching Style
CSS 2.0 Applying Style
CSS 2.0 Key Concepts
CSS 2.0 Color Contents
CSS 2.0 Fonts Contents
CSS 2.0 Text
CSS 2.0 Lists
CSS 2.0 the box model
CSS 2.0 Advanced concepts
CSS 2.0 Positioning
CSS 2.0 Boxes
CSS 2.0 Generated content
CSS 2.0 Dynamic effects
CSS 2.0 Tables
CSS 2.0 Paged media
CSS 2.0 Font Face
CSS 2.0 Aural Style Sheets
CSS 2.0 Language styles

HTML Tutorials
HTML Tutorial
XHTML Tutorial
CSS Tutorial
TCP/IP Tutorial
CSS 1.0
CSS 2.0
XML Tutorials
XML Tutorial
XSL Tutorial
XSLT Tutorial
DTD Tutorial
Schema Tutorial
XForms Tutorial
XSL-FO Tutorial
XML DOM Tutorial
XLink Tutorial
XQuery Tutorial
XPath Tutorial
XPointer Tutorial
RDF Tutorial
SOAP Tutorial
WSDL Tutorial
RSS Tutorial
WAP Tutorial
Web Services Tutorial
Browser Scripting
JavaScript Tutorial
VBScript Tutorial
DHTML Tutorial
HTML DOM Tutorial
WMLScript Tutorial
E4X Tutorial
Server Scripting
ASP Tutorial
PERL Tutorial
SQL Tutorial
ADO Tutorial
Apple Script
PL/SQL Tutorial
SQL Server
.NET (dotnet)
.Net Mobile
C# : C Sharp
SVG Tutorial
Flash Tutorial
Media Tutorial
SMIL Tutorial
Photoshop Tutorial
Gimp Tutorial
Gnuplot Programming
GIF Animation Tutorial
Scientific Visualization Tutorial
Web Building
Web Browsers
Web Hosting
W3C Tutorial
Web Building
Web Quality
Web Semantic
Web Careers
Weblogic Tutorial
Web Site Hosting
Domain Name
Java Tutorials
Java Tutorial
JSP Tutorial
Servlets Tutorial
Struts Tutorial
EJB Tutorial
JMS Tutorial
JMX Tutorial
Programming Langauges
C Tutorial
C++ Tutorial
Visual Basic Tutorial
Data Structures Using C
Assembly Language
Forth Programming
Lisp Programming
Data Warehousing
CGI Programming
Emacs Tutorial
Soft Skills
Communication Skills
Time Management
Project Management
Team Work
Leadership Skills
Corporate Communication
Negotiation Skills
Database Tutorials
Operating System
Software Testing
SAP Module
Business Warehousing
SAP Basis
Material Management
Sales & Distribution
Human Resource
Customer Relationship Management
Production and Planning
Networking Programming
Corba Tutorial
Networking Tutorial
Microsoft Office
Microsoft Word
Microsoft Outlook
Microsoft PowerPoint
Microsoft Publisher
Microsoft Excel
Microsoft Front Page
Microsoft InfoPath
Microsoft Access
Financial Accounting
Managerial Accounting
Network Sites

CSS 2.0 Properties - Dynamic effects

Previoushome Next

CSS2 Properties - Dynamic effects



Outlines are very similar to borders, except they do not influence box model calculations (and thus cannot cause reflow) and therefore are ideal for scripting or other dynamic purposes.

Outlines are drawn over a box just outside the border edge so that the outline is always on top and doesn't influence box positioning. They may overlap with other elements.

If an element is broken across several lines, the outline is the minimum outline that encloses all the element's boxes. For example:

|Some text on one line.+--+        
|And some more on another.|

In contrast to borders, the outline is not open at inline box's end or start, but is always fully connected, and thus outlines may be non-rectangular.

Outlines are especially useful combined with the :focus and :active pseudo-classes.

Outlines are not inherited and apply to all elements.


This takes any valid color or invert (initial value - invert colors of pixels to ensure that the outline is visible). For example, outline-color: red.

Invert means simply reverse color values - if a pixel was #000, it would be inverted to #fff. Equally, if a pixel was #369, it would be inverted to #C96 (since a red component of 33 plus CC = FF, the maximum value of red; equally 99 + 66 = FF).


This takes any valid value for border-width (a length, thin, thick or medium), and is initially medium. Outline widths are the same on all sides. For example, outline-width: thick.


It takes any valid value for border-style except hidden (i.e., double, solid, groove, ridge, inset, outset, dotted, dashed, none), and is initially set to none. For example, outline-style: solid.


This shorthand allows one or more of the above to specified in that order. For example, A:focus {outline: thin red dashed}.

Note that, as with borders, outlines are not drawn unless the outline style is set to a value other than normal. For example, outline-style: medium; outline: thin red has no effect because shorthands set the unspecified properties to their initial value , and therefore outline: thin red means outline: thin none red.


This specifies the cursor that should be associated with the element.

You can specify a custom cursor, or a generic cursor. Custom cursors are specified by cursor: url(filename) (e.g., cursor: url(arrow.csr). However, you currently won't find any browser that supports this. When they do, because different platforms support different cursor formats (for example, Windows has native support for cursors in '.cur' and '.ani' formats), you can specify multiple cursors. This is done by separating each cursor by a comma. Thus to say that you should use arrow.ani (animated cursor) if possible, but failing that arrow.cur (static cursor), you should specify cursor: url(arrow.ani), url(arrow.cur). Finally you should specify a generic cursor. To specify a generic cursor you use one of the following values:

  1. auto (initial value - indicating the value that the browser thinks is appropriate for that element)
  2. crosshair
  3. default (usually an arrow)
  4. pointer (cursor indicates that the item is a link)
  5. move (cursor for moving an object)
  6. text (indicates that text can be selected)
  7. wait (usually an hourglass)
  8. help (usually a ?)
  9. e-resize (cursor for resizing from the box's east corner),
  10. ne-resize
  11. n-resize
  12. s-resize
  13. se-resize
  14. w-resize
  15. sw-resize.

For example, P {cursor: url(cursor1.cur), url(cursor2.csr), url(cursor3.ani), pointer}.

Or simply P {cursor: pointer}.


This can be set to visible (render the element normally) or hidden (transparent).

Its use is to hide content that is later shown by scripts - it avoids the need for reflow. For example, if a script sets an element to be visible, all pixels that were previously transparent are colored according to the element's outline-color, color, background-color and border-color declarations.

An invisible element takes up the normal amount of space, but is invisible. E.g., P {visibility: hidden}.

Visibility is inherited and is initially visible. As a result, you can specify visibility: visible to override an inherited visibiltiy: hidden. This contrasts with display: none, which cannot be overridden by descendant elements.

Block effects


Since elements may overlap, z-index provides for the stacking order. It can be specified as an integer, or as auto (initial value). It applies only to positioned elements and is not inherited. A higher z-index means that an element goes further to the front.

There are two concepts:

  1. The stacking context that a box is in
  2. The stacking level for that element

Stacking contexts are stacked as a unit according to the z-index of the context.

Within a stacking context, elements are stacked in markup order.

A new stacking context is established by z-index != auto. The stacking context includes the elements and all its z-index: auto descendants.

For example, given:

the z-index: 5 places both itself and the P above the z-index 4. Note that for non-positioned elements, z-index is treated as auto.


The overflow property specifies whether content that overflows the clipping region of a containing block should be rendered or not. By default, the clipping region of a containing block is simply the size of the containing block, but the 'clip' property can make this smaller or larger.

The overflow property determines what happens in the event of overflow of the containing block. For example, given:

Some content

In this example, the overflow property would specify what would happen the 10 pixels of the P element that overflow the left of the DIV.

Overflow is not inherited and applies to block boxes (such as floats, images, elements such as P or DIV, etc.).

Possible values are:

  1. scroll (the content that overflows the clipping region should be viewed by using scroll bars, which should be present all of the time, even if they aren't required)
  2. visible (the element's content can be rendered outside the clippin region - initial value)
  3. hidden (content falling outside the clipping region is not rendered)
  4. auto (browser determined, but usually that content that overflows the clipping region is viewed using scrollbars, but that, unlike scroll, those scrollbars are not always present)


This specifies that the clipping region of an element should be made smaller or larger than usual; e.g., P {clip: rect(5cm, 4px, 10px, 12px)}. The values refer to the offset of a side from the respective sides of the element's box in the order top, right, bottom, left. For example:

| |
| |
| |
| |
| |
| |
| |

If you specified an offset for 'bottom' of 10 pixels, that would mean that the bottom edge of the clipping region would be 10 pixels above the bottom edge of the containing block; if you specified an offset for 'top' of 10 pixels, that would similarly mean that the top edge of the clipping region would be 10 pixels below the top edge of the containing block.

Negative lengths are permissible, but percentages are not. Also valid is auto (initial value), which is equivalent to specifying rect(0,0,0,0). e.g., clip: auto. It is not inherited and applies to block and replaced elements. Content that does not fall within the clipping region is handled according to the value of the overflow property.

Be the first one to comment on this page.

  CSS 2.0 eBooks
More Links » »
 CSS 2.0 FAQs
More Links » »
 CSS 2.0 Interview Questions
More Links » »
 CSS 2.0 Articles

No CSS 2.0 Articles could be found as of now.

 CSS 2.0 News

No News on CSS 2.0 could be found as of now.

 CSS 2.0 Jobs

No CSS 2.0 Articles could be found as of now.

Share And Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • blinkbits
  • BlinkList
  • blogmarks
  • co.mments
  • connotea
  • digg
  • Fark
  • feedmelinks
  • Furl
  • LinkaGoGo
  • Ma.gnolia
  • NewsVine
  • Netvouz
  • RawSugar
  • Reddit
  • scuttle
  • Shadows
  • Simpy
  • Smarking
  • Spurl
  • TailRank
  • Wists
  • YahooMyWeb

Previoushome Next

Keywords: CSS2 Properties - Dynamic effects, CSS2, css2, CSS2 tutorial, CSS2 tutorial pdf, history of CSS2, Custamizing Style Sheet, learn CSS2

HTML Quizzes
CSS Quiz
CSS 1.0 Quiz
CSS 2.0 Quiz
XML Quizzes
XML Quiz
XSL Quiz
DTD Quiz
Schema Quiz
XForms Quiz
XLink Quiz
XQuery Quiz
XPath Quiz
XPointer Quiz
RDF Quiz
RSS Quiz
WAP Quiz
Web Services Quiz
Browser Scripting Quizzes
JavaScript Quiz
VBScript Quiz
WMLScript Quiz
E4X Quiz
Server Scripting Quizzes
ASP Quiz
SQL Quiz
ADO Quiz
CVS Quiz
Python Quiz
Apple Script Quiz
SQL Server Quiz
PHP Quiz
.NET (dotnet) Quizzes
Microsoft.Net Quiz
ASP.Net Quiz
.Net Mobile Quiz
C# : C Sharp Quiz
VC++ Quiz
Multimedia Quizzes
SVG Quiz
Flash Quiz
Media Quiz
Photoshop Quiz
Gimp Quiz
Matlab Quiz
Gnuplot Programming Quiz
GIF Animation Quiz
Scientific Visualization Quiz
Graphics Quiz
Web Building Quizzes
Web Browsers Quiz
Web Hosting Quiz
W3C Quiz
Web Building Quiz
Web Quality Quiz
Web Semantic Quiz
Web Careers Quiz
Weblogic Quiz
SEO Quiz
Web Site Hosting Quiz
Domain Name Quiz
Java Quizzes
Java Quiz
JSP Quiz
Servlets Quiz
Struts Quiz
EJB Quiz
JMS Quiz
JMX Quiz
Eclipse Quiz
J2ME Quiz
Programming Langauges Quizzes
C Quiz
C++ Quiz
Visual Basic Quiz
Data Structures Using C Quiz
Cobol Quiz
Assembly Language Quiz
Mainframe Quiz
Forth Programming Quiz
Lisp Programming Quiz
Pascal Quiz
Delphi Quiz
Fortran Quiz
OOPs Quiz
Data Warehousing Quiz
CGI Programming Quiz
Emacs Quiz
Gnome Quiz
ILU Quiz
Soft Skills Quizzes
Communication Skills Quiz
Time Management Quiz
Project Management Quiz
Team Work Quiz
Leadership Skills Quiz
Corporate Communication Quiz
Negotiation Skills Quiz
Database Quizzes
Oracle Quiz
MySQL Quiz
Operating System Quizzes
BSD Quiz
Symbian Quiz
Unix Quiz
Internet Quiz
IP-Masquerading Quiz
IPC Quiz
Software Testing Quizzes
Testing Quiz
Firewalls Quiz
SAP Module Quizzes
ERP Quiz
Business Warehousing Quiz
SAP Basis Quiz
Material Management Quiz
Sales & Distribution Quiz
Human Resource Quiz
Netweaver Quiz
Customer Relationship Management Quiz
Production and Planning Quiz
Networking Programming Quizzes
Corba Quiz
Networking Quiz
Microsoft Office Quizzes
Microsoft Word Quiz
Microsoft Outlook Quiz
Microsoft PowerPoint Quiz
Microsoft Publisher Quiz
Microsoft Excel Quiz
Microsoft Front Page Quiz
Microsoft InfoPath Quiz
Microsoft Access Quiz
Accounting Quizzes
Financial Accounting Quiz
Managerial Accounting Quiz
Testimonials | Contact Us | Link to Us | Site Map
Copyright ? 2008. Academic All rights reserved Privacy Policies | About Us
Our Portals : Academic Tutorials | Best eBooksworld | Beyond Stats | City Details | Interview Questions | Discussions World | Excellent Mobiles | Free Bangalore | Give Me The Code | Gog Logo | Indian Free Ads | Jobs Assist | New Interview Questions | One Stop FAQs | One Stop GATE | One Stop GRE | One Stop IAS | One Stop MBA | One Stop SAP | One Stop Testing | Webhosting in India | Dedicated Server in India | Sirf Dosti | Source Codes World | Tasty Food | Tech Archive | Testing Interview Questions | Tests World | The Galz | Top Masala | Vyom | Vyom eBooks | Vyom International | Vyom Links | Vyoms | Vyom World | Important Websites
Copyright ? 2003-2024 Vyom Technosoft Pvt. Ltd., All Rights Reserved.