Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS @media rule</title> <style> @media screen{ body { color: #32cd32; font-family: Arial, sans-serif; font-size: 14px; } } @media print { body { color: #ff6347; font-family: Times, serif; font-size: 12pt; } } @media screen, print { body { line-height: 1.2; } } </style> </head> <body> <h1>CSS Media At-rule</h1> <p><strong>Note:</strong> If you print (or print preview) this page the output of HTML code appears differently than it appears on the screen.</p> </body> </html>
