CSS3 INTERVIEW QUESTIONS

CSS-CSS3:
CSS is used to control the style and layout of multiple Web pages all at once.

text-wrap: values?
text-wrap: normal|none|unrestricted|suppress;

What is CSS?
CSS stands for Cascading Style Sheets
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:

The selector is normally the HTML element you want to style. Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with “/*”, and ends with “*/”, like this:

What is the difference between CSS & CSS3?
CSS3 is the upgraded version of CSS with new features like Selectors, Box model, Backgrounds and Borders, Text Effects, 2D/3D Transformations, Animation, Multiple column layout, User Interface etc.

What is the difference between an ID selector and CLASS?
An ID selector identifies and sets style to only one occurrence of an element, while CLASS can be attached to any number of elements.

The id Selector:
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a “#”.

The class Selector:
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a “.”
* Do NOT start a ID/Class name with a number.

What are style sheet properties?
CSS Background, CSS Text, CSS Font, CSS Border, CSS Outline, CSS Margin, CSS Padding, CSS List, CSS Table

List various font attributes used in style sheet?
font-style, font-variant, font-weight, font-size/line-height, font-family, caption, icon, menu, message-box, small-caption, status-bar

What is the correct HTML for referring to an external style sheet?

Where in an HTML document is the correct place to refer to an external style sheet?
In the section
What are different ways to apply styles to a Web page?
4 ways we can declare the CSS in HTML.
Inline, Internal, External as link(“, Import css by (“@import url(‘path’);”)

Cascading order:
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:
Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or in a browser (a default value).

What is contextual selector?
For example, consider the following rules:
H1 { color: red }
EM { color: red }

Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:

This headline is very important

We address this case by adding a contextual rule to the previous two that sets the text color to blue whenever an EM occurs anywhere within an H1:

H1 { color: red }
EM { color: red }
H1 EM { color: blue }

The third rule will also match the following fragment:

This
headline is very
important

A contextual selector may also contain attribute selectors.

What are the powerful features of CSS3?
Media Query and Animations are the powerful features of css3 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 wid…

Set Font Size With Em:
To avoid the resizing problem with older versions of Internet Explorer, many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em

Ems in CSS Generally, 1em = 12pt = 16px = 100% it is use to scale the value in web.

Crossbrowser Solution for Lists:
Example explained:
For ul:
Set the list-style-type to none to remove the list item marker
Set both padding and margin to 0px (for cross-browser compatibility)

For all li in ul:
Set the URL of the image, and show it only once (no-repeat)
Position the image where you want it (left 0px and down 5px)
Position the text in the list with padding-left

Positions in CSS:
Values for position: static, relative, absolute, fixed, inherit

Here, I’ve listed basic difference between css positioning properties.

Position-Relative. This type of positioning is probably the most confusing and misused. What it really means is “relative to itself”. If you set position: relative;on an element but no other positioning attributes (top, left, bottom or right), it will no effect on it’s positioning at all, it will be exactly as it would be if you left it as position: static; But if you DO give it some other positioning attribute, say, top: 10px;, it will shift it’s position 10 pixels DOWN from where it would NORMALLY be.

Position-Absolute. This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it. You use the positioning attributes top, left bottom and right to set the location. Remember that these values will be relative to the next parent element. If there is no such parent, it will default all the way back up to the element itself meaning it will be placed relatively to the page itself.

Position-Fixed. This type of positioning is fairly rare but certainly has its uses. A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn’t change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.

What does z-index do?
The z-index property specifies the stack order of an element.

What is Grouping?
When more than one selector shares the same declaration, they may be grouped together via a comma-separated list; this allows you to reduce the size of the CSS (every bit and byte is important) and makes it more readable. The following snippet applies the same background to the first three heading elements.
h1, h2, h3 {background: red;}

What are Child Selectors?
A child selector is used when you want to match an element that is the child of another specific element. The parent and child selectors are separated by spaces. The following selector locates an unordered list element within a paragraph element and makes a text within that element bold.
p > ul {font-weight: bold;}

What are Pseudo Classes?
Pseudo classes allow you to identify HTML elements on characteristics (as opposed to their name or attributes). The classes are specified using a colon to separate the element name and pseudo class. A good example is the :link and :visited pseudo classes for the HTML A element. Another good example is first-child, which finds an element’s first child element.
The following CSS makes all visited links red and green, the actual link text becomes yellow when the mouse pointer is positioned over it, and the text of the first element of a paragraph is bold.
a:link {font-color: red;}
a:visited {font-color: green;}
a:hover {font-color: yellow;}
p.first-child {font-weight: bold;}

Can you explain CSS box model?
CSS box model is a rectangular space around a HTML element which defines border, padding and margin.
Border: – This defines the maximum area in which the element will be contained. We can make the border visible, invisible, define height and width etc.
Padding: – This defines the spacing between border and element.
Margin: – This defines the spacing between border and any neighboring elements.

Can you explain some text effects in CSS 3?
Here the interviewer is expecting you to answer one of two text effects by CSS.Below are two effects which are worth noting. Shadow text effect
Syntax:
.specialtext
{
text-shadow: 5px 5px 5px #FF0000;
}

What’s the difference between an inline element and a block element?
Inline –à Span same line such as Hi.
Block element -à div such as box, container, etc

1. Float option.
2. Box layout.
3. Media query syntax.
4. CSS3 keyframes uses and syntax.
5. In CSS3 to enable he hardware acceleration for mobile application we need to use translate3d syntax.
6. Manifest use to load the webpage in the offline. Cache.
7. What is responsive layout.
8. Sprites images.
9. Retina images.
10. CSS3 new properties (shadow, radius, gradient, animation etc..)
11. SASS uses.
12. Word wrap in CSS3.

13. What is Boostrap? Bootstrap is an open-source Javascript framework developed by the team at Twitter.
It is a combination of HTML, CSS, and Javascript code designed to help build user interface components.
Bootstrap is Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
Bootstrap was also programmed to support both HTML5 and CSS3
Bootstrap is a CSS and Javascript framework that is used within your HTML. Bootstrap provides more advanced functionality to your web site.

Author: go123

https://webtemplatesmonster.blogspot.in/