CSS Interview Questions and Answers for fresher, Experience

Q1. What is CSS? What Types of CSS?

Ans. CSS stands for Cascading Style Sheets

  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files
  • Extension  .CSS
  • Current version is CSS 3.0
  • Types of CSS
  1. External CSS

<”link rel=”stylesheet” type=”text/css” href=”path/to/file.css”>

  1. 2) Internal CSS

<style type=”text/css”>

  1. Inline CSS

<p style=”color:#fsf;”>



4) Embedded CSS

  1. Class (denoted as dot.)
  2. Id(denoted as # symbol)
  3. Any html element eg. P.list

Q2. What is DHTML?

Ans. Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated websites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model.

Q3. Which CSS is used for designing a web page?

Ans. Mostly External CS is used for designing a web page.

Q3. What is a difference between id and class?

Ans. The id selector is used to specify a style for a single, unique element. Id selector uses the id attribute of the HTML element, and is defined with a “#”.The style rule below will be applied to the element with id=”para1″:

the element with id=”para1″




text-align:center; color:red;


The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a “.”In the example below, all HTML elements with class=”center” will be center aligned:

As: .center {text-align:center;}

Q5. What is the div tag?

Ans. The <div>tag defines a division or a section in an HTML document.The

<div>tag is used to group block-elements to format them with CSS.

Q6.What is Difference between div and span?

Ans. The ‘div’ and the ‘span’ tags are quiet frequently used tags in HTML. The proper understandings of these tags are very much important for a web HTML developer. This article shows what are the characteristics of both these tags. Understanding the difference between both tags will help to use them in an appropriate place.

 DIV Tag:

  1. As the name indicates, the div tag defines a ‘division’ in a web page.
  2. Div is a block-element; its default display value is “block”.
  3. Div tag is commonly used while creating CSS based layouts in html.
  4. By default, a line-break is placed before and after this element


  1. Span tag makes no visual difference in the page, unless customized with style attribute.
  2. Span is an in-line element
  3. Span is commonly used to stylize texts. The in-line feature makes it easy to use custom styles without changing the layout.
  4. No line-breaks by default, but this can be achieved if we change its in-line nature by specifying in the style attribute to ‘display:block;

Q7. What is UTF-8?

Ans. UTF-8 (UCS Transformation Format—8-bit) is a variable-width encoding that can represent every character in the Unicode character set. It was designed for backward compatibility with ASCII and to avoid the complications of endianness and byte order marks in UTF-16 and UTF-32. UTF-8 has become the dominant character encoding for the World Wide Web, accounting for more than half of all Web pages. The Internet Mail Consortium (IMC) recommends that all e-mail programs be able to display and create mail using UTF-8. UTF-8 is also increasingly being used as the default character encoding in operating systems,programming languages, APIs, and software applications

Q8. How to embed CSS in web page?

Ans. To embed CSS in webpage three methods are used: 1).class 2) #ID 3) any HTML element.

Q9. What is wrap?

Ans. The word-wrap property allows long words to be able to be broken and wrap onto the next line. Or wrap is a class file used with css for the main body of web page.

 Default Value: normal

Inherited: yes

 Version: CSS3

 JavaScript syntax: object.style.wordwrap=”break-word”.

 Syntax: word-wrap: normal|break-word|initial|inherit;

Q10. Write CSS background properties.

Ans. CSS background properties are used to define the background effects of an element. CSS properties used for background effects:

  1. background-color: Sets the background color of an element
    1. background-image: Sets the background image for an element
    2. background-repeat: Sets how a background image will be repeated
    3. background-attachment: Sets whether a background image is fixed or scrolls with the
    4. rest of the page background-position: Sets the starting position of a background image

Q11. What use of fixed and scroll?

Ans. Fixed: The background is fixed with regard to the viewport

Scroll: The background scrolls along with the element.

This is default Syntax: background-attachment: scroll|fixed|local|initial|inherit, Or The left menu bar is fixed but a content portion is moving.

Q12. What is shorthand property?

Ans. Allows you to use a single property declaration to assign values to a number of related properties the best known shorthand property is a font




font: bold 12pt/14pt Helvetica;


Q13. What is float property?

Ans. The float property specifies whether or not a box (an element) should float. Absolutely positioned elements ignore the float property!

Q14. How to remove white space from webpage?

Ans. Using trim() function we can remove whitespace from beginning and the end of paragraph.

 Q15. Why we use z-index property?

Ans. 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. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Syntax: z-index: auto|number|initial|inherit;

Q16. What is overflow-x property?

Ans. The overflow-x property specifies whether or not to clip the left/right edges of the content – if it overflows the element’s content area. The overflow-x property does not work properly in IE8 and earlier. Use the overflow-x property to determine clipping at the left and right edges. Syntax: overflow-x: visible|hidden|scroll|auto|initial|inherit;

Q17. What is overflow-y property?

Ans. The overflow-y property specifies whether or not to clip the top/bottom edges of the content – if it overflows the element’s content area.

 Syntax:overflow-y: visible|hidden|scroll|auto|initial|inherit;

Q18. What is visibility property?

Ans. The visibility property specifies whether or not an element is visible. Even invisible elements take up space on the page. Use the “display” property to create invisible elements that do not take up space! Syntax: visibility: visible|hidden|collapse|initial|inherit;

Q19. What is word-spacing property?

Ans. The word-spacing property increases or decreases the white space between words. Syntax: word-spacing: normal|length|initial|inherit;

Q20. What is line-height property?

Ans. The line-height property specifies the line height.

Syntax: line-height: normal|number|length|initial| inherit.

Q21. What is the Difference between line-height and word-spacing.

Q22. Can we make a popup menu using CSS?

Ans. Yes, we can make a popup menu using css.

Q23. What is Difference between CSS2 and CSS3?

Ans. The biggest difference between CSS2 and CSS3 is that CSS3 has been split up into different sections, called modules. Each of these modules is making it’s way through the W3C in various stages of the recommendation process. CSS2 was submitted as a single document with all the Cascading Style Sheets information within it. Because each of the modules is being worked on individually, we have a much wider range of browser support for CSS3 modules.

CSS3 has advanced features in below lines As:

  1. Border Radius
  2. Border Images
  3. Box Shadows
  4. Multi-Column Layouts
  5. Multiple Backgrounds
  6. Font Face
  7. Attribute Selectors Opacity
  8. RGBA Color

A superset of CSS CSS2 includes a number of new capabilities like absolute relative and fixed positioning of elements the concept of media types support for aural style sheets and bidirectional text and new font properties such as shadows. CSS3 is the latest standard for CSS.

Though CSS3 is not fully supported yet, many web developers are starting to use many of the new techniques introduced

Q24. Can we change the styles of the downloaded menu?

Ans Yes, we change the styles of the downloaded menu.

 Q25. Can we design the webpage using table?

Ans. Yes, we can design the webpage using a table.

Q26. Can we change the PSD to HTML?

Ans. PSD to HTML conversion you just need to follow in below lines As:

  1. Open the file in Photoshop.
  2. From the “File” drop down menu select “Save for web”.
  3. The image will now open in Image Ready.
  4. Select “save” at the top right of your screen.
  5. Choose to save as “images and HTML”.
  6. Give the template a name.
  7. Select location to save to and save file.
  8. You should now have an html file and a folder containing the images used.
  9. Open up your site developer program and open this html file.
  10. Save it as a template you should now be able to apply this template to any pages you create.
News Reporter
IT Software and web development, Core PHP, JavaScript, JQuery, HTML, CSS, CakePHP, Angularjs, Codeigniter etc.

Leave a Reply

Your email address will not be published. Required fields are marked *