CSS3 Study Set

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


    Image Upload 1
  2. 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.
  3. Explain the three main ways to apply CSS styles to a Web page:
    • (1) 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>

    • (2) Embedded/Internal: Done by defining the head of an HTML document by wrapping characteristics in a <style> tag.
    • Image Upload 2

    (3)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.

    • <head>
    •     <link rel="stylesheet" type="text/css" href="mystyle.css">
    • </head>
  4. 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.
  5. What is an ID selector and how is it used?
    • IDs are used to identify and apply styling to a single specific HTML element. IDs are defined within the HTML page by inserting an ID selector in the HTML element:
    • eg)Image Upload 3

    • ID selectors are defined within the CSS page by calling a ‘#’ followed by the name of the ID:
    • Image Upload 4eg)
  6. What is a Class selector and how does it differ from an ID selector?
    • Class selectors are used to apply style to multiple HTML identified with the same class.Within the HTML doc:
    • e.g.)Image Upload 5
    • Class selectors are called within the CSS document by a ‘.’, followed by the class name:Within the CSS doc:
    • e.g.)Image Upload 6
    • The main difference is that the same class selector can be applied to multiple HTML elements, whereas ID selectors are unique..
  7. What are child selectors?
    Child selectors are another way to group and style a set of elements that descend from a parent element.

    • A child selector is matched by calling two or more elements, separated by a ‘>’ sign to indicate inheritance.
    • Image Upload 7
    • In this example, the same styling would be applied to all paragraphs within the body.
  8. What are the different CSS properties used to change dimensions and what values can they accept?
    • height: Sets a specific height
    • width: Sets a specific width
    • max-height: Sets a maximum height
    • max-width: Sets a maximum width
    • min-height: Sets a minimum height
    • min-width: Sets a minimum width

    All 6 of these can accept the following values;

    • auto
    • length
    • %
    • inherit
  9. How is the float property implemented in CSS?
    Floats allow an element to be positioned horizontally, allowing elements below the floated element to flow around it. Several floating elements can be placed together to make a gallery type layout.

    Floats can only accept a left or right value.

    e.g.)   img {float: right;width: 50px;margin: 5px;}

    To prevent subsequent elements from flowing around the floated element, pass in the clear property, followed by the side you wish to disable (i.e., ‘left’, ‘right’, ‘both’).
  10. What is the CSS Box Model used for? What are the elements that it includes?
    CSS box model is made up of margins, borders, padding, and content.

    Box model provides a structured way to space elements in relationship to each other.

    Image Upload 8
  11. 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.
  12. 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
  13. 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.
  14. 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.
  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. List the main CSS style sheet properties:
    There are 9:

    • Background
    • Text
    • Font
    • Border
    • Outline
    • Margin
    • Padding
    • List
    • Table
  17. Explain the difference between visibility:hidden and display:none
    visibility:hidden simply hides the element, while it will still take up space and affect the layout of the document.

    display:none also hides the element, but will not take up space and the page will appear as if the element is not present.
  18. What are some of the new features and properties in CSS3?
    • Box model
    • New Web fonts
    • Rounded corners
    • Border Images
    • Box Shadows, Text Shadows
    • New Color schemes (RGBA)
    • Transform property
    • New Pseudo-classes
    • Multi-column layout
    • New Gradients
Card Set
CSS3 Study Set
CSS3 Interview Questions - Study Guide