I did not attempt any fancy CSS tricks this week. Just some plain old embedded styles and notes on the information in this week's lessons. I did not attempt the table attributes listed as, like the fixed backgrounds, DHTML and some other newer commands and codes, they do not work well in all of the major browsers, so I find them rather useless for current pages, but good information to hold on to for later.
Once again I have found that, when I try to group commands, Netscape likes to start ignoring them, so headings and links are all defined separately.
This week we covered some material that is not easily displayed in this online format. I have attempted to use a few of the print commands here, but I don't think you can tell much about them from this page, except that they did validate. Were I writing an e-book style page, instructions or tutorials which many people would prefer to read from a hard copy, they would be quite helpful.
Media Styles help the web author control how their page will look in media such as tv and braille as well as in print. I am not going to comment on these here as they are not something I can test properly with the tools I have at hand . I will be adding links to information on these commands to my resources page and filing my class notes for future reference.
Aural Styles are really fascinating to me as they offer a way to translate your page information in audio format for use by the blind, people driving in cars, or anyone wishing to hear your page rather than see it. As with media styles, I will not cover that information on this page, but will add links to my resources page and file my notes. This is really something that seems to me to be a great way to address accessibility issues.
With style sheets or CSS, there is added ability to control how a document prints, and this may vary from the way it appears on the screen. You can change margins right and left for print, and you can also suggest where or where not to break a page for a printed document. This comes in handy, if you want to make sure your headings are on top of and print with a text area that is related. This is also good if you would rather not have a particular list or group of items split between printed pages, if possible.
Three areas will greatly control how a page is printed. Breaking the page, @Page, and Media-Specific Style Sheets for Print.
Here are a few ideas about page break, and how they might be used.
Examples of printing directions
page-break-before : auto | always | avoid | left | right | inherit
All H1 headings will be at top of printed page.
H1 { page-break-before : always; }
Lists will not be split between pages, if possible.
UL, OL, DL { page-break-before: avoid; }
page-break-after : auto | always | avoid | left | right | inherit
Page will not break right after a heading, if possible.
H1, H2, H3, H4 { page-break-after: avoid; }
page-break-inside : avoid | auto | inherit
Page will not break up named element areas, if possible.
UL, OL, DL { page-break-inside : avoid; }
This is a special selector that allows designers to define areas, and it applies to the printed document. Here is where you define margins, and areas of printed pages.
@page affects only printed pages
Book style pages usually have different margins set.
Setting margins with @Page
This amount gets added and printed to whatever margin the element already has coded for the page.
So, the code below will add an inch to margins in the code.
@page { margin : 1in; }
Sometimes you will want margins like left and right book pages.
Using this code will print and look similar to an open book, wider margins on the outside edges and smaller margins on the inside.
@page { margin : 1in; }
@page :left { margin-left : 2in; }
@page :right { margin-right : 2in; }
I have to stop for a minute here and thank Vikki for all the time and effort she has put into helping all of us gain a better grasp on how CSS works. I had no intention of taking yet another class this term, but, when I started fiddling with some CSS on my own and the result was that my codes were not only a mess, but were actually freezing and crashing browsers, I threw up my hands and decided it would probably take LESS time and energy to go ahead and sign up for this class than to keep trying to wade through the mass of online tutorials and often conflicting information on my own.
That was a GOOD decision !!
Soooooo, if you want to give CSS a try, Vikki and LVS Online Learning will help demistify all those new codes and how they work in various browsers. Plus, you will have FUN learning!!! Click the link below to learn more about LVS and register for classes.
