CSS3



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


22. Explain what a class selector is and how it's used ?  

  • A class can be thought of as a grouped collection of CSS attributes applied to HTML elements. This allows you to apply the same styling to multiple HTML elements by placing them in the same CSS class.
  • Class methods can be called by inserting a 'class' property and name within an HTML element, then calling the class name with a '.' in the CSS doc.
  • Class syntax:

    Within an HTML doc:

    Within a CSS doc:

  • The code listed here identifies the class 'intro' in the HTML doc, then applies the same background-color styling to all paragraphs within that class.


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


24. What benefits and demerits do External Style Sheets have?  

Benefits:
  • 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.

    Demerits:
    • 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.



25. Discuss the merits and demerits of Embedded Style Sheets?  

Merits of Embedded Style Sheets:
  • Multiple tag types can be created in a single document.
  • Styles, in complex situations, can be applied by using Selector and Grouping methods.
  • Extra download is unnecessary.

    Demerits of Embedded Style Sheets:
    • Multiple documents cannot be controlled.


26. What are pseudo classes and what are they used for?  

  • Pseudo classes are similar to classes, but are not explicitly defined in the markup, and are used to add additional effects to selected HTML elements such as link colors, hover actions, etc.
  • Pseudo classes are defined by first listing the selector, followed by a colon and then pseudo-class element. E.g., a:link{ color: blue }, or a:visited { color: red }
    • Pseudo-class syntax:
      • selector:pseudo-class {
        property:value;}
    • Syntax for using a pseudo class within a CSS class:
      • selector.class:pseudo-class {
        property:value;}
  • :link, :visited, :hover, :active, :first_line are all examples of pseudo classes, used to call a specific action on an element, such as the changing of a link color after it has been visited.


27. What are the components of a CSS Style?  

A style rule is made of three parts -
  • Selector - A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.
  • Property - A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.
  • Value - Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.


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


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


30. What are the different CSS properties used to change dimensions and what values can they accept?  

  • height: Sets a specific height
    • auto
    • length
    • %
    • inherit
  • width: Sets a specific width
    • auto
    • length
    • %
    • inherit
  • max-height: Sets a maximum height
    • auto
    • length
    • %
    • inherit
  • max-width: Sets a maximum width
    • auto
    • length
    • %
    • inherit
  • min-height: Sets a minimum height
    • auto
    • length
    • %
    • inherit
  • min-width: Sets a minimum width
    • auto
    • length
    • %
    • inherit


31. What are the various ways of using CSS in an HTML page?  

There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.
  • Embedded CSS - The <style> Element: You can put your CSS rules into an HTML document using the <style> element.
  • Inline CSS - The style Attribute: You can use style attribute of any HTML element to define style rules.
  • External CSS - The <link> Element: The <link> element can be used to include an external stylesheet file in your HTML document.
  • Imported CSS - @import Rule: @import is used to import an external stylesheet in a manner similar to the <link> element.


32. How CSS style overriding works?  

Following is the rule to override any Style Sheet Rule -
  • Any inline style sheet takes highest priority. So, it will override any rule defined in <style>...</style> tags or rules defined in any external style sheet file.
  • Any rule defined in <style>...</style> tags will override rules defined in any external style sheet file.
  • Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.


33. In how many formats can you specify a CSS color?  

You can specify your color values in various formats. Following table lists all the possible formats -
Format Syntax Example
Hex Code #RRGGBB p{color:#FFOOOO;}
Short Hex Code #RGB p{color:#6A7;}
RGB % rgb(rrr%,ggg%,bbb%) p{color:rgb(50%,50%,50%);}
RGB Absolute rgb(rrr,ggg,bbb) p{color:rgb(0,0,255);}
keyword aqua, black, etc. p{color:teal;}


34. What are browser safe colors?  

There is the list of 216 colors which are supposed to be most safe and computer independent colors. These colors vary from hexa code 000000 to FFFFFF. These colors are safe to use because they ensure that all computers would display the colors correctly when running a 256 color palette.



35. What does CSS selector mean?  

A string equivalent of HTML elements by which declarations or a set of it, is declared and is a link that can be referred for linking HTML and Style sheet is CSS selector.



36. Enlist the media types CSS allows?  

The design and customization of documents are rendered by media. By applying media control over the external style sheets, they can be retrieved and used by loading it from the network.



37. How to restore the default property value using CSS?  

In short, there's no easy way to restore to default values to whatever a browser uses . The closest option is to use the 'initial' property value, which will restore it to the default CSS values, rather than the browser's default styles.



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


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


40. List the main CSS style sheet properties?  

  • Background
  • Text
  • Font
  • Border
  • Outline
  • Margin
  • Padding
  • List
  • Table


.Net Interview Question

PHP Interview Question

Java Interview Question

AngularJS Interview Questions