Input
Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Relative Units Example</title> <style> html, body { height: 100%; margin: 0; padding: 0; font-size: 16px; /* Base font size */ } .container { width: 80%; /* 80% of the body width */ height: 50%; /* 50% of the body height */ background-color: lightblue; margin: 20px auto; display: flex; align-items: center; justify-content: center; } .text { font-size: 150%; /* 150% of 16px = 24px */ color: darkblue; font-weight: bold; } </style> </head> <body> <div class="container"> <p class="text">This text is 150% of base font size (24px)</p> </div> </body> </html>