Showing posts with label CSS Interview Questions and Answers. Show all posts
Showing posts with label CSS Interview Questions and Answers. Show all posts

Sunday, 14 February 2016

How to Make Website Responsive for mobile devices?

How to Make Website Responsive for mobile devices?

Question: Why Responsive Web Design is the compulsary for websites?
  1. Recommended By Google: Google have higher Preference for Responsive design as compare to Non-Responsive.
  2. One Website, Many Devices: Single website can be viewable in desktop, laptop, ipad, different sizes of mobile.
  3. Good for SEO
  4. Responsive Website have more page views as compare to non-responsive.
  5. It looks always better in different resolution.

Question: How to check website is responsive OR Not?

Question: How can i make a existing website responsive?
You can make any website responsive. Just follow the simple steps.

  1. Add Following code in head tag.
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. Create a responsive.css file and include in all the pages.
  3. 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) {
  4. Now structure is ready, you just need to add css according to devices.
  5. Note: In Responsive design you need to hide extra information of websit

Friday, 29 May 2015

CSS3 interview questions and answers for experienced

css3 interview questions and answers for experienced

Question: How to write conditional statement in CSS?
<!--[if IE 7]>
<style type="text/css"> {                 

Question: How to write styles for all html elements of the same type?
Use tag name to write the CSS.
See Example

Question: What are different vaules of position attributes?

Question: How to display a link without underline using CSS?

Question: How to display a link without underline when mouseover on the link using CSS?

Question: How to page break after an html element in CSS?
<div style="page-break-after: always;">
Web Technology Experts Notes</div>

Question: What is the default value of "position" attribute in css?

Question: How we can specify more than one css class for any HTML element?
<div class="class1 class2">
Web technology experts Notes</div>

Question: Is CSS case sensitive?

Question: What is ID selector?
ID selector is an individually identified selector to which a specific style is declared.

Question: How to set wait cursor?{

Question: What is Tweening ?
It process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image.

Question: What are Child Selectors?
A child selector is used when you want to match an element that is the child of another specific element. > ul {font-weight: bold;}

Question: What are different ways to apply styles to a Web page

Question: What is contextual selector
Contextual selector addresses specific occurrence of an element.

Thursday, 11 September 2014

CSS Interview Questions and Answers

Cascading Style Sheets is a style sheet language used for formatting of a html pages in websites. While most often used to style web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. CSS is a cornerstone specification of the web, and almost all web pages use CSS style sheets to describe their presentation.

In all website, we used css to design the website. It always help a lot to look better our website. There are lot of tutorials online to learn the CSS in easy steps. To learn CSS you need not install anythings, just need a Browser (mozilla, firefox etc )  to display the page and Editor (Net beans, Notepad++) to edit the css file.

What is class in CSS and why we use?
Class is basically used for grouping the attributes for applying same css.
To apply the same type of styles on multiple tags, we add the class on the tags.
then we add the styles on same class in css file.

What is grouping?
Grouping is gathering  into a comma separated list two or more selectors that share the same style or (2) into a semicolon separated list two or more declarations that are attached to the same selector.

Is CSS case sensitive?
Cascading Style Sheets (CSS) is not case sensitive.

What is CLASS selector?
Class selector is a "stand alone" class to which a specific style is declared. Using the CLASS attribute the declared style can then be associated with any HTML element. The class selectors are created by a period followed by the class's name. The name can contain characters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code, however, they cannot start with a dash or a digit

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.

What are different ways to integrate a CSS into a Website?
Following are 3 simple ways
Inline: Use STYLE attribute in the tags.
Embedded: By placing the code in a STYLE element within the HEAD element.
Linked/ Imported: Place the CSS in an external file and link it via a link element.

Explain external Style Sheet? How would you link to it to web page?
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?
<link rel="stylesheet" href="/css" />

What are the advantages and disadvantages of External Style Sheets?
Advantages of External Style Sheets are:
  • Using them, 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
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

What are the advantages and disadvantages of Embedded Style Sheets
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). 
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 Companines never allowed to use Inline css in website
Recommendation: Never use In-line Style sheet

What is CSS selector?
A CSS selector is the part of a CSS rule set that actually selects the content you want to style. Let's look at all the different kinds of selectors available.
Universal Selector: Apply CSS on all elements
* {
   color: red;

Element Type Selector: Apply CSS on particular attribute
ul {
   color: red;

ID Selector: Apply css which have same ID
#attributeId {
   color: red;

Class Selector: Apply CSS which have same Class
.box {   
   color: red;

Descendant Combinator: Apply Css where we have Combine two or more selectors so you can be more specific in your selection method.
#container .box {   
    color: red;

Child Combinator: Apply CSS to the child
#container > .box {
   color: red;

General Sibling Combinator: Apply CSS based on Sibling
h2 ~ p {
   color: red;

Adjacent Sibling Combinator: Apply CSS based on adjacent sibling
p + p {
     color: red;

Attribute Selector: Apply CSS on particular tag with having same attribute.
input[type="text"] {
      color: red; 

Pseudo-class: Apply CSS on the class which does not exist in real.
a:hover {
   color: red;

What is Tweening?
Tweening is used in animations, 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.

Explain RWD?
RWD is the abbreviation for Responsive web design.
In this technique, the designed page is perfectly displayed on every screen size and device, be it desktop, mobile, laptop or any other device. You don’t need to create a different page for each device

What is the use of 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');

What is Contextual Selector?
It is a string of individual selectors separated by white space, where only last element in the pattern is addressed.

What are Pseudo Classes?
Pseudo classes allow you to identify HTML elements on characteristics. These are specified using a colon to separate the element name and pseudo class.
Following are Pseudo Class example:
a:link {font-color: red;}
a:visited {font-color: green;}
a:hover {font-color: yellow;}

What are some ways you might target IE (or IE6) only, without affecting other browsers?
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />

What does z-index do?
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?
It 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;