IPMEGA
CSS Interview Questions
IPMEGA SOFTWARE SOLUTIONS & WEB DEVELOPMENT
Surandai – 627859.
IPMega
1) What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files.
2) Different between css2 and css3 version?
• The selectors in CSS3 has increased while CSS1 and CSS2 only had simple selectors.
The CSS3 version supports more browsers than CSS2.
3) What are the Advantages of CSS?
• Better Website Speed. For a website to function efficiently, it should have a faster
load time.
• Easier to Maintain.
• Consistent Design.
• Time-Saving.
• Better Device Compatibility.
• Positioning of Design Elements.
4) What are the disadvantages of CSS?
• Confusion due to many CSS levels.
• Cross-Browser Issues.
• Security Issues.
• Extra Work for Developers.
5) What are the types of CSS?
• Inline CSS
• Internal or Embedded CSS
• External CSS
IPMega
6) What are the types of Selector?
We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between
them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value).
7) Define CSS Syntax or ruleset?
• A CSS Syntax rule consists of a selector, property, and its value.
8) Define inline, internal and external property?
Inline Internal External
An inline CSS is used to apply a An internal CSS is used to An external style sheet is
unique style to a single HTML define a style for a single used to define the style for
element. HTML page. many HTML pages
by using by using by using
the style attribute inside HTML a <style> element in a <link> element to link to
elements the <head> section an external CSS file
9) Different between ID & CLASS?
ID CLASS
The id of an element is unique within a page, The class selector selects HTML elements
so the id selector is used to select one with a specific class attribute
unique element.
To select an element with a specific id, write To select elements with a specific class,
a hash (#) character, followed by the id of write a period (.) character, followed by the
the element. class name
IPMega
10) What is z-index?
• The z-index property specifies the stack order of an element.
• The z-index property specifies the stack order of an element (which element should
be placed in front of, or behind, the others).
• An element can have a positive or negative stack order.
11) What is opacity?
• The opacity property sets the opacity level for an element. The opacity- level
describes the transparency-level, where 1 is not transparent at all,
• 0.5 is 50% see-through, and 0 is completely transparent.
12) What is inline, block, and inline-block?
Inline Block Inline-Block
The element doesn’t start on A block element always starts display: inline- block
a new line and only occupy on a new line, and fills up the allows to set a width
just the width it required. horizontal space left and height on the
You can’t set the height and and right on the web page. element.
width.
13) What is grid system in CSS?
• The CSS Grid Layout Module offers a grid-based layout system, with rows and
columns, making it easier to design web pages without having to use floats and
positioning.
14) Different position in CSS?
• The position property specifies the type of positioning method used for an element.
• static
• relative
• fixed
• absolute
• sticky
IPMega
15) What is overflow property?
• The overflow property specifies whether to clip the content or to add scrollbars when
the content of an element is too big to fit in the specified area.
• Visible
• Hidden
• Scroll
• Auto
16) Different between CSS grid and CSS flex box?
Grid Flex box
Grid was designed for two- dimensional The flexbox was designed for layout in one
layout - rows, and columns at the same dimension - either a row or a column.
time
17) What is float property?
• The CSS float property specifies how an element should float.
• The float property is used for positioning and formatting content.
• Values are left, right, none, inherit.
18) What is @media?
• The @media rule is used in media queries to apply different styles for different media
types/devices. Media queries can be used to check many things, such as:
• width and height of the viewport.
• width and height of the device.
19) What is CSS background?
• The CSS background properties are used to add background effects for elements.
Some properties are:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
IPMega
20) Define padding?
• The CSS padding properties are used to generate space around an element's content,
inside of any defined borders.
21) What are the properties in padding?
There are properties for setting the padding for each side of an element;
• Top
• Right
• Bottom
• Left
22) Define transition and Transform property?
Transition:
• CSS transitions allows you to change property values smoothly, over a given duration.
Properties;
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
Transform:
• The transform property applies a 2D or 3D transformation to an element.
properties;
• rotate
• scale
• move
• Skew
23) Define box shadow?
• The box-shadow property is used to apply one or more shadows to an element.
• You only specify a horizontal and a vertical shadow.
• The default color of the shadow is the current text-color.
IPMega
24)Define flexbox property?
• The Flexible Box Layout Module, makes it easier to design flexible responsive layout
structure without using float or positioning.
• Its make its one dimension and two dimension.
25)Text in CSS?
✓ CSS has a lot of properties for formatting text.
Properties:
• Text Color
• Text Alignment
• Text Decoration
• Text Transformation
• Text Spacing
• Text Shadow
26) Text Decoration none?
• The text-decoration: none; is used to remove the underline from links.
27.) Tell me about CSS comments?
• CSS comments are not displayed in the browser, but they can help document your
source code.
Syntax:
/* This is a single-line comment */
28) What is Visibility property in CSS?
• The visibility property specifies whether or not an element is visible.
• Hidden elements take up space on the page.
29) Visibility: hidden vs display: none?
• Visibility hidden property is used to hides the element, but it occupies space and
affects the layout of the document.
IPMega
• Display none property is used to hides the element, but not occupies space. It will
not affects the layout of the document.
30) What is CSS Debugging?
• Debugging in CSS means figuring out what might be the problem when you have
unexpected layout results.
31) What is font fallback?
• A fallback font is a font face that is used when the primary font face is not loaded yet,
or is missing glyphs necessary to render page content.
Some commonly used font fallbacks, organized by the 5 generic font families:
• Serif
• Sans-serif
• Monospace
• Cursive
• Fantasy
32) CSS Framework?
• 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
• W3.css
33) Border Box Property?
• Border-box tells the browser to account for any border and padding in the values you
specify for an element's width and height.
IPMega
34) CSS Box Model?
• Box Model is used when talking about design and layout.
• The CSS box model is essentially a box that wraps around every HTML element.
• It consists of: margins, borders, padding, and the actual content. Explanation of the
different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content.The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent.
35) Types of Selectors in CSS?
✓ Simple selectors
• CSS Element Selector
• CSS Id Selector
• CSS Class Selector
• CSS Universal Selector
• CSS Group Selector
✓ Combinator selectors
✓ Pseudo-class selectors
✓ Pseudo-elements selectors
36) Hyperlink without underline?
• The text-decoration: none; is used to remove the underline from links.
37) Advantages of external Stylesheet?
• One change to the style sheet will change all linked pages.
• You can create classes of styles that can then be used on many different HTML
elements.
• Consistent look and feel across multiple web pages.
• Improved load times because the css file is downloaded once and applied to each
relevant page as needed.
IPMega
38) What is Clear property in CSS?
• The clear property controls the flow next to floated elements.
• The clear property specifies what should happen with the element that is next to a
floating element.
