Advanced Boxes with CSS

There is more to boxes than the basic CSS box model. With CSS you can affect the amount of content that is displayed in a box, how it is clipped, and what happens with the over flowed text. You can even create fake frames with these style properties.

# clip

# overflow

Specialized CSS Syntax:

CSS syntax doesn't end with the basic syntax. There are several different advanced CSS selectors that you can use to define the exact elements you want styled.

* CSS Pseudo Properties

* CSS Universal Selector

* Adjacent Sibling Selectors

* Child Selectors

* CSS Specificity

Media Types and At-Rules:

Media types allow you to define styles for how your Web documents might display. For example, you can define the media as "print" for printed documents or "tv" if the page is displayed on a television monitor.

<style media="projection"> ... </style>

Another way to define media rules is with @-rules. You use these to define the styles for different media types:

@media print {

p { font-size : 12pt; }

}

CSS Generated Content:

CSS 2 added the new feature of generated content. This is content that the CSS adds to the HTML document. It is intended to add things like quotation marks around quotes, numbers or short intro text before or after elements, or bullets and images as icons.

The problem is that generated content is not supported by Internet Explorer. Until this is resolved, Web designers should be advised not to use it.

Cascading Style Sheets level 2 (CSS2) provides Web developers with a convenient way to generate content for their Web pages without having that content stored in the document tree. This is intended for:

* bullets

* separator iconography

* numbering, such as chapters, lists, or pages

Note: Before you start playing with these classes, you should be aware that they are not supported by Internet Explorer.

:before and :after Pseudo-Elements

These pseudo-elements work on other elements in the style sheet to determine the location of any generated content. As you might guess :before places the content before the element and :after places it after.

p:before { content: "Note:"; }

view

With these pseudo-elements, the non-inherited properties take their initial or default values. The most common use of this is with display. Display has the default value of in-line, but for a lot of generated content, you want it to be a block element. For example, if you wanted to put a graphical element between sections on a page, you might write:

div.section:after {

content: "* * *";

display: block;

text-align: center;

}

enerating Content

Once you have the :before and :after pseudo-elements, you need to determine what content you're going to generate. The three most common types of content you might generate are:

* A string of characters: any grouping of characters you want to include.

* A url pointing to an image.

* Quotation marks: either open quotes or closed quotes.

To include a string, just include the text you want generated in quotes:

p:after { content: "The End"; }

If you want to include quotes in your content, escape them with the back-slash: \".

To include an image, use the call url(URI to image):

p:before { content: url(../graphics/ball.gif); }

Finally, to include quotation marks you use the terms open-quote and close-quote:

q:before { content: open-quote; }

q:after { content: close-quote; }