My CSS set

How would you approach fixing browser-specific styling issues? How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?

+After identifying the issue and the offending browser, use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though. +Use Reset CSS or Normalize.css. +Use vendor-specific extensions like -webkit- (safari) and -moz-(mozilla) -Not recommended as it can cause conflicts +Progressive enhancement: The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it. +Use caniuse.com to check for feature support +Use autoprefixer to automatically add vendor prefix insertions +Use Modernizr to detect features +Use libraries like Bootstrap that already handles these styling issues for you.

What are some differences between inline and block elements?

- Block elements will, by default, naturally expand horizontally to fill their parent container, so there's no need to set a width of "100%" - Block elements will, by default, begin at the leftmost edge of the parent box, below any previous block elements (unless floats or positioned elements are utilized; see below) - Inline elements will ignore width and height settings - Inline elements flow with text, and are subject to typographical properties such as white-space, font-size, and letter-spacing - Inline elements can be aligned using the vertical-align property, but block elements cannot - Inline elements will have some natural space below them in order to accommodate text elements that drop below the line (like the letter "g") - An inline element will become a block element if it is floated

What is the difference between classes and IDs in CSS?

- Classes are done with a . in CSS and are used for multiple elements. - IDs are done with a # in CSS and are used for a single element - An element can have multiple classes, but only one id - If multiple elements used the same ID, the first one with the ID is used

How would you implement a web design comp that uses non-standard fonts?

--> @font-face: + @font-face { font-family: "Harabara Bold"; src: url("css/fonts/Harabara.eot"); src: local('☺') url("css/fonts/Harabara.woff") format("woff"), url("css/fonts/Harabara.otf") format("opentype"), url("css/fonts/Harabara.svg#filename") format("svg"); } + Note: the smiley is a hack to make sure that you don't accidentally use a font that is local to a user's computer, which would override the downloaded font + body { font-family: "Harabara Bold", Arial, sans-serif; } --> $font-stack in sass --> Link the webfont url as CSS

What are the advantages/disadvantages of using CSS preprocessors? Describe what you like and dislike about the CSS preprocessors you have used.

--> Advantages: + Better organization due to nesting + Mixins to generate repeated CSS + Importing other styles + Modularity + CSS is made more maintainable + VARIABLES! - can share theme files across different projects + have mathematical and operational functions --> Disadvantages: + Have to use build tools to compile - can be slower + Debugging is harder + Generated CSS file may be large

The 'C' in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?

--> All in order or importance (including subclasses): 1. User opted styles (users may opt for larger font-sizes, etc.) 2. Developer added styles + Inline styles (<p style="F#$F"></p>) + In style Tag (<style>FSDF##</style> +Stylesheets 3. User Agent (Browser) --> Within the stylesheet: (highest is most important) 1. lowest style wins out if there are duplicates 2. Presence of !important (lowest !important wins out as well) 3. ID selector 4. Pseudo-classes, Attribute selectors (a[href] - matches all a elements which has a href attribute), Class selector 5. Generic Element and pseudo-elements 6. Universal selectors (*) --> Formula to figure this out - highest score wins! +1000 if the matching selector is inside a <style> element or the declaration is inside a style attribute +100 for each ID selector +10 for each class selector, attribute selector, or pseudo-class +1 for each element selector or pseudo-element +Ex: p {} /* 1 */ .fancy {} /* 10 */ p.fancy{} /* 11 */ #super-fancy p {} /* 101 */ --> Using this to my advantage: + LVHA: order links like this: link, visited, hover, active as all of these have the same specificity + Try to avoid !important by looking at how things cascade + Use id to make a rule more specific + Minimize the # of selectors

Describe BFC (Block Formatting Context) and how it works.

--> BFC is part of the visual CSS rendering of a web page in which block boxes are laid out --> It belongs to the normal flow positioning scheme --> A BFC is an HTML box that satisfies at least one of the following conditions: +value of float is NOT none +value of position is NOT static/relative +value of display IS: table-cell, table-caption, inline-block, flex, inline-flex +Value of overflow is NOT visible -->To create a new BFC just add any of the above mentioned CSS conditions to it --> It's like a mini layout inside your page - once an element creates a BFC, everything is contained inside it

Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

--> CSS Box model is a box that wraps around HTML elements and consists of: margins, borders, padding and the content --> CSS box model is responsible for calculating: + How much space a block element takes up + Whether or not border/margins overlap, collapse + A box's dimensions -->Has the following rules: + Dimensions of element: width + height + padding + border + margins + No height: a block element will be as high as the content it contains plus padding (unless there are floats) + No width: a non-floated block element will expand to fit the width of its parent minus padding + By default, the width and height at of the content area itself (except in old IE)

How do you optimize your webpages for print?

--> Create a stylesheet for print + <link rel="stylesheet" href="#$" media="print"/> + Format heading and paragraph tags, links and tables + clear unnecessary contents and images like navigation and background images + Do dark text on a white background + Include page URL --> Use media queries +@media print{} --> Add page breaks +In css you write page-break-before: always

Are you familiar with styling SVG?

--> First optimize it if you made it in illustrator, etc. (http://petercollingridge.appspot.com/svg-optimiser) or (https://github.com/svg/svgo - can get a sketch plugin for this!) --> Give everything classnames in the SVG file --> Add the classnames to a css stylesheet and pull the styles out of the SVG file

What are some of the "gotchas" for writing efficient CSS?

--> Get rid of html tags you don't need --> Get rid of un-needed spaces, tabs, carriage returns - minifying does that --> Get rid of un-needed semi-colons - minifying does that --> Be careful about resets - might have extra --> Gzip your CSS --> Put stylesheets at the Top of the head --> Always use an external stylesheet -->Don't use @import for stylesheets --> Don't use CSS expressions - just use real javascript if you need to --> Make sure CSS ends up in one file --> Know different browsers have different CSS hacks --> Cater for mobile devices/small screen size --> Avoid key selectors that match large numbers of elements (tag and universal selectors *) → the shorter the length of the selector chain, the faster the browser can determine if that element matches the selector

Have you ever used a grid system or css framework, and if so, what do you prefer?

--> I have tried bootstrap, but wasn't a big fan since it was so heavy and looked like other websites. -->I am interested in trying: +Bulma: based on flexbox and SASS,lightweight, NO JS +UIkit: based on flexbox and SASS, lightweight +React Toolbox: bootstraps a react project with Material Design Components +MaterializeCSS: --Not super lightweight as it depends on jquery -->I have not tried making my own grid system, but I think using a grid for layout would be a cool thing to try and useful.

Explain CSS sprites, and how you would implement them on a page or site.

--> Method of combining multiple images used throughout your website into one big image. --> Can then use the proper background-position CSS attribute to load the particular image you want from your CSS sprite using the X and Y coordinates +background: url(...) x-axis y-axis; --> Saves on multiple HTTP requests, but can be a pain to compile as any changes to the sprite images will need to have the CSS updated with any new positions --> I would use a CSS-sprite online generator or sprity npm module to create it

What are the three positioning schemes?

--> Normal flow: includes block formatting of block-level boxes, inline-formatting of inline-level boxes and relative positioning of block-level and inline-level boxes --> Floats: a box is first laid out according to the normal flow and then taken out of the flow and shifted to the left or right as far as possible --> Absolute positioning: box is removed from the normal flow entirely (has no impact on later siblings) and assigned a position with respect to a containing block ---Note: an element is called out of flow if it is floated, absolutely positioned or the root element

What are some good things BFC can do?

--> Prevents margin collapsing (if they are in different BFC) --> stops content wrapping floats --> contains floats without needing to use a clear-fix --> allows for multi-column layouts (though flexbox is better for this)

What are your favourite image replacement techniques and which do you use when?

--> Replacing a normal text element with an image like a header with a logo --> Was back in the day before web fonts and SVGs→ not as relevant now --> I would likely just make a SVG honestly, but if I was to choose one, I would probably use H5BP Image Replacement 2 because it hides the element while remaining accessible to screen readers -less hacky! +h3.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } +NOTE: a better version of this now would be: .screen-reader-only { position: absolute; height: 1px; width: 1px; clip: rect(1px 1px 1px 1px); // IE 6 and 7 clip: rect(1px,1px,1px,1px); clip-path: polygon(0px 0px, 0px 0px, 0px 0px); -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px); overflow: hidden !important; } -->This is because clip is deprecated, but clip-path isn't fully accepted yet.

What's the difference between "resetting" and "normalizing" CSS? Which would you choose, and why?

--> Resetting: remove all native styles provided by browsers --> Normalizing: Make the browser style consistent --> I tend to choose Resetting and I use Eric Meyer's stylesheet to do so. I am looking into HTML5 Doctor Reset CSS though. -It makes more sense in my head if everything starts off at zero. You're not sitting there wondering why something is 2 px off because a margin wasn't reset to 0.

How is responsive design different from adaptive design?

--> Responsive: + there is one basic layout and it changes responsively to screen changes + Uses media queries, flexible grids, responsive images --> Adaptive: + For each possible screen size, there is a distinct layout + Detects the device and other features- then provides the appropriate feature and layout based on predefined set of viewport sizes and other char.

Have you ever worked with retina graphics? If so, when and what techniques did you use?

--> Retina graphics: double density pixel screen + Doesn't break website, but they look fuzzy and pixels show + https://www.sitepoint.com/css-techniques-for-retina-displays/ + @media only screen and (min-device-pixel-ratio: 2) {} --Change the image to a higher res one for this type of media + For icons - use SVGs so they are always crisp + Use @font-face instead of images icon (replace icons with text) + Use javascript to replace all the images with double sized images +use picture element for responsive images

What's the difference between block, inline and inline-block?

--> Size: +Block: fills up width of the parent container +Inline-block/Inline: depends on content -->Positioning: +Block: Starts on new line and tolerates no HTML elements next to it (Except when floating) +Inline-block/Inline: Flows along with other content and allows other elements beside --> Can specify width/height? +Block/Inline-Block: Yes +Inline: No - will ignore -->Can be aligned with vertical-align? +Block: No +Inline-Block/Inline: Yes --> Margins/Padding: +Block/Inline-Block: All sides respected +Inline: Only horizontal sides respected. Vertical sides do not affect layout --> Float: +Inline: Becomes like a block element where you can set vertical margins and padding

List as many values for the position property that you can remember.

--> Static: default value + Not affected by top/bottom/left/right properties + Always positioned according to the normal flow of the page --> Relative: positioned relative to its normal position + Setting top/right/bottom/left properties will cause it to be adjusted away from its normal position + Other content will not be adjusted to fit into any gap left by it +Acts as a point of reference for child elements --> Fixed: positioned relative to the viewport - always stays in the same place even if the page scrolls + Top/right/bottom/left properties are used to position it + Does not leave a gap in the page where it would normally have been located --> Absolute: positioned relative to the nearest positioned ancestor + If it has no positioned (anything except static) ancestors, it uses the document body and moves along with page scrolling + Is removed from the flow of the page + Can have margins and they do not collapse with any other margin. --> Sticky: positioned based on the user's scroll position + Toggles between relative and fixed depending on the scroll position + Must specify at least one of top/right/bottom/left for sticky to work + Note: IE, Edge 15 and earlier do not support sticky + Note: Safari requires a -webkit- prefix

What are the different ways to visually hide content (and make it available only for screen readers)?

--> Text indent: .element-invisible { text-indent: -9999em; outline: 0; } +Doesn't work with RTL languages -->Position Absolute and Collapsed: .element-invisible { height: 0; overflow: hidden; position: absolute; } +Apple's Voice Over will not read content within an element that has zero height -->Position Absolute and Offscreen: .element-invisible { position: absolute; top: -999999em; left: auto; width: 1px; height: 1px; overflow:hidden; } +If you have focusable content within the positioned element, the page will scroll to that element -->Clip Method: .element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } +Clip is deprecated - need to use clip-path soon (but that's also not fully supported yet) +Problem with webkit (safari and chrome) and opera where if the element when unclipped is large enough to force a horizontal scrollbar, it will force a scrollbar even when clipped --> NOTE: If you do visibility:hidden, display:none or width, height:0px screen-readers won't see it Final solution: do a mixture: .screen-reader-only { position: absolute; height: 1px; width: 1px; clip: rect(1px 1px 1px 1px); // IE 6 and 7 clip: rect(1px,1px,1px,1px); clip-path: polygon(0px 0px, 0px 0px, 0px 0px); -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px); overflow: hidden !important; }

What does * { box-sizing: border-box; } do? What are its advantages?

--> Used to alter the default CSS box model used to calculate widths and heights of elements --> It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification --> By default, elements have box-sizing: content-box applied --> Other values of this are: + Content-box: includes only content + Padding-box: includes up to padding (not often used) + Border-box: includes up to border, but not margin --> Advantages: + don't have to worry about overflowing out of a parent with 100% width, etc. + Force all elements to adopt a specific model to unify element width calculations regardless to browsers

Explain how a browser determines what elements match a CSS selector.

--> When the browser parses HTML, it constructs an internal document tree representing all the elements to be displayed --> It then matches elements to styles specified in various stylesheets according to the standard CSS cascade, inheritance and ordering rules --> Engine evaluates each rule from right to left - if you use more specific selectors (like classes or ids) it will find it faster. +First find the children, then the parents --> Ex: For example with this selector p span, browsers firstly find all the <span> elements, and traverse up its parent all the way up to the root to find the <p> element. For a particular <span>, as soon as it finds a <p>, it knows that the <span> matches and can stop its matching.

Describe z-index and how stacking context is formed.

--> Z-index tells use how elements should be vertically (perp to screen) stacked on a screen - positive is higher +Only affects elements that have a position value that is not static --> Without z-index value, elements stack in the order they appear in the DOM (lowest appears on top) --> Elements with non-static positioning and their children will always appear on top of elements with default static positioning --> Stacking context: is an element that contains a set of layers + Z-index values of its children are set relative to that element, not the document root + Layers outside of that context can't sit between layers within it + Each stacking context is self-contained

What are the various clearing techniques and which is appropriate for what context?

--> add clear:both to the parent element +need to know the succeeding element -->Empty div method +Some people do like this because it's adding something that doesn't have contextual meaning -->floating the container (or creating a BFC): +if you float an element with floats it will not collapse +Have to add a width of 100% so it forces a line-break before the content after it +issues with dealing with more floats and padding issues with 100% width -->Overflow Method (or creating a BFC) +setting the overflow CSS property on a parent element to auto or hidden +does not add elements +can cause issues with scrollbars or clipping -->The Easy Clearing Method +add CSS pseudo selector (:after) to clear float +.clearfix:after { content: ' '; visibility: hidden; display: block; height: 0; clear: both; }

What are some of the "gotchas" for writing efficient CSS?

-Nesting too deeply (less than 5 deep) -using id's for multiple elements (or at all) -use efficient selectors: don't use * (universal selector) -specificity - use classes or ids over tags

List as many values for the display property that you can remember.

1. None: element is totally removed 2. Block: Element starts on a new line and takes up the whole width 3. Inline: Default value. Displays an element as an inline element + Height and width properties will have no effect 4. Inline-block: Element becomes an inline-level block container + Element itself is formatted as an inline element, but you can apply height and width values 5. Flex: Element becomes a block-level flex container 6. Inline-Flex: Elements becomes an inline-level flex container 7. Table: Element behaves like a <table> element 8. Table-caption: Element behaves like a <caption> element Table-/column-group/header-group/footer-group/row-group/cell/column/row: behaves like a <colgroup>/<thead>/<tfoot>/<td>/<col>/<tr> element 9. Inline-Table: Element becomes an inline-level table 10. Initial: Sets this property to its default value 11. Inherit: Inherits this property from its parent 12. List-item: Element behaves like a <li> element 13. Run-in: Displays an element as either block or inline, depending on context

Describe pseudo-elements and discuss what they are used for.

A CSS pseudo-class is a keyword added to selectors that specify a special state of the element to be selected like :hover --> Is a keyword added to a selector that lets you style a specific part of the element --> Can be used for decoration (:first-line, :first-letter) --> Can bed used for adding elements to the markup (combined with content:...) --> Used in the .clearfix hack to as a zero-space element with clear:both --> Triangular arrows in tooltips use :before and :after- encourages separation of concerns because the triangle is considered part of styling and not really the DOM

What are the benefits of mobile-first strategy?

A mobile-first strategy is also responsive, however it agrees we should default and define all the styles for mobile devices, and only add specific responsive rules to other devices later. Following the previous example: A mobile-first strategy has 2 main advantages: It's more performant on mobile devices, since all the rules applied for them don't have to be validated against any media queries. It forces to write cleaner code in respect to responsive CSS rules.

What's the difference between pseudo classes and pseudo elements? Give examples

A pseudo-class is used to define a special state of an element. They are things like :hover, :visited, :active, :focus, :checked, :nth-child(n). eg. .card:hover{ color: blue; } A CSS pseudo-element is used to style specified parts of an element. Several pseudo-elements can be combined. There are only five: ::after, ::before, ::first-line, ::first-letter, ::selection. eg. p.info::first-letter{ color: red; };

Explain CSS sprites, and how you would implement them on a page or site.

A way to reduce HTTP requests by combining images together into one big image so you only have to request that one. 2) Whether using photoshop or sprite generator, the idea is to cram all the images into one big image, usually separated by a pixel. 3) In the css, give the background image a sprite class that you use for all your image elements. 4) To specify a specific image or icon, set another class with the background positions and sizes of the image. CSS sprites combine multiple images into one single larger image. It is commonly used technique for icons (Gmail uses it). Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it. Each image would have a corresponding CSS class with background-image, background-position and background-size properties defined. To use that image, add the corresponding class to your element.

What are the advantages/disadvantages of using CSS preprocessors?

Advantages: -Nested syntax. -Ability to define variables. -Ability to define mixins. -Mathematical functions. -Operational functions (such as "lighten" and "darken") -Joining of multiple files. Disadvantages -Have to compile -debugging is harder

What existing CSS frameworks have you used locally, or in production? How would you change/improve them?

Bootstrap - Slow release cycle. Bootstrap 4 has been in alpha for almost 2 years. Add a spinner button component, as it is widely used. Bulma - A lot of non-semantic and superfluous classes and markup required. Not backward compatible. Upgrading versions breaks the app in subtle manners.

What is CSS?

CSS stands for Cascading Style Sheets. CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. CSS was intended to allow web professionals to separate the content and structure of a website's code from the visual design.

Explain CSS Flexbox or Grid specs

Flexbox is mainly meant for 1-dimensional layouts while Grid is meant for 2-dimensional layouts. Flexbox solves many common problems in CSS, such as vertical centering of elements within a container, sticky footer, etc. Bootstrap and Bulma are based on Flexbox, and it is probably the recommended way to create layouts these days. Have tried Flexbox before but ran into some browser incompatibility issues (Safari) in using flex-grow, and I had to rewrite my code using inline-blocks and math to calculate the widths in percentages, it wasn't a nice experience. #sidebar { float: right; // left right none inherit } Grid is by far the most intuitive approach for creating grid-based layouts (it better be!) but browser support is not wide at the moment.

Describe floats and how they work

Float is a CSS positioning property. Floated elements remain a part of the flow of the web page. This is distinctly different than page elements that use absolute positioning. Absolutely positioned page elements are removed from the flow of the webpage. The CSS clear property can be used to be positioned below left/right/both floated elements. - Float is a CSS positioning property - Floated elements are a part of the flow of the page and affect the positioning of other elements - Four valid values: left, right, none (default- element won't float) and inherit (assumes float value from parent element)

What is the difference between classes and IDs in CSS?

IDs — Meant to be unique within the document. Can be used to identify an element when linking using a fragment identifier. Elements can only have one id attribute. Classes — Can be reused on multiple elements within the document. Mainly for styling and targeting elements.

What does the "only" do in @media only screen and (max-width:632px)?

It keeps old browsers from parsing the rest of the statement

Are CSS properties case-sensitive?

No

What are the advantages of using CSS sprites?

Reduce the number of HTTP requests for multiple images (only one single request is required per spritesheet). But with HTTP2, loading multiple images is no longer much of an issue. Advance downloading of assets that won't be downloaded until needed, such as images that only appear upon :hover pseudo-states. Blinking wouldn't be seen.

Explain the CSS "box model" and the layout components that it consists of

The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following: Content - The content of the box, where text and images appear Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content) Border - A border surrounding the padding (if any) and content Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements) The dimensions of a block element are calculated by width, height, padding, borders, and margins. If no height is specified, a block element will be as high as the content it contains, plus padding (unless there are floats, for which see below). If no width is specified, a non-floated block element will expand to fit the width of its parent minus padding. The height of an element is calculated by the content's height. The width of an element is calculated by the content's width. By default, paddings and borders are not part of the width and height of an element.

What is DOM (Document Object Model) and how is it linked to CSS?

The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document. With the Document Object Model, programmers can create and build documents, navigate their structure, and add, modify, or delete elements and content. The DOM specifies interfaces which may be used to manage XML or HTML documents. When a browser displays a document, it must combine the document's content with its style information. The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style.

What does this line do? div{ position: sticky; top: 50px; }

The div will stay where it's originally set if the user doesn't scroll. But if the user scrolls down, the that div will maintain the position of being 50px from the top of the page.

What is the purpose of the z-index?

The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero, and can take on either a positive or negative number. An element with a higher z-index is always stacked above than a lower index.

Explain the three main ways to apply CSS styles to a web page

Using the inline style attribute on an element Using a <style> block in the <head> section of your HTML <div> <p style="color: maroon;"></p> </div> <head> <title>CSS Refresher</title> <style> body { font-family: sans-serif; font-size: 1.2em; } </style> </head> Loading an external CSS file using the <link> tag <head> <title>CSS Refresher</title> <link rel="stylesheet" href="/css/styles.css" /> </head>

What is a CSS rule?

Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from: A set of properties, which have values set to update how the HTML content is displayed, A selector, which selects the element(s) you want to apply the updated property values to. A set of CSS rules contained within a stylesheet determines how a webpage should look.

Have you played around with the new CSS Flexbox or Grid specs?

Yes! Flexbox is used for 1d things like nav bars etc. It found it really useful for centering things. I wouldn't say it would be the best to use for a layout though. CSS Grid is great for 2d layouts. I haven't used it a ton because it isn't fully supported yet, but I am really interested in using it in a project.

What does flex: 1 do?

flex property is a shorthand for the flex-grow, flex-shrink, and the flex-basis properties flex-grow : 1; ➜ The div will grow in same proportion as the window-size flex-shrink : 1; ➜ The div will shrink in same proportion as the window-size flex-basis : 0; ➜ The div does not have a starting value as such and will take up screen as per the screen size available for e.g:- if 3 divs are in the wrapper then each div will take 33%.

Is there any reason you'd want to use translate() instead of absolute positioning, or vice-versa? And why?

translate() is a value of CSS transform. Changing transform or opacity does not trigger browser reflow or repaint but does trigger compositions; whereas changing the absolute positioning triggers reflow. transform causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence translate() is more efficient and will result in shorter paint times for smoother animations. When using translate(), the element still occupies its original space (sort of like position: relative), unlike in changing the absolute positioning.

:checked pseudo-class affects options, checkbox and radio

true

Pseudo-class :root always refers to the <html> element

true