CSS interview questions

CSS quiz questions

  • 1.

    What benefits and demerits do External Style Sheets have? 



    • One file can be used to control multiple documents having different styles.
    • Multiple HTML elements can have many documents, which can have classes.
    • To group styles in composite situations, methods as selector and grouping are used.


    • Extra download is needed to import documents having style information.
    • To render the document, the external style sheet should be loaded.
    • Not practical for small style definitions.
  • 2.

    In how many ways can a CSS be integrated as a web page?


    CSS can be integrated in three ways:

    • Inline: Style attribute can be used to have CSS applied HTML elements.
    • Embedded: The Head element can have a Style element within which the code can be placed.
    • Linked/ Imported: CSS can be placed in an external file and linked via link element.
  • 3.

    Who maintains the CSS specifications?


    World Wide Web Consortium maintains the CSS specifications.

  • 4.

    How block elements can be centered with CSS1?


    Block level elements can be centered by:

    The margin-left and margin-right properties can be set to some explicit value:

    BODY {
    width: 40em;
    background: fluorescent;
    P {
    width: 30em;
    margin-right: auto;
    margin-left: auto

    In this case, the left and right margins will be each, five ems wide since they split up the ten ems left over from (40em-30em). It was unnecessary for setting up an explicit width for the BODY element; it was done here for simplicity.

  • 5.

    What are CSS frameworks?


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

  • 6.

    What are the advantages of CSS ?


    Advantages are:

    • Bandwidth
    • Site-wide consistency
    • Page reformatting
    • Accessibility
    • Content separated from presentation
  • 7.

    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
  • 8.

    What are the different variations of CSS ?


    The variations for CSS are:

    • CSS 1
    • CSS 2
    • CSS 2.1
    • CSS 3
    • CSS 4
  • 9.

    What is the origin of CSS ?


    Standard Generalized Markup Language marked the beginning of style sheets in 1980s.

  • 10.

    What is CSS ?


    The full form of CSS is Cascading Style Sheets. It is a styling language which is simple enough for HTML elements. It is popular in web designing, and its application is common in XHTML also.

  • 11.

    Are quotes mandatory in URL’s?


    Quotes are optional in URL’s, and it can be single or double

  • 12.

    Why is @import only at the top?


    To avoid any overriding rules. Generally, ranking order is followed in most programming languages such as Java, Modula, etc. In C, the # is a prominent example of a @import being at the top.

  • 13.

    Which font names are available on all platforms ?


    • Only five basic font families( serif, sans-serif, cursive, fantasy, and monsospace) are recognized across platforms, rather than specific fonts.
    • Specific font name recognitions will vary by browser.
  • 14.

    Why shouldn’t I use fixed sized fonts ?


    Fixed font sizes will show up incorrectly on the user end and will prohibit responsiveness. Using relative sizing will keep fonts proportionate in their relationships to each other and will allow for greater end user flexibility.

  • 15.

    What are the advantages and disadvantages of External Style Sheets?


    • The biggest advantages of external style sheets are that they can be applied to multiple documents while being managed from a single style sheet. This keeps code DRY and improves efficiency and convenience.
    • The disadvantages are that it may decrease loading time in some situations. It may also not be practical if there are not enough styling conditions to justify an external sheet.
  • 16.

    What is the purpose of the z-index and how is it used?


      • The z-index helps specify the stack order of positioned elements that may overlap one another. The z-index default value is zero, and can take on either a positive or negative number.
      • An element with a higher z-index is always stacked above one with a lower index.
      • Z-Index can take the following values:

    Auto: Sets the stack order equal to its parents.

    Number: Orders the stack order.

    Initial: Sets this property to its default value (0).

    Inherit: Inherits this property from its parent element.

  • 17.

    How are inline and block elements different from each other?


    • A block element is an element that takes up the full width available, and has a line break before and after it. <h1>, <p>, <li>, and <div> are all examples of block elements.
    • An inline element only takes up as much width as necessary, cannot accept width and height values, and does not force line breaks. <a> and <span> are examples of inline elements.
  • 18.

    What is the purpose of pseudo-elements and how are  they made?


    • Pseudo elements are made using a double colon (::) followed by the name of the pseudo element.
    • Pseudo-elements are used to add special effects to some selectors, and can only be applied to block-level elements.
    • Most commonly used pseudo-elements are ::first_line, ::first_letter, ::before, ::after
  • 19.

    What is grouping and what is it used for?


    • Grouping allows you to apply the same style to multiple elements with a single declaration. This is done by grouping the selectors into a list, separated by commas.

    e.g.)  h1, h2  { font-family: Helvetica; font-size: 20; }

    • Grouping helps memory usage and enhances readability.
  • 20.

    Explain the three main ways to apply CSS styles to a Web page


    • Inline: Though this method often goes against best practices, it’s easily done by inserting a ‘style’ attribute inside an HTML element:
      • e.g.) <p style=”color:blue”>Lorem Ipsum</p>
    • Embedded/Internal: Done by defining the head of an HTML document by wrapping characteristics in a <style> tag.
    • Linked/External: CSS is placed in an external .css file, and linked to the HTML document with a <link> tag. This can also be accomplished using the ‘@import’, however, this can slow page load time and is generally not advised.

© 2017 QuizBucket.org