{"id":15041283,"url":"https://github.com/learning-zone/css-basics","last_synced_at":"2025-04-12T22:36:56.555Z","repository":{"id":38616961,"uuid":"137780920","full_name":"learning-zone/css-basics","owner":"learning-zone","description":"CSS Basics ( CSS-3 )","archived":false,"fork":false,"pushed_at":"2022-11-30T04:19:36.000Z","size":9889,"stargazers_count":783,"open_issues_count":0,"forks_count":252,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-04T02:08:14.939Z","etag":null,"topics":["css","css-preprocessors","css-property","css-sprites","css3-flexbox","css3-grid","css3-interview-questions","less","pseudo-elements","scss"],"latest_commit_sha":null,"homepage":"https://learning-zone.github.io/css-interview-questions/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/learning-zone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-18T16:56:40.000Z","updated_at":"2025-04-02T06:39:09.000Z","dependencies_parsed_at":"2023-01-22T02:17:50.119Z","dependency_job_id":null,"html_url":"https://github.com/learning-zone/css-basics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fcss-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fcss-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fcss-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learning-zone%2Fcss-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learning-zone","download_url":"https://codeload.github.com/learning-zone/css-basics/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248642992,"owners_count":21138353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-preprocessors","css-property","css-sprites","css3-flexbox","css3-grid","css3-interview-questions","less","pseudo-elements","scss"],"created_at":"2024-09-24T20:45:52.756Z","updated_at":"2025-04-12T22:36:56.525Z","avatar_url":"https://github.com/learning-zone.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Basics\n\n\u003e *Click \u0026#9733; if you like the project. Your contributions are heartily ♡ welcome.*\n\n\u003cbr/\u003e\n\n## Table of Contents\n\n* [CSS Coding Practice](css-practice.md)\n* [CSS3 Properties](css3-properties.md)\n* [SCSS Basics](https://github.com/learning-zone/scss-basics)\n* [CSS Multiple Choice Questions](css-multiple-choice-questions.md)\n\n\u003cbr/\u003e\n\n## Q. What is CSS?\n\n**CSS** stands for **Cascading Style Sheets**. CSS is used to define styles for 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.\n\nCSS can be used for document text styling — for example changing the color and size of headings and links. It can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation.\n\n**Example:**\n\n```css\nh1 {\n  color: red;\n  font-size: 5em;\n}\n\np {\n  color: black;\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the use of css ruleset?\n\nCSS is a rule or set of rules that describe the formatting (change of appearance) of individual elements on a web page. The rule consists of two parts: the selector and the next declaration block. The image below shows the structure (syntax) of the rule:\n\n```css\ndiv {\n  color: blue;\n  text-align: justify;\n}\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/images/css-rule.png\" alt=\"CSS rule\" width=\"500px;\" /\u003e\n\u003c/p\u003e\n\n* The first is always the **selector**, it tells the browser which element or elements of the web page will be styled.\n* Next is the **declaration block**, which begins with the opening curly brace { and ends with the closing }, between the curly braces are specified formatting commands (declarations), which are used by the browser to stylize the selected selector element.\n* Each **declaration** consists of two parts: the property and its value. The declaration must always end with a semicolon (;). You can omit the ; only at the end of the last declaration before the closing curly brace.\n* A **property** is a formatting command that defines a specific style effect for an element. Each property has its own predefined set of values. After the property name, a colon is specified, which separates the property name from the valid value.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are the possible ways to apply CSS styles to a web page?\n\nThere are three ways to apply CSS to HTML: Inline, internal, and external.\n\n**1. Inline CSS:**\n\nInline CSS is specified directly in the opening tag of the element you want it to apply to. It is entered into the style attribute within HTML. This allows CSS properties on a \"per tag\" basis.\n\n**Example:**\n\n```html\n\u003cp style=\"font-weight:bold;\"\u003eBold Font\u003c/p\u003e\n```\n\nThis CSS type is not really recommended, as each HTML tag needs to be styled individually. However, inline CSS in HTML can be useful in some situations. For example, in cases where you don\\'t have access to CSS files or need to apply styles for a single element only.\n\n**2. Internal CSS:**\n\nInternal or Embedded, styles are used for the whole page. Inside the head element, the style tags surround all of the styles for the page.\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eInternal CSS Example\u003c/title\u003e\n  \u003cstyle\u003e\n    p {\n        color: red;\n    }\n    \n    a {\n        color: blue;\n    }\n\u003c/style\u003e\n...\n```\n\nThis CSS style is an effective method of styling a single page. However, using this style for multiple pages is time-consuming as you need to put CSS rules to every page of your website.\n\n**3. External CSS:**\n\nIn external CSS rules are stored in a separate file. To refer to that file from the HTML page, add the link element (and its closing element within XHTML) to the head element. This CSS type is a more efficient method, especially for styling a large website. By editing one **.css** file, you can change your entire site at once.\n\n**style.css:**\n\n```css\n  p {\n      color: red;\n  }\n  \n  a {\n      color: blue;\n  }\n```\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eExternal CSS Example\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"style.css\"\u003e\n...\n```\n\nThe link element in the example has three attributes. The first, `rel`, tells the browser the type of the target of the link. The second, `type`, tells the browser what type of stylesheet it is. And the third, `href`, tells the browser under which URL to find the stylesheet.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What does the cascading portion of CSS mean?\n\nThe **cascading** in CSS refers to the fact that styling rules \"cascade\" down from several sources. This means that CSS has an inherent hierarchy and styles of a higher precedence will overwrite rules of a lower precedence.\n\nEven the simplest HTML document may have three or more style sheets associated with it including:\n\n* The browser\\'s style sheet\n* The user\\'s style sheet\n* The author\\'s style sheet\n\n**1. Browser style sheets:**\n\nBrowsers apply style sheets to all web documents. Although these style sheets vary from browser to browser, they all have common characteristics such as black text, blue links, purple visited links etc. These are referred to as a \"default\" browser stylesheet.\n\nAs soon as you, the author, apply a style sheet to a document, it will override the browser\\'s style sheet. This is because author style sheets will always override browser style sheets.\n\n**2. User style sheets:**\n\nMost modern browsers allow users to set their own style sheets within their browser. These style sheets will override the browsers default style sheets - for that user only.\n\n**3. Author style sheets:**\n\nAs soon as you apply a basic style sheet or an inline style to a page, you have added what is referred to as an \"author style sheet\". Everything you do, from choosing fonts, colours and laying out pages in CSS is done using author style sheets.\n\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain new features in CSS3?\n\n**1. CSS3 Selectors:**\n\n* Matches any element **E** whose attribute **attr** starts with the value **val**. In other words, the val matches the beginning of the attribute value.\n\n```css\nE[attr^=val]\n/* Example */\na[href^='http://sales.']{color: teal;}\n```\n\n* Matches any element **E** whose attribute **attr** ends in **val**. In other words, the val matches the end of the attribute value.\n\n```css\nE[attr$=val]\n/* Example */\na[href$='.jsp']{color: purple;}\n```\n\n* Matches any element **E** whose attribute **attr** matches **val** anywhere within the attribute. It is similar to E[attr~=val], except the val can be part of a word.\n\n```css\nE[attr*=val]  \n/* Example */\nimg[src*='artwork']{\n        border-color: #C3B087 #FFF #FFF #C3B087;\n}\n```\n\n**2. Pseudo-classes:**\n\nCSS2 supports user interaction pseudo-classes, namely `:link`, `:visited`, `:hover`, `:active`, and `:focus`.  \nA few more pseudo-class selectors were added in CSS3. One is the `:root` selector, which allows designers to point to the root element of a document.\n\n```css\n  :root{overflow:auto;}\n```\n\nAs a complement to the `:first-child` selector, the `:last-child` was added. With it one can select the last element named of a parent element.\n\n```css\n  div.article \u003e p:last-child{font-style: italic;}\n```\n\nA new user interaction pseudo-class selector was added, the `:target` selector.\n\n```html\n\u003cstyle\u003e\n  span.notice:target { font-size: 2em; font-style: bold; }\n\u003c/style\u003e\n\n\u003ca href='#section2'\u003eSection 2\u003c/a\u003e\n\u003cp id='section2'\u003e...\u003c/p\u003e\n```\n\nThe negation pseudo-class selector, `:not` can be coupled with almost any other selector that has been implemented.\n\n```css\n  img:not([border]){ border: 1; }\n```\n\n**3. CSS3 Colors:**\n\nThe color keyword list has been extended in the CSS3 color module to include 147 additional keyword colors (that are generally well supported), CSS3 also provides us with a number of other options: **HSL**, **HSLA**, **RGBA** and **Opacity**.\n\n```css\ndiv.halfopaque {\n  background-color: rgb(0, 0, 0);\n  opacity: 0.5;\n  color: #000000;\n}\ndiv.halfalpha {\n  background-color: rgba(0, 0, 0, 0.5);\n  color: #000000;\n}\n```\n\n**4. Rounded Corners: border-radius:**\n\n```css\nborder-radius: 25px;\n```\n\n**5 Drop Shadows:**\n\n```css\nbox-shadow: 2px 5px 0 0 rgba(72,72,72,1);\n```\n\n**6. Text Shadow:**\n\n```css\ntext-shadow: topOffset leftOffset blurRadius color;\n```\n\n**7. Linear Gradients:**\n\n```css\n#grad {\n  background: linear-gradient(to right, red, yellow);\n}\n```\n\n**8. Radial Gradients:**\n\n```css  \n#grad {\n  background: radial-gradient(red, yellow, green);\n}//Default       \n#grad {\n  background: radial-gradient(circle, red, yellow, green);\n}//Circle\n```\n\n**9. Multiple Background Images:**\n\nIn CSS3, there\\'s no need to include an element for every background image; it provides us with the ability to add more than one background image to any element, even to pseudo-elements.\n\n```css\nbackground-image:\nurl(firstImage.jpg),\nurl(secondImage.gif),\nurl(thirdImage.png);\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are the css selectors?\n\nA CSS selector is the part of a CSS rule set that actually selects the content you want to style.\n\n**i) Universal Selector**: The universal selector works like a wild card character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Each set of tags represents an element on the page.\n\n```css\n* {\n   color: green;\n   font-size: 20px;\n   line-height: 25px;\n}\n```\n\n**ii) Element Type Selector**: This selector match one or more HTML elements of the same name.\n\n```css\nul {\n   list-style: none;\n   border: solid 1px #ccc;\n}\n```\n\n```html\n\u003cul\u003e\n  \u003cli\u003eFish\u003c/li\u003e\n  \u003cli\u003eApples\u003c/li\u003e\n  \u003cli\u003eCheese\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003cdiv class=\"example\"\u003e\n  \u003cp\u003eExample paragraph text.\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cul\u003e\n  \u003cli\u003eWater\u003c/li\u003e\n  \u003cli\u003eJuice\u003c/li\u003e\n  \u003cli\u003eMaple Syrup\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n**iii) ID Selector**: This selector matches any HTML element that has an ID attribute with the same value as that of the selector.\n\n```css\n#container {\n   width: 960px;\n   margin: 0 auto;\n}\n```\n\n```html\n\u003cdiv id=\"container\"\u003e\u003c/div\u003e\n```\n\n**iv) Class Selector**: The class selector also matches all elements on the page that have their class attribute set to the same value as the class.\n\n```css\n.box {\n   padding: 20px;\n   margin: 10px;\n   width: 240px;\n}\n```\n\n```html\n\u003cdiv class=\"box\"\u003e\u003c/div\u003e\n```\n\n**v) Descendant Combinator**: The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method.\n\n```css\n#container .box {\n   float: left;\n   padding-bottom: 15px;\n}\n```\n\nThis declaration block will apply to all elements that have a class of box that are inside an element with an ID of `container`. It’s worth noting that the `.box` element doesn’t have to be an immediate child: there could be another element wrapping `.box`, and the styles would still apply.\n\n```html\n\u003cdiv id=\"container\"\u003e\n  \u003cdiv class=\"box\"\u003e\u003c/div\u003e\n\n  \u003cdiv class=\"box-2\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"box\"\u003e\u003c/div\u003e\n```\n\n**vi) Child Combinator**: A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements.\n\n```css\n#container \u003e .box {\n   float: left;\n   padding-bottom: 15px;\n}\n```\n\nThe selector will match all elements that have a class of `box` and that are immediate children of the `#container` element. That means, unlike the descendant combinator, there can’t be another element wrapping `.box`—it has to be a direct child element.\n\n```html\n\u003cdiv id=\"container\"\u003e\n  \u003cdiv class=\"box\"\u003e\u003c/div\u003e\n\n  \u003cdiv\u003e\n    \u003cdiv class=\"box\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**vii) General Sibling Combinator**: A selector that uses a general sibling combinator matches elements based on sibling relationships. The selected elements are beside each other in the HTML.\n\n```css\nh2 ~ p {\n   margin-bottom: 20px;\n}\n```\n\nIn this example, all paragraph elements (`\u003cp\u003e`) will be styled with the specified rules, but only if they are siblings of `\u003ch2\u003e` elements. There could be other elements in between the `\u003ch2\u003e` and `\u003cp\u003e`, and the styles would still apply.\n\n```html\n\u003ch2\u003eTitle\u003c/h2\u003e\n\u003cp\u003eParagraph example.\u003c/p\u003e\n\u003cp\u003eParagraph example.\u003c/p\u003e\n\u003cp\u003eParagraph example.\u003c/p\u003e\n\u003cdiv class=\"box\"\u003e\n  \u003cp\u003eParagraph example.\u003c/p\u003e\n\u003c/div\u003e\n```\n\n**viii) Adjacent Sibling Combinator**: A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling.\n\n```css\np + p {\n   text-indent: 1.5em;\n   margin-bottom: 0;\n}\n```\n\nIn this example will apply the specified styles only to paragraph elements that immediately follow other paragraph elements. This means the first paragraph element on a page would not receive these styles. Also, if another element appeared between two paragraphs, the second paragraph of the two wouldn’t have the styles applied.\n\n```html\n\u003ch2\u003eTitle\u003c/h2\u003e\n\u003cp\u003eParagraph example.\u003c/p\u003e\n\u003cp\u003eParagraph example.\u003c/p\u003e\n\u003cp\u003eParagraph example.\u003c/p\u003e\n\n\u003cdiv class=\"box\"\u003e\n  \u003cp\u003eParagraph example.\u003c/p\u003e\n  \u003cp\u003eParagraph example.\u003c/p\u003e\n\u003c/div\u003e\n```\n\n**ix) Attribute Selector**: The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets\n\n```css\ninput[type=\"text\"] {\n   background-color: #444;\n   width: 200px;\n}\n```\n\n```html\n\u003cinput type=\"text\"\u003e\n```\n\nThe attribute selector can also be declared using just the attribute itself, with no value, like this:\n\n```css\ninput[type] {\n   background-color: #444;\n   width: 200px;\n}\n```\n\n**x) Pseudo-class**: A pseudo-class uses a colon character to identify a pseudo-state that an element might be in—for example, the state of being hovered, or the state of being activated.\n\n```css\na:hover {\n   color: red;\n}\n```\n\n**xi) Pseudo-element**: A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to:\n\n* Style the first letter, or line, of an element\n* Insert content before, or after, the content of an element \n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cstyle\u003e\n      p::first-line {\n        color: #ff0000;\n        font-variant: small-caps;\n      }\n\n      p::first-letter {\n        color: #ff0000;\n        font-size: xx-large;\n      }\n\n      h1::before {\n        content: url(smiley.gif);\n      }\n\n      h1::after {\n        content: url(smiley.gif);\n      }\n\n      ::selection {\n        color: red;\n        background: yellow;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n\u003cbody\u003e\n  \u003cp\u003eLorem Ipsum is simply dummy text of the printing and typesetting industry.\n  Lorem Ipsum has been the industry\\'s standard dummy text ever since the 1500s,\n  \u003ch1\u003ewhen an unknown printer took a galley of type and scrambled it to make a\n  type specimen book.\u003ch1\u003e\u003c/p\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [CSS Selectors](https://learning-zone.github.io/css-interview-questions/assets/files/selector.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is contextual selector?\n\nContextual selector addresses specific occurrence of an element. It is a string of individual selectors separated by white space (search pattern), where only the last element in the pattern is addressed providing it matches the specified contex.\n\nIt also check the context of the class in the html tree, assigning the style to the element through a specific route, taking into account the order of depth in the tree.\n\n**Example:**\n\n```css\ntable p { property: value; } \n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the difference between Pseudo-classes and pseudo-elements?\n\nA pseudo-class is a selector that assists in the selection of something that cannot be expressed by a simple selector, for example `:hover`. A pseudo-element however allows us to create items that do not normally exist in the document tree, for example `::after`.\n\n**Pseudo-classes:**  \n\nPseudo-classes select regular elements but under certain conditions, like when their position relative to siblings or when they\\'re under a particular state. Here is a list of pseudo-classes in CSS3:\n\n**a) Dynamic pseudo-classes:**  \n\n* :link\n* :visited\n* :hover\n* :active\n* :focus\n\n**b) UI element states pseudo-classes:**  \n\n* :enabled\n* :disabled\n* :checked\n\n**c) Structural pseudo-classes:**  \n\n* :first-child\n* :nth-child(n)\n* :nth-last-child(n)\n* :nth-of-type(n)\n* :nth-last-of-type(n)\n* :last-child\n* :first-of-type\n* :last-of-type\n* :only-child\n* :only-of-type\n* :root\n* :empty\n\n**d) Other pseudo-classes:**  \n\n:not(x)\n:target\n:lang(language)\n\n**Pseudo-elements:**  \n\nPseudo-elements effectively create new elements that are not specified in the markup of the document and can be manipulated much like a regular element. \n\n* ::before\n* ::after\n* ::first-letter\n* ::first-line\n* ::selection\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is Combinator selector?\n\nA combinator is the character in a selector that connects two selectors together. There are four types of combinators. \n\n**a) Descendant Combinator (space)**: The descendant selector matches all elements that are descendants of a specified element.\n\nThe following example selects all `\u003cp\u003e` elements inside `\u003cdiv\u003e` elements:\n\n```css\ndiv p {\n  background-color: yellow;\n}\n```\n\n**b) Child Combinator (\u003e)**: The child selector selects all elements that are the children of a specified element.\n\nThe following example selects all `\u003cp\u003e` elements that are children of a `\u003cdiv\u003e` element:\n\n```css\ndiv \u003e p {\n  background-color: yellow;\n}\n```\n\n**c) Adjacent Sibling Combinator (+)**: The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.\n\nThe following example selects all `\u003cp\u003e` elements that are placed immediately after `\u003cdiv\u003e` elements:\n\n```css\ndiv + p {\n  background-color: yellow;\n}\n```\n\n**d) General Sibling Combinator (~)**: The general sibling selector selects all elements that are siblings of a specified element.\n\nThe following example selects all `\u003cp\u003e` elements that are siblings of `\u003cdiv\u003e` elements:\n\n```css\ndiv ~ p {\n  background-color: yellow;\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the difference between class selectors and id selectors?\n\nIn the CSS, a class selector is a name preceded by a full stop (\".\") and an ID selector is a name preceded by a hash character (\"#\"). The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.\n\n```css\n#top {\n    background-color: #ccc;\n    padding: 20px\n}\n\n.intro {\n    color: red;\n    font-weight: bold;\n}\n```\n\n```html\n\u003cdiv id=\"top\"\u003e\n  \u003ch1\u003eWelcome to the CSS3 Tutorial\u003c/h1\u003e\n  \u003cp class=\"intro\"\u003eSelect element by class\u003c/p\u003e\n  \u003cp class=\"intro\"\u003eExample for class selector paragraph\u003c/p\u003e\n\u003c/div\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the difference between the “nth-child()” and “nth-of-type()” selectors?\n\nThe `nth-child()` pseudo-class is used to match an element based on a number, which represents the element\\'s position amongst it\\'s siblings. More specifically, the number represents the number of siblings that exist before the element in the document tree (minus 1).\n\n**Example:**\n\n```css\n.example :nth-child(4) { background: #ffdb3a; }\n```\n\n```html\n\u003cdiv class=\"example\"\u003e\n  \u003cp\u003eThis is a \u003cem\u003eparagraph\u003c/em\u003e.\u003c/p\u003e\n  \u003cp\u003eThis is a \u003cem\u003eparagraph\u003c/em\u003e.\u003c/p\u003e\n  \u003cp\u003eThis is a \u003cem\u003eparagraph\u003c/em\u003e.\u003c/p\u003e\n  \u003cdiv\u003eThis is a \u003cem\u003edivider\u003c/em\u003e.\u003c/div\u003e \u003c!-- Element to select --\u003e\n  \u003cdiv\u003eThis is a \u003cem\u003edivider\u003c/em\u003e.\u003c/div\u003e \n\u003c/div\u003e\n```\n\nThe `nth-of-type()` pseudo-class, like nth-child(), is used to match an element based on a number. This number, however, represents the element\\'s position within only those of its siblings that are of the same element type.\n\nThis number can also be expressed as a function, or using the keywords even or odd.\n\n```css\n.example p:nth-of-type(odd) { background: #ffdb3a; }\n```\n\n```html\n\u003cdiv class=\"example\"\u003e\n  \u003cp\u003eThis is a \u003cem\u003eparagraph\u003c/em\u003e.\u003c/p\u003e \u003c!-- Element to select --\u003e\n  \u003cp\u003eThis is a \u003cem\u003eparagraph\u003c/em\u003e.\u003c/p\u003e\n  \u003cp\u003eThis is a \u003cem\u003eparagraph\u003c/em\u003e.\u003c/p\u003e \u003c!-- Element to select --\u003e\n  \u003cdiv\u003eThis is a \u003cem\u003edivider\u003c/em\u003e.\u003c/div\u003e\n  \u003cdiv\u003eThis is a \u003cem\u003edivider\u003c/em\u003e.\u003c/div\u003e \u003c!-- Element to select --\u003e\n\u003c/div\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain CSS grid layout with example?\n\nCSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives. Like tables, grid layout enables us to align elements into columns and rows.\n\n**Basic Terminology:**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/images/grid-term.jpg\" alt=\"Grid Terminology\" width=\"500px;\" /\u003e\n\u003c/p\u003e\n\n* **Grid Item**: The grid container contains the grid items.\n* **Grid Line**: The grid line is either a vertical or horizontal grid line that makes up the structure of the grid.\n* **Grid Cell**: The smallest unit on a grid is referred to as a Grid cell. It is the space between the two adjacent rows and columns.\n* **Rows**: The grid row is the horizontal track of the grid.\n* **Columns**: The grid column is the vertical track of the grid.\n* **Gutter**: A gutter is a space between the rows and columns in the grid.\n\n**CSS Grid Properties:**\n\n|Property         |Description                       |\n|-----------------|----------------------------------|\n|column-gap\t      |Specifies the gap between the columns|\n|gap\t            |A shorthand property for the row-gap and the column-gap properties|\n|grid\t            |A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties|\n|grid-area\t      |Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties|\n|grid-auto-columns|Specifies a default column size|\n|grid-auto-flow\t  |Specifies how auto-placed items are inserted in the grid|\n|grid-auto-rows\t  |Specifies a default row size|\n|grid-column\t    |A shorthand property for the grid-column-start and the grid-column-end properties|\n|grid-column-end\t|Specifies where to end the grid item|\n|grid-column-gap\t|Specifies the size of the gap between columns|\n|grid-column-start|Specifies where to start the grid item|\n|grid-gap\t        |A shorthand property for the grid-row-gap and grid-column-gap properties|\n|grid-row\t        |A shorthand property for the grid-row-start and the grid-row-end properties|\n|grid-row-end\t    |Specifies where to end the grid item|\n|grid-row-gap\t    |Specifies the size of the gap between rows|\n|grid-row-start\t  |Specifies where to start the grid item|\n|grid-template\t  |A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties|\n|grid-template-areas|Specifies how to display columns and rows, using named grid items|\n|grid-template-columns\t|Specifies the size of the columns, and how many columns in a grid layout|\n|grid-template-rows\t    |Specifies the size of the rows in a grid layout|\n|row-gap\t         |Specifies the gap between the grid rows|\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eGrid Layout\u003c/title\u003e\n  \u003cstyle\u003e\n    .item1 {\n        grid-area: header;\n    }\n\n    .item2 {\n        grid-area: menu;\n    }\n\n    .item3 {\n        grid-area: main;\n    }\n\n    .item4 {\n        grid-area: right;\n    }\n\n    .item5 {\n        grid-area: footer;\n    }\n\n    .grid-container {\n        display: grid;\n        grid-template-areas:\n            'header header header header header header'\n            'menu main main main right right'\n            'menu footer footer footer footer footer';\n        grid-gap: 10px;\n        background-color: rgba(155, 249, 249);\n        padding: 10px;\n    }\n\n    .grid-container\u003ediv {\n        background-color: rgba(0, 150, 149);\n        text-align: center;\n        padding: 20px 0;\n        font-size: 30px;\n    }\n  \u003c/style\u003e\n  \u003c/head\u003e\n\u003cbody\u003e\n  \u003ch1\u003eGrid Layout\u003c/h1\u003e\n  \u003cp\u003eThis grid layout contains six columns and three rows:\u003c/p\u003e\n\n  \u003cdiv class=\"grid-container\"\u003e\n    \u003cdiv class=\"item1\"\u003eHeader\u003c/div\u003e\n    \u003cdiv class=\"item2\"\u003eMenu\u003c/div\u003e\n    \u003cdiv class=\"item3\"\u003emain\u003c/div\u003e\n    \u003cdiv class=\"item4\"\u003eRight\u003c/div\u003e\n    \u003cdiv class=\"item5\"\u003eFooter\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [Grid Layout](https://learning-zone.github.io/css-interview-questions/assets/files/grid-layout.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is CSS flexbox?\n\nThe Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will \"flex\" to different sizes to fill the space.\n\nBefore the Flexbox Layout module, there were four layout modes:\n\n* **Block**, for sections in a webpage\n* **Inline**, for text\n* **Table**, for two-dimensional table data\n* **Positioned**, for explicit position of an element\n\n**Flex Container:**\n\nAn area of a document laid out using flexbox is called a **flex container**. To create a flex container, we set the value of the area\\'s container\\'s `display` property to `flex` or `inline-flex`. As soon as we do this the direct children of that container become **flex items**.\n\n**Flexbox Terminology:**\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/images/flex-terminology.png\" alt=\"Flexbox Terminology\" width=\"500px;\" /\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Write all the properties of the flexbox?\n\n**The CSS Flexbox Container Properties:**\n\n|Property        |Values                                                            |\n|----------------|------------------------------------------------------------------|\n|display:        |flexbox, inline-flex;|\n|flex-direction: |row, row-reverse, column, column-reverse;|\n|flex-wrap:      |nowrap, wrap, wrap-reverse;|\n|flex-flow:      |\u003c‘flex-direction’\u003e, \u003c‘flex-wrap’\u003e|\n|justify-content:|flex-start, flex-end, center, space-between, space-around;|\n|align-items:    |flex-start, flex-end, center, baseline, stretch;|\n|align-content:  |flex-start, flex-end, center, space-between, space-around, stretch;|\n\n**The CSS Flexbox Properties:**\n\n|Property        |Values                                                  |\n|----------------|--------------------------------------------------------|\n|order:          |`\u003cinteger\u003e`;                        |\n|flex-grow:      |`\u003cnumber\u003e`; /* default 0 */         |\n|flex-shrink:    |`\u003cnumber\u003e`; /* default 1 */         |\n|flex-basis:     |`\u003clength\u003e`, auto; /* default auto */|\n|flex:           |none, [ \u003c'flex-grow'\u003e \u003c'flex-shrink'\u003e? || \u003c'flex-basis'\u003e ]|\n|align-self:     |auto, flex-start, flex-end, center, baseline, stretch;|\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003ctitle\u003eThe flex-direction Property\u003c/title\u003e\n    \u003cstyle\u003e\n        .flex-container {\n            display: flex;\n            flex-direction: column;\n            background-color: DodgerBlue;\n        }\n\n        .flex-container\u003ediv {\n            background-color: #f1f1f1;\n            width: 100px;\n            margin: 10px;\n            text-align: center;\n            line-height: 75px;\n            font-size: 30px;\n        }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch1\u003eThe flex-direction Property\u003c/h1\u003e\n    \u003cp\u003eThe \"flex-direction: column;\" stacks the flex items vertically (from top to bottom):\u003c/p\u003e\n\n    \u003cdiv class=\"flex-container\"\u003e\n        \u003cdiv\u003e1\u003c/div\u003e\n        \u003cdiv\u003e2\u003c/div\u003e\n        \u003cdiv\u003e3\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [flex-direction Property](https://learning-zone.github.io/css-interview-questions/assets/files/flexbox.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. When to use css grid and flexbox?\n\n* CSS Grid Layout is a **two-dimensional** system, meaning it can handle both columns and rows, unlike flexbox which is largely a **one-dimensional** system (either in a column or a row).\n* A core difference between CSS Grid and Flexbox is that — CSS Grid’s approach is **layout-first** while Flexbox’ approach is **content-first**. If you are well aware of your content before making layout, then blindly opt for Flexbox and if not, opt for CSS Grid.\n* Flexbox layout is most appropriate to the components of an application (as most of them are fundamentally linear), and **small-scale** layouts, while the Grid layout is intended for **larger-scale** layouts which aren’t linear in their design.\n* If you only need to define a layout as a row or a column, then you probably need flexbox. If you want to define a grid and fit content into it in two dimensions — you need the grid.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/images/flex.png\" alt=\"One-Dimensional\" /\u003e\n  \u003cimg src=\"assets/images/grid.png\" alt=\"Two-Dimensional\" /\u003e\n\u003c/p\u003e\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eGrid vs Flexbox Layout\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cstyle\u003e\n    /* Grid layout */\n    .row {\n        display: grid;\n        grid-template-columns: auto auto auto;\n        background-color: #2196f3;\n        padding: 5px;\n    }\n\n    .col-item {\n        background-color: rgba(255, 255, 255, 0.8);\n        border: 1px solid rgba(0, 0, 0, 0.8);\n        padding: 10px;\n        font-size: 30px;\n        text-align: center;\n    }\n\n    /* Flexbox layout */\n    .wrapper {\n        border: 2px solid #f76707;\n        border-radius: 5px;\n        background-color: #fff4e6;\n    }\n\n    .wrapper \u003e div {\n        border: 2px solid #ffa94d;\n        border-radius: 5px;\n        background-color: #ffd8a8;\n        padding: 1em;\n        color: #d9480f;\n    }\n\n    .wrapper {\n        display: flex;\n        width: 500px;\n        flex-wrap: wrap;\n    }\n\n    .wrapper \u003e div {\n        flex: 1 1 150px;\n    }\n  \u003c/style\u003e\n  \u003cbody\u003e\n    \u003cp\u003e\u003ch1\u003eGrid Layout Example\u003chr/\u003e\u003c/h1\u003e\u003c/p\u003e\n    \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col-item\"\u003eColumn - 1\u003c/div\u003e\n        \u003cdiv class=\"col-item\"\u003eColumn - 2\u003c/div\u003e\n        \u003cdiv class=\"col-item\"\u003eColumn - 3\u003c/div\u003e\n        \u003cdiv class=\"col-item\"\u003eColumn - 1\u003c/div\u003e\n        \u003cdiv class=\"col-item\"\u003eColumn - 2\u003c/div\u003e\n        \u003cdiv class=\"col-item\"\u003eColumn - 3\u003c/div\u003e\n        \u003cdiv class=\"col-item\"\u003eColumn - 1\u003c/div\u003e\n        \u003cdiv class=\"col-item\"\u003eColumn - 2\u003c/div\u003e\n        \u003cdiv class=\"col-item\"\u003eColumn - 3\u003c/div\u003e\n    \u003c/div\u003e\n\n    \u003cp\u003e\u003ch1\u003e\u003cbr/\u003eFlexbox Layout Example\u003chr/\u003e\u003c/h1\u003e\u003c/p\u003e\n    \u003cdiv class=\"wrapper\"\u003e\n        \u003cdiv\u003eOne\u003c/div\u003e\n        \u003cdiv\u003eTwo\u003c/div\u003e\n        \u003cdiv\u003eThree\u003c/div\u003e\n        \u003cdiv\u003eFour\u003c/div\u003e\n        \u003cdiv\u003eFive\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [CSS Grid and flexbox](https://learning-zone.github.io/css-interview-questions/assets/files/grid-flexbox-layout.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is CSS BEM?\n\nThe BEM (**Block Element Modifier**) methodology is a naming convention for CSS classes in order to keep CSS more maintainable by defining namespaces to solve scoping issues. A Block is a standalone component that is reusable across projects and acts as a \"namespace\" for sub components (Elements). Modifiers are used as flags when a Block or Element is in a certain state or is different in structure or style.\n\n```css\n/* block component */\n.block {\n}\n\n/* element */\n.block__element {\n}\n\n/* modifier */\n.block__element--modifier {\n}\n```\n\n**Example:**\n\n```css\n.button {\n\tdisplay: inline-block;\n\tborder-radius: 3px;\n\tpadding: 7px 12px;\n\tborder: 1px solid #D5D5D5;\n\tbackground-image: linear-gradient(#EEE, #DDD);\n\tfont: 700 13px/18px Helvetica, arial;\n}\n.button--state-success {\n\tcolor: #FFF;\n\tbackground: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;\n\tborder-color: #4A993E;\n}\n.button--state-danger {\n\tcolor: #900;\n}\n```\n\n```html\n\u003cbutton class=\"button\"\u003e\n\tNormal button\n\u003c/button\u003e\n\u003cbutton class=\"button button--state-success\"\u003e\n\tSuccess button\n\u003c/button\u003e\n\u003cbutton class=\"button button--state-danger\"\u003e\n\tDanger button\n\u003c/button\u003e\n```\n\n**Benefits:**  \n\n* **Modularity**: Block styles are never dependent on other elements on a page, so you will never experience problems from cascading.\n* **Reusability**: Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain.\n* **Structure**: BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are the benefits of using CSS sprites? \n\nCSS sprites combine multiple images into one single larger image. It is a commonly-used technique for icons. \n\n**Advantages:**\n\n* 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.\n* 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.\n\n\n* When you have multiple images/ icons, browser makes separate call to the server for each one of them. sprite is a technique to combine all/ some of them (usually similar one in terms of type of image. For example, you will put jpg in one sprite) in one image. To display the icon you set height, width and background position.\n\n**Alternatives:**\n\n* Data URIs - allow you to embed the image data directly into a stylesheet. This avoids additional HTTP requests for images, making it essentially the same thing as a sprite, without the fancy positioning.\n* Icon Fonts\n* SVGs\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is tweening in css?\n\nThe pose-to-pose option is to create a few keyframes throughout the sequence, and then fill in the gaps later. Filling in these gaps is known as **tweening**. It is the process of generating intermediate frames between two images. It gives the impression that the first image has smoothly evolved into the second one. In CSS3, Transforms (matrix, translate, rotate, scale etc.) module can be used to achieve tweening.\n\n**Example:**\n\n```css\np {\n  animation-duration: 3s;\n  animation-name: slidein;\n}\n\n@keyframes slidein {\n  from {\n    margin-left: 100%;\n    width: 300%; \n  }\n\n  to {\n    margin-left: 0%;\n    width: 100%;\n  }\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain the difference between `visibility: hidden;` and `display: none;`? What are the pros and cons of using `display:none`?\n\n* **visibility: hidden** simply hides the element but it will occupy space and affect the layout of the document.  \n* **display: none** removes the element from the normal layout flow (causes DOM reflow). It will not affect the layout of the document nor occupy space.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the purpose of the `z-index` and how a stacking context is formed?\n\nThe `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.\n\n`z-index` can take the following values:\n\n  * **Auto**: Sets the stack order equal to its parents.\n  * **Number**: Orders the stack order.\n  * **Initial**: Sets this property to its default value (0).\n  * **Inherit**: Inherits this property from its parent element.\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eCSS z-index Property\u003c/title\u003e\n    \u003cstyle\u003e\n      img {\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        padding: 5px 2px;\n        margin: 5px 1px 2px;\n        z-index: -1;\n      }\n\n      p {\n        color: red;\n        font-size: 20px;\n        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eThe z-index Property\u003c/h1\u003e\n    \u003cimg src=\"../images/horse.jpg\" alt=\"Horse Image\" /\u003e\n    \u003cp\u003eBecause the image has a z-index of -1, it will be placed behind the heading.\u003c/p\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [Z-Index](https://learning-zone.github.io/css-interview-questions/assets/files/z-index.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Exaplain CSS position Property?\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/images/css-position-all.png\" alt=\"One-Dimensional\" /\u003e\n\u003c/p\u003e\n\n* **absolute**, place an element exactly where you want to place it. absolute position is actually set relative to the element\\'s parent. if no parent available then relatively place to the page itself (it will default all the way back up to the \u003chtml\u003e element).\n\n* **relative**, means \"relative to itself\". Setting position: relative; on an element and no other positioning attributes, it will no effect on it\\'s positioning. It allows the use of `z-index` on the element and it limits the scope of absolutely positioned child elements. Any child element will be absolutely positioned within that block.\n\n* **fixed**, element is positioned relative to viewport or the browser window itself. viewport doesn\\'t changed if you scroll and hence fixed element will stay right in the same position.\n\n* **static** default for every single page element. The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control.\n\n* **sticky** - Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as `relative` positioned until it crosses a specified threshold, at which point it is treated as `fixed` positioned.\n\n**Live Demo**: [CSS Position Property](https://learning-zone.github.io/css-interview-questions/assets/files/position-index.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are the differences between relative and absolute in CSS?\n\n**Relative Position**\n\nAn element with `position: relative;` is positioned relative to its normal position.\n\nSetting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/images/relative-position.png\" alt=\"CSS rule\" width=\"250px;\" /\u003e\n\u003c/p\u003e\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eRelative Position\u003c/title\u003e\n  \u003cstyle\u003e\n    div.relative {\n      position: relative;\n      top: 20px;\n      left: 20px;\n      border: 3px solid #2321ad;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch2\u003eposition: relative;\u003c/h2\u003e\n    \u003cp\u003eAn element with position: relative; is positioned relative to its normal position:\u003c/p\u003e\n\n    \u003cdiv class=\"relative\"\u003e\n        This div element has position: relative;\n    \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [Relative Position Property](https://learning-zone.github.io/css-interview-questions/assets/files/relative-position.html)\n\n**Absolute Position:**\n\nAn element with `position: absolute;` will cause it to adjust its position with respect to its parent. If no parent is present, then it uses the document body as parent.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/images/absolute-position.png\" alt=\"CSS rule\" width=\"350px;\" /\u003e\n\u003c/p\u003e\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eAbsolute Position\u003c/title\u003e\n  \u003cstyle\u003e\n    div.relative {\n      position: relative;\n      width: 400px;\n      height: 200px;\n      border: 3px solid #2321ad;\n    }  \n\n    div.absolute {\n      position: absolute;\n      top: 80px;\n      right: 0;\n      width: 200px;\n      height: 100px;\n      border: 3px solid #ee0b0b;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch2\u003eposition: absolute;\u003c/h2\u003e\n\n    \u003cp\u003eAn element with position: absolute; is positioned relative to the nearest positioned ancestor \n      (instead of positioned relative to the viewport, like fixed):\u003c/p\u003e\n\n    \u003cdiv class=\"relative\"\u003eThis div element has position: relative;\n        \u003cdiv class=\"absolute\"\u003eThis div element has position: absolute;\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [Absolute Position Property](https://learning-zone.github.io/css-interview-questions/assets/files/absolute-position.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. The difference between block, inline and inline-block element?\n\n**a) Block Elements**  \nThe block elements always start on a new line. They will also take space of an entire row or width. List of block elements are `\u003cp\u003e`, `\u003ch1\u003e`, `\u003cdiv\u003e`, `\u003cheader\u003e`.\n\n**Example:**\n\n```html\n\u003cp\u003e\n  Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde autem,\n  consequatur deleniti nobis beatae quo dolore nemo corporis. Ad delectus\n  dignissimos pariatur illum eveniet dolor rem eius laborum sed iure!\n\u003c/p\u003e\n\n\u003cp\u003e\n  Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde autem,\n  consequatur deleniti nobis beatae quo dolore nemo corporis. Ad delectus\n  dignissimos pariatur illum eveniet dolor rem eius laborum sed iure!\n\u003c/p\u003e\n```\n\n**b) Inline Elements**  \nInline elements don\\'t start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are `\u003ca\u003e`, `\u003cspan\u003e` , `\u003cstrong\u003e`, and `\u003cimg\u003e` tags.\n\nWhen it comes to margins and padding, browsers treat inline elements differently. You can add space to the left and right on an inline element, but you cannot add height to the top or bottom padding or margin of an inline element.\n\n**Example:**\n\n```html\n\u003ca href=\"#\"\u003eLink\u003c/a\u003e\n\u003cimg src=\"https://picsum.photos/30\" /\u003e\n\u003cspan\u003eSpan\u003c/span\u003e\n\u003cstrong\u003eStrong Player\u003c/strong\u003e\n```\n\n**c) Inline-Block Elements**  \nInline-block elements are similar to inline elements, except they can have padding and margins added on all four sides.\nOne common use for using inline-block is for creating navigation links horizontally. Some examples of inline-block elements are `\u003cinput\u003e`, `\u003cbutton\u003e`, `\u003cselect\u003e`, `\u003ctextarea\u003e` etc.\n\n```css\ninput {\n  width: 300px;\n  height: 50px;\n}\n\nbutton {\n  width: 100px;\n  height: 50px;\n  margin-top: 20px;\n}\n```\n\n```html\n\u003cinput type=\"text\" /\u003e \u003cbutton\u003eSubmit\u003c/button\u003e\n```\n\n**Live Demo**: [Display Property](https://learning-zone.github.io/css-interview-questions/assets/files/display-properties.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are counters in CSS3?\n\nCSS counters let you adjust the appearance of content based on its location in a document. To use a CSS counter, it must first be initialized to a value with the `counter-reset` property (0 by default). The same property can also be used to change its value to any specific number. Once initialized, a counter\\'s value can be increased or decreased with counter-increment. The counter\\'s name must not be \"none\", \"inherit\", or \"initial\"; otherwise the declaration is ignored.\n\n```css\nbody {\n  counter-reset: section;   /* Set a counter named 'section', and its initial value is 0. */\n}\n\nh3::before {\n  counter-increment: section;   /* Increment the value of section counter by 1 */\n  content: \"Section \" counter(section) \": \";  /* Display the word 'Section ', the value of \n                                                 section counter, and a colon before the content\n                                                 of each h3 */\n}\n```\n\n```html\n\u003ch3\u003eIntroduction\u003c/h3\u003e\n\u003ch3\u003eBody\u003c/h3\u003e\n\u003ch3\u003eConclusion\u003c/h3\u003e\n```\n\n**CSS Counter Properties:**\n\n|Property\t        |Description  |\n|-----------------|-------------------------------------------------------------------------------|\n|content\t        |Used with the ::before and ::after pseudo-elements, to insert generated content|\n|counter-increment|Increments one or more counter values|\n|counter-reset\t  |Creates or resets one or more counters|\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cstyle\u003e\n    body {\n      counter-reset: section;   /* Set a counter named 'section', and its initial value is 0. */\n    }\n\n    h3::before {\n      counter-increment: section;   /* Increment the value of section counter by 1 */\n      content: \"Section \" counter(section) \": \";  /* Display the word 'Section ', the value of \n                                                 section counter, and a colon before the content\n                                                 of each h3 */\n    }   \n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ch3\u003eIntroduction\u003c/h3\u003e\n  \u003ch3\u003eBody\u003c/h3\u003e\n  \u003ch3\u003eConclusion\u003c/h3\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [CSS Counters](https://learning-zone.github.io/css-interview-questions/assets/files/counters.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How do you specify units in the CSS?\n\nThere are various units in CSS to express the measurement and length. A CSS unit is used to determine the property size, which we set for an element or its content. The units in CSS are required to define the measurement such as margin: 20px; in which the px (or pixel) is the CSS unit. They are used to set margin, padding, lengths, and so on.\n\nThe length unit in CSS is of two types:\n\n* Absolute length units.\n* Relative length units.\n\n**Absolute length units:**\n\nThe following are all absolute length units — they are not relative to anything else, and are generally considered to always be the same size.\n\n|Unit\t        |Name\t                |Equivalent to        |\n|-------------|---------------------|---------------------|\n|cm\t          |Centimeters\t        |1cm = 38px = 25/64in|\n|mm\t          |Millimeters\t        |1mm = 1/10th of 1cm|\n|Q\t          |Quarter-millimeters\t|1Q = 1/40th of 1cm|\n|in\t          |Inches\t              |1in = 2.54cm = 96px|\n|pc\t          |Picas\t              |1pc = 1/6th of 1in|\n|pt\t          |Points\t              |1pt = 1/72th of 1in|\n|px\t          |Pixels\t              |1px = 1/96th of 1in|\n\n**Relative length units:**\n\nRelative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.\n\n|Unit\t           |Relative to                                   |\n|----------------|----------------------------------------------|\n|em\t             |Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.|\n|ex\t             |x-height of the element\\'s font.|\n|ch\t             |The advance measure (width) of the glyph \"0\" of the element\\'s font.|\n|rem\t           |Font size of the root element.|\n|lh\t             |Line height of the element.|\n|vw\t             |1% of the viewport\\'s width.|\n|vh\t             |1% of the viewport\\'s height.|\n|vmin\t           |1% of the viewport\\'s smaller dimension.|\n|vmax\t           |1% of the viewport\\'s larger dimension.|\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n      \u003ctitle\u003eCSS Units\u003c/title\u003e\n    \u003cstyle\u003e\n      .wrapper {\n        font-size: 1em;\n      }\n      \n      .px {\n        width: 200px;\n      }\n      \n      .vw {\n        width: 10vw;\n      }\n      \n      .em {\n        width: 10em;\n      }\n    \u003c/style\u003e\n  \u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv class=\"wrapper\"\u003e\n    \u003cdiv class=\"box px\"\u003eI am 200px wide\u003c/div\u003e\n    \u003cdiv class=\"box vw\"\u003eI am 10vw wide\u003c/div\u003e\n    \u003cdiv class=\"box em\"\u003eI am 10em wide\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [CSS Units](https://learning-zone.github.io/css-interview-questions/assets/files/css-units.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Which one would you prefer among px, em % or pt and why?\n\n* ```px``` gives fine grained control and maintains alignment because 1 px or multiple of 1 px is guaranteed to look sharp. px is not cascade, this means if parent font-size is 20px and child 16px. child would be 16px.\n\n* ```em``` maintains relative size. you can have responsive fonts. em is the width of the letter 'm' in the selected typeface. However, this concept is tricky. 1em is equal to the current font-size of the element or the browser default. if u sent font-size to 16px then 1em = 16px. The common practice is to set default body font-size to 62.5% (equal to 10px). em is cascade\n\n* ```%``` sets font-size relative to the font size of the body. Hence, you have to set font-size of the body to a reasonable size. this is easy to use and does cascade. for example, if parent font-size is 20px and child font-size is 50%. child would be 10px.\n\n* ```pt```(points) are traditionally used in print. 1pt = 1/72 inch and it is fixed-size unit.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is pseudo element and pseudo class?\n\n**1. Pseudo Element**: A CSS pseudo-element is used to style specified parts of an element.\n\nFor example, it can be used to:\n\n* Style the first letter, or line, of an element\n* Insert content before, or after, the content of an element\n\n**CSS Pseudo Elements:**  \n\n|Sl.No|Selector\t      |Example\t        |description|\n|-----|---------------|-----------------|-------------|\n| 01. |::after\t      |p::after\t        |Insert something after the content of each \u003cp\u003e element|\n| 02. |::before\t      |p::before\t      |Insert something before the content of each \u003cp\u003e element|\n| 03. |::first-letter\t|p::first-letter\t|Selects the first letter of each \u003cp\u003e element|\n| 04. |::first-line\t  |p::first-line\t  |Selects the first line of each \u003cp\u003e element|\n| 05. |::selection\t  |p::selection\t    |Selects the portion of an element that is selected by a user|\n\n\n**2. Pseudo-classes**: A pseudo-class is used to define a special state of an element.\n\nFor example, it can be used to:\n\n* Style an element when a user mouses over it\n* Style visited and unvisited links differently\n* Style an element when it gets focus\n\n**CSS Pseudo Classes:**  \n\n| Sl.No |Selector\t         | Example\t              |description|\n|-------|------------------|------------------------|-----------|\n| 01.  |:active\t           |a:active\t              |Selects the active link|\n| 02.  |:checked\t         |input:checked\t          |Selects every checked `\u003cinput\u003e` element|\n| 03.  |:disabled\t         |input:disabled\t        |Selects every disabled `\u003cinput\u003e` element|\n| 04.  |:empty\t           |p:empty\t                |Selects every `\u003cp\u003e` element that has no children|\n| 05.  |:enabled\t         |input:enabled\t          |Selects every enabled `\u003cinput\u003e` element|\n| 06.  |:first-child\t     |p:first-child\t          |Selects every `\u003cp\u003e` elements that is the first child of its parent|\n| 07.  |:first-of-type\t   |p:first-of-type\t        |Selects every `\u003cp\u003e` element that is the first `\u003cp\u003e` element of its parent|\n| 08.  |:focus\t           |input:focus\t            |Selects the `\u003cinput\u003e` element that has focus|\n| 09.  |:hover\t           |a:hover\t                |Selects links on mouse over|\n| 10.  |:in-range\t         |input:in-range\t        |Selects `\u003cinput\u003e` elements with a value within a specified range|\n| 11.  |:invalid\t         |input:invalid\t          |Selects all `\u003cinput\u003e` elements with an invalid value|\n| 12.  |:lang(language)\t   |p:lang(it)\t            |Selects every `\u003cp\u003e` element with a lang attribute value starting with \"it\"|\n| 13.  |:last-child\t       |p:last-child\t          |Selects every `\u003cp\u003e` elements that is the last child of its parent|\n| 14.  |:last-of-type\t     |p:last-of-type\t        |Selects every `\u003cp\u003e` element that is the last `\u003cp\u003e` element of its parent|\n| 15.  |:link\t             |a:link\t                |Selects all unvisited links|\n| 16.  |:not(selector)\t   |:not(p)\t                |Selects every element that is not a `\u003cp\u003e` element|\n| 17.  |:nth-child(n)\t     |p:nth-child(2)\t        |Selects every `\u003cp\u003e` element that is the second child of its parent|\n| 18.  |:nth-last-child(n) |p:nth-last-child(2)\t    |Selects every `\u003cp\u003e` element that is the second child of its parent, |counting from the last child|\n| 19.  |:nth-last-of-type(n) |p:nth-last-of-type(2)\t|Selects every `\u003cp\u003e` element that is the second `\u003cp\u003e` element of its parent, counting from the last child|\n| 20.  |:nth-of-type(n)\t    |p:nth-of-type(2)\t      |Selects every `\u003cp\u003e` element that is the second `\u003cp\u003e` element of its parent|\n| 21.  |:only-of-type\t      |p:only-of-type\t        |Selects every `\u003cp\u003e` element that is the only `\u003cp\u003e` element of its parent|\n| 22.  |:only-child\t        |p:only-child\t          |Selects every `\u003cp\u003e` element that is the only child of its parent|\n| 23.  |:optional\t          |input:optional\t        |Selects `\u003cinput\u003e` elements with no \"required\" attribute|\n| 24.  |:out-of-range\t      |input:out-of-range\t    |Selects `\u003cinput\u003e` elements with a value outside a specified range|\n| 25.  |:read-only\t        |input:read-only\t      |Selects `\u003cinput\u003e` elements with a \"readonly\" attribute specified|\n| 26.  |:read-write\t        |input:read-write\t      |Selects `\u003cinput\u003e` elements with no \"readonly\" attribute|\n| 27.  |:required\t          |input:required\t        |Selects `\u003cinput\u003e` elements with a \"required\" attribute specified|\n| 28.  |:root\troot\t        |                       |Selects the document\\'s root element|\n| 29.  |:target\t            |#news:target\t          |Selects the current active #news element (clicked on a URL containing that anchor name)|\n| 30.  |:valid\t            |input:valid\t          |Selects all `\u003cinput\u003e` elements with a valid value|\n| 31.  |:visited\t          |a:visited\t            |Selects all visited links|\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain the CSS “box model” and the layout components that it consists of?\n\nThe CSS box model is a rectangular layout paradigm for HTML elements that consists of the following:\n\n* **Content**: The content of the box, where text and images appear\n* **Padding**: A transparent area surrounding the content (i.e., the amount of space between the border and the content)\n* **Border**: A border surrounding the padding (if any) and content\n* **Margin**: A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/images/box-model.png\" alt=\"CSS Box Model\" width=\"300px;\" /\u003e\n\u003c/p\u003e\n\nThe size of the box itself is calculated like this:\n\n|Property |Total                                                             |\n|---------|------------------------------------------------------------------|\n|Width    |width + padding-left + padding-right + border-left + border-right |\n|Height   |height + padding-top + padding-bottom + border-top + border-bottom|\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eCSS Box Model\u003c/title\u003e\n  \u003cstyle\u003e\n    div {\n      background-color: lightgrey;\n      width: 300px;\n      border: 10px solid rgb(3, 141, 233);\n      padding: 50px;\n      margin: 20px;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ch2\u003eCSS Box Model\u003c/h2\u003e\n\n  \u003cp\u003eThe CSS box model is essentially a box that wraps around every HTML element. \n    It consists of: borders, padding, margins, and the actual content.\u003c/p\u003e\n\n  \u003cdiv\u003eThis text is the content of the box. We have added a 50px padding, 20px margin and a 10px blue \n    border.\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [CSS Box Model](https://learning-zone.github.io/css-interview-questions/assets/files/boxmodel.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How you would tell the browser in CSS to render your layout in different box models?\n\nThe **box-sizing** property allows us to include the padding and border in an element\\'s total width and height. If you set `box-sizing: border-box;` on an element, padding and border are included in the width and height\n\n**Syntax:**\n\n```css\nbox-sizing: content-box|border-box|initial|inherit;\n```\n\n**Property Values:**\n\n|Value       |Description                              |\n|------------|-----------------------------------------|\n|content-box |Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included|\n|border-box\t |The width and height properties (and min/max properties) includes content, padding and border|\n|initial\t   |Sets this property to its default value. Read about initial|\n|inherit\t   |Inherits this property from its parent element. Read about inherit|\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eThe box-sizing Property\u003c/title\u003e\n  \u003cstyle\u003e\n    .content-box {\n        box-sizing: content-box;\n        width: 300px;\n        height: 100px;\n        padding: 30px;\n        border: 10px solid rgb(0, 89, 255);\n    }\n\n    .border-box {\n        box-sizing: border-box;\n        width: 300px;\n        height: 100px;\n        padding: 30px;\n        border: 10px solid rgb(255, 102, 0);\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch2\u003eThe box-sizing Property\u003c/h2\u003e\n    \u003cp\u003eDefines how the width and height of an element are calculated: should they include padding \n      and borders, or not.\u003c/p\u003e\n\n    \u003ch3\u003e1. box-sizing: content-box (default):\u003c/h3\u003e\n    \u003cp\u003eWidth and height only apply to the content of the element:\u003c/p\u003e\n    \u003cdiv class=\"content-box\"\u003eThis div has a width of 300px. But the full width is 300px + 20px \n      (left and right border) + 60px (left and right padding) = 380px!\u003c/div\u003e\n\n    \u003ch3\u003e2. box-sizing: border-box:\u003c/h3\u003e\n    \u003cp\u003eWidth and height apply to all parts of the element: content, padding and borders:\u003c/p\u003e\n    \u003cdiv class=\"border-box\"\u003eHere, the full width is 300px\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the difference between border-box and content-box?\n\n**1. content-box:**\n\nDefault box-sizing property. The width and height properties (and min/max properties) includes only the content. Border and padding are not included\n\n**2. border-box:**\n\nThe width and height properties (and min/max properties) includes content, padding and border.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/images/content-box-vs-border-box.png\" alt=\"border-box vs content-box\" width=\"600px;\" /\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain the meaning of each of these CSS units for expressing length?\n\n* ```cm``` centimeters\n* ```em``` elements (i.e., relative to the font-size of the element; e.g., 2 em means 2 times the current font size)\n* ```in``` inches\n* ```mm``` millimeters\n* ```pc``` picas (1 pc = 12 pt = 1/6th of an inch)\n* ```pt``` points (1 pt = 1/72nd of an inch)\n* ```px``` pixels (1 px = 1/96th of an inch)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. In CSS3, how would you select?\n\n* Every ```\u003ca\u003e``` element whose href attribute value begins with “https”.\n```css\n  a[href^=\"https\"]\n```\n    \n* Every ```\u003ca\u003e``` element whose href attribute value ends with “.pdf”.\n```css\n  a[href$=\".pdf\"]\n```\n    \n* Every ```\u003ca\u003e``` element whose href attribute value contains the substring “css”.\n```css\n  a[href*=\"css\"]\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the purpose of the box-sizing property?\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/images/box-sizing.jpg\" alt=\"One-Dimensional\" width=\"75%\" /\u003e\n\u003c/p\u003e\n\nThe box-sizing CSS property sets how the total width and height of an element is calculated.\n\n* **content-box**: the default width and height values apply to the element\\'s content only. The padding and border are added to the outside of the box.\n* **padding-box**: Width and height values apply to the element\\'s content and its padding. The border is added to the outside of the box. Currently, only Firefox supports the padding-box value.\n* **border-box**: Width and height values apply to the content, padding, and border.\n* **inherit**: inherits the box sizing of the parent element.\n\n**Example:**\n\n```css\nbox-sizing: content-box;\nwidth: 100%;\nborder: solid rgb(90,107,204) 10px;\npadding: 5px;\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the difference between RGBa, HEX and HSLa?\n\n* **RGB** (Red/Green/Blue) is a color model.\n\n```css\np {\n  color: rgba(37, 84, 127, 1);\n}\n```\n\n* **HEX (Hexadecimal color values)**\n\n```css\np {\n  color: #25547f;\n}\n```\n\n* **HSLa (Hue Saturation Lightness alpha)**\n\n```css\np {\n  color: hsla(209, 55%, 32%, 1);\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is CSS preprocessor?\n\nPre-processors extend CSS with variables, operators, interpolations, functions, mixins and many more other usable assets. After development, these specific files are compiled into regular CSS that any browser can understand. Pre-processor help writing reusable, easily maintainable and extensible codes in CSS. \n\n**CSS preprocessors:**\n\n  * SASS (SCSS)\n  * LESS\n  * Stylus\n  * PostCSS\n\n**Advantages:**\n\n* CSS is made more maintainable.\n* Easy to write nested selectors.\n* Variables for consistent theming. Can share theme files across different projects.\n* Mixins to generate repeated CSS.\n* Splitting your code into multiple files. CSS files can be split up too but doing so will require an HTTP request to download each CSS file.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the difference between \"resetting\" and \"normalizing\" CSS?\n\n**1. Resetting**: CSS resets aim to remove all built-in browser styling. For example margins, paddings, font-sizes of all elements are reset to be the same. You will have to redeclare styling for common typographic elements.\n\n**Example:**\n\n```css\nhtml, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, \nacronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, \nsub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, \ncaption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, \nfooter, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {  \n   margin: 0;  \n   padding: 0;  \n   border: 0;  \n   font-size: 100%;  \n   font: inherit;  \n   vertical-align: baseline; \n}\n```\n\n**2. Normalizing**: Normalize CSS aims to make built-in browser styling consistent across browsers. It also corrects bugs for common browser dependencies.\n\n**Example:**\n\n```css\n/* \n  Correct the font size and margin on `h1` elements within `section`  \n  and `article` contexts in Chrome, Firefox, and Safari.\n*/\n h1 {  font-size: 2em;  margin: 0.67em 0;}\n ```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain CSS Block Formatting Context?\n\nFloats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.\n\nIn a block formatting context, each box\\'s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch)\n\nA BFC is an HTML box that satisfies at least one of the following conditions:\n\n* The value of `float` is not `none`.\n* The value of `position` is neither `static` nor `relative`.\n* The value of `display` is `table-cell`, `table-caption`, `inline-block`, `flex`, or `inline-flex`.\n* The value of `overflow` is not `visible`.\n\nIn a BFC, each box\\'s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). Vertical margins between adjacent block-level boxes in a BFC collapse. \n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eCSS Block Formatting Context\u003c/title\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e\n  \u003c/head\u003e\n  \u003cstyle type=\"text/css\"\u003e\n    * {\n      box-sizing: border-box;\n    }\n\n    body {\n      margin: 40px;\n      background-color: #fff;\n      color: #444;\n      font: 1.4em Arial, sans-serif;\n    }\n\n    .outer {\n      background-color: #ccc;\n      margin: 0 0 40px 0;\n    }\n\n    p {\n      padding: 0;\n      margin: 20px 0 20px 0;\n      background-color: rgb(233, 78, 119);\n      color: #fff;\n    }\n\n    .overflow {\n      overflow: auto;\n    }\n  \u003c/style\u003e\n  \u003cbody\u003e\n    \u003ch2\u003eno BFC\u003c/h2\u003e\n    \u003cdiv class=\"outer\"\u003e\n      \u003cp\u003eI am paragraph one and I have a margin top and bottom of 20px;\u003c/p\u003e\n      \u003cp\u003eI am paragraph two and I have a margin top and bottom of 20px;\u003c/p\u003e\n    \u003c/div\u003e\n\n    \u003ch2\u003eWith a BFC\u003c/h2\u003e\n\n    \u003cdiv class=\"outer overflow\"\u003e\n      \u003cp\u003eI am paragraph one and I have a margin top and bottom of 20px;\u003c/p\u003e\n      \u003cp\u003eI am paragraph two and I have a margin top and bottom of 20px;\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [CSS Block Formatting](https://learning-zone.github.io/css-interview-questions/assets/files/block-formatting-context.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the float property and what float do?\n\nThe float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. \n\n**Syntax:**\n\n```css\n/* Keyword values */\nfloat: left;\nfloat: right;\nfloat: none;\nfloat: inline-start;\nfloat: inline-end;\n\n/* Global values */\nfloat: inherit;\nfloat: initial;\nfloat: unset;\n```\n\n**Property Values:**\n\n|Sl.No| Value  | Description| \n|-----|--------|------------|\n| 01. |none\t   |The element does not float, (will be displayed just where it occurs in the text).|\t\n| 02. |left\t   |The element floats to the left of its container\t|\n| 03. |right\t |The element floats the right of its container\t|\n| 04. |initial |Sets this property to its default value.    \t|\n| 05. |inherit |Inherits this property from its parent element. |\n\n**Example:**:\n\n```css\nsection {\n  border: 1px solid blue;\n  width: 100%;\n  float: left;\n}\n\ndiv {\n  margin: 5px;\n  width: 50px;\n  height: 150px;\n}\n\n.left {\n  float: left;\n  background: pink;\n}\n\n.right {\n  float: right;\n  background: cyan;\n}\n```\n\n```html\n\u003csection\u003e\n  \u003cdiv class=\"left\"\u003e1\u003c/div\u003e\n  \u003cdiv class=\"left\"\u003e2\u003c/div\u003e\n  \u003cdiv class=\"right\"\u003e3\u003c/div\u003e\n  \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit.\n     Morbi tristique sapien ac erat tincidunt, sit amet dignissim\n     lectus vulputate. Donec id iaculis velit. Aliquam vel\n     malesuada erat. Praesent non magna ac massa aliquet tincidunt\n     vel in massa. Phasellus feugiat est vel leo finibus congue.\u003c/p\u003e\n\u003c/section\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Describe clear Property in css?\n\nThe clear property specifies what elements can float beside the cleared element and on which side.\n\n|Sl.No| Properties     | Description  |\n|-----|----------------|--------------|\n| 01. |clear: none     |Allows floating elements on both sides. This is default|\n| 02. |clear: left     |No floating elements allowed on the left side|\n| 03. |clear: right    |No floating elements allowed on the right side|\n| 04. |clear: both     |No floating elements allowed on either the left or the right side|\n| 05. |clear: inherit  |The element inherits the clear value of its parent|\n\n**Example:**\n\n```css\ndiv {\n  clear: left;\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Explain the purpose of clearing floats in CSS?\n\nThe **clear** property is directly related to the float property. It specifies if an element should be next to the floated elements or if it should move below them. This property applies to both floated and non-floated elements.\n\n**CSS Syntax:**\n\n```css\nclear: none|left|right|both|inherit|inline-start|inline-end;\n```\n\n**Property Values:**\n\n|Value       |Description\t                                       |\n|------------|---------------------------------------------------|\n|none\t       |The element is not moved down to clear past floats.|\n|left\t       |The element is moved down to clear past left floats.|\n|right\t     |The element is moved down to clear past right floats.|\n|Both \t     |The element is moved down to clear past both left and right floats.|\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eCSS clear Property\u003c/title\u003e\n  \u003cstyle\u003e\n    .div1 {\n      float: left;\n      width: 100px;\n      height: 50px;\n      margin: 10px;\n      border: 3px solid #73AD21;\n    }\n\n    .div2 {\n      border: 1px solid red;\n      height: 100px;\n    }\n\n    .div3 {\n      float: left;\n      width: 100px;\n      height: 50px;\n      margin: 10px;\n      border: 3px solid #73AD21;\n    }\n\n    .div4 {\n      border: 1px solid red;\n      height: 100px;\n      clear: left;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch2\u003eWithout clear\u003c/h2\u003e\n    \u003cdiv class=\"div1\"\u003ediv1\u003c/div\u003e\n    \u003cdiv class=\"div2\"\u003ediv2 - Notice that the div2 element is after div1, in the HTML code. \n      However, since div1 is floated to the left, this happens: the text in div2 is floated \n      around div1, and div2 surrounds the whole thing.\n    \u003c/div\u003e\u003cbr/\u003e\n\n    \u003ch2\u003eUsing clear\u003c/h2\u003e\n    \u003cdiv class=\"div3\"\u003ediv3\u003c/div\u003e\n    \u003cdiv class=\"div4\"\u003ediv4 - Using clear moves div4 down below the floated div3. The value \n      \"left\" clears elements floated to the left. You can also clear \"right\" and \"both\".\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [CSS clear Property](https://learning-zone.github.io/css-interview-questions/assets/files/clear-float.html) \n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is a clearfix in CSS?\n\nA **clearfix** is a way for an element to clear its child elements automatically without any additional markup. The clearfix property is generally used in float layouts where elements are floated to be stacked horizontally.\n\nThe clearfix property allows a container to wrap its floated children. Without a clearfix, a container will not wrap around its floated children and will collapse, just as if its floated children had been positioned absolutely.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/images/clearfix.png\" alt=\"CSS rule\" width=\"800px;\" /\u003e\n\u003c/p\u003e\n\n**Syntax:**\n\n```css\n.clearfix {\n  properties\n}\n```\n\n**Example:**\n\n```html\n\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eCSS Clearfix property\u003c/title\u003e\n  \u003cstyle\u003e\n    div {\n      border: 3px solid #4CAF50;\n      padding: 5px;\n    }\n\n    .clearfix {\n      overflow: auto;\n    }\n    \n    .img {\n      float: right;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv class=\"clearfix\"\u003e\n    \u003cimg class=\"img\" \n         src=\"../images/horse.jpg\" \n         alt=\"Running Horse\" \n         width=\"250\"\n         height=\"180\"\u003e\n        Running Horse\n  \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [CSS Clearfix](https://learning-zone.github.io/css-interview-questions/assets/files/clearfix.html)\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Does `overflow: hidden` create a new block formatting context?\n\nYes. overflow property deals with the content if content size exceeds the allocated size for the content. You can make extra content visible, hidden, scroll or auto (viewport default behavior).\n\n## Q. How would you approach fixing browser-specific styling issues?\n\n* Use a separate style sheet that only loads when that specific browser is being used. This technique requires server-side rendering though.\n* Use `autoprefixer` to automatically add vendor prefixes to your code.\n* Use Reset CSS or Normalize.css.\n\n```css\n/*Example: 01*/\n.box-shadow {\n  background-color: red;\n  background-image: url(gradient-slice.png);\n  background-image: -webkit-linear-gradient(top right, #A60000, #FFFFFF); /*Chrome and Safari*/\n  background-image: -moz-linear-gradient(top right, #A60000, #FFFFFF); \t  /*Firefox*/\n  background-image: -ms-linear-gradient(top right, #A60000, #FFFFFF);     /*Internet Explorer*/\n  background-image: -o-linear-gradient(top right, #A60000, #FFFFFF);      /*Opera*/\n  background-image: linear-gradient(top right, #A60000, #FFFFFF);\n}\n\n/*Example: 02*/\n.box {\n\t-moz-border-radius: 15px;    /* Firefox */\n\t-webkit-border-radius: 15px; /* Safari and Chrome */\n\tborder-radius: 15px;\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are your favorite image replacement techniques and which do you use when?\n\n**Technique: 01:**\n\n```css\nh1#technique-one {\n  width: 250px;\n  height: 25px;\n  background-image: url(logo.gif);\n}\nh1#technique-one span {\n  display: none;\n}\n```\n\n```html\n\u003ch1 id=\"technique-one\"\u003e\n  \u003cspan\u003eCSS-Tricks\u003c/span\u003e\n\u003c/h1\u003e\n```\n\n**Technique: 02:**\n\n```css\nh1.technique-two {\n  width: 2350px; \n  height: 75px;\n  background: url(\"images/header-image.jpg\") top right;\n  margin: 0 0 0 -2000px;\n}\n```\n\n```html\n\u003ch1 class=\"technique-two\"\u003e\n  CSS-Tricks\n\u003c/h1\u003e\n```\n\n**Technique: 03:**\n\n```css\nh1.technique-three {\n  width: 350px; \n  height: 75px;\n  background: url(\"images/header-image.jpg\");\n  text-indent: -9999px;\n}\n```\n\n```html\n\u003ch1 class=\"technique-three\"\u003e\n  CSS-Tricks\n\u003c/h1\u003e\n```\n\n**Technique: 04:**\n\n```css\nh1.technique-four {\n\twidth: 350px; \n  height: 75px;\n\tbackground: url(\"images/header-image.jpg\");\n\ttext-indent: -9999px;\n}\n```\n```html\n\u003ch1 class=\"technique-four\"\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg src=\"images/header-image.jpg\" alt=\"CSS-Tricks\" /\u003e\n  \u003c/a\u003e\n\u003c/h1\u003e\n```\n\n**Technique: 05:**\n\n```css\nh1.technique-five {\n\twidth: 350px; \n  height: 75px;\n\tbackground: url(\"images/header-image.jpg\");\n}\nh1.technique-five span {\n  display: none;\n}\n```\n\n```html\n\u003ch1 class=\"technique-five\"\u003e\n  \u003cimg src=\"images/blank.gif\" alt=\"CSS-Tricks\" /\u003e\n  \u003cspan\u003eCSS-Tricks\u003c/span\u003e\n\u003c/h1\u003e\n```\n\n**Technique: 06:**\n\n```css\nh1.technique-six {\n\twidth: 350px;\n\tpadding: 75px 0 0 0;\n\theight: 0;\n\tbackground: url(\"images/header-image.jpg\") no-repeat;\n\toverflow: hidden;\n}\n```\n\n```html\n\u003ch1 class=\"technique-six\"\u003e\n  CSS-Tricks\n\u003c/h1\u003e\n```\n\n**Technique: 07:**\n\n```css\nh1.technique-seven {\n\twidth: 350px; \n  height: 75px;\n\tbackground: url(\"images/header-image.jpg\") no-repeat;\n}\nh1.technique-seven span {\n  display: block;\n  width: 0;\n  height: 0;\n  overflow: hidden;\n}\n```\n\n```html\n\u003ch1 class=\"technique-seven\"\u003e\n\t\u003cspan\u003eCSS-Tricks\u003c/span\u003e\n\u003c/h1\u003e\n```\n\n**Technique: 08:**\n\n```css\nh1.technique-eight {\n\twidth: 350px; \n  height: 75px;\n\tposition: relative;\n}\nh1.technique-eight span {\n  background: url(\"images/header-image.jpg\");\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n```\n\n```html\n\u003ch1 class=\"technique-eight\"\u003e\n  \u003cspan\u003e\u003c/span\u003eCSS-Tricks\n\u003c/h1\u003e\n```\n\n**Technique: 09:**\n\n```css\nh1.technique-nine {\n  width: 350px; \n  height: 75px;\n  background: url(\"images/header-image.jpg\") no-repeat;\n  font-size: 1px;\n  color: white;\n}\n```\n\n```html\n\u003ch1 class=\"technique-nine\"\u003e\n  CSS-Tricks\n\u003c/h1\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What are media queries? How could you apply css rules specific to a media?\n\nMedia queries are useful when you want to modify your site or app depending on a device\\'s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width). It uses the @media rule to include a block of CSS properties only if a certain condition is true.\n\n**Media Types:**\n\n|Sl.No| Value | Description          |\n|------|-------|---------------------|\n|  01. |all\t   |Default. Used for all media type devices|\n|  02. |print\t |Used for printers|\n|  03. |screen |Used for computer screens, tablets, smart-phones etc.|\n|  04. |speech |Used for screenreaders that \"reads\" the page out loud|\n\n**Media Features:**  \n\n|Sl.No | Value           | Description          |\n|------|-----------------|----------------------|  \n| 01.  |any-hover\t       | Does any available input mechanism allow the user to hover over elements? |\n| 02.  |any-pointer\t     | Is any available input mechanism a pointing device, and if so, how accurate is it? |\n| 03.  |aspect-ratio\t   | The ratio between the width and the height of the viewport|\n| 04.  |color\t           | The number of bits per color component for the output device|\n| 05.  |color-gamut\t     | The approximate range of colors that are supported by the user agent and output device|\n| 06.  |color-index\t     | The number of colors the device can display|\n| 07.  |grid\t           | Whether the device is a grid or bitmap|\n| 08.  |height\t         | The viewport height|\n| 09.  |hover\t           | Does the primary input mechanism allow the user to hover over elements? |\n| 10.  |inverted-colors\t | Is the browser or underlying OS inverting colors? |\n| 11.  |light-level\t     | Current ambient light level |\n| 12.  |max-aspect-ratio |\tThe maximum ratio between the width and the height of the display area|\n| 13.  |max-color\t       | The maximum number of bits per color component for the output device|\n| 14.  |max-color-index\t | The maximum number of colors the device can display|\n| 15.  |max-height\t     | The maximum height of the display area, such as a browser window|\n| 16.  |max-monochrome\t | The maximum number of bits per \"color\" on a monochrome (greyscale) device|\n| 17.  |max-resolution\t | The maximum resolution of the device, using dpi or dpcm|\n| 18.  |max-width\t       | The maximum width of the display area, such as a browser window|\n| 19.  |min-aspect-ratio |\tThe minimum ratio between the width and the height of the display area|\n| 20.  |min-color\t       | The minimum number of bits per color component for the output device|\n| 21.  |min-color-index\t | The minimum number of colors the device can display|\n| 22.  |min-height\t     | The minimum height of the display area, such as a browser window|\n| 23.  |min-monochrome\t | The minimum number of bits per \"color\" on a monochrome (greyscale) device|\n| 24.  |min-resolution\t | The minimum resolution of the device, using dpi or dpcm|\n| 25.  |min-width\t       | The minimum width of the display area, such as a browser window|\n| 26.  |monochrome\t     | The number of bits per \"color\" on a monochrome (greyscale) device|\n| 27.  |orientation\t     | The orientation of the viewport (landscape or portrait mode)|\n| 28.  |overflow-block\t | How does the output device handle content that overflows the viewport along the block axis| \n| 29.  |overflow-inline\t | Can content that overflows the viewport along the inline axis be scrolled |\n| 30.  |pointer\t         | Is the primary input mechanism a pointing device, and if so, how accurate is it? |\n| 31.  |resolution\t     | The resolution of the output device, using dpi or dpcm|\n| 32.  |scan\t           | The scanning process of the output device|\n| 33.  |scripting\t       | Is scripting (e.g. JavaScript) available? |\n| 34.  |update\t         | How quickly can the output device modify the appearance of the content |\n| 35.  |width\t           | The viewport width |\n\n\n**Example:**\n\n```css\n@media print {\n  body { font-size: 10pt; }\n}\n\n@media screen {\n  body { font-size: 13px; }\n}\n\n@media only screen and (max-width: 600px) {\n  body {\n    background-color: lightblue;\n  }\n}\n\n/* Nested within another conditional at-rule */\n@supports (display: flex) {\n  @media screen and (min-width: 900px) {\n    article {\n      display: flex;\n    }\n  }\n}\n\n/* Extra small devices (phones, 600px and down) */\n@media only screen and (max-width: 600px) { }\n\n/* Small devices (portrait tablets and large phones, 600px and up) */\n@media only screen and (min-width: 600px) { }\n\n/* Medium devices (landscape tablets, 768px and up) */\n@media only screen and (min-width: 768px) { }\n\n/* Large devices (laptops/desktops, 992px and up) */\n@media only screen and (min-width: 992px) { }\n\n/* Extra large devices (large laptops and desktops, 1200px and up) */\n@media only screen and (min-width: 1200px) { }\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is the use of `@media only screen`?\n\nIt hide style sheets from older user agents.\n\n## Q. Does the `screen` keyword apply to the device\\'s physical screen or the browser\\'s viewport?\n\nBrowser\\'s Viewport\n\n## Q. How would you implement a web design comp that uses non-standard fonts?\n\nUse `@font-face` and define `font-family` for different `font-weight`s.\n\n## Q. How a browser determines what elements match a CSS selector?\n\nBrowsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.\n\nFor example with this selector `p span`, browsers firstly find all the `\u003cspan\u003e` elements and traverse up its parent all the way up to the root to find the `\u003cp\u003e` element. For a particular `\u003cspan\u003e`, as soon as it finds a `\u003cp\u003e`, it knows that the `\u003cspan\u003e` matches and can stop its matching.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How can you load css resources conditionally?\n\n**@import**:  allows to load stylesheet by using a path (uri) representing the location of the file.\n\n```css\n/* By default, include the \"light\" color theme for syntax highlighting */\n@import \"cdn.com/atom-one-light.min.css\";\n/* And if you’re in dark mode, have those rules superseded via a different stylesheet */\n@media (prefers-color-scheme: dark) {\n  @import \"cdn.com/atom-one-dark.min.css\";\n}\n```\n\n**matchMedia()**: Using matchMedia lets you execute blocks of JavaScript only when a certain media query condition is met. This means you can just write out the CSS when and if the query is true:\n\n```javascript\nif (window.matchMedia('screen and (min-width: 600px)')) {\n  document.write('\u003clink rel=\"stylesheet\" href=\"css/small.css\"\u003e');\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What does  `* { box-sizing: border-box; }` do? What are its advantages?\n\n* Make every element in the document include the padding and border in the element\\'s inner dimensions; \nmaking it easier to reason about the layout of elements on the page.\n* By default, elements have `box-sizing: content-box` applied, and only the content size is being accounted for.\n* `box-sizing: border-box` changes how the `width` and `height` of elements are being calculated, `border` and `padding` are also being included in the calculation.\n* The `height` of an element is now calculated by the content\\'s `height` + vertical `padding` + vertical `border` width.\n* The `width` of an element is now calculated by the content\\'s `width` + horizontal `padding` + horizontal `border` width.\n* Taking into account `padding`s and `border`s as part of our box model resonates better with how designers actually imagine content in grids.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. List display property in CSS?\n\nThe display property specifies the display behavior (the type of rendering box) of an element.  \n\n**Example:**\n\n```css\np.ex1 {display: none;}\np.ex2 {display: inline;}\np.ex3 {display: block;}\np.ex4 {display: inline-block;}\n```\n\n**Property Values:**\n\n|Sl.No|Value\t   |Description\t\n|-----|---------------|------------------\n| 01. |inline\t|Displays an element as an inline element (like `\u003cspan\u003e`). Any height and width properties will have no effect|\t\n| 02. |block\t|Displays an element as a block element (like `\u003cp\u003e`). It starts on a new line, and takes up the whole width\t|\n| 03. |contents|Makes the container disappear, making the child elements children of the element the next level up in the DOM\t|\n| 04. |flex\t          |Displays an element as a block-level flex container\t|\n| 05. |grid\t          |Displays an element as a block-level grid container\t|\n| 06. |inline-block   |Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values|\t\n| 07. |inline-flex\t   |Displays an element as an inline-level flex container\t|\n| 08. |inline-grid\t   |Displays an element as an inline-level grid container\t|\n| 09. |inline-table    |The element is displayed as an inline-level table\t|\n| 10. |list-item\t     |Let the element behave like a `\u003cli\u003e` element\t|\n| 11. |run-in\t         |Displays an element as either block or inline, depending on context\t|\n| 12. |table\t         |Let the element behave like a `\u003ctable\u003e` element\t|\n| 13. |table-caption\t |Let the element behave like a `\u003ccaption\u003e` element\t|\n| 14. |table-column-group\t|Let the element behave like a `\u003ccolgroup\u003e` element\t|\n| 15. |table-header-group\t|Let the element behave like a `\u003cthead\u003e` element\t|\n| 16. |table-footer-group\t|Let the element behave like a `\u003ctfoot\u003e` element\t|\n| 17. |table-row-group\t  |Let the element behave like a `\u003ctbody\u003e` element\t|\n| 18. |table-cell\t        |Let the element behave like a `\u003ctd\u003e` element\t|\n| 19. |table-column\t      |Let the element behave like a `\u003ccol\u003e` element\t|\n| 20. |table-row\t        |Let the element behave like a `\u003ctr\u003e` element\t|\n| 21. |none\t              |The element is completely removed\t|\n| 22. |initial\t          |Sets this property to its default value. Read about initial\t|\n| 23. |inherit\t          |Inherits this property from its parent element. Read about inherit|\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How is responsive design different from adaptive design? \n\n**1) Responsive design** uses `CSS media queries` to change styles based on the target device such as display type, width, height, etc., and only one of these is necessary for the site to adapt to different screens.\n\nResponsive doesn’t offer as much control as adaptive, but takes much less work to both build and maintain. Responsive layouts are also fluid and whilst adaptive can and do use percentages to give a more fluid feel when scaling, these can again cause a jump when a window is resized. \n\n**2) Adaptive design** uses static layouts based on breakpoints which don\\'t respond once they\\’re initially loaded. Adaptive works to detect the screen size and load the appropriate layout for it.\nGenerally adaptive site uses six common screen widths:\n\n* 320 px\n* 480 px\n* 760 px\n* 960 px\n* 1200 px\n* 1600 px\n\nAdaptive is useful for retrofitting an existing site in order to make it more mobile-friendly. This allows you to take control of the design and develop for specific, multiple viewports. \n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is retina graphics? What kind of techniques do you use to handle images for retina screens?\n\nIn order to have crisp, good-looking graphics that make the best of retina displays we need to use high resolution images whenever possible. However using always the highest resolution images will have an impact on performance as more bytes will need to be sent over the wire.\n\nTo overcome this problem, we can use responsive images, as specified in HTML5. It requires making available different resolution files of the same image to the browser and let it decide which image is best, using the html attribute `srcset` and optionally `sizes`, for instance:\n\n```html\n\u003cdiv responsive-background-image\u003e  \n  \u003cimg src=\"/images/foo.png\" alt=\"bar\" srcset=\"/images/foo.png 2x\" /\u003e\n\u003c/div\u003e\n\n\u003c!-- It enable the browser to use a medium and large image based on \n     the sizes of the image in the viewport\n--\u003e\n\u003cimg\n  src=\"/images/foo.png\"\n  alt=\"bar\"\n  srcset=\"/images/foo-medium.png 1024w,\n               /images/foo-large.png 2048w,\n               /images/foo.png 800w\"\n/\u003e\n```\n\nThe browsers which does not support HTML5\\'s `srcset` (i.e. IE11) will ignore it and uses `src` instead. If we really need to support IE11 and we want to provide this feature for performance reasons, we can use a JavaScript `polyfill`.\n\n**HTML5 picture Element:**\n\n```html\n\u003cpicture\u003e\n   \u003csource media=\"(min-width: 1024px)\" srcset=\"foo-large.jpg  1024w, foo-medium.jpg 640w\" sizes=\"50vw\" /\u003e\n   \u003csource srcset=\"foo@2x.jpg 2x, foo.jpg 1x\" /\u003e\n   \u003cimg src=\"foo.jpg\" alt=\"Bar\" /\u003e\n\u003c/picture\u003e\n```\n\n**Retina Display Media Query:**\n\n```css\n/* 1.25 dpr */\n@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { \n    /* Retina-specific stuff here */\n}\n\n/* 1.3 dpr */\n@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi) { \n    /* Retina-specific stuff here */\n}\n\n/* 1.5 dpr */\n@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { \n    /* Retina-specific stuff here */\n}\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Is there any reason you\\'d want to use translate() instead of absolute positioning, or vice-versa? \n\n`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.\n\nWhen using `translate()`, the element still occupies its original space (sort of like `position: relative`), unlike in changing the absolute positioning.\n\n**Example:**\n\nIf we combine `position:relative` with one of the offset properties `top`, `bottom`, `left` or `right` the element will be moved from its original place in the layout whilst preserving the space in the document it once occupied. The element will be moved on to a new layer and its “layer order” or its stacking order can then be controlled with the `z-index` property.\n\n```css\n.thing {\n  position: relative;\n  top: 100px;\n  left: 50px;\n}\n```\n\nIn the above example the element will be moved 100px away from the top and 50px away from the left of its original position.\n\nWhen using `transform:translate(x,y)` we get a very similar visual result to using relative position. The same result as above could be achieved with the following snippet:\n\n```css\n.thing {\n  transform: translate(50px, 100px);\n}\n```\n\nIn this case, we are translating the coordinates of the element by `50px` along the x-axis and `100px` along the y-axis. The end result is visually the same as the previous `position` example.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. The translate() function can move the position of an element on the z-axis?\n\n* False\n\n## Q. Tell what each of these tags do, if there are alternatives, which are preferable, why?\n\n**`\u003cem\u003e`**: The HTML `\u003cem\u003e` tag represents stress emphasis of its contents.\n\n```html\n\u003cem\u003eEmphasized content...\u003c/em\u003e\n```\n\n**`\u003cb\u003e`**: The `\u003cb\u003e` tag specifies bold text without any extra importance.\n\n```html\n\u003cp\u003eThis is normal text - \u003cb\u003eand this is bold text\u003c/b\u003e.\u003c/p\u003e\n```\n\n**`\u003cabbr\u003e`**: The HTML Abbreviation element (`\u003cabbr\u003e`) represents an abbreviation or acronym; the optional title attribute can provide an expansion or description for the abbreviation.\n\n```html\nThe \u003cabbr title=\"World Health Organization\"\u003eWHO\u003c/abbr\u003e was founded in 1948.\n```\n\n**`\u003cnav\u003e`**: The `\u003cnav\u003e` tag defines a set of navigation links.\n\n```html\n\u003cnav\u003e\n  \u003ca href=\"/html/\"\u003eHTML\u003c/a\u003e |\n  \u003ca href=\"/css/\"\u003eCSS\u003c/a\u003e |\n  \u003ca href=\"/js/\"\u003eJavaScript\u003c/a\u003e |\n  \u003ca href=\"/jquery/\"\u003ejQuery\u003c/a\u003e\n\u003c/nav\u003e\n```\n\n**`\u003ci\u003e`**: The content of the `\u003ci\u003e` tag is usually displayed in italic.\n\n```html\n\u003cp\u003eI looked at it and thought \u003ci\u003eThis can't be real!\u003c/i\u003e\u003c/p\u003e\n```\n\n**`\u003clink\u003e`**: The HTML `\u003clink\u003e` tag is used for defining a link to an external resource. It is placed in in the `\u003chead\u003e` section of the HTML document.\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"theme.css\"\u003e\n\u003c/head\u003e\n```\n\n**`\u003cstrong\u003e`**: The `\u003cstrong\u003e` element is used to identify text that is of greater importance than the surrounding text. By default, all browsers render `\u003cstrong\u003e` text in a bold typeface.\n\n```html\n\u003cstrong\u003eStrong text\u003c/strong\u003e\n```\n\n**`\u003carticle\u003e`**: The `\u003carticle\u003e` tag specifies independent, self-contained content.\n\n```html\n\u003carticle\u003e\n  \u003ch1\u003eGoogle Chrome\u003c/h1\u003e\n  \u003cp\u003eGoogle Chrome is a free, open-source web browser developed by Google, released in 2008.\u003c/p\u003e\n\u003c/article\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is At-Rule?\n\nAt-rules are `CSS statements` that instructs CSS how to behave. They begin with an at sign, `@` followed by an identifier and includes everything up to the next semicolon, `;` or the next CSS block, whichever comes first.\n\n```css\n/* General structure */\n@IDENTIFIER (RULE);\n\n/* Example: tells browser to use UTF-8 character set */\n@charset \"utf-8\";\n```\n\n|Sl.No| at-rules  | Description |\n|-----|-----------|-------------|\n| 01. |@charset   |Defines the character set used by the style sheet.|\n| 02. |@import    |Tells the CSS engine to include an external style sheet.|\n| 03. |@namespace |Tells the CSS engine that all its content must be considered prefixed with an XML namespace.|\n| 04. |@media     |A conditional group rule that will apply its content if the device meets the criteria of the condition defined using a media query.|\n| 05. |@supports  |A conditional group rule that will apply its content if the browser meets the criteria of the given condition.|\n| 06. |@page      |Describes the aspect of layout changes that will be applied when printing the document.|\n| 07. |@font-face |Describes the aspect of an external font to be downloaded.|\n| 08. |@keyframes |Describes the aspect of intermediate steps in a CSS animation sequence.|\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. How can the gap under the image be removed?\n\nAs images being inline elements are treated same as texts, so there is a gap left, which can be removed by:\n\n```html\n\u003cfigure\u003e\n  \u003cimg style=\"display: block\" src=\"...\" alt=\"\"\u003e\n\u003c/figure\u003e\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is progressive rendering?\n\nProgressive rendering is the name given to techniques used to improve the performance of a webpage (in particular, improve perceived load time) to render content for display as quickly as possible.\n\n**Examples:**\n\n* **Lazy loading of images** - Images on the page are not loaded all at once. JavaScript will be used to load an image when the user scrolls into the part of the page that displays the image.\n* **Prioritizing visible content (or above-the-fold rendering)** - Include only the minimum CSS/content/scripts necessary for the amount of page that would be rendered in the users browser first to display as quickly as possible, you can then use deferred scripts or listen for the DOMContentLoaded/load event to load in other resources and content.\n* **Async HTML fragments** - Flushing parts of the HTML to the browser as the page is constructed on the back end.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is mobile-first? Can you explain the difference between coding a website to be responsive versus using a mobile-first strategy?\n\nMaking a website responsive means the some elements will respond by adapting its size or other functionality according to the device\\'s screen size, typically the viewport width, through CSS media queries, for example, making the font size smaller on smaller devices.\n\n```css\n@media (min-width: 601px) {\n  .my-class {\n    font-size: 24px;\n  }\n}\n@media (max-width: 600px) {\n  .my-class {\n    font-size: 12px;\n  }\n}\n```\n\nA 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:\n\n```css\n.my-class {\n  font-size: 12px;\n}\n\n@media (min-width: 600px) {\n  .my-class {\n    font-size: 24px;\n  }\n}\n```\n\nA mobile-first strategy has 2 main advantages:\n\n* It\\'s more performant on mobile devices, since all the rules applied for them don\\'t have to be validated against any media queries.\n* It forces to write cleaner code in respect to responsive CSS rules.\n\n**Example:**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eCSS Media Query\u003c/title\u003e\n  \u003cstyle\u003e\n    body {\n        background-color: lightgreen;\n    }\n\n    @media only screen and (max-width: 800px) {\n        body {\n            background-color: rgb(233, 50, 18);\n        }\n    }\n  \u003c/style\u003e\n  \u003c/head\u003e\n\u003cbody\u003e\n    \u003ch1\u003eResize the browser window\u003c/h1\u003e\n    \u003ch2\u003eWhen the width of this document is 800px or less, the background-color is \"green\", \n      otherwise it is \"Red\".\u003c/h2\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n**Live Demo**: [Media Query](https://learning-zone.github.io/css-interview-questions/assets/files/media-query.html) \n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Which property is used to change the face of a font?\n\nThe `font-family` property is used to change the face of a font.\n\n## Q. Which property is used to make a font italic or oblique?\n\nThe `font-style` property is used to make a font italic or oblique.\n\n## Q. Which property is used to create a small-caps effect?\n\nThe `font-variant` property is used to create a small-caps effect.\n\n## Q. Which property is used to increase or decrease how bold or light a font appears?\n\nThe `font-weight` property is used to increase or decrease how bold or light a font appears.\n\n## Q. Which property is used to add or subtract space between the letters that make up a word?\n\nThe `letter-spacing` property is used to add or subtract space between the letters that make up a word.\n\n## Q. Which property is used to add or subtract space between the words of a sentence?\n\nThe `word-spacing` property is used to add or subtract space between the words of a sentence.\n\n## Q. Which property is used to indent the text of a paragraph?\n\nThe `text-indent` property is used to indent the text of a paragraph.\n\n## Q. Which property is used to align the text of a document?\n\nThe `text-align` property is used to align the text of a document.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. Which property is used to underline, overline, and strikethrough text?\n\nThe `text-decoration` property is used to underline, overline, and strikethrough text.\n\n## Q. Which property is used to capitalize text or convert text to uppercase or lowercase letters?\n\nThe `text-transform` property is used to capitalize text or convert text to uppercase or lowercase letters.\n\n## Q. Which property allows you to control the shape or appearance of the marker of a list?\n\nThe `list-style-type` allows you to control the shape or appearance of the marker.\n\n## Q. How do I restore the default value of a property?\n\nThe keyword `initial` can be used to resets it to its default value, which is defined in the CSS specification of the given property.\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What is specificity?\n\nA process of determining which css rule will be applied to an element. It actually determines which rules will take precedence. Inline style usually wins then ID then class value (or pseudo-class or attribute selector), universal selector (*) has no specificity. ID selectors have a higher specificity than attribute selectors.\n\n**Selector Types**  \n\nThe following list of selector types increases by specificity:\n\n* **Type selectors** (e.g., h1) and pseudo-elements (e.g., ::before).\n* **Class selectors** (e.g., .example), attributes selectors (e.g., [type=\"radio\"]) and pseudo-classes (e.g., :hover).\n* **ID selectors** (e.g., #example).\n\n```css\n/*wins*/\na#a-02 { background-image : url(n.gif); }\na[id=\"a-02\"] { background-image : url(n.png); }\n```\n\nContextual selectors are more specific than a single element selector.The embedded style sheet is closer to the element to be styled. The last rule defined overrides any previous, conflicting rules.\n\n```css\np { color: red; background: yellow }\np { color: green } // wins\n```\n\nA class selector beats any number of element selectors.\n\n```css\n.introduction {} //wins\nhtml body div div h2 p {}\n```\n\n\u003cdiv align=\"right\"\u003e\n    \u003cb\u003e\u003ca href=\"#\"\u003e↥ back to top\u003c/a\u003e\u003c/b\u003e\n\u003c/div\u003e\n\n## Q. What do you know about CSS Transitions?\n\n**CSS Transitions** allows to add an effect while changing from one style to another. You can set the which propert","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearning-zone%2Fcss-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearning-zone%2Fcss-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearning-zone%2Fcss-basics/lists"}