CSS Interview Questions and Answers

css stand for cascading style sheets, it describes the visual style and representation of the content written in html

box sizing allows us to include the padding and border in the total width and height of the html element

flex box is an alternative way to using floats for defining the overall appearance of the web page

css preprocessor is a tool which allows you to create css code much faster in a more structured manner. css preprocessor extends css by allowing us to add variables, mixin, partials. Its powerful and helpful when working on creating custom themes and reusable css code

CSS preprocessor make it easy to automate repetitive tasks, reduce the number of errors and code bloat, create reusable code snippets, and ensure backward compatibility. Each CSS preprocessor has its own syntax that they compile into regular CSS so that browsers can render it on the client side.

each of the base color can take the value between 0 and 255 and which leads to 16.8 million different colors

RGB notation, hexadecimal notation

• :link
• :visited
• :hover
• :active

• :link
• :visited
• :hover
• :active
• :focus
• :target
• :focus-within
• :focus-visible

When the element has the top margin and that element has a previous sibling with bottom margin. Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

Not all, only the text related properties are inherited, for example the border-top property is not inherited by the child elements

Normalize css provides cross browser consistency in default styling of the html elements

pseudo elements are the elements that do not exist in the html but still you can style them in css

examples: :first-letter, :first-line,:before,:after

• Float layouts

  The old way of building layouts of all sizes, using the float css property.

• Flex layouts

  Modern way of laying out elements in a one dimensional row without using floats.

• Grid layouts

  For laying out elements in a full fledged two dimensional grid. Perfect for page layouts and complex components

No, inline elements do not have width and height impact on it. only padding and margins in horizontal directions are applied. It takes the padding in the fill area but the elements do not get any position change

Sass is a css preprocessor, an extension of css that adds power and elegance to the basic language. There are other preprocessor like less and stylus, but sass is more popular one.

• Variables for reusable values such as colors, font-sizes, spacing etc
• Nesting , to nest selectors inside of one another, allowing us to write less code.
• allows us to write mathematical operators right inside the css.
• partials and imports: to write css in different files and importing them all into one single file
• Mixins: to write reusable pieces of css code
• Functions: similar to mixins, with the difference that they produce a value that can then be used
• Extends: to make different selectors inherit declarations that are common to all of them
• control directives: for writing complex code using conditionals and loops

sass and scss have syntax differences, sass doesn't use semicolons and curly braces. It is confusing and difficult to understand and also difficult to compile to css. scss looks like css and easy to compile. Both works the same way but looks different.

Grid is made for two-dimensional layout while Flex box is for one. This means Flex box can work on either row or columns at a time, but Grids can work on both. When working on either element , you are most associated with the content.

Basically anything on a page is a box. Box model is used to create a definition for the way the html elements are organized on the screen.

Box model consists of four parts , content, padding, border and margin. The content can have the height and width. And in between we have padding, the space between the border and content. Margin is everything outside of the border.

The viewport is the users visible area of the webpage. The viewport height is the unit based on the viewport. A value of 1vh is equal to 1% of the viewport height. is the css unit

The position property specifies the type of positioning method used for an element.

There are 5 css positions, static, relative, absolute, fixed and sticky

An element with position relative is positioned relative to its normal flow of the document

In absolute positioning the element is removed from the document, so no space is created for the element in that page layout. The element with position absolute is positioned relative to nearest relative positioned ancestor

In fixed position also the element is removed from the document flow like the absolute positioned element. But the element is positioned relative to viewport or whole page

Static positioning is the default value, the element is positioned according to the normal flow of the document, top,right,bottom,left or z-index have no effect.

The * selector which is called universal selector. It is used to select all the elements in a html document. It is also used to select the elements inside under another element. The styles will we applied to everything in the document.

class selectors in css is used with (.) in front of the name. Every element in html which has that class name will get the styles.

Id selector, it should be unique, only one unique id per page. You have to use pound symbol with the name in the css.

Element selector, the element selector in css is used to select elements inside the elements.

descendant selector, the descendant selector matches all elements that are descendants of a specified element

and few more are child selectors, sibling selectors, adjacent sibling selector.