Commonly Used CSS Reference

CSS Properties

  1. Color Props: color, opacity
  2. Background: background-color, background-image, background-attachment, background-repeat, background-size
  3. Border: border-bottom, border-bottom(top,left,right)-color, border-radius, border-shadow, border-image, border-style
  4. Basic box model: margin, border, padding, position, display, visibility, width, height, overflow, z-index, vertical-align
  5. Flexible box layout: (display: flex or inline-flex) defines a flex layout of a container. Note: flex layout is for small content, and grid layout is for large dimension.
    1. Props: order, flex-direction, flex-grow, flex-wrap, flex-basis, align-items, align-self, align-content, justify-content
  6. Font and Text: font, font-family, font-weight, color, font-size, @font-face, text-align, letter-spacing, line-height, word-wrap, word-break, text-decoration, text-shadow
  7. Table: border-collapse, border-spacing, empty-cells, table-layout
  8. List and Counters: list-style, counter-increment
  9. Transform: transform, transform-origin, transform-style (2D/3D, rotate)
  10. Transition: transition (animation)
  11. @media query to set different CSS for different  screen  sizes

CSS Questions

1. What is the difference between classes and IDs in CSS?

Class name can be used multiple times, ID should be unique, but not a must. Querying by ID (#div1) of a DIV has a higher priority than by its Class Name(.div1).  Selecting a document with multiple same IDs will result the first DIV.

2. What’s the difference between “resetting” and “normalizing” CSS? Which would you choose, and why?

Normalizing CSS

Resetting CSS

Normalizing means to make a consistent look and feel of document styles for various browsers, while resetting is to clear the default CSS style of DOM elements.

3. Describe Floats and how they work.

Floats

All about Floats

Floats 101

Float defines whether or not an element should float (left/right). In the simplest usage, the float can be used to wrap text around a image.

Float affects not only  the target element, but also its children.

4. Describe z-index and how stacking context is formed.

The z-index property specifies the stack order of an element, an element with greater stack order is always in front of an element with a lower stack order. Say two DIVs with the same parent, higher z-index will be displayed. It will inherit the z-index property of the parent. Z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Value can be negative.

5. Describe BFC(Block Formatting Context) and how it works.

BFC

Understanding BFC

A BFC is part of the visual CSS rendering of a web page in which block boxes are laid out. For effectively creating the block content, applying CSS like overflow: scroll/hidden, display: inline-block/flex/table, float:left/right to the container.

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch).

6. What are the various clearing techniques and which is appropriate for what context?

a. Create an empty DIV:

b. Set overflow: setting auto or hidden overflow property on parent will expand it to contain the floats.

c. Use psuedo class: uses the parent’s :after to add the clear: both property
.clearfix:after {
content: “”;
visibility: hidden;
display: block;
height: 0;
clear: both;
}

7. Explain CSS sprites, and how you would implement them on a page or site.

CSS sprites is the technique to combine all individual images into one big image so that it can help reduce HTTP requests and data size.

Usually, you don’t know how many images you need at the beginning, so it will be done at the stage of production launch. Locating of individual images is by using background image position index.

8. What are your favourite image replacement techniques and which do you use when?

CSS image replacement is a technique of replacing a text element (usually a header tag) with an image. An example of this would be including a logo on a page. You may want to use a <h1> tag and text for this for the accessibility and SEO benefits, but ideally you’d like to show your logo, not text.

Image Replacement

History of Image replacement methods

9. How would you approach fixing browser-specific styling issues?

IE conditional CSS fix

The principles of cross-browsers CSS

a. Use normalized CSS library

b. Implement vendor specific CSS fix

c. Test in all targeted browsers

10. How do you serve your pages for feature-constrained browsers? What techniques/processes do you use?

a. Reduce content and layout for feature-constrained browsers.

b. Add vendor-specific CSS fixes to the pages

c. Media query, browser detection (buggy)

11. What are the different ways to visually hide content (and make it available only for screen readers)?

When and how to visually hide content?

Invisible Content

12. Have you ever used a grid system, and if so, what do you prefer?

Yes. Bootstrap, MUI CSS

13. Have you used or implemented media queries or mobile specific layouts/CSS?

Yes. Using Media Queries

14. Are you familiar with styling SVG?

Not much experience in SVG except generating SVG images from JPG/PNG.

15. How do you optimize your webpages for print?

The simplest method is to create a style sheet for print only and test it well.

e.g <link rel=”stylesheet” type=”text/css” href=”/print.css” href=”/print.css” media=”print” />

Some steps:

Format heading and paragraph tags, links and tables, clear unnecessary contents and images.

16. What are some of the “gotchas” for writing efficient CSS?

a. Know different browsers have different CSS hacks

b. Cater for mobile devices or small screen size

c. Good HTML structure and CSS OOP rules with good naming

d. Avoid key selectors that match large numbers of elements (tag and universal selectors)

e. Prefer class and ID selectors over tag selectors

f. Avoid redundant selectors

g. Preferably don’t use * (universal selector)

h. Use framework (Bootstrap etc.)

17. What are the advantages/disadvantages of using CSS preprocessors? Describe what you like and dislike about the CSS preprocessors you have used.

Explained here.

Another one.

18. How would you implement a web design comp that uses non-standard fonts?

A study on Quora.

Use @font-face or link the webfont url as CSS.

19. Describe pseudo-elements and discuss what they are used for.

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. For example, the ::first-linepseudo-element targets only  the first line of an element specified by the selector.

20. Describe pseudo-classes

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

21. Explain how a browser determines what elements match a CSS selector.

Browsers read selectors from right-to-left. First looks for all elements matching the key selector (the right-most). Then checks if it matches or is under the next (left-most) element.

 22. Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.

The box model.

For display purpose, every element in the page is considered a box. The box model refers to the specification of the box attributes such as the width, padding, border and margin. Some browsers (such as Firefox) think the width should only include the the content itself, not the padding, boarder, nor margin. Other browsers (such as IE) think the width should include the content, padding, and boarder, but not the margin.

Content-box: width & height includes content but not padding/border/margin

Padding-box: include up to padding

Border-box: include up to border, but not margin

23. What does * { box-sizing: border-box; } do? What are its advantages?

box-sizing

content-box:This is the initial and default value as specified by the CSS standard. The width and heightproperties are measured including only the content, but not the padding, border or margin. Note: Padding, border & margin will be outside of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 370px;}So simply the dimension of element is calculated as, width = width of the content, and height = height of the content (excluding the values of border and padding).

border-box:The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note that padding and border will be inside of the box e.g.  .box {width: 350px; border: 10px solid black;} leads to a box rendered in the browser of width: 350px. The content box can’t be negative and is floored to 0, making it impossible to use border-box to make the element disappear.Here the dimension is calculated as, width = border + padding + width of the content, and height = border + padding + height of the content.

The advantage of forcing all elements to adopt the border-box model is to unify the element width calculation regardless to browsers.

24. List as many values for the display property that you can remember.

block, inline, inline-block, none, inherit, table, table-cell, flex.

25. What’s the difference between inline and inline-block?

inline-block: Displays an element as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box

block:Displays an element as a block element

26. What’s the difference between a relative, fixed, absolute and statically positioned element?

How they differ?

relative: relative to itself, combine to use top/left..

fixed: fixed at the position to the viewport, like top nav, no change when window scrolls.

absolute: An element with this type of positioning is not affected by other elements and it doesn’t affect other elements. You use it to position element to the exact location. It’s relative to the parent.

static: default position

27. The ‘C’ in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?

Specs

CSS Specificity and Inheritance

Order in ascending order of importance:

  1. User agent declarations,
  2. User declarations,
  3. Author declarations,
  4. Author !important declarations,
  5. User !important declarations.

Specificity: Every CSS rule has a particular weight (as mentioned in the introduction), meaning it could be more or less important than the others or equally important. This weight defines which properties will be applied to an element when there are conflicting rules.

The following list of selector types is by increasing specificity:

  1. Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
  2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
  3. ID selectors (e.g., #example)
  4. Universal selector (*), combinators (+, >, ~, ‘ ‘) and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)

28. What existing CSS frameworks have you used locally, or in production? How would you change/improve them?

Bootstrap. MUI. Can split out component by component by a tiny piece of CSS ?

29. Have you played around with the new CSS Flexbox or Grid specs?

No.

Flexbox

The defining aspect of the flex layout is the ability to alter its items’ width and/or height to best fill the available space on any display device. A flex container expands items to fill available free space, or shrinks them to prevent overflow. For small-scale layout. A guide to flexbox.

Grid specs

For large-scale responsible layout. A guide to Grid CSS.

30. How is responsive design different from adaptive design?

Difference

Make a Choice

Responsive is fluid and adapts to the size of the screen no matter what the target device. Responsive uses CSS media queries to change styles based on the target device such as display type, width, height etc., and only one of these is necessary for the site to adapt to different screens.

Adaptive design, on the other hand, uses static layouts based on breakpoints which don’t respond once they’re initially loaded. Adaptive works to detect the screen size and load the appropriate layout for it – generally you would design an adaptive site for six common screen widths (320,480,760,960,1200,1600)

31. Have you ever worked with retina graphics? If so, when and what techniques did you use?

NO.

About retina graphics.

32. Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why?

No experience. But he said this.

CSS Keynotes

Specs:
http://www.w3.org/TR/css-2010/

Guide:
https://developer.mozilla.org/en-US/docs/Web/CSS

1. CSS Box Model
Margin, border, padding, content
http://www.w3schools.com/css/css_boxmodel.asp

Inline elements: normally displayed without line breaks, e.g. b, td, a, img
Block level elements: normally start with a new line, e.g. h1, p, ul, table

2. “reset” CSS

A reset CSS is to style all the HTML elements in a consistent manner.
http://www.cssreset.com/what-is-a-css-reset/
pros: maintain a consistent design for all browsers
cons: too much work, may override cause confusions

3. CSS define methods
a. <link rel=”stylesheet” type=”text/css”>
b. <style></style>
c. <span style=””></span>
d. <style> @import url(‘a.css’)</style>
@import css will start to load after page download completed

4. Floats and z-index
An element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it’s containing box or another floated element.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
z-index works to stack elements like layers in Photoshop.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

5. CSS sprites
Image sprites are used in apps where multiple icons are used to save memory and bandwidth. It helps reduce HTTP requests.
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
Set background position to locate the icons in CSS.

6. Grid system
CSS grid for page layout
http://code.tutsplus.com/tutorials/which-css-grid-framework-should-you-use-for-web-design–net-25
Bootstrap Grid Template
http://getbootstrap.com/css/

7. CSS preprocessors, SASS, Stylus, LESS, pros and cons ?
Preprocessed CSS is aim to reduce the work of writing repetitive CSS. You can write CSS in a manner of programming with designed syntax, and let the compiler to decode for you.
http://sass-lang.com/

8. SVG
http://www.w3.org/TR/SVG/styling.html

9. Media query and how to handle CSS for different IEs ?
Media query allow the presentation of content be tailored to a specific range of output devices without changing the content.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
IE conditional Comments
You are using Internet Explorer.

<![if !IE]>
You are not using Internet Explorer.
<![endif]>
http://msdn.microsoft.com/en-us/library/ms537512(v=vs.85).aspx

10. CSS selector: how a browser determines what elements match a CSS selector ?
Class Selector
ID Selector
Pseudo Class Selector
:link
:visited
:active
:hover
:focus
:first-child
:last-child
:nth-child
:nth-last-child
:nth-of-type
:first-of-type
:last-of-type
:empty
:target
:checked
:enabled
:disabled
Selector based on Relationship
A E
Any E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > E
Any E element that is a child of an A element
E:first-child
Any E element that is the first child of its parent
B + E
Any E element that is the next sibling of a B element (that is: the next child of the same parent)

Attribute Selector: input [type = ‘text’]
Element Selector: div, ul, ect.
* Universal Selector: for all elements

11. CSS Specificity
CSS specificity determines the CSS rule for the element to use in styling.
The more specific the CSS rule goes for the element, the more weight it will have.
A selector’s specificity is calculated as follows:
count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are stylesheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)
The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.
Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.
!important declaration has the highest weight.
http://www.w3.org/TR/CSS21/cascade.html#specificity
http://www.sitepoint.com/web-foundations/specificity/
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

12. * { box-sizing: border-box }, resize, outline-offset
box-sizing: border-box is to tell the browser to include the border and padding for the all elements for the width.
CSS3 User Interface: box-sizing, resize, outline-offset
resize:true will allow the div to resize by drag
outline-offset: offset a outline and draw beyonds border
http://css-tricks.com/almanac/properties/b/box-sizing/
http://www.w3schools.com/css/css3_user_interface.asp

13. CSS Flexbox ?
Flexbox model
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

14. Responsive design vs Adaptive Design
Responsive Design makes use of media query to changes CSS according to the width/height of the device.
Adaptive Design uses predefined layouts that have been carefully constructed for a variety of screen sizes. A particular layout is activated when the screen size of the device viewing the website is detected and matched with a stylesheet.
http://alistapart.com/article/responsive-web-design
http://www.techrepublic.com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/

15. Center a DIV
http://www.w3.org/Style/Examples/007/center.en.html#block