CSS3 INTERVIEW QUESTIONS

Sources:

http://dglobaltech.com/css-interview-questions-and-answers-15-common-css-questions/

http://stackoverflow.com/questions/1960699/top-10-css-and-html-questions-to-ask-interviewee

http://www.geekinterview.com/Interview-Questions/Web/CSS3

http://sharag.wordpress.com/2013/11/28/hcl-ui-developer-html5css3jsjquery-interview-questions-and-answer/

http://theprofessionalspoint.blogspot.in/2013/08/css3-basic-interview-questions-and.html

http://www.pcds.co.in/css3-interview-questions-and-answers.php

http://css-tricks.com/interview-questions-css/

 http://dglobaltech.com/css-interview-questions-and-answers-15-common-css-questions/

Questions:

OBJECTIVE

  1. What is the default value for the display attribute for the image element?

 

  1. None
  2. Block
  3. Inline
  4. run-in

C

  1. What is box sizing?

 

  1. Specifies whether or not an element should be resizable by the user.
  2. Allows you to define certain elements to fit an area in a certain way.
  3. Draws outline beyond the border edge.

B

  1. Say True/False, CSS3 allows you to bookmark the page?

 

  1. Yes
  2. No

A

  1. Can you can specify more than one box shadow to an element?

 

  1. Yes
  2. No

A

  1. box-shadow: 5px 5px 5px #888; What does the third value in the declaration specify?

 

  1. X off set
  2. Y offset
  3. Blur radius
  4. Margin

C

  1. RGBa can not be applied to which of these sections?

 

  1. Backgrounds
  2. Borders
  3. Shadows
  4. None of the above

D

 

  1. Which of these is a keyword that can be used when using the box-shadow property?
  1. Engrave
  2. Emboss
  3. Inset
  4. Bevel

C

  1. Can you use a negative number as the blur radius value?

 

  1. Yes
  2. No

B

  1. Which of the following pseudo selectors isn’t a part of CSS3?

 

  1. enabled
  2. disabled
  3. empty
  4. visible

D

 

GENERAL

Have you worked with any CSS Frameworks?

Like Foundation or Bootstrap

What pre-processors does Bootstrap/Foundation use?

F: SASS, B: LESS

What is the core difference between SASS and LESS and SCSS

They are CSS preprocessors. They are an abstraction layer on top of CSS. They are a special syntax/language that compile down into CSS. They make managing CSS easier, with things like variables and mixins to handle vendor prefixes (among other things). They make doing best practices easier, like concatenating and compressing CSS.

Bonus points for knowing how they differ and/or having experience using them. More bonus points for knowing what things like Compass, Bourbon, LESSHat, Nib, etc are and how they relate.

What is the advantage of using CSS Frameworks over vanilla CSS

SUBJECTIVE

Explain how the CSS box model works.

Expect him to draw a box and then explain what the border is, what the margin is, what the padding is, etc. If you assign a width: or height: to something, what specifically does that refer to…

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in relation to other elements.

Explanation of the different parts:

  • Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
  • Border – A border that goes around the padding and content. The border is affected by the background color of the box
  • Padding – Clears an area around the content. The padding is affected by the background color of the box
  • Content – The content of the box, where text and images appear

Here is the snippet to draw box model to your web page.

<head>
<style>
div.test
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

<body>

<div class=”test”>The picture above is 250px wide. The total width of this element is   also 250px.</div>

</body>

 

Explain vertical margin collapsing.

What’s the difference between position: relative, position: fixed & position: absolute?

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 <html> 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.

Describe what a “reset” CSS file does and how it’s useful. Are you familiar with normalize.css? Do you understand how they differ?

Resets are so wildly common in CSS that anyone who is a front end developer type has surely used them. Do they do so blindly or do they know why? The reason is essentially that different browsers have different default styling for elements, and if you don’t deal with that at all, you risk designers looking unnecessarily different in different browsers and possibly more dramatic breaking problems.

Normalize you might call a CSS reset alternative. Instead of wiping out all styles, it delivers a set of reasonable defaults. It doesn’t unset things that are already consistent across browsers and reasonable (e.g. bold headers). In that way it does some less than a reset. It also does some more than a reset in that it handles quirks you may never consider, like HTML5 audio element inconsistencies or line-height inconsistencies when you use sub and sup elements.

Top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the margins combined into it, a behavior known as margin collapsing.

Margin collapsing occurs in three basic cases:

Adjacent siblings

The margins of adjacent siblings are collapsed (except when the later sibling needs to be cleared past floats).

Parent and first/last child

If there is no border, padding, inline content, or clearance to separate the margin-top of a block with the margin-top of its first child block, or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block with the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.

Empty blocks

If there is no border, padding, inline content, height, or min-height to separate a block’s margin-top from its margin-bottom, then its top and bottom margins collapse.

vertical margins collapse between certain boxes.

To understand how vertical margins collapse lets start with a basic html and CSS example.

Adjacent Elements With Positive Margin

Vertical adjoining margins collapses. If two elements has positive vertically adjoining margin than only the maximum of both will take effect.

CSS CODE

 

1

2

3

#parent{ background-color:yellow; width:300px; }

#red {background-color:red; height:50px; margin-bottom:30px;}

#blue {background-color:blue; height:50px; margin-top:20px;}

BROWSER RESULT

Margins of floating and absolutely positioned elements never collapse.

There are other situations where elements do not have their margins collapsed:

  • inline-block elements
  • elements with overflow set to anything other than visible (They do not collapse margins with their children.)
  • cleared elements (They do not collapse their top margins with their parent block’s bottom margin.)
  • the root element

 

 

 

Advertisements

Sass vs. SCSS

 

One common objection among Sass detractors is that the indented syntax is so foreign to CSS. Why spend the time learning a language that is radically different from CSS?

In version 3 of Sass, the SCSS (Sassy CSS) syntax was introduced as “the new main syntax” for Sass and builds on the existing syntax of CSS. It uses brackets and semi-colons just like CSS. It doesn’t care about indentation levels or white-space. In fact, Sass’s SCSS syntax is a superset of CSS – which means SCSS contains all the features of CSS, but has been expanded to include the features of Sass as well. In layman’s terms, any valid CSS is valid SCSS. And in the end, SCSS has the exact same features as the Sass syntax, minus the opinionated syntax.

 

Those who are new to Sass have less to learn. And as for Sass detractors, well, they can no longer complain about the syntax. As far as I’m concerned, SCSS is the new CSS.

SO Basically its only syntax difference b/w SASS and SCSS

http://thesassway.com/articles/sass-vs-scss-which-syntax-is-better

the difference between SCSS and Sass, the text on the Sass home page should answer the question:

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

The difference is UI. Underneath the textual exterior they are identical. This is why sass and scss files can import each other. Actually, Sass has four syntax parsers: scss, sass, CSS, and less. All of these convert a different syntax into an “Abstract Syntax Tree” which is further processed into CSS output or even onto one of the other formats via the sass-convert tool.

 

Use the syntax you like the best, both are fully supported and you can change between them later if you change your mind.

LESS vs SCSS

GITHUB

  1. https://github.com/less/less.js 9798 Stars
  2. https://github.com/nex3/sass 2974 stars

Both Sass and LESS are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.

https://medium.com/frontend-and-beyond/8b3812c7007c : Use SCSS as its better

http://stackoverflow.com/questions/8411066/less-vs-sass-vs :

  1. 1.       Twitter uses LESS in Twitter Bootstrap.
  2. 2.       Foundation uses SCSS
    1. 3.     LESS is inspired by Sass. Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. LESS was designed to be as close to CSS as possible, so the syntax is identical to existing CSS code. As a result, existing CSS can be used as valid LESS code.
    2. 4.     any valid CSS is valid SCSS.
    3. 5.     The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).
    4. LESS preprocess is JS while SCSS is Ruby
    5. LESS is a JavaScript library and is, therefore, processed client-side.Sass, on the other hand, runs on Ruby and is processed server-side. A lot of developers might not choose LESS because of the additional time needed for the JavaScript engine to process the code and output the modified CSS to the browser. There are a few ways around this. The way I get around it is to use LESS only during the development process. Once I’m finished, I copy and paste the LESS output into a minifier and then into a separate CSS file to be included in place of the LESS files. Another option is to use LESS.app to compile and minify your LESS files.

 

INSTALLATION

Including LESS in something that you’re building is about as easy as it gets:

Go get yourself a copy of less.js;

Create a file to put your styles in, such as style.less;

Add the following code to your HTML’s <head>:

<link rel=”stylesheet/less” type=”text/css” href=”styles.less”>

<script src=”less.js” type=”text/javascript”></script>

Note the rel attribute of the link. You are required to append the /less to the end of the value in order for LESS to work. You are also required to include the script immediately after the link to the style sheet. If you’re using HTML5 syntax, and I can’t imagine why you wouldn’t be, you can leave out the type=”text/css” and the type=”text/javascript”.

There’s also a server-side version of LESS. The easiest way to install LESS on the server is with Node Package Manager (NPM).

Read on: http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/

 

bootstrap vs foundation

 

ZURB and Twitter made their objectives and intentions very clear when naming each CSS Frameworks: Bootstrap will have everything you’ll ever need to bootstrap your project. Foundation will have just the things you will ever need as the foundation for your project.

See: https://medium.com/frontend-and-beyond/8b3812c7007c

BEST:     http://responsive.vermilion.com/compare.php

 

https://github.com/zurb/foundation

https://github.com/twbs/bootstrap

NOTE: http://stackoverflow.com/questions/18107201/foundation-and-angularjs

You are mixing two technologies that dont play nice together.

The JS assets provided by Zurb Foundation will inevitably have conflicts with the digest cycle in AngularJS. For this reason — Angular-Bootstrap projects emerged to transform jquery plugins into AngularJS directives.

http://angular-ui.github.io/bootstrap/

I don’t believe the same level of support, “if any”, is offered for Zurb Foundation.

BEST: http://www.slideshare.net/jen4web/twitter-bootstrap-vs-zurb-foundation

VIDEO: http://www.sitepoint.com/video-bootstrap-foundation/

 

 

Changing CSS locally in chrome inspector and saving it to file system

 

This needs to be done manually every time u want to save changes, unless u are using workspaces, which I’m not.

So simply make changes in the inspector for css (styles tab under Elements tab) and in styles tab only on top right, there will be link to the css file. Clk on it and save it in the location of original css (which u can find from the Resources Tab under Frames).

Note that the css file under Resources Tab under Frames is the source file and will not reflect any local changes.

This has to be done only once and all subsequent changes will be saved on it own mostly., but in case the fie name in top right shows something like site.css:rem1234

That means that instead of modifying site.css it has created temp file and so u have to save it explicitly.

 

Alternate to “Resources Tab under Frames” is the “Sources Tab”, which shows the same files view.

 

BEST way is to use WORKSPACES. Simply add the project root dir as workspace folder in chrome inspector and then map it to the localhost file by rt clk in sources tab files and then all changes will be auto saved and no temp files will be created.

Moreover rt clk on say site.css will give u option of local modifications that will show u all local changes that u can revert etc.