CSS Interview Questions (1)

What is CSS?

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.More details...

What are the different variations of CSS?

Following are the different variations of CSS:

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

 

How can you integrate CSS on a web page?

There are three methods to integrate CSS on web pages.

  1. Inline method - It is used to insert style sheets in HTML document
  2. Embedded/Internal method - It is used to add a unique style to a single document
  3. Linked/Imported/External method - It is used when you want to make changes on multiple pages.

More details...

 

What are the CSS frameworks?

CSS frameworks are the preplanned libraries which make easy and more standard compliant web page styling. The frequently used CSS frameworks are: -

  • Bootstrap
  • Foundation
  • Semantic UI
  • Gumby
  • Ulkit

 

What is Embedded Style Sheet?

An Embedded style sheet is a CSS style specification method used with HTML. You can embed the entire stylesheet in an HTML document by using the STYLE element. More details...

  1.  <style>    
  2. body {    
  3.     background-color: linen;    
  4. }    
  5. h1 {    
  6.     color: red;    
  7.     margin-left: 80px;    
  8. }     
  9. </style>    

 

 

What are the advantages of Embedded Style Sheets?

  • You can create classes for use on multiple tag types in the document.
  • You can use selector and grouping methods to apply styles in complex situations.
  • No extra download is required to import the information.

 

What is a CSS selector?

It is a string that identifies the elements to which a particular declaration apply. It is also referred as a link between the HTML document and the style sheet. It is equivalent of HTML elements. There are several different types of selectors in CSS: -

  • CSS Element Selector
  • CSS Id Selector
  • CSS Class Selector
  • CSS Universal Selector
  • CSS Group Selector

More details...

 

Name some CSS style components.

Some CSS Style components are:

  • Selector
  • Property
  • Value

What are the advantages of External Style Sheets?

  • You can create classes for reusing it in many documents.
  • By using it, you can control the styles of multiple documents from one file.
  • In complex situations, you can use selectors and grouping methods to apply styles.

More details...

 

What is the use of CSS Opacity?

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>   

 

Explain universal selector.

The universal selector matches the name of any of the element type instead of selecting elements of a specific type.

  1. <style>    
  2. * {    
  3.    color: green;    
  4.    font-size: 20px;    
  5. }     
  6. </style>    
  7.     

 

Name the property used to specify the background color of an element.

The background-color property is used to specify the background color of the element. For example:

  1. <style>    
  2. h2,p{    
  3.     background-color: #b0d4de;    
  4. }    
  5. </style>  
  6.    

 

What is the use of % unit?

It is used for defining percentage values.

Name the property for controlling the image position in the background.

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;   

 

What is the difference between class selectors and id selectors?

An overall block is given to class selector while id selectors take only a single element differing from other elements.

CSS Class Selector

  1. <style>    
  2. .center {    
  3.     text-align: center;    
  4.     color: blue;    
  5. }    
  6. </style>  
  7.    

CSS Id Selector

  1. <style>    
  2. #para1 {    
  3.     text-align: center;    
  4.     color: blue;    
  5. }    
  6. </style>    
  7.    

More details...

 

What is the difference between inline, embedded and external style sheets?

Inline: Inline Style Sheet is used to style only a small piece of code.

Syntax

  1. <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>     
  2.        

Embedded: Embedded style sheets are put between the <head>...</head> tags.

Syntax

  1. <style>    
  2. body {    
  3.     background-color: linen;    
  4. }    
  5. h1 {    
  6.     color: red;    
  7.     margin-left: 80px;    
  8. }     
  9. </style>    
  10. 10.        

External: This is used to apply the style to all the pages within your website by changing just one style sheet.

Syntax

  1. <head>    
  2. <link rel="stylesheet" type="text/css" href="mystyle.css">    
  3. </head>    
  4.        

 

What do you understand by W3C?

W3C stands for World Wide Web Consortium. Its purpose is to deliver the information of the World Wide Web. It also develops rules and guidelines for the Web.

 

Explain the difference between visibility: hidden and display: none?

visibility: hidden hides the element, but it occupies space and affects the layout of the document.

  1.  <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. h1.vis {  
  6.     visibility: visible;  
  7. }  
  8.   
  9. h1.hid {  
  10. 10.     visibility: hidden;  

11. }  

12. </style>  

13. </head>  

14. <body>  

15. <h1 class="vis">It is visible</h1>  

16. <h1 class="hid">It is hidden</h1>  

  1. 17.   

18. <p>Note - Second heading is hidden, but it still occupy space.</p>  

19. </body>  

20. </html>  

  1. 21.        

display: none also hides the element but not occupy space. It will not affect the layout of the document.

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. h1.vis {  
  6.     display: block;  
  7. }  
  8.   
  9. h1.hid {  
  10. 10.      display: none;  

11. }  

12. </style>  

13. </head>  

14. <body>  

15. <h1 class="vis">It is visible</h1>  

16. <h1 class="hid">It is hidden</h1>  

  1. 17.   

18. <p>Note - Second heading is hidden and not occupy space.</p>  

19. </body>  

20. </html>  

  1. 21.    

 

What are the advantages of CSS?

  • Bandwidth
  • Site-wide consistency
  • Page reformatting
  • Accessibility
  • Content separated from presentation

What are the limitations of CSS?

  • 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

What is the CSS Box model and what are its elements?

The CSS box model is used to define the design and layout of elements of CSS.

The elements are:

  • Margin - It removes the area around the border. It is transparent.
  • Border - It represents the area around the padding
  • Padding - It removes the area around the content. It is transparent.
  • Content - It represents the content like text, images, etc.

 

What is the float property of CSS?

The CSS float property is used to move the image to the right or left along with the texts to be wrapped around it. It doesn't change the property of the elements used before it.

To understand its purpose and origin, let's take a look at its print display. In the print display, an image is set into the page such that text wraps around it as needed.

 

Its web layout is also just similar to print layout.

 More details...

What is RWD?

RWD stands for Responsive Web Design. This technique is used to display the designed page perfectly on every screen size and device, for example, mobile, tablet, desktop and laptop. You don't need to create a different page for each device.

Name the property for controlling the image repetition of the background.

The background-repeat property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.

  1. <style>    
  2. body {    
  3. background-image: url("paper1.gif");    
  4. margin-left:100px;    
  5. }    
  6. </style>  
  7.    

What is the difference between logical tags and physical tags?

  • Physical tags are referred to as presentational markup while logical tags are useless for appearances.
  • Physical tags are newer versions, on the other hand, logical tags are old and concentrate on content.

 

What are the benefits of CSS sprites?

If a web page has a large number of images that take a longer time to load because each image separately sends out an HTTP request. The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of HTTP requests and hence the loading time.

Why background and color are the separate properties if they should always be set together?

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.

 

posted @ 2020-05-28 14:43  CodingYM  阅读(319)  评论(0)  编辑  收藏  举报