Every web designers well known to the power of CSS. CSS helps to centralize the UI Design. To made CSS better their are many Components like SASS, SCSS or LESS. BootStrap and Foundation like controls also gives vitamin to CSS. Looking into the growi...
Every web designers well known to the power of CSS. CSS helps to centralize the UI Design. To made CSS better their are many Components like SASS, SCSS or LESS. BootStrap and Foundation like controls also gives vitamin to CSS. Looking into the growing demand of CSS in web designing CSS3 comes with many advanced features.
Oops! This image does not follow our content guidelines. To continue publishing, please remove it or upload a different image.
For 2 yrs expericed web designers these below CSS3 interview question are very common. if this week-end you planned for a walk-in drive, take a look at the below questions.
In how many ways can we specify the CSS styles for the HTML element?
There are three ways in which we can specify the styles for HTML elements:
Inline: Here we use the 'style' attribute inside the HTML element.Internal: Here we use the <style> tag inside the <head> tag. To apply the style we bind the elements using 'id' or 'class' attributes.External: Here we use the <link> tag inside <head> tag to reference the CSS file into our HTML code. Again the binding between elements and styles is done using 'id' or 'class' attributes.What is the Syntax of Opacity in CSS3?
Style="opacity:0.4; filter:alpha(opacity=40)"
Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).
CSS3 :nth-child() Selector
The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. n can be a number, a keyword, or a formula.
What are some common lists that are used when designing a page?
There are many common lists which are used to design a page. You can choose any or a combination of the following list types:
Ordered list — The ordered list displays elements in numbered format. It is represented by <ol> tag.Unordered list — The unordered list displays elements in bulleted format. It is represented by <ul> tag.What is an image map?
Image map facilitates you to link many different web pages using a single image. It is represented by <map> tag. You can define shapes in images that you want to make part of an image mapping.
What is a marquee?
Marquee is used to put the scrolling text on a web page. It scrolls the image or text up, down, left or right automatically. You should put the text which you want to scroll within the <marquee>......</marquee> tag.
What are the different types of Selectors in CSS?
A CSS selector is the part of a CSS ruleset that actually selects the content you want to style. Different types of selectors are listed below.
Universal Selector, ID Selector, Element Type Selector, Class Selector, Attribute Selector
What is the difference between inline, inline-block, and block?
Block Element: The block elements always start on a new line. They will also take space for an entire row or width. List of block elements are <div>, <p>.
Inline Elements: Inline elements don't start on a new line, they appear on the same line as the content and tags beside them. Some examples of inline elements are
applicable to a particular HTML element. In such cases, we need to let the browser know what style needs to be applied to the element. This is done by cascading down the list of style declarations elements.
For example, if we have the below style:
p{color:white;}
and we also have the following declaration below it or in another stylesheet that has been linked to the page:
p{color: black;}
We have a conflict in color property here for the paragraph elements. Here, the browser just cascades down to identify what is the most recent and most specific style and applies that. Since we have the color:black; as the most specific declaration, the color black is applied to the paragraph elements. Now if you want to ensure color white is applied to the paragraph, we can define weight to that style by adding !important as shown below:
p{
color:white !important;}
!important ensures that the property has the maximum weight in presence of other conflicting properties.
How does this property work overflow: hidden?
The overflow property in CSS is used for specifying whether the content has to be clipped or the scrollbars have to be added to the content area when the content size exceeds the specified container size where the content is enclosed. If the value of overflow is hidden, the content gets clipped post the size of the container thereby making the content invisible. For example,
div {width: 150px;height: 50px;overflow: hidden;}
If the content of the div is very large and exceeds the height of 50px, the content gets clipped post 50px and the rest of the content is not made visible.
What is the importance of CSS Sprites?
CSS sprites are used for combining multiple images in a single larger image. They are commonly used for representing icons that are used in the user interfaces. The main advantages of using sprites are:
It reduces the number of HTTP requests to get data of multiple images as they are acquired only by sending a single request.It helps in downloading assets in advance that help display icons or images upon hover or other pseudo-states.When there are multiple images, the browser makes separate calls to get the image for each of them. Using sprites, the images are combined in one and we can just call for that image using one call.
