HTML-CSS: Fullscreen
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:
Explanation:
- This HTML code creates a webpage with a container div and a button to trigger fullscreen mode for a specific element.
- The <!--License: https://bit.ly/3GjrtVF--> 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:
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:
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics