Front End Developers-Lab

CSS3
Top 10 Interview Questions and Anwsers

1- What Is Css Box Model And What Are Its Components?

The CSS Box Model represents a box that confines every HTML element such as a text box, a menu or a button. It has primarily four core components.
Margin -It refers to the topmost layer of the box.
Border -The padding and content options work around the Border. Changing the background color can also affect the Border.
Padding -It defines spacing around the box.
Content -It represents the actual content to be shown.

2- What Is The Use Of Float Property In Css?

With the help of float property, we can control the position and layout of elements on a web page.
For example, it can define the placement of a div either to the right or left side. Also, to note that it doesn't interfere with the elements appearing before.

div  {
    float: left;
}

3- What Is Z-Index And How Does It Work?

The z-index is a CSS property which defines the stack order of web elements. Higher order elements will appear before any lower order element.
Note - The z-index only applies to the positioned elements.
For example, position:absolute, position:relative, or position:fixed.

div {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: -1;
}

4- What Are The Different Types Of Css?

Below are the different types of CSS.
Embedded -It adds the CSS styles using the <style>attribute.
Internal CSS code is put in the <head> section of a particular page.The classes and IDs can be used to refer to the CSS code, but they are only active on that particular page.
Code Example: <style type="text/css"> p {color:white; font-size: 10px;} .center {display: block; margin: 0 auto;} #button-go, #button-back {border: solid 1px black;} </style> Inline CSS is used for a specific HTML tag <style> attribute is used to style a particular HTML tag. Using CSS this way is not recommended, as each HTML tag needs to be styled individually.
Code Example: <body style="background-color:black;"> Linked/External - It adds an external CSS file to the HTML document. Probably the most convenient way to add CSS to your website, is to link it to an external.css file. That way any changes you made to an external CSS file will be reflected on your website globally. A reference to an external CSS file is put in the headsection of the page:
Code Example: <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> While the style.css contains all the style rules. For example: .xleftcol { float: left; width: 33%; background:#809900; } .xmiddlecol { float: left; width: 34%; background:#eff2df; }

5- What Is The Difference Between CSS Grid And Flexbox ?

Flexbox is designed for one-dimensional layouts, and Grid for two-dimensional layouts.
Dimensions define the primary demarcation between Flexbox and CSS Grid.
Flexbox was designed specifically for one-dimensional layouts, while CSS Grid is engineered to enable two-dimensional layouts.

6- In your own words, explain what the DOM is to someone who is a beginner to web development.

The Document Object Model is a programming API for documents. The object model itself closely resembles the structure of the documents it models. For instance, consider this table, taken from an HTML document:
<TABLE><br> <ROWS> <br> <TR> <br> <TD>Darji Nilesh</TD><br> <TD>Aeolian</TD> <br> </TR> <br> <TR><br> <TD>Over the River, Jama</TD><br> <TD>Hassan</TD> <br> </TR> <br> </ROWS><br> </TABLE>

7- What are the two parts of a style rule?

A style rule is composed of two parts: a selector and a declaration. The style rule expresses the style information from an element. The precise specification of a property in a style rule, based on the allowable values for the property.

The Benefits of Front-End

Printer Friendly Version

Home HTML CSS Javascript React-App Angular.js