Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adding Some Style
You're probably wondering what the class="projection" and class="screen" attributes are all about. As mentioned earlier, they target sections of the HTML file to a projection device or a monitor. Each division lets you apply different styles to your slides and handouts, respectively. Using CSS, you can give the handouts the look and feel of a document created in a word processor, and make your slides look however you want them to look.
Whether you're combining the slides and handouts into a single file or just making standalone slides, you can encapsulate all the formatting information you need in one CSS file. When combining slides and handouts, your CSS file will consist of three sections:
Style definitions for elements common to both the handouts and the slides (such as headings)
Style definitions for the handouts
Style definitions for the slides
Start by creating a new CSS file with the name operashow.css. At the top of the file, add the style information for the common elements. In this case, the common elements will be <h1> and <h2> elements. For example:
h1, h2 {
margin-top: 6px;
padding-bottom: 10px;
font-weight: bold;
}
This style definition simply adds some space above and below the headings, and sets them in bold.
Now, set up the sections for the projection and screen classes. Set up the projection section like this:
@media projection {
}
And set up the screen section like this:
@media screen {
}
The @media elements are a way that CSS tells a browser when and where to apply formatting. You simply put your style definitions for each medium between the braces ({ }). The style definitions that you use are up to you, but your options are limited only by your imagination and the limitations of CSS. Here's a sample of how you can style a bulleted list:
ul {
padding-top: 0.5em;
list-style-type: disc;
width: 75%;
height: 50%;
border-top: solid blue 3px;
border-left: solid blue 3px;
list-style-position: outside;
padding-left: 10%;
}
Notice the border-top and border-left properties. They put a blue line at the top and to the left of the list, respectively, as shown in Figure 1.
)
Figure
1 An OperaShow slide demonstrating the border effect we just
defined.
One style definition you must add to both the screen and projection sections of the style sheet is display: none. For example, in the projection section, add this:
div.screen {display: none}
This line tells the Opera browser not to display any content surrounded by the <div class="screen"> tag when viewing slides.
For your slides, you must also add the following style definitions to the @media projection block:
h1, h2 {page-break-before: always}
div.presentation {display: block}
The page-break-before property ensures that there's always a page break before any <h1> or <h2> tag. This is what enables the Opera browser to display the content as individual slides. The display: block property ensures that the slide contents are displayed normally.
Once you've defined your styles, save the CSS file. To link the stylesheet to your HTML file, add the following line to the header of the HTML file:
<link rel="stylesheet" type="text/css" media="all" href="operashow.css" />
The media="all" attribute tells the Opera browser that this is a stylesheet for all display devices, and that it might contain instructions for displaying the file on other types of media.