Interview Question HTML and CSS :
1. Difference between Visibility: hidden and Display: None.
In Visibility: hidden , element is present but it is not visible, but it
occupies space on web page.
Ex: <div style="visibility: hidden";>Hi i am visibility hidden</div>
In Display: None, element is not present and it will not occupies any
space on web page.
Ex: <div style="display: none";>Hi i am Display None</div>
2. Difference between CSS and SCSS.
CSS : cascadind style sheets, basic scripting language, used for designing
web pages, css is the most important web technologies that are widely
used along with html and js. CSS have file extension of .css.
SCSS: Syntactically Awesome style sheet is the superset of css, and it is
the more advanced version of css. scss was designed by hampton catlin
and was developed by chris eppstein and natlie weizenbaum. due to its
advanced features it is often termed as sassy css. scss have file
extension as .scss
Features : offers variables, @import, allows us to create nested syntax.
3. What are various ways to integrate css in web pages ?
=> 3 ways : Internal css, external css and Inline css.
4. What is a CSS Selectors ?
=> It is a string that identifies the element to which a particular
declaration is applied.
link btwn html doc and style sheet.
equ of html elements.
types of selectors :
1. CSS Element Selector : like tag selector : p { }
2. CSS Id Selector : id selector #name { }
3. CSS Class Selector: class selector .place { }
4. CSS Universal Selector: applies to all elements * { }
5. CSS Group Selector:
5. RWD : Responsive Web Design :: >> This technique is used to display
designed page perfectly on every screen size and device, for ex : mobile,
tablet, desktop and laptop.
A responsive web design will automatically adjust for different screen
sizes and viewports.
Media queries, grids, layouts, customized designs.
Ex : twitter, facebook, instagram(adapts to every screen size)
6. What is CSS Box Model and what are its elements ?
This box defines designs and layout of elements of css.
the elements are :
margin: the topmost layer, the overall structure is shown.
border: creates a border around padding and content. bg color affects
the border.
padding: space is shown between content and border.
content: actual content is shown.
Example :
<div class="boxModel">Box Model
</div>
.boxModel {
background-color: black;
width : 100px;
height : 100px;
padding : 20px;
border : 5px solid yellow;
color: yellow;
margin: 20px;
7. What are Pseudo Classes ?
it is used to define a special state of an element.
represented with single colon ( : )
syntax : selector : pseudo-class {
property : value;
ex: visited, link , hover.
8. What are Pseudo Elements :
it is used to add special effects to some selctors.
represented with double colon ( :: )
p:: before { }
p :: after { }
p :: content {} , p :: first-line { }, p :: first-letter { }
Example :
<div>
Hi i am first line
<p> Hi I am second line </p>
</div>
/* apply pseudo elements */
div::first-line{
color : green;
div::before{
content: ".1 => ";
p::after{
content: "...done here";
9. What is Saas in CSS ?
=> syntactically awesome style sheets
=> extension is .css
=> it is css pre-processor.
=> compatible with versions of css.
=> reduces repetition of css and all versions of css.
=> saas is free to download and use.
=> @import, variables and nested rules, mixins, inheritance, built-in
funtions.
variable declaration : $bgcolor, $fontSize, $textColor
10. why is @import only at the top ?
@import is preferrred only at the top, to avoid any overriding rules.
11. what is z-index in css?
helps to specify the stack order of positioned elements that may
overlap one another.
the z-index deafult 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.
z-index can take the following values :
auto, number, initial and inherit
12. What is transition and transform property in CSS ?
transition : CSS transitions allows us to change property values
smoothly, over a given duration, used to add animations in css.
transition : all 0.8s ease-in;
Transform : The transform property applies a 2D or 3D transformation
to an element. This property allows you to rotate, scale, move, skew,
etc., elements.
transform : rotate(90deg); || transform: skew(-90deg);
13. What is Grid ?
css grid is a layout system that provides properties to create rows,
columns and two dimensional grid layouts.
Uses "display:grid" to create a grid container with items
Two dimensional layout model
Supported in all modern browsers.
display: grid
grid-template-rows
grid-template-columns
grid-gap(gap)
grid-column
grid-row
grid-area
justify-items
align-items
justify-content
align-content
