CSS Interview Question

CSS Interview Questions

CSS Interview Questions for Freshers

What is css

Cascading Style Sheets (CSS) is a rule based language that applies styling to HTML elements.

Why use CSS

We write CSS rules in html elements (<p>, <img>), and modify properties of those elements such as color, background color, width, border thickness, font size, etc.

Current version of CSS ?

Current version of CSS is CSS3.

Is CSS case-sensitive ?

The CSS is not case-sensitive, but if an XHTML doctype is used, then CSS class names will be case-sensitive in some browsers.

Difference between margin and padding ?

padding is the area inside the border and margin is the area outside the border

Way of define a color in html ?

There is three way of defining a color in html

• Hex
• RGB
• Name (i.e red)

.colorname
{
Color:red;
Color:#ff0000;
Color:rgb(0,0,225);
}

Difference between visibility:hidden; and display:none; ?

• Visibility:Hidden - It is not visible but takes up its original space.
• Display:None - It is hidden and takes up absolutely no space as if it was never there.

How do you clear a floated element ?

A floated element is taken out of the document flow. To clear it you would need to do a clear:both or try overflow:auto on the containing div.

What are different ways to apply styles to a Web page ?

There are three way of apply css on web page

• Inline CSS Use STYLE attribute in the tags.
• Internal CSS Place the code in a STYLE element within the HEAD element.
• External CSS Place the CSS in an external file and link it via a link element.

What is External Style Sheet ?

Create a CSS file and place all the CSS in that file and include the same file in one OR more web pages called External Style Sheet

How would you link External CSS to web page ?

<link rel="stylesheet" href="/css" />

What are the Advantages of External Style Sheets ?

• Using this, the styles of multiple documents can be controlled from one file.
• Classes can be created for use on multiple HTML element types.
• In complex situations, selector and grouping methods can be used to apply styles.
• If you need to update the css file in live site, then need not to upload all files. You can just upload the css file.
• It is easy to manage Files.

What are Disadvantages of External Style Sheets ?

• In order to import style information for each document, an extra download is needed.
• Until the external style sheet is loaded, it may not be possible to render the document.
• For small number of style definitions, it is not viable.
• Recommendation: Always use External Style sheet.

How to set wait cursor ?

div.click
{
 cursor:wait;
}

What are Advantages of Inline Styles ?

• It is especially useful for small number of style definitions.
• It has the ability to override other style specification methods at the local level(in one place).

What are Disadvantages of Inline Styles ?

• It does not separate out the style information from content.
• The styles for many documents can not be controlled from one source.
• Selector grouping methods can not be used to handle complex situations.
• Control classes can not be created to control multiple element types within the document.
• Good Companies never allowed to use Inline css in website
• Recommendation: Never use In-line Style sheet.

What is a Class in CSS ?

A class is a style (i.e., a group of CSS attributes) that can be applied to one or more HTML elements. In other words Class is basically used for grouping the attributes for applying same type of styles on multiple tags.

What is ID in CSS ?

An ID selector is a name assigned to a specific style. In turn, it can be associated with one HTML element with the assigned ID.

What is the difference between an ID selector and CLASS ?

An ID selector identifies and sets style to only one occurrence of an element, while CLASS can be attached to any number of elements.

What is Grouping ?

When more than one selector shares the same declaration, they may be grouped together via a comma-separated list;

h1, h2, h3
{
background: #fff;
font-size:14px;
}

What is comment in css ?

Comment is nothing but it is a statement which is not display on browser window. It is useful to understand about particular code, which code is written for what purpose.

How to include comment in css ?

In CSS comments are include by using /* */.

What are pseudo classes ?

Pseudo classes allow you to identify HTML elements on characteristics (as opposed to their name or attributes). The classes are specified using a colon to separate the element name and pseudo class. For example the :link and :visited pseudo classes for the HTML A element.

What is cascade ?

Cascade is a method of defining the weight (importance) of individual styling rules thus allowing conflicting rules to be sorted out should such rules apply to the same selector.

a:link {font-color: red;}
a:visited {font-color: green;}
a:hover {font-color: yellow;}

p.footer {font-weight: bold;}

What are Child Selectors ?

A child selector is used when you want to match an element that is the child of another specific element. The parent and child selectors are separated by spaces.

p > ul {font-size: 16px;}

Why Responsive Web Design is the compulsory for websites ?

Google have higher Preference for Responsive design as compare to Non-Responsive. One website can be viewable in desktop, laptop, ipad, different sizes of mobile. Responsive Website have more page views as compare to non-responsive. It looks always better in different resolution.

How to check website is responsive OR Not ?

It is very simple and easy to check your website is responsive or not, You can use this google toot https://www.google.com/webmasters/tools/mobile-friendly/

How to make a Existing Website Responsive ?

You can easily make any website responsive. Follow given steps.

Add Following code in head tag. 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Create a responsive.css file and include in all the pages.
Add Following code in responsive.css
/* Smaller Resolution Desktops and Laptops */
@media (max-width: 800px) {
             
}
/* Smaller devices like Ipad*/
@media (max-width: 650px) {
       
}
/* Even Smaller devices like Mobile*/
@media (max-width: 450px) {
      
}
/* Smallest Mobile devices */
@media only screen and (min-device-width: 300px) and (max-device-width: 480px) {
}

Now structure is ready, you just need to add css according to devices. In Responsive design you need to hide extra information of website for example on my website right side ads column disable.

What is RWD ?

RWD is the abbreviation for Responsive web design. Using this technique, the designed page is perfectly displayed on every screen size and device, be it desktop, mobile, laptop or any other device.

Why Use CSS Sprites ?

A web page with large number of images takes a longer time to load in the website, because image separately sends out a http request. The concept of CSS sprite helps in reducing this loading time for a web page by combining various small images into one image. This reduces the numbers of http request.

How to import CSS ?

import url('/css/typography.css');

How to target IE (or IE6) only, without affecting Other Browsers ?

<!--[if IE 6]>
 <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

What is z-index in CSS ?

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

What is Media Query ?

Media Query is added in CSS3. A Media Query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color.

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}