CSS Print Style
To specify seperate CSS styles inorder to print the content of the Webpage
What is CSS Print Styles?
1. With CSS you can control the look of the webpage when printed, by specifing a seperate CSS style for the print version of the webpage.
2. You can control the way page breaks when printed on more than one page, set margins, padding, fonts, layouts, tables etc.
3. With mainstream browsers, backgrounds cannot be printed, and colors are reversed when you have a black background with text in white.
4. You can even exclude certain components on the webpage from the print version, such as the navigation menu, search bar, share button etc, by setting their display property to none for the print version.
5. However you have no control over the size and orientation of the page on which the content is to be printed.
Setting the Media Types
1. A single CSS can be used for all devices and browsers which is capable of displaying the webpage, but you can even specify seperate styles for different devices by setting the media types
2. The following are media types:
|all||CSS styles are applicable to all devices. This is the default when nothing is specified|
|braille||Specific CSS styles to be applied for braille tacticle feedback devices|
|embossed||CSS style rules for paged Braille printers|
|handheld||To be used with Mobile handheld Devices with small screen and limited bandwidth|
|Specifies CSS styles to be used when printing the Contents of the Webpage|
|projection||Intended to be used with a projector|
|screen||Specific CSS style for color Computer Screens|
|speech||To be used for speech synthesizers inorder to aid the visually impaired.|
|tty||Specific CSS styles for devices with a fixed-pitch grid, such as teletypes, terminals etc with limited display capabilities.|
|tv||Specific CSS styles for televisions and similar devices|
Note: Of all the media types mentioned, only the types all, print and screen are used commonly.
How to set the Media Type ?
Using External CSS styles
1. The most common way of setting the media type is by using the <link> tag and specifying the media type using the attribute media.Note: Devices apply CSS styles targeted for them and ignore all other
Media Type using @import Rule
1. You can link an external CSS to the webpage using the @import rule, the media type is specified after the filepath.
Media Type using Embedded Styles
1. Media types can be applied using Embedded styles, the attribute media must be specified in the opening of the <style> tag.Note: Embedded stylesheets must be included only within the <head> element of the webpage.
Media Styles using @media rules
1. Media types can also be specfied by using @media rule within an external stylesheet or embedded within a <style> element.
2. The media type(s) is specified after the @media rule, and CSS rules defined within the curly braces.Note: You can use the cascading feature to override certain specific rules for each version of the webpage.
Defining the Margins of Page using @page rule
1. You can set the margin of the page using the @page rule.
2. Only the shorthand property margin can be used, also values can be specified only using percentage or physical units.(em and ex cannot be used)Note: Multiple transitions can be specified using commas
Using Pseudo Class for Print CSS
1. A given webpage when printed can use several pages, but you can assign seperate margins for all the pages using the three Pseudo Class
:first To target the first page
:left To target even number pages
:right To target odd numbered pagesNote: For Text like Arabic and Hebrew with direction from right-to-left, the :left is for odd and :right is for even.
Setting the Page Breaks
1. You can control the way the page breaks using CSS page break properties.
|page-break-before||Defines if a page should begin before a particular element|
|page-break-inside||To Specify if a page should begin in the middle of an element|
|page-break-after||To handle page breaks after the current element|
|orphans||It Specifies the minimum number of lines that must be left at the bottom of the page, if not the whole text block is moved to next page.|
|widows||It Specifies the minimum number of lines that must appear at the top of the page, if not then the enitre text block is moved to the previous page.|
The values property page-break-before and page-break-after can accept are as follows
auto : The browser decided where the page should break. Its the default value.
always : Enforces a page break before or after the element
avoid : if possible , a page break would be avoided.
left : It forces one or two page breaks after the specified element, such that the following page is formatted as left page.
right : It forces one or two page breaks before the specified element, such that the following page is formatted as right page.
inherit : It enables the child element to inherit the properties of the child element.
Controlling the Box Break style with box-decoration-break
1. When the contents of the page overflows the size of the print page, the page breaks with the remaining content printed on new page.
2. When the page breaks the border around the content can be simply sliced or else it can be wrapped around preserving the padding, border, rounded corners etc on the next page as well as the previous page.
3. The CSS3 property box-decoration-break is used for this purpose.
The values possible are:
slice : Slices the containing box when the page breaks
clone : Box fragment is created independently, properties of padding, shadow , border etc are preserved.
Print CSS Styles: Complete Demo.
1. We will now create a Print specific stylesheet for a webpage given here.
Print CSS Styles: Complete Demo.Give it a TRY! » Note: Multiple transitions can be specified using commas
CSS3 Ribbon effect using ::before and ::after pseudo element
1. To create a ribbon effect, the background of the ribbon should extend beyond the element containing ribbon.
2. Two triangles of slightly darker background are used to create an illusion of ribbon folding back using CSS3 ::before and ::after pseudo element.
Example: CSS3 Ribbon EffectGive it a TRY! » Note: Multiple transitions can be specified using commas
CSS3 Comment Bubble with Pseudo Elements
1. For the Comment Bubble, the acute angled triangle at the end is created with an element with double the left-right width than the top-bottom width. And color of three sides of the border set as transparent.
2. Then a smaller triangle with background color same as the main box is superimposed on the first traingle, to create an illusion of continious border.
Example: CSS3 Comment Bubble EffectGive it a TRY! »
Create a CSS3 Speech Bubble
1. The Tail of the Speech Bubble is created by superimposing two circles(with different Z-indexes) to cut an arc, and the color of the outer circle set same as that of background.
2. The circles are positioned behind the circle by having a negative Z-index values.
Example: CSS3 Speech BubbleGive it a TRY! » Note: All distances are with reference to the top-left corner(i.e (0,0,0))
Create CSS3 Thought Bubble
1. The Thought Bubble is created by first creating the ellipse as a Main Thought Bubble, and the smaller bubbles are created by creating circular elements with thick borders.