Scribd
Upload
82 views

CSS Interview Q & A (WOWSIDE)

The document contains 15 questions about CSS concepts and techniques. It covers topics like the different ways to apply CSS styles, the CSS box model, differences between inline and block elements, grouping selectors, class and ID selectors, visibility and display properties, CSS preprocessors, child selectors, grid systems, shorthand properties, the purpose of z-index, new CSS3 properties, pseudo-classes, the universal selector, and media queries.

Uploaded by

devil
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
82 views

CSS Interview Q & A (WOWSIDE)

The document contains 15 questions about CSS concepts and techniques. It covers topics like the different ways to apply CSS styles, the CSS box model, differences between inline and block elements, grouping selectors, class and ID selectors, visibility and display properties, CSS preprocessors, child selectors, grid systems, shorthand properties, the purpose of z-index, new CSS3 properties, pseudo-classes, the universal selector, and media queries.

Uploaded by

devil
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

_ _ / _ _ / 20 _ _

CSS Questions
1. What are the possible ways to apply CSS styles to a web page?
CSS can be applied in the following three ways:
• Linked: Create a separate .css file and add all the style for the web page there. Make sure the file is linked to the HTML
document(s) using the link tag
• Embedded: Inside the HTML document, open a style tag and inside that, add all styles just like you’d do on a linked file.
• Inline: This is done by adding a style attribute inside an HTML element.

2. Explain the CSS box model.


CSS box model is made up of margins, borders, padding, and content. The box model provides a more structured way to
space elements in relationship to each other in web pages. In your browser’s developer tools, the CSS box model is found
at the end of the CSS section.

3. What is the difference between inline and block elements?


Basically, a block element will take up the whole width available, and comes with a line break before and after. Examples
of block level elements are: headings (i.e <h1>), paragraphs (<p>), divisions (<div>) etc. In contrast, inline elements take
up only the space they need, and do not force line breaks. Examples of inline elements are: anchors (<a>), spans
(<span>) etc.

4. What is grouping used for in CSS?


Grouping allows several elements of HTML to have the very same styles applied. It uses a single declaration and
selectors and separated by commas. For example:

h1, h2, .my-class {


font-weight: light;
}

5. What is a Class selector and how does it differ from an ID selector?


Class selectors are used to apply style to multiple HTML elements identified with the same class. Class selectors are
called within the CSS document by a ‘.’, followed by the class name, like this:

.class {
color: black;
}

The difference between classes and ID’s is that a HTML element can accept multiple classes, but only one ID. That
means ID’s are unique for HTML elements.

6. What is the difference between visibility:hidden and display:none?


Although these two properties seem similar, there is quite an important difference between the two:
• visibility:hidden hides the element, but it will still takes up space, this way affecting the layout of the document.
• display:none also hides the element, but will not take up space and the page will appear as if the element is not present.

7. What are CSS preprocessors and why do we use them?


CSS preprocessors convert code written in a preprocessed language like SASS or LESS into the same old CSS we’ve
been using for such a long time now. The main advantages of using preprocessors are:
• Ability to define variables
• Ability to use nested syntax
• Ability to create and use mixins (functions)
• Use of mathematical and operational functions
However, there are also some disadvantages like updating issues and debugging difficulties.

8. What are child selectors in CSS?


Child selectors represent a way of grouping (for styling) a set of elements that descend from a parent element. Example:

section > span {


background-color: #eee;
}

9. What are grid systems and why do we use them in web pages?
Grid systems are structured rules that enable content to be stacked horizontally and vertically in a consistent and
sustainable way. They find heavily usage in today’s websites because they offer increased producitvity while coding,
they’re versatile and ideal for responsive layouts.

[email protected] +91 74258 26007


_ _ / _ _ / 20 _ _

10. How do we use shorthand properties and why?


Shorthand properties cannot be applied to any css property but only a few like: border, outline, padding, background etc.
Shorthand properties reduce file size thus improving page load time. The trick stands for listing all property values on a
single line, in a pre defined order that must be respected. An example would be:

div {
background-color: #ccc;
background-image: url("img.png");
background-repeat: no-repeat;
background-position: right top;
}

This would be exactly the same as:

div {
background: #ccc url("img.png") no-repeat right top;
}

11. What is the purpose of the z-index and how is it used?


The z-index property specifies the stack order of an element within the document area (or a part of it). An element with
greater stack order will always be in front of an element with a lower stack order. However, z-index only works on
positioned elements (position:absolute, position:relative, or position:fixed). It can have four kind of values:
• Auto: Sets the stack order equal to its parents.
• Number: Orders the stack order.
• Initial: Sets this property to its default value (0).
• Inherit: Inherits this property from its parent element.

12. List some of the new CSS propertied introduced with CSS3?
The following is a list of new properties added in CSS3:
• border-radius
• box-shadow
• text-shadow
• text-stroke
• background-size
• text-overflow
• resize
• transition
Also, other features like multiple backrounds which allows you to have two or more background in the very same selector
and flexible box model which ensures that elements behave predictably when the page layout must accommodate
different screen sizes and different display devices.

13. Explain what pseudo-classes are and their usage.


Pseudo clasess are used to define a special state of an element. Do note that pseudo classes are not defined in the
markup. They can be used for:
• Styling an element on mouse over (hover)
• Styling an element when it gets focus
• Styling visited/unvisited links

14. What is the CSS selector which allows you to target every element in a web page?
Called the universal selector and signed with an asterix (*), it sets all HTML element the same styling rules as defined in
the
property declarations. For example:

*{
margin: 0;
padding: 10px;
}

15. What are media queries and how are they used?
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. Media queries, added in CSS3, let the presentation of content be tailored to a
specific range of output devices without having to change the content itself. The usage of media queries is similar to this:

@media (max-width: 768px) {


.problem-class {
property: smaller;
}
}

[email protected] +91 74258 26007

You might also like