CSS Cascading Style Sheet: Useful Tutorials 3

                    Printing, CSS Pseudo classes and Elements

Page-break-after and Page-break-before

The page-break-after property is used to cause page breaks after the element that has that style property set, likewise, the page-break-before property causes a page break before the element that the property is set in'type in, open and print the following example.

Try It Out - The page-break-after and page-break-before Properties

<html>

<head>

<title>The page-break-after and page-break-before Properties</title>

</head>

<body>

<img src="s2slogo.gif" width=100 height=100>

<div style="page-break-after:always">Page Marker #1</div>

<img src="internetdotcomlogo.gif" width=120 height=151>

<div style="page-break-before:always">Page Marker #2</div>

<img src="internetdotcomlogo.gif" width=120 height=151>

</body>

</html>

Take a Look

How It Works

When you print out this web page, it should print on three pages. On page one, we have the S2SNetwork logo followed by the text "Page Marker #1"'this is the result of the following line of code:

<div style="page-break-after:always">Page Marker #1</div>

After the content of this DIV is printed, a page break is inserted and the next image is printed on the next page'the next page prints only the inter.com logo; this is because the code below tells the browser to inset a page break before the DIV's contents are printed.

<div style="page-break-before:always">Page Marker #2</div>

Finally, the third page starts with the content of the second DIV followed by the last image.

As you can see, these two properties are a great way to ensure that your web pages are printed out in a logical manner, with page breaks in positions that will improve the readability of printed web documents.

 

CSS Pseudo Classes and Elements


 

:active, :hover, :link and :visited

These four pseudo classes should be familiar to you, possibly with the exception of the: hover class'the: active class sets styles for active links, :hover sets styles for when the mouse hovers over a link, :link sets style properties for links and :visited is used for visited links.

 

Try It Out - The :hover property

<html>

<head>

<title>The :hover property</title>

<style type="text/css">

<!--

A:hover {color:#00ccff}

-->

</style>

</head>

<body>

<a target=blank href="http://www.s2snetwork.com">

Visit the S2SNetwork

</a>

</body>

</html>

 

How it Works

 

:first-letter and :first-line

The :first-letter element can be used to set style for the first letter of text contained in an element such as a DIV and the :first-line element does the same thing for the first line of an element'this code snippet shows how these work

<html>

<head>

<title>The first-line and first-letter properties</title>

<style type="text/css">

<!--

DIV:first-letter {font-size:large}

P:first-line {color:blue}

-->

</style>

</head>

<body>

<div>

content

... </div>

<P>Testing the first-line element<br>

This is the second line

</p>

</body>

</html>