HTML-CSS: Fullscreen

Last update on March 08 2024 13:35:28 (UTC/GMT +8 hours)

HTML-CSS : Exercise-21 with Solution

Using HTML, CSS applies styles to an element when in fullscreen mode.

Use the :fullscreen CSS pseudo-element selector to select and style an element that is displayed in fullscreen mode.
Use a <button> and Element.requestFullscreen() to create a button that makes the element fullscreen for the purposes of previewing the style.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS applies styles to an element when in fullscreen mode</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="w3rcontainer"><!-- Comment: Defines a container for the content -->
<p><em>Click the button below to enter the element into fullscreen mode. </em></p><!-- Comment: Provides instructions for entering fullscreen mode -->
<div class="element" id="element"><p>w3resource.com change color in fullscreen mode!</p></div><!-- Comment: Defines an element to be put into fullscreen mode -->
<br /><!-- Comment: Inserts a line break -->
<button onclick="var el = document.getElementById('element'); el.requestFullscreen();"><!-- Comment: Defines a button to trigger fullscreen mode -->
    Go Full Screen! <!-- Comment: Text displayed on the button -->
</button><!-- Comment: End of the button -->
</div><!-- Comment: End of the content container -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

This HTML code creates a webpage with a container div and a button to trigger fullscreen mode for a specific element.
The  comment indicates the license information for the code.
<!DOCTYPE html> declares the document type and version of HTML, which is HTML5.
<html> marks the start of the HTML document.
<head> contains meta-information about the HTML document, such as character encoding and viewport settings.
The <title> element sets the title of the webpage.
<body> contains the content of the HTML document.
Within the container div, there's a paragraph providing instructions, a div with the class "element" which will be put into fullscreen mode, and a button to trigger fullscreen mode.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */
.w3rcontainer{ /* Comment: Styles the container div */
   border: 1px solid #cccfdb; /* Comment: Sets the border style for the container */
   margin: 40px auto; /* Comment: Sets margin to center the container horizontally */
   border-radius: 700px; /* Comment: Sets a large border radius to create a circular shape */
}

.element { /* Comment: Styles the element div */
  padding: 20px; /* Comment: Adds padding inside the element */
  height: 300px; /* Comment: Sets the height of the element */
  width: 100%; /* Comment: Sets the width of the element to 100% */
  background-color: orange; /* Comment: Sets the background color of the element */
  box-sizing: border-box; /* Comment: Includes padding and border in the element's total width and height */
}

.element p { /* Comment: Styles the paragraph inside the element */
  text-align: center; /* Comment: Aligns text to the center */
  color: white; /* Comment: Sets the color of the text to white */
  font-size: 3em; /* Comment: Sets the font size of the text */
}

.element:-ms-fullscreen p { /* Comment: Styles the paragraph inside the element for Microsoft fullscreen mode */
  visibility: visible; /* Comment: Makes the paragraph visible */
}

.element:fullscreen { /* Comment: Styles the element when in fullscreen mode */
  background-color: #CC56FF; /* Comment: Changes the background color of the element */
  width: 100vw; /* Comment: Sets the width of the element to 100% of the viewport width */
  height: 100vh; /* Comment: Sets the height of the element to 100% of the viewport height */
}
</style> /* Comment: End of the CSS styling */

Explanation:

This CSS code applies styles to HTML elements, particularly a container div and an element div.
.w3rcontainer styles the container div, setting border, margin, and border radius to create a circular shape.
.element styles the element div, setting padding, height, width, background color, and box-sizing to include padding and border in the total width and height.
.element p styles the paragraph inside the element, setting text alignment, color, and font size.
.element:-ms-fullscreen p targets the paragraph inside the element in Microsoft fullscreen mode, making it visible.
.element:fullscreen styles the element when in fullscreen mode, changing its background color and setting its width and height to 100% of the viewport width and height, respectively.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.