Embedded Files
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.
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?
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 custom widgets for wordpress binding between elements and styles is done using ‘id’ or ‘class’ attributes.
What is the Syntax of Opacity in CSS3?
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
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.
p:nth-child(odd) { background: red; }
p:nth-child(even) { background: blue; }
p:nth-child(3n+0) { background: red; }
What are some common lists that are used when designing a page?
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?
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?
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?
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?
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 <a>, <span> , <strong>, and <img> tags.
Inline Block Elements: Inline-block elements are similar to inline elements, except they can have padding and margins and set height and width values.
What are Pseudo elements and Pseudo classes?
What are Pseudo elements and Pseudo classes?
Pseudo-elements allows us to create items that do not normally exist in the document tree, for example ::after.
::before
::after
::first-letter
::first-line
::selection
In the below example, the color will appear only on the first line of the paragraph.
p: :first-line {
color: #ffOOOO;
font-variant: small-caps;
}
Pseudo-classes select regular elements but under certain conditions like when the user is hovering over the link.
:link
:visited
:hover
:active
:focus
Example of the pseudo-class, In the below example, the color applies to the anchor tag when it’s hovered.
/* mouse over link */
a:hover {
color: #FFOOFF;
}
What is a z-index, how does it function?
What is a z-index, how does it function?
z-index is used for specifying the vertical stacking of the overlapping elements that occur at the time of its positioning. It specifies the vertical stack order of the elements positioned that helps to define how the display of elements should happen in cases of overlapping.
What is cascading in CSS?
What is cascading in CSS?
“Cascading” refers to the process of going through the style declarations and defining weight or importance to the styling rules that help the browser to select what rules have to be applied in times of conflict. The conflict here refers to multiple rules that are taurus love horoscope 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?
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?
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.
Page updated
Google Sites
Report abuse