CSS Programming


Centering

Good source:  https://css-tricks.com/centering-css-complete-guide/

Horizontal is easy, vertical harder.  Flexbox make vertical much easier.

Horizontal

Q: How do you horizontally center an inline element?

A: text-align: center

Q: How do you horizontally center a block element?

A: margin: 0 auto  (i.e. margin left and right of zero)

Vertical

Q: How do you vertically center an inline element which will occupy only one line?

A: padding-top: 30px; padding-bottom: 30px; 

A: height: 100px; line-height: 100px; white-space: nowrap;  OR

Q: How do you vertically center an inline element that will spill into multiple lines?

A: If a table cell, vertical-align: middle; will take care of everything.  OTHERWISE:  

A: Solutions are complex, see the link above.  You might need flexbox, or use a full-height pseudo element.

Q: How do you vertically center a block level element?

A: Easiest all-situation solution is with flexbox:

.parent {

  display: flex;

  flex-direction: column;

  justify-content: center;

}

Q: How do you vertically center a block level element where you know the height?

A:

.parent {

    position: relative;

}

.child {

  position: absolute;

  top: 50%;

  height: 100px;

  margin-top: -50px; /* account for padding and border if not using box-sizing:

                                            border-box; */

}

Q: How do you vertically center a block level element of unknown height?

A:

.parent {

  position: relative;

}

.child {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

}

Q: How do you center a block level element both horizontally and vertically?

A:  Easy answer with flexbox:

.parent {

  display: flex;

  justify-content: center;

  align-items: center;

}

Alternative answers are more complicated; see the link.

 

Other

         

Q: Describe the difference between block and inline elements.

Q: Describe the difference between id and class.

Q: Describe the difference between padding and margin.

Q: Describe the difference between the interpretation of ‘width’ and ‘height’ in the W3C vs. Internet Explorer box models.

A:

W3c model: width and height determine the space of just the context area, while padding, border and margin create extra pixel area around the content

Internet Explorer box model: width and height determine the space of the content area, padding and border together.

Q: What are two ways of controlling the visibility of an element, and how do they differ?

A: visibility = hidden/visible, and display = block/none. With visibility, the element is still occupying space in the flow, and with display=none, the element is removed from the flow.

Q: How do you decide whether to use a <span> or a <div>?

Q: How do you do conditional CSS for IE?

A: Begin with <!--[if IE]>, close with <![endif]-->

Q: What are the possible values of the "Position" attribute?

A: absolute, fixed, inherit, relative and static. Static is default, normal flow. Fixed means relative to browser window, it stays despite scrolling. Relative means positioned offset to its normal position in the flow by some delta like left: 5px. Absolute means positioned relative to the first ancestor element that has a position other than static (typically a containing div with position=relative). Inherit means the value of the position property is inherited from the parent element

Q: What is a contextual selector?

A: When there is there is more than one element in the line. I.e. A compound selector.

Q: What are pseudo elements?

A: So-titled because they don't correspond to any HTML elements, but add new "fictional" elements (e.g. it breaks the anchor tag into four: a:link, a:hover, a:active and a:visited)

Q: What CSS pseudo elements are supported in CSS1?

A: :first-letter, :first-line, :link, :visited, :hover, :active

Q: What pseudo elements were added in CSS2?

A: :before and :after, :first-child, :lang

Q: What pseudo elements were added in CSS3?

A: :root, :last-child, :nth-child, :only-child, :nth-last-child, :first-of-type, :last-of-type, :nth-of-type, :nth-last-of-type, :only-of-type, :empty, :target (for anchors), :enabled, :disabled, :checked, :not(<selector | pseudo element>)

Good source: http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/

Q: What argument syntax did CSS3 introduce?

A: 2n means "every second one." 2n+1 also means every second one, but begins at position 1 rather than position 0. -n+5 means just the first five items. [type=submit] means an HTML element with a type attribute having the value 'submit'.

Q: What are the browser gotchas with CSS selectors?

A: IE8 doesn't know nth-child.

Q: What do the CSS :before and :after pseudo-selectors do?

A: It's a way of injecting content before or after a given CSS element. They are normal elements except they have a “content” attribute.

Q: Name some CSS3 properties.

A: rounded corners; box-shadow; text-shadow; word-wrap; @font-face to point to your own .woff files; transform (scale, rotate); 2D/3D transformations; animations; transitions from one CSS element to another; column-count (multiple columns)

Q: What is the reason for clearing a float?

A: Floated objects do not add to the height of the container they reside in properly.  You may wish them to appear inside the container, but they fall outside.  The solution is to follow all your floated <div>s followed by one more <div> that clears the float.  Then they all fall inside.

Q: How do you clear a float?

A. <div style=”clear: both”>. Or use a “clearfix” (a 17 line solution)

Q: Which CSS properties are respected/ignored with display: block?

A: Pretty much everything:  left, right, top & bottom margins and padding, width and height.  Possibly line-height is ignored (sources don’t agree).

Q: Which CSS properties are respected/ignored with display: inline?

A: Respects:  left & right margins and padding, line-height.  Ignores:  top & bottom margins and padding, width and height.

Q: What is line-height?

A: It defines the amount of space above and below inline or inline-block elements. It mimics the concept of leading from traditional print (pronounced “ledding”).  When set to a percentage, the calculated value is the font size of the element multiplied by the percentage.

Q:  What is inline-block?

A:  A hybrid of inline and block:  Creates a rectangular region (a block), but allows placement of adjacent items (like inline).  It behaves like a display: block in that it respect top & bottom margins, padding, height and width (which inline ignores).  But it behaves like a display: inline because it respects things like line-height (which some writers say [!] block ignores).

Q:  What is the box-sizing property?

A:  The old Microsoft, “quirks mode” box model interpretation is sometimes desirable, especially for responsive design problems.  For that you would use box-sizing: border-box: the width and height properties includes content, padding and border, but not the margin.  A value of content-box is the default, and sets the browser to the W3C box model.  

Q: What is min-width and max-width?

A: min-width is used to set the minimum width of a given element. It prevents the width from becoming smaller than min-width.  max-width sets the maximum width of a given element. It prevents the width from becoming larger than max-width.  max-width overrides width, but min-width overrides max-width.  The width is set to min-width whenever min-width is larger than max-width or whenever min-width is larger than width.

Q: How do you control the size of form elements such as <input> and <select> and make them behave responsively?

A:  Many form elements do not respond to all the properties that <div> does.  Best to set the form element to width: 100% and use a containing <div> to set properties like width, left, right, etc.

Q: What’s the difference between width: 100% and width: auto?

A: auto (the default) lets the browser calculate the width.  This seems to be 100% but factoring in margin, border, width, etc.  100% defines the width in percent of the containing block.  This seems to override margin, border, width, etc.

Q:  What are the different measurement units?

A: %, em, px, pt, vh, vw, ex, in, cm, mm, vmin

Tip


Links marked with arrow icons ( or ) will open in a new tab.

You will see this message only once.