CSS INTERVIEW QUESTIONS ANSWERS 2019

CSS stands for Cascading Style Sheet. It is a popular styling language which is used with HTML to design websites. It can also be used with any XML documents including plain XML, SVG, and XUL

There are a number of advantages of CSS,
  • It gives lots of flexibility for setting the properties of the element
  • Easy maintenance
  • It allows separation of content of the HTML document from the style and layout of the content basically
  • Loading of pages at a faster pace
  • Compatibility with multiple device
  • Increases the website’s adaptability and makes it compatible to future browsers

SGML (Standard Generalized Markup Language) is the origin of CSS. It is a language that defines markup languages.

  • Following are the different variations of CSS:

    • CSS1
    • CSS2
    • CSS2.1
    • CSS3
    • CSS4

There are several modules in CSS as stated below:

  • Selectors
  • Box Model
  • Backgrounds and Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations
  • Multiple Column Layout
  • User Interface.

CSS can be integrated in three ways:

  • Inline: term is used when the CSS code have attribute of HTML elements
    <p style="colour:skyblue;"> hello world!</p>
  • External: separate CSS file is created in the workspace and later linking them in every web page that is created
    <head>
    
      <link rel="text/css"
    
    href="your_CSS_file_location"/>
    
    </head>
    
  • Internal: the head element of the web page has internal CSS implemented in it
    <head>
    
      <style>
    
        p{
    
           color:lime;
    
           background-color:black;
    
          }
    
       </style>
    
    </head>

The advantages of External Style sheets are:

  • The style of several documents can be controlled from site by using them.
  • Multiple HTML elements can have many documents, where classes can be created.
  • To group styles in complex situations, selector and grouping methods are used.

Demerits of external css are as follows:

  • Extra download is needed to import documents having style information.
  • To render the document, the external style sheet should be loaded.
  • Not practical for small style definitions.
  • Ascending by selectors is not possible
  • Limitations of vertical control
  • No expressions
  • No column declaration
  • Pseudo-class not controlled by dynamic behavior
  • Rules, styles, targeting specific text not possible

It is a pre-planned libraries, which allows easier and more standards-compliant webpage styling, using CSS language

Embedded style sheet gives us the privilege to define styles at one place in an HTML document.

We can generate multiple classes using an embedded style sheet to use on multiple tag types of a web page and also there is no extra downloading required for importing the information.

Example:

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
p {
  font-family: georgia, serif;
  font-size: x-large;
  color:#ff9900;
  }
a:hover {
  color: LimeGreen;
  text-decoration: none;
  }
</style>
</head>

<body>
<p>Embedded style sheet gives us the privilege to define styles at one place in a HTML document. 
We can generate multiple classes using embedded style sheet to use on multiple tag types a web page 
and also there is no extra downloading required importing the information.
</p>
</body> 

</html>

By using CSS selector, we can choose the content which we want to style so that we can say that it is a bridge between the style sheet and the HTML files.

The syntax for CSS selector is “select” HTML elements created on their id, class, type etc.

CSS can be integrated in three ways:

  • Inline: Style attribute can be used to have CSS applied HTML elements.
  • Embedded: The Head element can have a Style element within which the code can be placed.
  • Linked/ Imported: CSS can be placed in an external file and linked via link element.

There are two reasons behind this:

  • It enhances the legibility of style sheets. The background property is a complex property in CSS, and if it is combined with color, the complexity will further increase.
  • Color is an inherited property while the background is not. So this can make confusion further.

The CSS box defines the design and the layout of elements of CSS. The several elements are:

Margin: transparent area outside border
Border: the padding and content option with a border around it is shown.
Padding: Space is around content. Padding is transparent.
Content: box where text and images appear.
e.g.:

 
div{
	width: 300px;
	border: 25px solid  yellow;
	padding: 25px;
	margin:  25px;
}

The 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.

Z-Index can take the following values:

  • Auto: Sets the stack order equal to its parents.
  • Number: Orders the stack order.
  • Initial: Sets this property to its default value (0).
  • Inherit: Inherits this property from its parent element.

The CSS opacity property is used to specify the transparency of an element. In simple word, you can say that it specifies the clarity of the image. In technical terms, Opacity is defined as the degree to which light is allowed to travel through an object. For example:

 
  1. <style>    
  2. img.trans {    
  3.     opacity: 0.4;    
  4.     filter: alpha(opacity=40); /* For IE8 and earlier */    
  5. }    
  6. </style> 

Some CSS Style components are:

  • Selector
  • Property
  • Value

When you’ve got a good grasp of HTML, your interviewer may ask you some questions on how HTML works with CSS and JavaScript, to tie everything together. If you are planning on working as a front end developer, employers prefer some proficiency in all three languages.

CSS (Cascading Style Sheets) allows you to change the look of elements on the page, transforming it from a simple text document to a fully fledged website. We won’t go into too much detail on CSS here, but you can read our article on CSS interview questions for more.

There are three main ways to apply CSS styles to a webpage:

Inline styles

You can add a style attribute to almost any tag. Inside this attribute you can write your CSS rules.

<div style="background-color: red;">A container with a red background.</div>

A style block

You are able to define one or more style blocks inside the head section of your HTML document. Inside these blocks you can write your CSS rules. You will have to specify which elements on the page you’d like to style. In the below example, we’re targeting the <body> tag and an element with a class attribute equal to .button.

<head>
    <style>
         body {
             font-size: 16px;
         }

         .button {
             padding: 10px;
         }
    </style>
</head>

Link to a CSS file

By far the most recommended option is to link to a CSS file. This way you are able to keep the content (HTML) separate from the way you present that content (CSS). It also means you can use the same styles on multiple pages. To link to a CSS file, you will have to add a <link> tag to the <head> section in your document with an href attribute that specifies the location of the CSS file.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

While an overall block is given to class selector, ID selector prefers only a single element differing from other elements. In other words, ID are uniques while classes are not. Its possible that an element has both class and ID.

CSS image scripts is a group of images which is placed into one image.

It reduces the load time and request number to the server while projecting multiple images into a single web page.

Pseudo-elements are used to add special effects to some selectors.  CSS in used to apply styles in HTML mark-up. In some cases when extra mark-up or styling is not possible for the document, then there is a feature available in CSS known as pseudo-elements. It will allow extra mark-up to the document without disturbing the actual document.

  1. <style>    
  2. * {    
  3.    color: green;    
  4.    font-size: 20px;    
  5. }     
  6. </style> 
  1. <style>    
  2. body {    
  3. background-image: url(“paper1.gif”);    
  4. margin-left:100px;    
  5. }    
  6. </style>  

To calculate specificity we will start with 0, then we have to add 1000 for each ID and we have to add 10 to the attributes, classes or pseudo-classes with each element name or pseudo-element and later we have to add 1 to them.

Example:

h2
             #content h2
            <div id=”content”>
              <h2 style=”color:#FF0000”>heading</h2>
            </div>

This box defines design and layout of elements of CSS. The elements are:

Margin: the top most layer, the overall structure is shown
Border: the padding and content option with a border around it is shown.  Background color affects the border.
Padding: Space is shown. Background colour affects the border.
Content: Actual content is shown.

Dimension properties can be defined by:

  • Height
  • Max-height
  • Max-width
  • Min-height
  • Min-width
  • Width

The background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.

You can set the following positions:

  1. center
  2. top
  3. bottom
  4. left
  5. right
 
  1. background: white url(‘good-morning.jpg’);  
  2. background-repeat: no-repeat;  
  3. background-attachment: fixed;  
  4. background-position: center; 

By float property, the image can be moved to the right or the left along with the text to be wrapped around it. Elements before this property is applied do not change their properties

We can make a rounded corner by using the property “border-radius”. We can apply this property to any element.

Example:

<html>
<head>

<style>
#rcorners1 {
    border-radius: 25px;
    background: #715751;
    padding: 20px;
    width: 200px;
    height: 150px;   
}

</style>
</head>

<body>
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
</body>

</html>

It is a property of CSS which allows you to display a smooth transformation between two or more than two specified colors.

There are two types of gradients that are present in CSS. They are:

  • Linear gradient
  • Radial Gradient

It allows you to design a flexible responsive layout structure without using any float or positioning property of CSS. To use CSS flexbox you need to define a flex container initially.

Example:

<!DOCTYPE html>
<html>
<head>

<style>
.flex-container {
  display: flex;
  background-color: #f4b042;
}

.flex-container > div {
  background-color: #d60a33;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

</style>
</head>

<body>
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
</div>
<p> Example of  <em>flex</em>box.</p>
</body>
</html>

The main difference between CSS2 and CSS3 is that CSS3 is divided into different sections which are also known as modules. Unlike CSS2, CSS3 modules are supported by many browsers.

Apart from that, CSS3 contains new General Sibling Combinators which is responsible for matching the sibling elements with the given elements.

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.

It is an important method used in all types of animations.

In CSS3, Transforms (matrix, translate, rotate, scale) module can be used to achieve tweening.

In CSS, the margin is the property by which we can create space around elements. We can even create space to the exterior defined borders.

In CSS we have margin property as follows:

  • margin-top
  • margin-right
  • margin-bottom
  • Margin-left

Margin property has some defined values as shown below.

  • Auto – using this property browser calculates the margin.
  • Length – It sets the margin values in px,pt,cm etc.
  • % – It sets the width % of the element.
  • Inherit – By this property we can inherit the margin property from the parent element.

In CSS, padding is the property by which we can generate space around an element’s content as well as inside any known border.

CSS padding also has properties like,

  1. Padding-top
  2. Padding-right
  3. Padding-bottom
  4. Padding-left

Negative values are not allowed in padding.

div {
padding-top: 60px;
padding-right: 40px;
padding-bottom: 50px;
padding-left: 70px;
}

The main difference between relative and absolute is that “relative” is used for the same tag in CSS and it means that if we write the left:10px then the padding will shift to 10px in the left while absolute is totally relative to the non-static parent.

It means if we write left:10px then the result will be 10px far from the left edge of the parent element.

Learn CSS here

582 People Rated
4.4/5

Leave a Reply