Oops Try Again Make Sure That You Use the Universal Selector to Give a Border 1px Wide
What is CSS?
CSS stands for Cascading Manner Canvass. It's a style sheet language that determines how the elements/contents in the folio are looked/shown. CSS is used to develop a consistent await and experience for all the pages.
CSS was developed and is maintained by the World Broad Spider web Consortium (W3C). It was first released on December 17, 1996. The CSS Working group currently working with different browser vendors to add together/enforce the new feature/ specifications in all the browsers.
CSS enables the separation of the content from the presentation. This separation provides a lot of flexibility and control over how the website has to wait similar. This is the main advantage of using CSS.
CSS3 or Cascading Way Sheets Level 3 is the 3rd version of the CSS standard that is used to style and format spider web pages. CSS3 incorporates CSS2 standard with some improvements over information technology. The main change in CSS3 is the inclusion of divisions of standards into dissimilar modules that makes CSS3 easier to learn and sympathize. Learn More than.
This article covers the most frequently asked CSS and CSS3 interview questions for freshers and experienced candidates.
CSS Interview Questions For Freshers
one. What is the Box model in CSS? Which CSS properties are a office of information technology?
A rectangle box is wrapped effectually every HTML element. The box model is used to determine the height and width of the rectangular box. The CSS Box consists of Width and top (or in the absence of that, default values and the content within), padding, borders, margin.
- Content: Actual Content of the box where the text or image is placed.
- Padding: Expanse surrounding the content (Space between the edge and content).
- Edge: Area surrounding the padding.
- Margin: Area surrounding the border.
2. What are the advantages of using CSS?
The main advantages of CSS are given beneath:
- Separation of content from presentation - CSS provides a mode to present the same content in multiple presentation formats in mobile or desktop or laptop.
- Easy to maintain - CSS, congenital finer can exist used to alter the look and experience complete by making pocket-sized changes. To brand a global change, just change the style, and all elements in all the web pages will exist updated automatically.
- Bandwidth - Used effectively, the style sheets volition exist stored in the browser cache and they tin be used on multiple pages, without having to download again.
iii. What are the limitations of CSS?
Disadvantages of CSS are given beneath:
- Browser Compatibility: Some style selectors are supported and some are not. We take to determine which style is supported or not using the @back up selector).
- Cantankerous Browser issue: Some selectors behave differently in a different browser).
- In that location is no parent selector: Currently, Using CSS, you can't select a parent tag.
4. How to include CSS in the webpage?
There are different ways to include a CSS in a webpage,
i - External Style Sail: An external file linked to your HTML document: Using link tag, nosotros can link the manner sheet to the HTML folio.
<link rel="stylesheet" type="text/css" href="mystyles.css" /> ii - Embed CSS with a style tag: A prepare of CSS styles included within your HTML page.
<mode type="text/css"> /*Add manner rules here*/ </style> Add your CSS rules betwixt the opening and closing style tags and write your CSS exactly the same fashion equally you practice in stand up-solitary stylesheet files.
iii - Add inline styles to HTML elements(CSS rules practical direct within an HTML tag.): Style can be added directly to the HTML element using a style tag.
<h2 fashion="color:scarlet;background:blackness">Inline Manner</h2> four - Import a stylesheet file (An external file imported into some other CSS file): Another way to add CSS is by using the @import rule. This is to add a new CSS file inside CSS itself.
@import "path/to/style.css"; five. What are the different types of Selectors in CSS?
A CSS selector is the part of a CSS ruleset that actually selects the content you lot want to mode. Different types of selectors are listed below.
Universal Selector: The universal selector works like a wildcard character, selecting all elements on a page. In the given example, the provided styles will get applied to all the elements on the page.
* { color: "greenish"; font-size: 20px; line-height: 25px; } Chemical element Blazon Selector: This selector matches one or more HTML elements of the same name. In the given example, the provided styles will get practical to all the ul elements on the page.
ul { line-style: none; border: solid 1px #ccc; } ID Selector: This selector matches any HTML element that has an ID aspect with the same value as that of the selector. In the given case, the provided styles will get applied to all the elements having ID as a container on the page.
#container { width: 960px; margin: 0 auto; } <div id="container"></div> Class Selector: The form selector likewise matches all elements on the folio that have their grade attribute set to the same value as the course. In the given example, the provided styles will become practical to all the elements having ID as the box on the page.
.box { padding: 10px; margin: 10px; width: 240px; } <div form="box"></div> Descendant Combinator: The descendant selector or, more accurately, the descendant combinator lets y'all combine two or more selectors then yous can be more specific in your selection method.
#container .box { float: left; padding-bottom: 15px; } <div id="container"> <div grade="box"></div> <div class="box-ii"></div> </div> <div class="box"></div> This declaration block will apply to all elements that have a form of box that is inside an chemical element with an ID of the container. Information technology's worth noting that the .box element doesn't have to be an immediate child: there could exist another element wrapping .box, and the styles would still apply.
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.
#container> .box { bladder: left; padding-bottom: 15px; } <div id="container"> <div class="box"></div> <div> <div course="box"></div> </div> </div> The selector volition match all elements that have a course of box and that are immediate children of the #container element. That means, unlike the descendant combinator, at that place can't exist some other element wrapping .box it has to exist a direct child chemical element.
General Sibling Combinator: A selector that uses a full general sibling combinator to match elements based on sibling relationships. The selected elements are beside each other in the HTML.
h2 ~ p { margin-lesser: 20px; } <h2>Title</h2> <p>Paragraph example.</p> <p>Paragraph instance.</p> <p>Paragraph case.</p> <div class="box"> <p>Paragraph example.</p> </div> In this example, all paragraph elements (<p>) will be styled with the specified rules, merely only if they are siblings of <h2> elements. There could be other elements in between the <h2> and <p>, and the styles would still apply.
Adjacent Sibling Combinator: A selector that uses the next sibling combinator uses the plus symbol (+), and is almost the aforementioned as the full general sibling selector. The difference is that the targeted element must be an firsthand sibling, non just a general sibling.
p + p { text-indent: ane.Sem; margin-bottom: 0; } <h2>Title</h2> <p>Paragraph instance.</p> <p>Paragraph example.</p> <p>Paragraph case.</p> <div class="box"> <p>Paragraph example.</p> <p>Paragraph example.</p> </div> The above case will apply the specified styles only to paragraph elements that immediately follow other paragraph elements. This means the first paragraph chemical element on a page would not receive these styles. Also, if some other element appeared between two paragraphs, the second paragraph of the two wouldn't have the styles applied.
Attribute Selector: The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets.
input [type="text"] { groundwork-colour: #444; width: 200px; } <input type="text"> half-dozen. What is a CSS Preprocessor? What are Sass, Less, and Stylus? Why practice people use them?
A CSS Preprocessor is a tool used to extend the bones functionality of default vanilla CSS through its own scripting language. Information technology helps usa to utilise complex logical syntax like – variables, functions, mixins, code nesting, and inheritance to proper name a few, supercharging your vanilla CSS.
SASS: Sass is the acronym for "Syntactically Awesome Style Sheets". SASS can be written in ii different syntaxes using SASS or SCSS
SASS vs SCSS
- SASS is based on indentation and SCSS(Sassy CSS) is non.
- SASS uses .sass extension while SCSS uses .scss extension.
- SASS doesn't use curly brackets or semicolons. SCSS uses information technology, simply like the CSS.
SASS Syntax
$font-color: #fff $bg-color: #00f #box color: $font-color background: $bg-color SCSS Syntax
$font-color: #fff; $bg-colour: #00f; #box{ colour: $font-color; background: $bg-color; } LESS: LESS is an acronym for "Leaner Stylesheets". LESS is like shooting fish in a barrel to add to any javascript projects past using NPM or less.js file. It uses the extension .less.
LESS syntax is the aforementioned as the SCSS with some exceptions. LESS uses @ to define the variables.
@font-color: #fff; @bg-colour: #00f #box{ color: @font-color; groundwork: @bg-color; } Stylus: Stylus offers a bang-up deal of flexibility in writing syntax, supports native CSS as well as allows omission of brackets, colons, and semicolons. Information technology doesn't use @ or $ for defining variables.
/* STYLUS SYNTAX WRITTEN Similar NATIVE CSS */ font-colour= #fff; bg-colour = #00f; #box { colour: font-color; background: bg-color; } /* OR */ /* STYLUS SYNTAX WITHOUT CURLY BRACES */ font-color= #fff; bg-color = #00f; #box colour: font-color; background: bg-color; 7. What is VH/VW (viewport peak/ viewport width) in CSS?
It'due south a CSS unit used to measure the height and width in pct with respect to the viewport. It is used mainly in responsive design techniques. The mensurate VH is equal to one/100 of the height of the viewport. If the superlative of the browser is 1000px, 1vh is equal to 10px. Similarly, if the width is 1000px, so 1 vw is equal to 10px.
8. Deviation betwixt reset vs normalize CSS?. How do they differ?
Reset CSS: CSS resets aim to remove all congenital-in browser styling. For example margins, paddings, font-sizes of all elements are reset to be the aforementioned.
Normalize CSS: Normalize CSS aims to make built-in browser styling consequent across browsers. It also corrects bugs for common browser dependencies.
9. What is the divergence between inline, inline-block, and cake?
Block Element: The block elements always start on a new line. They will also take space for an unabridged row or width. Listing of cake elements are <div>, <p>.
Inline Elements: Inline elements don't offset on a new line, they appear on the same line as the content and tags abreast them. Some examples of inline elements are <a>, <span> , <strong>, and <img> tags.
Inline Cake Elements: Inline-block elements are similar to inline elements, except they can have padding and margins and gear up summit and width values.
10. Is it important to test the webpage in different browsers?
Information technology's most important to test a website in different browsers when you're first designing information technology, or when making major changes. However, information technology's also important to repeat these tests periodically, since browsers get through a lot of updates and changes.
11. What are Pseudo elements and Pseudo classes?
Pseudo-elements allows us to create items that practice not normally exist in the document tree, for example ::afterwards.
- ::before
- ::after
- ::showtime-letter
- ::first-line
- ::selection
In the below example, the colour will appear only on the starting time line of the paragraph.
p: :first-line { color: #ffOOOO; font-variant: modest-caps; } Pseudo-classes select regular elements but nether certain conditions like when the user is hovering over the link.
- :link
- :visited
- :hover
- :active
- :focus
Case of the pseudo-form, In the below example, the color applies to the ballast tag when it's hovered.
/* mouse over link */ a :hover { color: #FFOOFF; } 12. How practise you specify units in the CSS?. What are the dissimilar ways to do it?
There are unlike means to specify units in CSS like px, em, pt, percentage (%). px(Pixel) gives fine-grained command and maintains alignment because 1 px or multiple of 1 px is guaranteed to look sharp. px is non pour. em maintains relative size. you tin take responsive fonts. Em, will cascade 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 up default body font-size to 62.5% (equal to 10px).
pt(point) are traditionally used in print. 1pt = 1/72 inch and information technology is a fixed-size unit.
%(percentage) sets font-size relative to the font size of the body. Hence, you lot accept to set the font-size of the body to a reasonable size.
13. Does margin-peak or margin-bottom have an issue on inline elements?
No, it doesn't impact the inline elements. Inline elements flow with the contents of the page.
xiv. What property is used for changing the font face?
We can use the font-family belongings for achieving this. The font-family property is used for specifying what font needs to be practical on the targetted DOM chemical element. It can hold several font names as part of "fallback" mechanism in example the browser does not support the fonts. For example, we can use:
p { font-family unit: "Times New Roman", Times, serif; } In the above slice of code, we are applying font-family unit belongings to the paragraph element.
- It tells the browser to expect for "Times New Roman" font and employ it.
- If the "Times New Roman" font is not installed or supported, so it asks the browser to use Times font.
- If both "Times New Roman" and Times are not supported, then it asks the browser to use any supported generic font belonging to serif.
If you do not want the font-face of the paragraph chemical element to be Times New Roman/Times/serif font, and you desire to use the Arial/Helvetica/sans-serif font, then we can just update the CSS property of paragraph element every bit:
p { font-family: Arial, Helvetica, sans-serif; } 15. What are the differences between adaptive design and responsive design?
| Adaptive Pattern | Responsive Design |
|---|---|
| Adaptive design focuses on developing websites based on multiple fixed layout sizes. | Responsive design focuses on showing content on the basis of available browser space. |
| When a website developed using adaptive blueprint is opened on the desktop browser, first the available space is detected and then the layout with almost appropriate sizes are picked and used for the display of contents. Resizing of browser window has no bear on on the pattern. | When a website developed using responsive design is opened on a desktop browser and when we try to resize the browser window, the content of the website is dynamically and optimally rearranged to accomodate the window. |
| Usually, adaptive designs use six standard screen widths - 320 px, 480 px, 760 px, 960 px, 1200 px, 1600 px. These sizes are detected and advisable layouts are loaded. | This design makes employ of CSS media queries for changing styles depending on the target devices properties for adapting to unlike screens. |
| Information technology takes a lot of time and effort to first examine the options and realities of the stop users and then design all-time possible adaptive solutions them. | Generally, Responsive pattern takes much less work to build and blueprint fluid websites that tin accomodate content from screen depending on the screen size. |
| Gives a lot of control over the blueprint to develop sites for specific screens. | No much control over the design is offered here. |
16. How are the CSS selectors matched confronting the elements by the browser?
The order of matching selectors goes from right to left of the selector expression. The elements in the DOM are filtered by browsers based on the primal selectors and are then traversed upwards to the parent elements for determining the matches. The speed of determining the elements depends on the length of the chain of selectors. Consider an example:
p span{ color: black; } 
Here, the browser first finds all span elements in the DOM and and then it traverses to each of its parent elements to check if they are the paragraph p elements.
Once the browser finds all matching span tags having paragraph elements as parent and applies the color of black to the content, the matching procedure is stopped.
17. How is edge-box different from content-box?
content-box is the default value box-sizing belongings. The height and the width properties consist but of the content by excluding the border and padding. Consider an example as shown:
div{ width:300px; peak:200px; padding:15px; edge: 5px solid gray; margin:30px; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; } Here, the box-sizing for the div element is given as content-box. That ways, the height and width considered for the div content exclude the padding and border. We will get full peak and width parameters specified for the content as shown in the below image.
The border-box property includes the content, padding and border in the height and width properties. Consider an example as shown:
div{ width:300px; tiptop:200px; padding:15px; border: 5px solid greyness; margin:30px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } Here, the box-sizing for the div element is given as border-box. That means the height and width considered for the div content will too include the padding and border. This means that the actual height of the div content volition be:
bodily acme = height - padding on peak and bottom - border on top and bottom = 200 - (fifteen*2) - (5*2) = 160 px and the actual width of the div content would be:
actual width = width - padding on right and left - border on right and left = 300 - (15*2) - (5*2) = 260 px This is represented in the epitome below:
18. How is opacity specified in CSS3?
Opacity refers to the degree to which the content is transparent or opaque. Nosotros can utilize the holding named opacity which takes the values ranging from 0 to 1. 0 specifies that the element is completely transparent where one means that the element is completely opaque. We can use the opacity property as follows:
div { opacity: 0.6; } In the above example, an opacity of lx% is applied to the div section. The opacity property is non supported by the cyberspace explorer browser. To make information technology work at that place, nosotros need to utilise filter belongings every bit polyfill every bit shown in the example below.
div { opacity: 0.6; filter: blastoff(opacity=sixty); } 
19. Why should nosotros use float holding in CSS?
The bladder holding is used for positioning the HTML elements horizontally either towards the left or right of the container. For instance,
float-demo { float: right; } Here, the element to which the class is practical ensures that the element is positioned on the right of the container. If y'all specify the value of float equally left, and then the chemical element volition exist placed on the left side of the container.
xx. What is a z-alphabetize, how does it function?
z-index is used for specifying the vertical stacking of the overlapping elements that occur at the time of its positioning. It specifies the vertical stack order of the elements positioned that helps to define how the brandish of elements should happen in cases of overlapping.
The default value of this property is 0 and tin can exist either positive or negative. Autonomously from 0, the values of the z-index can be:
- Machine: The stack club will be set equal to the parent.
- Number: The number can be positive or negative. It defines the stack lodge.
- Initial: The default value of 0 is set up to the property.
- Inherit: The backdrop are inherited from the parent.
The elements having a lesser value of z-index is stacked lower than the ones with a college z-index.
From the in a higher place figure, we can see that as the value of the z-index increases along the z-axis, the lodge of stacking would exist towards the top of other elements forth the vertical axis.
21. What do the following CSS selectors hateful?
- div, p
- div p
- div ~ p
- div + p
- div > p
The meaning of the given list of selectors goes every bit follows:
-
div, p: This selector implies selecting all div elements and all p elements.
Consider an example beneath:
<h1>Heading ane</h1> <div> Division 1 <p> paragraph 1</p> <!-- Will be selected --> </div> <p> paragraph 2</p> <p> paragraph three</p> <div> Division 2 </div> <span> Span 1 </span> Here, all the div elements and the p elements would exist selected past the browser irrespective of their parents or where they are placed. The remaining tags like h1 and span are ignored.
-
div p: This selector tells to select all p elements that are within div elements. Consider an example below:
<h1>Heading 1</h1> <div> Division 1 <p> paragraph 1</p> <!-- Will be selected --> <div> <p> Inner Div Paragraph </p> <!-- Will be selected --> </div> </div> <p> paragraph two</p> <p> paragraph 3</p> <div> Division 2 </div> <bridge> Span ane </span> Here, <p> paragraph ane</p> and <p> Inner Div Paragraph </p> would exist selected by the browser and the properties are practical. The balance of the paragraph tags are not selected.
-
div ~ p: This selector tells to select all p elements that accept div elements preceeded anywhere. Consider an example,
<h1>Heading 1</h1> <div> Division ane <p> paragraph 1</p> </div> <p> paragraph two</p> <!-- Will exist selected --> <p> paragraph three</p> <!-- Will be selected --> <div> Division 2 </div> <bridge> Span 1 </span> Here, paragraph 2 and paragraph 3 elements would be selected every bit marked in the lawmaking above.
-
div + p: This selector says to select all p elements placed immediately later the div chemical element. Consider an example in this example:
<h1>Heading one</h1> <div> Sectionalisation 1 <p> paragraph i</p> </div> <p> paragraph 2</p> <!-- Will be selected --> <p> paragraph 3</p> <div> Partition two </div> <span> Span 1 </span> In this example, we have paragraph 2 element immediately later the div tag. Hence, only that element will be selected.
-
div > p: This selector says to select all p elements which has div as an immediate parent. In the aforementioned case below:
<h1>Heading 1</h1> <div> Division one <p> paragraph ane</p> <!-- Will be selected --> </div> <p> paragraph 2</p> <p> paragraph 3</p> <div> Division ii </div> <span> Span 1 </span> Only <p> paragraph i</p> volition be selected in this case considering information technology has immediate div as the parent.
22. What are the backdrop of flexbox?
Flexbox stands for flexible box and it was introduced around 2022 in CSS with the purpose of providing an efficient manner to handle layouts, marshal elements inside them and distribute spaces amid the items in dynamic/responsive conditions. It provides an enhanced ability to change the dimensions of the items and make use of the available space in the container efficiently. In gild to achieve this, CSS3 provides some backdrop.
The backdrop of flexbox are as follows:
- flex-direction: This property helps in defining the direction the container should stack the items targetted for flex. The values of this property can be
- row: Stacks items horizontally from left to right in the flex container.
- column: Stacks items vertically from top to bottom in the flex container.
- row-contrary: Stacks items horizontally from right to left in the flex container.
- column-opposite: Stacks items vertically from bottom to height in the flex container.
- flex-wrap: This holding specifies of the flex items should be wrapped or non. Possible values are:
- wrap: The flex items would be wrapped if needed.
- nowrap: This is the default value that says the items won't be wrapped.
- wrap-opposite: This specifies that the items will be wrapped if needed only in reverse club.
- flex-flow: This holding is used for setting both flex-management and flex-wrap properties in one statement.
- justify-content: Used for aligning the flex items. Possible values are:
- center: It means that all the flex items are present at the center of the container.
- flex-starting time: This value states that the items are aligned at the start of the container. This is the default value.
- flex-end: This value ensures the items are aligned at the stop of the container.
- space-around: This value displays the items having space between, before, around the items.
- space-between: This value displays items with spaces betwixt the lines.
- marshal-items: This is used for aligning flex items.
- align-content: This is used for aligning the flex lines.
23. What is cascading in CSS?
"Cascading" refers to the procedure of going through the style declarations and defining weight or importance to the styling rules that help the browser to select what rules have to exist practical in times of disharmonize. The conflict here refers to multiple rules that are applicable to a particular HTML element. In such cases, we need to permit the browser know what style needs to be practical to the chemical element. This is done by cascading down the list of style declarations elements.
For example, if we accept the below fashion:
p{ colour:white; } and we also have the following declaration below it or in another stylesheet that has been linked to the page:
p{ color: black; } We take a conflict in color property here for the paragraph elements. Here, the browser just cascades down to place what is the well-nigh recent and most specific manner and applies that. Since nosotros take the color:black; equally the most specific annunciation, the color black is applied to the paragraph elements. Now if you want to ensure color white is applied to the paragraph, we can define weight to that mode past adding !of import as shown below:
p{ color:white !important; } !important ensures that the property has the maximum weight in presence of other conflicting properties.
CSS Interview Questions for Experienced
24. Explain CSS position property?
- Absolute: To place an element exactly where you desire to place it. absolute position is really gear up relative to the element's parent. if no parent is available then the relative identify to the page itself (it volition default all the way support to the element).
- Relative: "Relative to itself". Setting position: relative; on an chemical element and no other positioning attributes, it will no effect on its positioning. It allows the use of z-index on the element and it limits the scope of absolutely positioned child elements. Whatever child element will be absolutely positioned within that block.
- Stock-still: The chemical element is positioned relative to the viewport or the browser window itself. viewport doesn't change if you scroll and hence the fixed element will stay right in the same position.
- Static: Static default for every single page element. The simply reason yous would ever prepare an element to position: static is to forcefully remove some positioning that got applied to an element outside of your control.
- Viscid: Gluey positioning is a hybrid of relative and fixed positioning. The chemical element is treated as relative positioned until it crosses a specified threshold, at which indicate it is treated every bit stock-still positioned.
25. When does DOM reflow occur?
Reflow is the proper name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering office or all of the certificate.
Reflow occurs when:
- Insert, remove or update an element in the DOM.
- Modify content on the page, e.yard. the text in an input box.
- Move a DOM chemical element.
- Breathing a DOM chemical element.
- Take measurements of an chemical element such as offsetHeight or getComputedStyle.
- Change a CSS style.
26. Different Box Sizing Property?
The box-sizing CSS property sets how the total width and height of an element are calculated.
- Content-box: The default width and height values apply to the chemical element's content just. The padding and border are added to the outside of the box.
- Padding-box: Width and top values utilize 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.
- Border-box: Width and peak values apply to the content, padding, and border.
27. How to center align a div inside some other div?
- Centering with Tabular array:
HTML:
<div form="cn"> <div course="inner">your content</div> </div> CSS:
.cn { display: table-jail cell; width: 500px; superlative: 500px; vertical-marshal: middle; text-align: eye; } .inner { display: inline-cake; width: 200px; height: 200px; } - Centering with Transform
HTML:
<div class="cn"> <div class="inner">your content</div> </div> CSS:
.cn { position: relative; width: 500px; height: 500px; } .inner { position: absolute; acme: l%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; } - Centering with Flexbox
HTML:
<div form="cn"> <div grade="inner">your content</div> </div> CSS:
.cn { display: flex; justify-content: eye; align-items: heart; } - Centering with Grid
HTML:
<div form="wrap_grid"> <div id="container">vertical aligned text<br />some more text here </div> </div> CSS:
.wrap-grid { display: grid; place-content: center; } 28. Can you proper noun the four types of @media backdrop?
The iv types of @media properties are:
- All → It'southward the default property. Used for all media-type devices.
- Screen → Used for computer screen, mobile screen.
- Print → Used for printers.
- Speech → Used for screen readers.
29. What is the grid system?
CSS Filigree Layout is the most powerful layout organization available in CSS. Information technology is said to be a 2-dimensional organisation, meaning it tin handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.
30. What are the different ways to hide the chemical element using CSS?
- Using display property(display: none). Information technology'south non available for screen readers. The element volition not exist in the DOM if display: none is used.
- Using visibility property(visibility: hidden), will take upwardly the space of the element. It volition be available to screen reader users. The element will really be present in the DOM, just not shown on the screen.
- Using position holding (position: absolute). Make it available outside the screen.
31. What does the :root pseudo-grade refer to?
The :root selector allows you to target the highest-level "parent" element in the DOM, or document tree. It is divers in the CSS Selectors Level 3 specification.
32. What does Accessibility (a11y) mean?
Accessibility refers to how software or hardware combinations are designed to make a arrangement accessible to persons with disabilities, such equally visual impairment, hearing loss, or limited dexterity.
For example, a website developed with accessibility in mind might have text-to-speech capabilities. In the The states public websites have to accept accessible compliance. It'southward defined in 508 compliance. It gives the guidelines and best practices for all website users that should be met with primal areas of accessibility.
33. How do I restore the default value of a property?
The keyword initial can be used to reset information technology to its default value.
34. Difference between CSS filigree vs flexbox?
- CSS Grid Layout is a ii-dimensional organisation, meaning information technology can handle both columns and rows. Grid layout is intended for larger-calibration layouts which aren't linear in pattern.
- Flexbox is largely a one-dimensional system (either in a cavalcade or a row). Flexbox layout is most advisable to the components of an awarding.
35. How does Calc work?
The CSS3 calc() function allows us to perform mathematical operations on property values. Instead of declaring, for example, static pixel values for an element's width, we can use calc() to specify that the width is the consequence of the addition of two or more numeric values.
.foo { Width: calc(100px + 50px) } 36. What do CSS Custom properties variables mean?
Custom properties (sometimes referred to equally CSS variables or cascading variables) are defined by users that contain specific values to be reused throughout a document. The value is set using -- notion. And the values are accessed using the var() part.
:root { --main-bg-colour: brown } .one { colour: white; background-colour· var (--main-bg-colour); margin: l0px, width: 50px, height: vOpx; display: inline-block; } 37. What is the difference betwixt CSS variables and preprocessor(SASS, LESS, Stylus) variables?
- CSS variables tin be used without the demand for a preprocessor. Currently, all the major browsers support the CSS variables.
- CSS variable cascade. But the preprocessor variables don't pour.
- CSS variable can exist accessed and manipulated in javascript.
38. What does * { box-sizing: border-box; } practise? What are its advantages?
- It makes every chemical element in the document include the padding and border in the element's inner dimension for the height and width computation.
- In box-sizing: border-box, The tiptop of an element is now calculated by the content's height + vertical padding + vertical border width.
- The width of an element is now calculated by the content's width + horizontal padding + horizontal border width.
39. What does !of import hateful in CSS?
The style is having the of import will have the highest precedence and it overrides the cascaded property.
p { color: blood-red !of import; }#thing { colour: green; } <p id="matter">Volition be Cherry-red.</p> forty. What is specificity? How to calculate specificity?
A procedure of determining which CSS rule will be applied to an chemical element. It actually determines which rules will take precedence. Inline style usually wins then ID then the grade value (or pseudo-grade or attribute selector), the universal selector (*) has no specificity. ID selectors accept a college specificity than aspect selectors.
41. What is progressive rendering? How practise you implement progressive rendering in the website?. What are the advantages of it?
Progressive rendering is the proper name given to techniques used to amend the performance of a webpage (in particular, improve perceived load time) to render content for display as rapidly as possible.
Nosotros can implement the progressive rendering of the folio by loading the lazy loading of the images. We tin apply Intersection Observer API to lazy load the image. The API makes it unproblematic to notice when an element enters the viewport and take an action when it does. In one case the image enters the viewport, nosotros will kickoff loading the images.
A sample snippet is given beneath.
<img form="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load-1x.jpg" data-srcset="image-to-lazy-load-iix.jpg 2x, image-to-lazy-load-1ten.jpg 1x" alt="I'm an image!"> certificate.addEventListener("DOMContentLoaded", function() { var lazyImages = [] .piece .call(document.querySelectorAll("img .lazy")); if ("IntersectionObserver" in window) { permit lazyImageObserver = new IntersectionObserver(function(entries, observer) { entries.forEach(part(entry) { if (entry.isIntersecting) { let lazyImage = entry.target; lazyImage.src = lazyImage.dataset .src; lazyImage.srcset = lazyImage.dataset .srcset; lazyImage.classList .remove("lazy"); lazyImageObserver.unobserve(lazyImage); } }); }); lazyImages.forEach(role(lazyImage) { lazyImageObserver.observe(lazyImage); }); } else { // Possibly autumn back to event handlers here } }); 42. What are the advantages of using translate() instead of absolute position?
Translate() does not cause the browser to trigger repaint and layout and instead merely acts on the compositor. The absolute position triggers the repaint or DOM reflow. Then, interpret() gives ameliorate performance.
43. Does style1.css have to be downloaded and parsed earlier style2.css tin be fetched?
<head> <link h ref=" stylel. css" rel=" stylesheet"> <link href="style2.css" rel="stylesheet"> </head> No, the browsers will download the CSS in the order of its appearance on the HTML page.
44. How to determine if the browser supports a certain characteristic?
The @support in CSS tin can be very useful to browse if the electric current browser has support for a certain feature.
@supports (display: grid) { div { display: grid; } } 45. How does the accented positioning piece of work?
Absolute positioning is a very powerful positioning mechanism that allows users to identify any element wherever they want in an verbal location. The CSS properties right, left, top, lesser and define the exact locations where you lot need to place the chemical element. In absolute positioning, the post-obit points need to be considered:
- The element to which the accented positioning is practical is removed from the normal workflow of the HTML document.
- The HTML layout does not create whatever space for that chemical element in its folio layout.
- The chemical element is positioned relative to the closest positioned ancestor. If no such ancestor is nowadays, and so the element is placed relative to the initial container block.
- The final position of the element is determined based on values provided to the top, correct, left, bottom.
47. How will you align content inside the p tag at the exact center within the div?
We can add the text-align: center belongings inside the parent div for aligning the contents horizontally. But it will not align the contents vertically. We tin can marshal the content vertically by making the parent element have relative positioning and the child chemical element have absolute positioning. The kid element should have the values of pinnacle, lesser, correct, left every bit 0 to eye it in the middle vertically. So we demand to set the margin as motorcar. Information technology is assumed that both the child and mother elements volition have height and width values.
Consider we accept a div element of meridian and width taking 20% of the screen size, and nosotros take a paragraph element taking the superlative of one.2em and width of 20%. If we want to align the paragraph element at the center (vertically and horizontally), we write the following styles:
div { position : relative; // Make position relative summit : 20%; width : 20%; text-align : center; //Align to center horizontally } p { position : accented; // Brand position accented superlative:0; // Give values of height, bottom,left, right to 0 bottom:0; left:0; right:0; margin : auto; // Set margin as auto summit : ane.2 em; width : 20%; } 48. How is margin different from padding in CSS?
Margin property using which nosotros tin create space around the elements. Nosotros tin also create space for borders divers at the exteriors. We take the following properties for defining the margin:
- margin-tiptop
- margin-right
- margin-lesser
- margin-left
margin property by itself has the values as: - auto – The browser auto-calculates the margin while we use this.
- length – The value of this holding tin be in px, pt, cm, em etc. The values tin can be positive or negative.
- % – We can also give percentage value as margin to the chemical element.
- inherit – Using this property, the margin backdrop can be inherited from the parent elements.
The padding holding is used for generating the space around the element's content and inside any known border. The padding also has sub-properties similar:
- padding-superlative
- padding-right
- padding-bottom
- padding-left
It is to be noted that the padding does not allow negative values.
From the beneath epitome, we can meet that the Margin is the outermost entity of the CSS Box Model that lies outside of the borders whereas the padding lies within the borders.
49. What do you lot have to practise to automatically number the heading values of sections and categories?
We tin can apply the concept of CSS counters. This lets united states arrange the appearance of the content based on the location in a document. While using this, nosotros need to first initialize the value of the counter-reset belongings which is 0 past default. The aforementioned belongings is likewise used for changing the value to whatever number that we need. Post initialization, the counter'south value can be incremented or decremented by using the counter-increment property. The name of the counter cannot be CSS keywords like "none", "initial", "inherit" etc. If the CSS keywords are used, then the declaration would be ignored.
Consider an instance as shown below:
body { counter-reset: header; /* ascertain counter named 'header' whose initial value is 0 by default */ } h2::before { counter-increment: header; /* The value of header counter by one.*/ content: "Header " counter(header) ": "; /* To display word Header and the value of the counter with colon earlier information technology.*/ } Here, nosotros are trying to reach automobile count increment and display feature for the h2 tag. Wherever we use h2 tag, the content volition be prefixed by "Header i : " , "Header 2 : ", "Header 3 : " etc.
fifty. How is the nth-kid() different from nth of type selectors?
Both are pseudo-classes (Pseudo-classes are those keywords that specifies the special state of the selected element). The nth-child() pseudo-class is used for matching elements based on the number that represents the position of an element based on the siblings. The number is used to friction match an chemical element on the basis of the chemical element's position amidst its siblings.
For example, in the below piece of code, if we requite nth-child(4) for the example form, then the 4th kid of the example class is selected irrespective of the chemical element type. Here, the fourth child of the example class is the div chemical element. The element is selected and a background of black is added to it.
.example:nth-child(4) { background: black; } <div course= "case"> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <div>This is a div.</div> <!-- ivth Element to select and apply manner--> <div>This is a div.</div> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <div>This is a div.</div> </div> The nth-of-type() pseudo-course is similar to the nth-child simply it helps in matching the selector based on a number that represents the position of the element inside the elements that are the siblings of its same type. The number can also be given as a function or give keywords like odd or even.
For case, in the beneath piece of code, if nosotros give p:nth-of-type(fifty-fifty) for the example class, then all the fifty-fifty paragraph tags are selected within the example form and the way of groundwork blackness is applied to them. The selected elements are marked in comments in the beneath code:
.case p:nth-of-type(even) { groundwork: black; } <div class= "example"> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <!-- Select this and apply manner--> <p>This is a paragraph.</p> <div>This is a div.</div> <div>This is a div.</div> <p>This is a paragraph.</p> <!-- Select this and apply manner--> <p>This is a paragraph.</p> <div>This is a div.</div> <p>This is a paragraph.</p> <!-- Select this and use style--> <div>This is a div.</div> </div> 51. What is the importance of CSS Sprites?
CSS sprites are used for combining multiple images in a single larger image. They are commonly used for representing icons that are used in the user interfaces. The main advantages of using sprites are:
- It reduces the number of HTTP requests to get data of multiple images as they are acquired only by sending a single request.
- Information technology helps in downloading assets in accelerate that help display icons or images upon hover or other pseudo-states.
- When there are multiple images, the browser makes divide calls to get the epitome for each of them. Using sprites, the images are combined in ane and we can merely telephone call for that image using one call.
Consider an example where our application requires 3 images equally shown beneath (Without Sprites Section). If we are trying to load the images independently, nosotros crave iii different HTTP Requests to become the data. Only if we take CSS Sprites where all 3 images are combines into 1 separated by some spaces, then we require only 1 HTTP Request.
Nosotros can access each paradigm from the sprite by accessing the positioning properties as shown in the below code:
<!DOCTYPE html> <html> <caput> <style> #home-icon { left: 0px; width: 46px; groundwork: url('spriteFile.gif') 0 0; } #prev-icon { left: 63px; width: 43px; background: url('spriteFile.gif') -47px 0; } #side by side-icon { left: 129px; width: 43px; background: url('spriteFile.gif') -91px 0; } </fashion> </caput> <body> <img id="dwelling-icon" src="spriteFile.gif" width="i" elevation="i"> <!-- To display home icon here --> <img id="next-icon" src="spriteFile.gif" width="1" height="ane"> <!-- To display side by side icon icon here --> <img id="prev-icon" src="spriteFile.gif" width="1" height="i"> <!-- To display previous icon icon here --> </body> </html> In the above lawmaking, we are trying to admission each element - house, previous and side by side icon - from the sprite file past using the left, width backdrop. The image is displayed in the img section by means of the background holding. Do note that the source of the prototype (src aspect of the img tag) is just 1 file which is the spriteFile.gif and depending on the rules specified in the id selectors, the images are loaded accordingly.
52. What exercise you understand by tweening in CSS?
Tweening is the process of filling the gaps between the central sequences, i.e between the keyframes that are already created. Keyframes are those frames that stand for commencement and stop betoken of blitheness activity. Tweening involves generating intermediate keyframes between two images that give the impression that the first 1 has evolved smoothly to the second image. For this purpose, nosotros use properties like transforms - matrix, translate, calibration, rotate etc.
In the below example, we are generating intermediate frames of paragraph elements to slide through from the get-go to the right edge of the browser.
p { blitheness-elapsing: 2s; animation-name: slidethrough; } @keyframes slidethrough { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } Here, the paragraph element specifies that the animation process should accept ii seconds for execution from start to the finish. This is done by using the blitheness-duration property. The animation-name of the @keyframes is defined by using the property animation-proper name. The intermediate keyframes are defined by using @keyframes rule. In the example, we accept just 2 keyframes. The first keyframe starts at 0% and runs till the left margin of 100% which is the rightmost border of the containing chemical element. The second keyframe starts at 100% where the left margin is set up as 0% and the width to be set as 100% which results in finishing the animation affluent confronting the left edge of the container area.
53. Why exercise we need to utilize articulate property along with floats in CSS?
The articulate belongings along with floats is used for specifying which side of floating elements is not supposed to float. An chemical element having clear property ensures that the element does non move upwards adjacent to the float. Just the element will exist moved down past the float.
Let us understand this with the help of an case. We know that the floated objects do not add to the top of the objects where they reside. Consider we have a div chemical element with grade "floated_div" within another div chemical element with id "main_div".
<html> <head> <style> #main_div { width: 400px; margin: 10px auto; border: 4px solid #cccccc; padding: 5px; } .floated_div { bladder: left; width: 50px; pinnacle: 50px; edge: 2px solid #990000; margin: 10px; } </style> </head> <body> <div id="main_div"> <p>Clear Bladder Demo</p> <div class="floated_div"> </div> <div class="floated_div"> </div> <div course="floated_div"> </div> <div class="floated_div"> </div> <div class="floated_div"> </div> </div> </body> </html> The result of this code would be as shown beneath. We run into that the squares that are expected to be within dev are not within the main parent div. How practice we fix this?
We can do it just by calculation <div mode="articulate:both"></div> line at the finish of the concluding floated chemical element so that the floated elements are fit in properly within the primary div container.
<html> <caput> <manner> #main_div { width: 400px; margin: 10px auto; border: 4px solid #cccccc; padding: 5px; } .floated_div { float: left; width: 50px; acme: 50px; border: 2px solid #990000; margin: 10px; } </style> </head> <body> <div id="main_div"> <p>Clear Float Demo</p> <div course="floated_div"></div> <div class="floated_div"></div> <div form="floated_div"></div> <div class="floated_div"></div> <div class="floated_div"></div> <div style="clear:both"></div> <!-- Adding this fixed the issue --> </div> </body> </html> The result of this will be:
54. How will you ready browser-specific styling problems?
Different ways to fix browser-specific issues.
- We tin can write browser-specific styles separately in unlike sheets and load that merely when the specific browser is used. This makes use of the server-side rendering technique.
- We can apply automobile-prefix for automatically adding vendor prefixes in the code.
- We can also employ normalize.css or reset CSS techniques.
There are some ways for avoiding browser compatibility issues besides. They are as follows:
- Validate HTML and CSS: We know that the lawmaking will exist read, interpreted and handled differently by unlike browsers. We demand to validate our HTML and CSS files for the missing closing tags, or missing semicolons in the syntaxes because at that place are chances that the old browsers volition throw errors while rendering the code. We tin can avert those errors past:
- Maintaining well-aligned code that helps in easy readability.
- Inserting comments at necessary places.
- Make utilise of validation tools like Jigsaw CSS validator, W3C HTML Validators to identify syntax issues in the code.
- Maintain Cross-Browser Compatibility in the Layouts: Cross-Browser compatibility is a must while developing spider web applications. We expect our application to be responsive across all devices, browsers and platforms. Some of the effects of layout incompatibilities are unresponsiveness of the layouts in mobile devices, the departure in layout rendering between modern and sometime browsers, etc. These incompatibilities tin can be avoided by using:
- CSS Multi-Column layouts - For maintaining proper layouts w.r.t columns and containers.
- HTML viewport metatag – For ensuring content is properly spanned beyond mobile devices.
- CSS Flexbox and Grids - To layout kid elements depending on the content and available space.
- CSS resets stylesheets - For reducing browser inconsistencies in default line heights, font sizes, margins etc.
- Cheque JavaScript Library issues: Ensure the libraries are used judiciously and the ones used are supported by the browsers.
- Check DOCTYPE tag keyword: The DOCTYPE keyword is meant for defining rules of what needs to be used in the code. Older browser versions check for DOCTYPE tag at the beginning and if not found, the awarding rendering won't be proper.
- Test on real devices: Although applications can be tested on virtual environments, it would be more than benign if the testing is carried out on real devices and platforms. We tin can utilize tools like Testsigma for this purpose that enables us to test in real devices parallelly.
Conclusion
CSS plays the most important role in the field of web development. This is because CSS helps in achieving cute, responsive or adaptive websites depending on the business requirements. CSS helps in building lighter and flexible layouts that help in loading pages faster and making the content visually appealing. CSS is continuously evolving and is becoming more powerful thereby making it the most sought-after technology by diverse companies to develop websites. In this article, we have seen the most commonly asked interview questions in CSS, more than particularly CSS3.
Useful Resource
- CSS Guides
- HTML
- Coding Do
- JavaScript
- SASS Vs SCSS
- HTML/CSS Books
CSS MCQ
Source: https://www.interviewbit.com/css-interview-questions/
0 Response to "Oops Try Again Make Sure That You Use the Universal Selector to Give a Border 1px Wide"
Post a Comment