CSS3



1. What is CSS3?  

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. Experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantics can change in the future.



2. What is the difference between CSS and CSS3 ?  

CSS3 is upgreaded version of CSS with new future like Selectors,Box Model, Backgrounds and Borders, Text Effects,2D/3D Transformations, Animations, Multiple Column Layout,User Interface etc



3. Explain the CSS "box model" and the layout components that it consists of.Provide some usage examples?  

The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following:

  • Content - The content of the box, where text and images appear
  • Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content)
  • Border - A border surrounding the padding (if any) and content
  • Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)

    Each of these properties can be specified independently for each side of the element (i.e., top, bottom, right, left) or fewer values can be specified to apply to multiple sides. For example:
               /*       top   right  bottom left  */
               padding: 25px  50px   75px   100px;
              /* same padding on all 4 sides: */
              padding: 25px;
              /* top/bottom padding 25px; right/left padding 50px */
              padding: 25px 50px;
              /* top padding 25px; right/left padding 50px; bottom padding 75px */
              padding: 25px 50px 75px;
              


4. What new futures added in CSS3 for Borders and how Browser Support it?  

following border futures added

* border-radius
* box-shadow
* border-image

and all modern Browser Support it like below

Internet Explorer 9 supports border-radius and box-shadow
Firefox requires the prefix -moz- for border-image.
Chrome and Safari requires the prefix -webkit- for border-image.
Opera requires the prefix -o- for border-image.




5. Explain the meaning of each of these CSS units for expressing length: cm,em,in,mm,pc,pt,p ?  

*cm - centimeters
*em - elements (i.e., relative to the font-size of the element; e.g., 2 em means 2 times the current font size)
*in - inches
*mm - millimeters
*pc - picas (1 pc = 12 pt = 1/6th of an inch)
*pt - points (1 pt = 1/72nd of an inch)
*px - pixels (1 px = 1/96th of an inch)



6. How you will create Rounded Corners using css3?  

We have to creat a class like below
        

and we have to add this class where we want the round corner like in below div
        
this is the round corner by css3

This is the div and round corner by css3


7. Explain what elements will match each of the following CSS selectors: (div, p), (div p), (div > p), (div + p), (div ~ p) ?  

* div, p - Selects all <div> elements and all <p> elements

* div p - Selects all <p> elements that are anywhere inside a <div> element

* div > p - Selects all <p> elements where the immediate parent is a <div> element

* div + p - Selects all <p> elements that are placed immediately after a <div> element

* div ~ p - Selects all <p> elements that are anywhere preceded by a <div> element



8. How we create border using images by CSS3?  

By using border-image: property of css3 we can create a border using images like below
 
       .roundpcds
       {
       border-image:url(borderpcds.png) 30 30 round;
       -moz-border-image:url(borderpcds.png) 30 30 round; /* Firefox */
       -webkit-border-image:url(borderpcds.png) 30 30 round; /* Safari and Chrome */
       -o-border-image:url(borderpcds.png) 30 30 round; /* Opera */
       }
      .stretchPcds
      {
      -moz-border-image:url(borderpcds.png) 30 30 stretch; /* Firefox */
      -webkit-border-image:url(borderpcds.png) 30 30 stretch; /* Safari and Chrome */
      -o-border-image:url(borderpcds.png) 30 30 stretch; /* Opera */
      border-image:url(borderpcds.png) 30 30 stretch;
       }   


9. List out CSS3 modules?  

Below are the listed major modules

* Selectors
* Box Model
* Backgrounds and Borders
* Text Effects
* 2D/3D Transformations
* Animations
* Multiple Column Layout
* User Interface



10. How you will create Box Shadow and text Shadow using CSS3?  

Like below we can create Box Shadow using CSS3 .boxshadowpcds
         {
         box-shadow: 10px 10px 5px #ccccc;
         }
         .textshadowpcds
         {
         text-shadow: 5px 5px 5px #FF0000;
         } 
         
and then need to use these class boxshadownpcds ,textshadowpcds


11. What is the CSS3 The background size Property?  

The background-size property specifies the size of the background image.

As we know Before CSS3, the background image size was find out by the real size of the image. In CSS3 it is possible to specify the size of the background image, which allows you to re-use background images in different ways.
        .pcdsbp1
       {
       background:url(background.gif);
       -moz-background-size:80px 60px; /* Firefox 3.6 */
       background-size:80px 60px; /* or we can do background--ize:100% 100%;*/
       background-repeat:no-repeat;
       }    
       


12. What is the word wrap / word wrapping in CSS3 ?  

Allow long words to be able to break and wrap onto the next line in css3 we used word-wrap property like below class
.wordwrappcds{word-wrap:break-word;}  


13. What is the CSS3 animation ?  

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

* Specify the name of the animation
* Specify the duration of the animation



14. What is CSS?  

A cascading style sheet (CSS) is a Web page derived from multiple sources with a defined order of precedence where the definitions of any style element conflict. The Cascading Style Sheet, level 1 (CSS1) recommendation from the World Wide Web Consortium (W3C), which is implemented in the latest versions of the Netscape and Microsoft Web browsers, specifies the possible style sheets or statements that may determine how a given element is presented in a Web page.

CSS gives more control over the appearance of a Web page to the page creator than to the browser designer or the viewer. With CSS, the sources of style definition for a given document element are in this order of precedence:

1.The STYLE attribute on an individual element tag
2.The STYLE element that defines a specific style sheet containing style declarations or a LINK element that links to a separate document containing the STYLE element. In a Web page, the STYLE element is placed between the TITLE statement and the BODY statement.
3.An imported style sheet, using the CSS @import notation to automatically import and merge an external style sheet with the current style sheet
4.Style attributes specified by the viewer to the browser
5.The default style sheet assumed by the browser



15. What can I do with CSS?  

CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. Just wait and see!

HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today.

After only a few lessons of this tutorial you will be able to make your own style sheets using CSS to give your website a new great look.



16. What are the limitations of CSS ?  

Limitations are:

* Ascending by selectors is not possible
* Limitations of vertical control
* No expressions
* No column declaration
* Pseudo-class not controlled by dynamic behavior
* Rules, styles, targeting specific text not possible



17. What are the advantages of CSS ?  

Advantages are:
* Bandwidth
* Site-wide consistency
* Page reformatting
* Accessibility
* Content separated from presentation
    • CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.
    • Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
    • Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
    • Superior styles to HTML - CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes.
    • Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
    • Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.
    • Offline Browsing - CSS can store web applications locally with the help of an offline catche.Using of this, we can view offline websites.The cache also ensures faster loading and better overall performance of the website.
    • Platform Independence - The Script offer consistent platform independence and can support latest browsers as well.


18. What is the difference between CSS and HTML?  

HTML is used to structure content. CSS is used for formatting structured content.

Okay, it sounds a bit technical and confusing. But please continue reading. It will all make sense to you soon.

Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented the World Wide Web, the language HTML was only used to add structure to text. An author could mark his text by stating "this is a headline" or "this is a paragraph" using HTML tags such as <h1> and <p>.

As the Web gained popularity, designers started looking for possibilities to add layout to online documents. To meet this demand, the browser producers (at that time Netscape and Microsoft) invented new HTML tags such as for example <font> which differed from the original HTML tags by defining layout - and not structure.

This also led to a situation where original structure tags such as <table> were increasingly being misused to layout pages instead of adding structure to text. Many new layout tags such as <blink> were only supported by one type of browser. "You need browser X to view this page" became a common disclaimer on web sites.

CSS was invented to remedy this situation by providing web designers with sophisticated layout opportunities supported by all browsers. At the same time, separation of the presentation style of documents from the content of documents, makes site maintenance a lot easier.



19. Which benefits will CSS give me?  

CSS was a revolution in the world of web design. The concrete benefits of CSS include:

* control layout of many documents from one single style sheet;
* more precise control of layout;
* apply different layout to different media-types (screen, print, etc.);
* numerous advanced and sophisticated techniques.



20. What are CSS frameworks?  

It is a pre-planned libraries, which allows easier and more standards-compliant webpage styling, using CSS language.



Java Interview Question

.Net Interview Question

PHP Interview Question

AngularJS Interview Questions