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 - Advanced concepts

Previoushome Next

CSS2 Properties - Advanced concepts



This section covers things that could have been included in any of the early sections: attaching or applying styles or key concepts, but weren't felt useful enough or supported by enough browsers to be included.

Attaching styles

Media-dependent style sheets

You specify media-dependent style sheets with the addition of the media attribute to the LINK or STYLE element. For example, <STYLE media="screen" type="text/css">.

You may specify a list of media that a style sheet applies to by separating them by commas, as in media="screen, braille". There follows a complete list of valid media (note that these must be in the lowercase):

  1. screen = standard computer screen
  2. tty = fixed-pitch character grid, as with teletypes
  3. tv
  4. projection
  5. handheld = handheld device - probably small low-res screen
  6. braille
  7. aural
  8. all = applies to all media


This applies the rules in the block to the specified medium:

@media print {
  BODY {margin-left: .2in}
  P {margin-left: .2in}

@media may not contain @import rules inside it.

Media-dependent @import statements

To designate a style sheet as applying to one or more media, you can follow the @import statement by a comma separated list of media.

@import url(filename.css) print, projection;

This example would apply the specified styles when the document is viewed on a printer or projector.

Whereas the following would only apply when the document was printed:

@import url(filename.css) print;

Although most browsers support normal @import statements, fewer support media-dependent ones.

Advanced topic: Alternate, preferred and persistent style sheets

In order to provide more choice to viewers of pages, you can use alternate style sheets. These allow users to select between different styles. Thus there are three types of style sheet:

  1. Persistent style sheets - these persist regardless of users' selections. These cannot be deselected by the user without disabling style altogether, and as such should contain styles that are essential to your page. They help reduce redundancy if coupled with preferred and alternate style sheets, since without them the same styles must go in preferred and alternate style sheets.

    Persistent style sheets are specified thus (i.e., in the same way as described above):

    <LINK rel="stylesheet" href="nameoffile.css" type="text/css">

  2. Preferred style sheets - the preferred style sheet is the default style sheet. If an alternate style sheet is selected, the preferred style sheet will no longer apply.

    You should only have one preferred style sheet per page.

    Preferred style sheets are declared in the same way as persistent style sheets, except they include a title:

    <LINK rel="stylesheet" title="nameOfStyleScheme" href="nameoffile.css" type="text/css">

  3. Alternate style sheets - these are not displayed unless selected by the user. They differ from ordinary style sheets in that they have an "alternate stylesheet" value for their rel attribute. They must have a title so that the user can select them:

    <LINK rel="alternate stylesheet" title="nameOfStyleScheme" href="nameoffile.css" type="text/css">

Note that because only about 1% of current browsers support alternate style sheets, since it provides equivalent functionality but is superior in that:

  1. It remembers the user's preferred style sheet - they don't have to select their preference each time.
  2. It is supported by the overwhelming majority of web browsers.
  3. It allows them to create custom style schemes with fine control over everything from fonts to margins.


Applying styles


The universal selector *

The universal selector matches anything. Thus BODY * P, means P is the grandchild or greater of BODY, and *:active is equivalent to :active. Its main use is in X * Y (or similar statement) to state that Y must be at least X's grandchild, or to assign a style to all elements

The universal selector is omissible when it is not the only component of a simple selector (e.g., *.class is the same as .class, but ' ' is not the same as '*').

For example to specify that all elements should be 100 pixels high, you would type:

* {height: 100px}

Note that because of inheritance, discussed later on, and the fact that most browsers do not support the universal selector, you should rarely, if ever, use the universal selector.

:First-child selector

This pseudo-class matches a element that is the first child of its parent: :first-child {color: red} - matches any element that is a first-child, as does *:first-child. For example, in:

This is the first child of OL - it is matched by LI:first-child.
This is the second child of OL.

Pseudo-element selectors

The difference between these and pseudo-classes is that these select part of an element all of the time, whereas they select all of the element some of the time.

First-line and first-letter

P:first-line {text-transform: capitalize}
P:first-letter {font-size: 48px;
color: red}

These apply to the first line and first letter of an element respectively. Thus the first example would capitalize the first line of P elements, while the other would make the first letter of P elements 48 pixels high and red.

Note that the first-letter is 'inside' the first-line, and so therefore where there are conflicting properties, first-letter's take precedence.

First-line and first-letter apply only to block elements, and are only valid on the subject of the selector (i.e., the element that is being selected - DIV P:first-letter is valid, but P:first-letter SPAN is not).

Only the text-shadow, color, background, and font properties, as well as word-spacing, letter-spacing, text-decoration, text-transform, line-height and clear properties may be applied to :first-line.

Only the text-shadow, color, background, and font properties, as well as text-decoration, vertical-align (provided float: none), text-transform, line-height, margin, border, padding, float and clear properties may be applied to :first-letter.

If the first letter is a quote mark, then first-letter applies to the both the quote and the second letter, and if it is any other non-alphanumeric character, it does not apply at all.

IE 3 applies both first-line and first-letter to the entire element; Opera and Netscape 6 are the only browsers that support them.

ID selectors

IDs are identical to classes except there can only be one element with a given ID in a document. Like classes they should be in lowercase, may not start with a number and may not contain spaces.

They are marked in the HTML in the same way, except they use id instead of class. For example:

<BODY id="introduction">

They are marked in the style sheet with a #. E.g.:

BODY#introduction {font-size: 1.2em}


#introduction {font-size: 1.2em}

Attribute selector

P[attribute] matches P with the attribute set to any value. E.g., P[title] matches <P title="anything">. Note that [title] is also valid since the universal selector is implied where it is omitted.

Although attribute selectors are very useful (for example, you might want to say that all text boxes should have a red background, which you could do by specifying INPUT[type=text], only Netscape 6/Mozilla 5 supports them.

Attribute set to "x" selector

P[title=intro] or P[title="intro"] (the quotes are optional) matches P with its title attribute set to "intro".

At least one of attribute list set to x selector

P[class~=green] matches P with a class set to "green small", "small green", "green", etc.


Child combinators (>)

These differ from ordinary contextual selectors (such as DIV.contents A) insofar as these only apply to children - BODY > P matches:


but not


BODY P matches both of them.

These aren't supported by most browsers, and aren't nearly as useful as descendant combinators.

Adjacent sibling (+) combinator

Of the elements below, only the third P element is matched by P + P:


Thus the adjacent sibling combinator is used to specify that the two specified elements are adajcent siblings. The most common use for them is to specify the typical formatting of a printed book:

P {text-indent: 3%}

H1 + P, H2 + P, H3 + P, H4 + P, H5 + P, H6 + P {text-indent: 0}

This would specify that P elements should be indented by 3%, except after headings where they should not be indented.

The adjacent sibling combinator is only supported by Netscape 6 and Opera.

Key concepts


All properties can be set to have a value of inherit, regardless of whether the property normally inherits. For example: margin-left: inherit will cause margin-left to be the parent's value. Note that margin: 10px inherit is not valid - the whole property must be inherited.

Netscape 4 does not support inherit, but always renders color: (or background-color) inherit as #00e000. Most browsers do not support inherit.

The cascade

Because CSS provides so many ways of applying style to pages, it is inevitable that declarations will conflict. To resolve this, there is something known as a cascade. This was discussed earlier, but not in full detail.

Conflict resolution

The origin sort

There are three possible sources of style: the author, the user (via a user style sheet), and the browser (via the browser's style rules).

If an element has more than one value specified for one of its property, there is a sort by origin. Properties specified for a element by the author override those specified by the user, which override those specified by the browser.

It should be noted that where the user style sheet states a value for an element for a property that the author assumes will be inherited, unexpected results may occur.


Browser style sheet:
BODY {color: black;
font-size: 16px;
background: white}

User style sheet:
BODY {color: white;
background: black}

Author style sheet:
BODY {background: white}

In this example, the result would be a white foreground color because the user style sheet overrides the browser style sheet, and in the absence of a author declaration that will be used. The background will also be white because that is the color specified by the author, which overrides all declarations by the browser and user. This demonstrates why it is important to always specify a background color with the foreground color.

Finally, the font size would be 16 pixels because that is what the browser specifies and neither the user nor author contradict it.

The weight sort

The weight sort sorts declarations according to their weight. Declarations can have normal weight or important weight. Declarations are made important by the addition of !important (or ! important). For example, color: red !important.

The effect of the weight sort is twofold:

  1. Firstly to give that declaration greater weight than all others in its style sheet. For example, given:

    P {font-size: 399px !important} P {font-size: 16px}

    399 px (pixels) will result because that declaration has greater weight.

  2. Secondly to alter the origin sort - user style declarations that are !important override author ones, even if the author ones are also !important.

The specificity sort

If there are still conflicting values for a given property of an element, the specificity sort prevails.

This is done thus: count the number of ids in the selector (a), count the number of classes, attribute selectors and pseudo-classes (b), count the number of elements and pseudo-elements (c).

Universal selectors have a specificity of 0.

Make this into a number ABC - e.g. BODY P[align]#hello:active:first-letter, has a=1, b=2, c=3 = 123.

The highest number wins.

HTML formatting attributes (e.g. align on <H1 align="center">) have a specificity of 0, and are assumed to be at the start of the author style sheet. This does not apply to formatting elements (such as FONT), but only to attributes of elements.

Style specified via the style attribute (e.g., <P style="color: red">) has specificity of 100.

Note that pseudo-elements apply as if there was a <SPAN class="first-letter"> and <DIV class="first-line"> tag inserted into the HTML, and thus SPAN.first-letter inherits from P, and thus though P#x may have greater specificity than P:first-letter, the P#x does not actually apply directly to the first-letter, although normally the properties specified on it would inherit into it.

P.copyright {font-size: .8em}

P {font-size: 1em}

This demonstrates how the cascade basically does what you would expect - the copyright message is given the smaller text because it has greater specificity.

The order sort

As mentioned earlier, rules at the end of the style sheet take precedence over those at the start. Inline style is assumed to be read after embedded style, which is read after linked style. Imported style sheets form the start of the importer's style sheet.


P {color: red}

P {color: green}

would result in green, much as you would expect.


In theory, you may use escapes by typing a \ followed by the Unicode hexadecimal code for the letter, e.g., \3BA. The \ can also be used to remove the normal meaning from a character - e.g., \" inside a string indicates that you don't want to close the string, and \
means that the new line is purely for esthetic reasons. In practice no browser except Netscape 6 supports this so you should ignore CSS escapes.

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 - Advanced concepts, 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.