CSS experienced interview question/CSS Interview Questions and Answers for Freshers & Experienced

What Are The Values Of “position” Attribute In Css?


Possible values are static. relative, absolute, fixed. Inherit.

How To Page Break After An Html Element In Css?


Use following code snippet
<p style=”page-break-after: always’>Place your text</p>

After above code. the rest content will appear in the next page. (It will not be visible as next page in browser but on the printer and in Print Preview, you will see them as next page)

Explain About Vertical Control Limitation?

Vertical control limitations are always a nightmare for a designer. Horizontal positioning of text or element is always easy but vertically positioning an element always leads to convoluted and impossible tasks. CSS has unsupported rules for vertical placement of elements.

Explain About Internet Explorer Box Model Bug?


Designers had a very tough time dealing with this bug, because it will not display box widths appropriately on the webpage. It displayed the block to be narrow in size. This bug can be rectified by using CSS filter and hacks. Also correct usage and documentation of XHTML can solve the problems.

What are the differences between visibility hidden and display none?

Display: none removes the element from the normal layout flow and allow other elements to fill in. visibility: hidden tag is rendered, it takes space in the normal flow but doesn't show it. display: none causes DOM reflow where is visibility: hidden doesn't.

Explain the scenario you would use translate() instead of absolute positioning?

Translate is a value of CSS transform. Changing transform or opacity does not trigger browser reflow or repaint but does trigger compositions; whereas changing the absolute positioning triggers reflow. Transform causes the browser to create a GPU layer for the element but changing absolute positioning properties uses the CPU. Hence translate() is more efficient and will result in shorter paint times for smoother animations. When using translate(), the element still occupies its original space (sort of like position: relative), unlike in changing the absolute positioning.

What does CORS stand for and what issue does it address?

Cross Origin Resource Sharing. To address the fact that browsers restrict cross-origin HTTP requests initiated from within scripts. CORS gives web servers cross-domain access controls, which enable secure cross-domain data transfers.

What is progressive rendering?

It is rendering the data as it’s being downloaded. This is particularly useful on documents that have tons of text. You can see it on a page that has a lot of text – and where the scrollbar will get shorter in length as more data comes in – increasing the vertical size of the document – yet, it would display the downloaded text immediately. As more data came down the pipe – the page would get longer. This didn’t rely on the closing body or html tag – and it certainly wouldn’t render the entire page on the server – then download – which is a standard complaint about modern frameworks. But there is a technique called “Flushing the Buffer” that can be implemented on the server.

What is the sequence that follows when practical sheets arrive?

If a single selector has three different style definitions, the definition near the actual tag is the priority. Inline style takes priority over embedded style sheets, which gives priority to external style sheets.

How can you load css resources conditionally?

@import allows you to load/ import stylesheet by using a path (uri) representing the location of the file. You can define one or more media by comma separation for which you want to load the stylesheet. If browser dont support the media stylesheet will not be loaded.

What do ‘class’ and ‘ID’ selectors pick when they are issued?

A class selector will pick an entire block of information, while the ID selector lets you pick a specific element that possesses a unique type of an ID number.

How would you implement the basic layout components of the box model in CSS? Give an example.

Each element of the box model—border, content, margin, and padding—can be specified independently for each side of the element by listing dimensions in the following order: top, bottom, right, and left. Alternatively, multiple sides can be specified as a group by listing fewer parameters.

Explain the difference in approach when designing a responsive website over a mobile-first strategy?

These two approaches are not exclusive. Making a website responsive means some elements will respond by adapting its size or other functionality according to the device’s screen size, typically the viewport width, through CSS media queries

What is the cubic-bezier() function?

The cubic-bezier() function defines a Cubic Bezier curve.

Example:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}


What is CSS calc() function?

The calc() function performs a calculation to be used as the property value.

Example: #div1 {
position: absolute;
left: 50px;
width: calc(100% – 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}

What is CSS background-attachment Property?

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.
Example:

body{
background-image: url(“img_tree.gif”);
background-repeat: no-repeat;
background-attachment: fixed;
}

What is the float property used for in CSS?

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the page, though it still remains a part of the flow (in contrast to absolute positioning).

Explain the CSS Box Model and its different elements.

The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. Each box has a content area (e.g. text, an image, etc.) and an optional surrounding padding, border, and margin areas.

The CSS box model is responsible for calculating: - How much space a block element takes up. - Whether or not borders and/or margins overlap, or collapse. - A box’s dimensions.

What is CSS transition-timing-function Property?

The transition-timing-function property specifies the speed curve of the transition effect. This property allows a transition effect to change speed over its duration.
Example:

div {
transition-timing-function: linear;
}

37) What is CSS text-indent Property?

A) The text-indent property specifies the indentation of the first line in a text-block.

Example:

p {
text-indent: 50px;
}

What is CSS unicode-bidi Property?

The unicode-bidi property is used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document.
CSS unicode-bidi property example:
div {
direction: rtl;
unicode-bidi: bidi-override;
}

What is CSS3 Responsive Web Design?

CSS3 Responsive web design provides an optimal experience for the user. Responsive design allows users easy reading and easy navigation with a minimum of resizing on different devices.
The best thing about web responsive design is, it will changes the height and width of the website automatically to fit the device screen (desktop, laptop, tablets and mobiles) to provide best user experience to the user.

What are the values associated with multi columns?

Here is the list of most commonly used multi column values, they are:

column-count – Used to count the number of columns that element should be divided
column-fill – Used to decide, how to fill the columns
column-gap – Used to decide the gap between the columns
column-rule – Used to specifies the number of rules
rule-color – Used to specifies the column rule color
rule-style – Used to specifies the style rule for column
rule-width – Used to specifies the width
column-span – Used to specifies the span between columns

What are the common values used in 3D Transforms?

Here are the some commonly used values in 3D Transforms,

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) – Used to transforms the element by using 16 values of matrix
translate3d(x,y,z) – Used to transforms the element by using x-axis,y-axis and z-axis
translateX(x) – Used to transforms the element by using x-axis
translateY(y) – Used to transforms the element by using y-axis
translateZ(z) – Used to transforms the element by using y-axis
scaleX(x) – Used to scale transforms the element by using x-axis
scaleY(y) – Used to scale transforms the element by using y-axis
scaleY(y) – Used to transforms the element by using z-axis
rotateX(angle) – Used to rotate transforms the element by using x-axis
rotateY(angle) – Used to rotate transforms the element by using y-axis
rotateZ(angle) – Used to rotate transforms the element by using z-axis

What are 3D transforms in CSS3?

3D transforms in CSS3 By using 3D transforms, we can move element to x-axis, y-axis and z-axis.

Can you write CSS3 code for creating Multi Background Images?

Here is the CSS3 code for creating multi background images.

<style>
#multibackgroundimg {
background-image: url(/css/images/logo1.png), url(/css/images/border1.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}
</style>

What is Multi Background property in CSS3?

Multi background property is used to add one or more images to the background in CSS3.

What's the difference between SCSS and Sass?

The second and older syntax, known as the indented syntax (or sometimes just Sass), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

How is responsive design different from adaptive design?

Both responsive and adaptive design attempt to optimize the user experience across different devices, adjusting for different viewport sizes, resolutions, usage contexts, control mechanisms, and so on.

Responsive design works on the principle of flexibility — a single fluid website that can look good on any device. Responsive websites use media queries, flexible grids, and responsive images to create a user experience that flexes and changes based on a multitude of factors. Like a single ball growing or shrinking to fit through several different hoops.
Adaptive design is more like the modern definition of progressive enhancement. Instead of one flexible design, adaptive design detects the device and other features, and then provides the appropriate feature and layout based on a predefined set of viewport sizes and other characteristics. The site detects the type of device used, and delivers the pre-set layout for that device. Instead of a single ball going through several different-sized hoops, you’d have several different balls to use depending on the hoop size.

What are web safe fonts and fallback fonts?

Not all operating systems and browsers have the same fonts installed. Web safe fonts are fonts that are commonly pre-installed on many computer systems, such as Arial and Times New Roman. In case the browser or operating system doesn’t recognize the first font you set (e.g. Ubuntu), you should choose a web safe fallback font to display (e.g. Arial), followed by a generic font family (e.g. sans-serif). If your fallback font doesn’t display either, the browser can pick a generic font in the sans-serif family.

Do you use any CSS preprocessors, and which do you prefer?

If you’re working on a medium to large project, it’d be a good idea to use a CSS preprocessor. They allow you to write more concise CSS, split it up into multiple files and use a large number of very useful functions and mixins (you can even create your own!), along with variables.

What is the use of ruleset?

The ruleset is used to identify that selectors can be attached with other selectors. It has two parts: - Selector - Selector indicates the HTML element you want to style. - Declaration Block - The declaration block can contain one or more declarations separated by a semicolon.

Why background and color are the separate properties if they should always be set together?

There are two reasons behind this: - It enhances the legibility of style sheets. The background property is a complex property in CSS, and if it is combined with color, the complexity will further increase. - Color is an inherited property while the background is not. So this can make confusion further.

What is graceful degradation?

In case the component fails, it will continue to work properly in the presence of a graceful degradation. The latest browser application is used when a webpage is designed. As it is not available to everyone, there is a basic functionality, which enables its use to a wider audience. In case the image is unavailable for viewing, text is shown with the alt tag.

What is tweening?

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. It is an important method used in all types of animations. In CSS3, Transforms (matrix, translate, rotate, scale etc.) module can be used to achieve tweening.

What are the benefits of CSS sprites?

If a web page has large no. of images that takes a longer time to load because each image separately sends out an HTTP request. The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of HTTP requests and hence the loading time.

CSS sprites combine multiple images into one image, limiting the number of HTTP requests a browser has to make, thus improving load times. Even under the new HTTP/2 protocol, this remains true.

Under HTTP/1.1, at most one request is allowed per TCP connection. With HTTP/1.1, modern browsers open multiple parallel connections (between 2 to 8) but it is limited. With HTTP/2, all requests between the browser and the server are multiplexed on a single TCP connection. This means the cost of opening and closing multiple connections is mitigated, resulting in a better usage of the TCP connection and limits the impact of latency between the client and server. It could then become possible to load tens of images in parallel on the same TCP connection.
However, according to benchmark results, although HTTP/2 offers 50% improvement over HTTP/1.1, in most cases the sprite set is still faster to load than individual images.
To utilize a spritesheet in CSS, one would use certain properties, such as background-image, background-position and background-size to ultimately alter the background of an element.

Why Shouldn't I Use Fixed Sized Fonts ?

Only in very rare situations we will find users that have a "calibrated" rendering device that shows fixed font sizes correct. This tells us that we can never know the real size of a font when it's rendered on the user end. Other people may find your choice of font size uncomfortable. A surprisingly large number of people have vision problems and require larger text than the average. Other people have good eyesight and prefer the advantage of more text on the screen that a smaller font size allows. What is comfortable to you on your system may be uncomfortable to someone else. Browsers have a default size for fonts. If a user finds this inappropriate, they can change it to something they prefer. You can never assume that your choice is better for them. So, leave the font size alone for the majority of your text. If you wish to change it in specific places (say smaller text for a copyright notice at the bottom of page), use relative units so that the size will stay in relationship to what the user may have selected already. Remember, if people find your text uncomfortable, they will not bother struggling with your web site. Very few (if any) web sites are important enough to the average user to justify fighting with the author's idea of what is best.

Is it possible to create border as a Image in CSS3?

Yes it is possible, by using CSS3 border image property we can use image as a border.

What are the associated border-radius properties?

A) There are four border-radius properties are there, they are:

1.Border-radius Use this element for setting four boarder radius property
2.Border-top-left-radius Use this element for setting the boarder of top left corner
3.Border-top-right-radius Use this element for setting the boarder of top right corner
4.Border-bottom-right-radius Use this element for setting the boarder of bottom right corner
5.Border-bottom-left-radius Use this element for setting the boarder of bottom left corner

What is the way to backward compatibility be designed in CSS?

HTML sheet methods are collaborated with CSS and used accordingly.

How does the Z index function?

Overlapping may happen while using CSS for positioning HTML elements. Z index useful to specify the overlapping element. It is a figure which can be positive or negative, the non-payment value being zero.

What do you mean by at-rule?

Rule, which is appropriate in the whole sheet and not partly, is known as at-rule. It is proceeding by @ followed by A-Z, a-z or 0-9.

Why is it easy to insert a file by importing it?

Importing allows combining outside sheets with being included in many sheets. Different files and sheets can be utilized to have diverse functions. Syntax:
@import notation, used with <style> tag.

What do you mean by Inline style?

The Inline style in a CSS is utilized to add up styling to an entity HTML element.

WHAT ARE THE VARIOUS METHODS FOR INCORPORATING CSS INTO YOUR HTML PAGE?

There are three forms to incorporate a particular CSS style:

You may incorporate your design into your HTML page by using style tags in the headline.
You can incorporate your own design by using inline styling.
You should write your CSS in a separate file and then connect to it from your HTML tab.

WHAT INSPIRED THE CREATION OF CSS?

CSS was created in 1997 to allow web developers to describe the visual design of the web pages they were developing. It was designed to allow developers to decouple the functionality and layout of a website’s programming from its graphic design, which had previously been impossible.

The distinction of structure and style enables HTML to focus on its original purpose — content markup — without needing to think about the architecture and functionality of the website, generally referred to as the page’s “look and feel.”

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

The difference between visibility:hidden and display:none properties is that in the case of the former, the elements are hidden but not deleted. No space is consumed.
In case of the latter, the element is hidden and the layout is affected, that is, some space is taken up.

<!DOCTYPE html>
<html>
<head>
<style>
h3
{
display: none;
}
</style>
</head>
<body>
<h2>This heading is visible</h2>
<h3>This is a hidden heading</h3>
<p>The hidden heading does not take up space even after hiding it since we have used display: none;.</p>
</body>
</html>
visibility:hidden
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
visibility:hidden;
}
</style>
</head>
<body>
<h2>This heading is visible</h2>
<h3>This is a hidden heading</h3>
<p>The hidden heading takes up space even after hiding it.</p>
</body>
</html>

What is meant by a universal selector?

It is a selector which can match the name of any element type, rather than selecting the elements of a specific category.

How does a browser determine what elements match a CSS selector?

Browsers match selectors from rightmost (key selector) to left. Browsers filter out elements in the DOM according to the key selector and traverse up its parent elements to determine matches. The shorter the length of the selector chain, the faster the browser can determine if that element matches the selector.
For example with this selector p span, browsers firstly find all the <span> elements and traverse up its parent all the way up to the root to find the <p> element. For a particular <span>, as soon as it finds a <p>, it knows that the <span> matches and can stop its matching.

What is CSS flexbox?

The flexbox layout officially called CSS flexible box layout module is a new layout module in CSS3. It is made to improve the items align, directions and order in the container even when they are with dynamic, or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.
Many designers and developers find this flexbox layout easier to use, as the positioning of the elements is simpler thus more complex layouts can be achieved with less code, leading to a simpler development process. Flexbox layout algorithm is direction based unlike the block or inline layout which are vertically and horizontally based. This flexbox layout should be used for small application components, while the new CSS Grid Layout Module is emerging to handle the large scale layouts.

Search
R4R Team
R4R provides CSS Freshers questions and answers (CSS Interview Questions and Answers) .The questions on R4R.in website is done by expert team! Mock Tests and Practice Papers for prepare yourself.. Mock Tests, Practice Papers,CSS experienced interview question,CSS Freshers & Experienced Interview Questions and Answers,CSS Objetive choice questions and answers,CSS Multiple choice questions and answers,CSS objective, CSS questions , CSS answers,CSS MCQs questions and answers Java, C ,C++, ASP, ASP.net C# ,Struts ,Questions & Answer, Struts2, Ajax, Hibernate, Swing ,JSP , Servlet, J2EE ,Core Java ,Stping, VC++, HTML, DHTML, JAVASCRIPT, VB ,CSS, interview ,questions, and answers, for,experienced, and fresher R4r provides Python,General knowledge(GK),Computer,PHP,SQL,Java,JSP,Android,CSS,Hibernate,Servlets,Spring etc Interview tips for Freshers and Experienced for CSS fresher interview questions ,CSS Experienced interview questions,CSS fresher interview questions and answers ,CSS Experienced interview questions and answers,tricky CSS queries for interview pdf,complex CSS for practice with answers,CSS for practice with answers You can search job and get offer latters by studing r4r.in .learn in easy ways .