UI-101 (CSS)

Q&A GUIDE - CSS.md

1. Difference between display “block”, “inline”, and “inline-block”? - Imagine a <span> element inside a <div>. If you give the <span> element a height of 100px and a red border for example, it will look like this with - Inline

![](http://i.stack.imgur.com/Emf0B.png)

- **Inline-block**

![](http://i.stack.imgur.com/1vbks.png)

- **Block**

![](http://i.stack.imgur.com/IPf9Q.png)

- Elements with `display:inline-block` elements are like `display:inline` elements, but they can have a width and height. So you can use an inline-block element as a block while flowing it within text

2. Please describe the following CSS selectors: css *, #logo, li a, li > a, ul + p, ul ~ p, a[title] - Answer:
   *: all dom element #logo: id equals logo li a: all the anchor elements under list li > a: all the a's parent equal to list ul + p: choose the first paragraph followed unordered list ul ~ p: choose all the paragraphs followed unordered list a[title]: choose the anchor that has title attribute

3. Describe the differences between class based CSS selectors and ID based CSS selectors. Why you may prefer to use one over the other? - Using the class selectors we can reuse the DOM strucure while using the id, we cannot since id is unique in the DOM

4. Explain what is going on with this CSS selector: css [role=navigation] > ul a:not([href^=mailto]) {}

- Answer: the following html code block describes the CSS selectors
````html
<nav role='navigation'>
    <ul>
        <li>
            <a href="mailto"></a> <!--NO-->
            <a href="1211"></a> <!--YES-->
            <a href="#"></a> <!--YES-->
        </li>
        <li>
            <a href="#"></a> <!--YES-->
        </li>
    </ul>
</nav>
````

5. Provided a code snippet as followed. Please turn the <p> tag with the words "Select Me" into red text. Do not alter the HTML in any way

[Code Snippet](http://jsbin.com/mewavowa/8/edit?html,css,output)

- Answer: 
````css
div div a + p + p {
    color: red;
}
OR
div div p:nth-child(3) {
    color: red;
} 
````

6. Provided a code snippet as followed. The right sidebar here has fallen down below the content. Show me your preferred technique to fix this issue

[Code Snippet](http://jsbin.com/xacaw/1/edit?html,css,output)

- Answer: Add in this style and the issue will be fixed
````css
header, article, section, .module {
    padding: 1 rem;
    box-sizing: border-box;
}    
````

7. Analyze this HTML/CSS. What color is the paragraph with the class colored? Describe why?

````html
<!-- HTML -->
<h1>Test</h1>
<section>
    <p id="colored" class="colored">What color am I?</p>
    <p>Another color maybe?</p>
</section>
````
````css
/*CSS*/
p { 
    color: gray;
} 
#colored { 
    color: blue;
} 
p:first-child { 
        color: red;
} 
.colored { 
    color: green;
}
````

- Answer: the color will be blue because id has higher prority than pseudo, class, and tag . In general, the priority for CSS goes like this: Tag < Class < Pseudo < Id < Inline

8. Name 3 attributes of the position property - static, absolute, fixed, relative, inherit, ...

9. Name some online resources you reference when having CSS issues - Mozilla webpages, Stack Overflow, CSS-Tricks, ...

10. What is a "CSS reset". What is the difference between a "CSS reset" and "normalize.css" - CSS Reset removes browser default styles. Normalize.css sets a standard across all browsers (It does not ‘reset’ them)

11. How would you solve a floated div’s parent height? - clear fix, float parent element as well, use overflow property other than ‘visible’

12. Declare all elements with class of “blue-text” to have a text color of blue css .blue-text { color: blue; }

13. How do you include a comment in CSS css /* this is a comment in CSS */

14. What is the difference between CSS and CSS3? - CSS3 is the upgraded version of CSS with new features such as Selectors, Box Model, Backgrounds, Borders, Text Effects, 2D/3D Transformations, Animations, and Multiple Column Layout, etc...

15. What are some new features added in CSS3 for 'border'? How do browsers support it? - 3 new features are added for 'border' including: 'border-radius', 'box-shadow', 'border-image'. All the major browsers support these new properties with some specifics. In IE9, it only supports 'border-radius' and 'box-shadow'. In Firefox, it requires the prefix -moz- for 'border-image'. In Chrome and Safari, it requires the prefix -webkit- for 'border-image'. In Opera, it requires the prefix -o- for 'border-image'

16. How do you create rounded corners using CSS3? css border-radius: 20px;

17. How do you create border using images in CSS3? css border-image: url(border.png) 30 round;

18. How do you create box shadow and text shadow using CSS3? css box-shadow: 10px 10px 5px #ccccc; text-shadow: 5px 5px 5px #FF0000;

19. What is the CSS3 background size property? - The 'background-size' property specifies the size of the background image. Before CSS3, the background image size was determined 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

20. What is the CSS3 word wrap property? - It is used to allow long line of words to break and wrap onto the next line

21. What is the CSS3 animation? - When the animation is created in the @keyframe, we have to bind it to a selector otherwise the animation will have no effect. In order to bind the animation to a selector, we need to specify at least two CSS3 animation properties including the name of the animation and the duration of the animation

22. Priority in CSS selectors? - Universal selectors(* sign) < Type selectors(like div) < Class selectors(like .class) < Attributes selectors(like [target]) < Pseudo-classes(like ::before) < ID selectors(like #id) < Inline style - In short: * < TAG < CLASS < ATTR < PSEUDO < ID < INLINE

23. How to use CSS property float? - If set a element to float: left, this element will float to left and rest elements will follow it on its right automatically