Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Web Development Articles
Page 663 of 801
Usage of page-break-before, page-break-after, and page-break-inside properties in CSS
CSS provides three properties to control page breaks when printing documents: page-break-before, page-break-after, and page-break-inside. These properties help you manage how content flows across printed pages, ensuring proper layout and avoiding unwanted breaks. Syntax selector { page-break-before: value; page-break-after: value; page-break-inside: value; } Possible Values PropertyValuesDescription page-break-beforeauto | always | avoid | left | rightControls page break before element page-break-afterauto | always | avoid | left | rightControls page break after element page-break-insideauto | avoidControls page break inside element ...
Read MorePaged Media in CSS
Paged media differ from continuous media in that the content of the document is split into one or more discrete pages. Paged media includes paper, transparencies, pages that are displayed on computer screens, etc. The CSS2 defines a page box, a box of finite dimensions in which content is rendered. The page box is a rectangular region that contains two areas − The page area − The page area includes the boxes laid out on that page. The edges of the page area act as the initial containing block for a layout that ...
Read MoreRole of size property in CSS to set the size and orientation of a page box
The CSS size property specifies the size and orientation of a page box when printing. This property is primarily used within @page rules to control how content appears on printed pages. Syntax @page { size: value; } Possible Values ValueDescription autoThe page box will be set to the size and orientation of the target sheet landscapeOverrides the target's orientation. The longer sides are horizontal portraitOverrides the target's orientation. The shorter sides are horizontal lengthCreates an absolute page box with specified dimensions. One value sets both width and height ...
Read MoreFade In Left Big Animation Effect with CSS
The CSS Fade In Left Big animation effect creates a dramatic entrance animation where an element slides in from the far left while simultaneously fading in from transparent to opaque. This effect uses translateX(-2000px) to start the element off-screen. Syntax @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; ...
Read MoreFade In Down Animation Effect with CSS
The CSS Fade In Down animation effect creates a smooth transition where an element gradually appears while moving downward from its starting position. This animation combines opacity changes with vertical translation to create an elegant entrance effect. Syntax @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-distance); } 100% { opacity: 1; transform: ...
Read MoreFade In Left Animation Effect with CSS
The CSS Fade In Left animation effect creates a smooth transition where an element slides in from the left while gradually becoming visible. This animation combines opacity changes with horizontal movement to create an elegant entrance effect. Syntax @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: ...
Read MoreWhat is a page box in CSS?
A page box in CSS is a rectangular area that defines the printable region of a page when creating print stylesheets. It consists of the page area (where content appears) and the margin area around it. Page boxes are defined using the @page rule and allow you to control page dimensions, orientation, margins, and printing marks. Syntax @page { size: width height; margin: value; marks: crop | cross | none; } Page Box Properties PropertyDescription sizeSets the page box dimensions and ...
Read MoreRole of media attribute on the LINK element
The media attribute on the LINK element specifies the target media or device type for which an external style sheet is intended. This allows you to apply different styles for different output devices like screens, printers, or mobile devices. Syntax Possible Values Media TypeDescription allSuitable for all devices (default) printIntended for printed material screenIntended for computer screens handheldIntended for handheld devices Example: Print-Specific Styles The following example links a CSS file specifically for print media − Media Attribute Example ...
Read MoreHow to specify the target media within the document language with CSS
CSS media attributes allow you to specify which devices or media types should apply specific styles. This helps create responsive designs that work across different platforms like screens, printers, and handheld devices. Syntax /* In CSS */ @media media-type { /* CSS rules */ } /* In HTML link tag */ Common Media Types Media TypeDescription screenComputer screens, tablets, phones printPrinters and print preview allAll media types (default) speechScreen readers and speech synthesizers Example: Using Media Attribute in HTML The following example shows how ...
Read MoreHow to specify the target media types of a set of CSS rules
The media attribute on CSS elements and @media rules allows you to specify which types of devices or media should apply specific CSS styles. This enables responsive design and device-specific styling. Syntax /* Using @media rule */ @media media-type { /* CSS rules */ } /* Using link element */ Common Media Types Media TypeDescription allSuitable for all devices (default) printIntended for printed documents screenIntended for computer screens speechIntended for speech synthesizers Example: Using Link Element with Media Attribute The following example shows ...
Read More