1. Inline Elements
   • An inline element does not start on a new line and only takes up as much width as necessary.
2. Block-level Elements
   • A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
3. Inline-block elements
   • Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
   • Also, with display: inline-block, the top and bottom margins/paddings are respected, but with display: inline they are not.
   • Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

References:

• https://stackoverflow.com/questions/21614938/html-element-which-defaults-to-displayinline-block
• https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
• https://www.w3schools.com/html/html_blocks.asp
• https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
• https://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.

A Flexible Layout must have a parent element with the display property set to flex.

Direct child elements(s) of the flexible container automatically becomes flexible items.

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-flow: row wrap; */
  justify-content: center;
  align-items: center;
  align-content: space-between;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

The flex container properties are:

flex-direction - property defines in which direction the container wants to stack the flex items.
flex-wrap - property specifies whether the flex items should wrap or not.
flex-flow - property is a shorthand property for setting both the flex-direction and flex-wrap properties.
justify-content - property is used to align the flex items
align-items -  property is used to align the flex items vertically.
align-content - property is used to align the flex lines.

References :

• https://www.w3schools.com/css/css3_flexbox.asp
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

A Grid Layout must have a parent element with the display property set to grid or inline-grid.

Direct child element(s) of the grid container automatically becomes grid items.

grid - Set the display property to grid to make a block-level grid container.
inline-grid - Set the display property to inline-grid to make an inline grid container.
grid-template-columns - property defines the number of columns in your grid layout, and it can define the width of each column.
grid-template-rows - property defines the height of each row.
grid-area - property can also be used to assign names to grid items. 

The syntax is:
“grid-row-start / grid-column-start / grid-row-end / grid-column-end”

Named grid items can be referred to by the grid-template-areas property of the grid container.

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

References :

• https://www.w3schools.com/css/css_grid.asp
• https://css-tricks.com/snippets/css/complete-guide-grid/
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

References :

• https://www.w3schools.com/cssref/pr_class_display.asp

Lot of new features were introduced in CSS3. I’ll list out few commonly used.

• CSS Animations and Transitions
• Calculating Values With calc()
• Advanced Selectors
• Generated Content and Counters
• Gradients
• Webfonts
• Box Sizing
• Border Images
• Media Queries
• Multiple Backgrounds
• CSS Columns
• CSS 3D Transforms
• Flexbox
• Grid Layout
• REM Values
• Shadows

References:

• CSS Advanced
• https://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use
• https://www.htmlgoodies.com/html5/css/whats-new-in-css3.html

CSS gives us two primary ways of animating elements. Transition and transform manipulate from one state to another, while animation paired with @keyframes rules can set multiple style rules at various points throughout the animation duration.

• transform and animate performs the change
• @keyframes defines when it happens
• transition defines how it happens

CSS Transitions :

CSS transitions allows you to change property values smoothly, over a given duration. CSS transitions has following properties.

div {
  width: 100px;
  height: 100px;
  background: red;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

div:hover {
  width: 300px;
}

CSS Transforms

CSS transforms allow you to move, rotate, scale, and skew elements. CSS supports transforming an element in 2D and 3D forms.

• CSS 2D Transforms – allow us to move or change the appearance of an element on a 2D plane.
• CSS 3D Transforms – makes 3D scale transformation by giving a value for the X-axis ; scaleY(y)

CSS 2D Transform Methods

CSS 3D Transform Methods

/* CSS 2D Transform */
div {
  transform: translate(50px, 100px);
}
div {
  transform: scaleX(2);
}


/* CSS 3D Transform */
#myDiv {
  transform: rotateX(150deg);
}

CSS Animations

An animation lets an element gradually change from one style to another. To use CSS animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, you must bind the animation to an element.

CSS Animation Properties

The following table lists the @keyframes rule and all the CSS animation properties:

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

References :

• https://www.w3schools.com/css/css3_animations.asp
• https://www.w3schools.com/css/css3_transitions.asp
• https://www.w3schools.com/css/css3_2dtransforms.asp
• https://www.w3schools.com/css/css3_3dtransforms.asp
• https://medium.com/@kswanie21/css3-animations-with-transitions-transforms-5a9c01e5efb5
• http://webdesignerwall.com/tutorials/easy-css-animation-transition-transforms

Internet Explorer, Mozilla and Google Chrome all use different rendering engines. Particularly, CSS and HTML are not displayed identically across all browsers. As a result, a website may appear slightly off, or sometimes very off, when viewed in different browsers. There is still no definitive, ideal solution to problems such as different screen sizes, restricted bandwidth (in cases of mobile browsing), performance on high-resolution (“retina”) displays, and so on. Websites need cross browser compatibility but maybe not to every single web browser out there.

Efficient crossbrowser CSS development starts with techniques and good practices listed few of them below.

• JavaScript solutions that can help us serve responsive websites to older browsers lacking CSS3 support: Respond.js, Modernizr, and adaptive.960.js.
  • respond.js – which enables the older browser versions to understand and execute CSS3 media queries
  • Modernizr – it is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications
• Use Internet Explorer First – sites should be developed in “modern” web-browsers, with standards first and then be tweaked for buggy versions of Internet Explorer.
• Use a CSS Reset or NORMALIZE – Every browser has different default CSS rules that they follow. This is why you use CSS reset stylesheet to make sure your browsers follow the same basic rules and behave consistently. You want to add one of these as the first stylesheet in order to reset unless you use a framework which will already have one.
• Conditional Comments – Conditional comments allow you to link style sheets for different browsers, which is especially helpful when it comes to design challenges that are common with Internet Explorer.
• CrossBrowserTesting – gives you access to do this in over 1,500 browsers, so you never have to wonder what users are seeing when they visit your page from a different machine
• Use Vendor Prefixes and Fallbacks The following is a list of vendor prefixes for each of the popular browsers.
  • -webkit- (Chrome, Safari, newer versions of Opera)
  • -moz- (Firefox)
  • -o- (Old versions of Opera)
  • -ms- (Internet Explorer))
• Clear Floats
• Check CSS Display Types
• Validate Your CSS
• Use Cross-Browser Plugins
• Use Testing Tools

References :

• https://speckyboy.com/cross-browser-css-styling-tips/
• https://www.smashingmagazine.com/2010/06/the-principles-of-cross-browser-css-coding/
• https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction
• https://www.catswhocode.com/blog/15-techniques-and-tools-for-cross-browser-css-coding

Solution 1 :

<div class="centered">center</div>

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  background-color: green;
  width: 200px;
  height: 200px;
}

or

.centered {
    position: absolute;
    width: 200px;
    height: 200px;
    margin: 50% 50%;
    left: -100px;
    top: -100px;
    background-color: green;
}

solution 2 : (using flexbox)

<div class="flex-container">
  <div></div>
</div>

.flex-container {
  display: flex;
  justify-content: center; /* aligns the flex items at the center of the container */
  align-items: center; /*  align the flex items vertically. */
  height: 300px;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  color: white;
  width: 100px;
  height: 100px;
}

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { 
    @include border-radius(10px); 
}

References :

• https://sass-lang.com/guide
• https://scotch.io/tutorials/how-to-use-sass-mixins

• Simple selectors
  • Type selector – Selects all elements that match the given node name. E.g. div
  • Class selector – Selects all elements that have the given class attribute. E.g. .classname
  • ID selector – Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. E.g. #idname
  • Universal selector – Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. E.g. * { //code }
  • Attribute selector – Selects elements based on the value of the given attribute. E.g. [attr]

• Combinators
  • Adjacent sibling combinator – The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent. E.g. h2 + p
  • General sibling combinator – The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent. E.g. p ~ span
  • Child combinator – The > combinator selects nodes that are direct children of the first element. E.g. ul > li
  • Descendant combinator – The (space) combinator selects nodes that are descendants of the first element. E.g. div span
• Pseudo-classes
  • allow the selection of elements based on state information that is not contained in the document tree. E.g. a:visited
• Pseudo-elements
  • represent entities that are not included in HTML. E.g. p::first-line

References :

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
• https://www.w3schools.com/cssref/css_selectors.asp
• https://www.w3schools.com/css/css_combinators.asp
• https://www.w3schools.com/css/css_attribute_selectors.asp

The CSS universal selector (*) matches elements of any type. Optionally, it may be restricted to a specific namespace or to all namespaces.

Syntax :

* {
  /* style properties */
}

E.g

.floating {
  float: left
}

/* automatically clear the next sibling after a floating element */
.floating + * {
  clear: left;
}

References :

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

• display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.
• visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn’t seen on the page.

Note : Take a look at opacity: 0;

References :

• https://stackoverflow.com/a/133064/3421966
• https://stackoverflow.com/a/1511884/3421966

Yes, It will be available in DOM tree. display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

vh stands for viewport height. It measures height in percentage with respect to the viewport. For full page height, it will be 100vh. 

vh is commonly used when we want to set the background color for the whole page.

h1 {
  font-size: 20vh;
}

Learn more :

• https://www.w3schools.com/cssref/css_units.asp

There are three ways to integrate CSS into a webpage:

• Internal: Internal CSS will be applied for the single webpage. It is defined at the top inside the <head> section of the page.
• External: External CSS file is created and applied globally to all pages. We need to configure the path for the external CSS file inside the <link> element.
• Inline: Inline CSS is applied to a single block/element in a webpage.

// Internal CSS
     <head>
     <style>
     p { font-size : 30px; }
     </style>
     </head>
  
// Inline CSS
<p style="font-size : 30px">This is Inline CSS.</p> 

// External CSS
<link rel="stylesheet" href="https://jsdiet.com/styles.css">

As per the CSS box model, Padding is the empty space between the actual page content and the border. Margin is the area outside of the border. In other words, we can say padding is inside and margin is outside with respect to the border applied to the element.

• “Normal Flow” is the typical way the browser renders, with consideration of the elements around it and other elements considerations for it.
• “Out of Flow” means the element is “ignored” or the behavior “changed” by elements around it.

If the element has a float then it becomes “out of flow” because it does not follow either a normal inline standard of one element after another in a line or a normal block standard of elements stacking on each other down the page.

If we give position:relative to parent element and position:absolute in elements inside parent. then child element will only out of flow inside parent only not from whole page

References :

• https://www.w3.org/TR/CSS2/visuren.html
• https://stackoverflow.com/questions/3293340/what-is-the-meaning-of-the-terms-normal-flow-and-out-of-flow-in-terms-of-ht/3293451

The css binding adds or removes one or more named CSS classes to the associated DOM element. This question was faced during knockout.js So, adding examples from knockout officials. Simply answer is, If we mutate DOM CSS during execution time, it goes to dynamic binding.

Static binding – is a binding in which the class association is made during compile time. This is also called as Early binding.

<div data-bind="css: { profitWarning: currentProfit() < 0 }">
   Profit Information
</div>

This will apply the CSS class profitWarning whenever the currentProfit value dips below zero, and remove that class whenever it goes above zero.

Dynamic binding – is a binding in which the class association is not made until the object is created at execution time. It is also called as Late binding.

<div data-bind="css: profitStatus">
   Profit Information
</div>

viewModel.profitStatus = ko.pureComputed(function() {
        return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";
    }, viewModel);

This will apply the CSS class profitPositive when the currentProfit value is positive, otherwise it will apply the profitWarning CSS class.

References :

• http://knockoutjs.com/documentation/css-binding.html

• A pseudo-class is used to define a special state of an element.

For example, it can be used to: Style an element when a user mouses over it Style visited and unvisited links differently Style an element when it gets focus

selector:pseudo-class {
    property:value;
}

E.g

a:visited {
    color: #00FF00;
}

• A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to: Style the first letter, or line, of an element Insert content before, or after, the content of an element

selector::pseudo-element {
    property:value;
}

E.g

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

References :

• https://www.w3schools.com/css/css_pseudo_classes.asp
• https://www.w3schools.com/css/css_pseudo_elements.asp
• http://www.growingwiththeweb.com/2012/08/pseudo-classes-vs-pseudo-elements.html

• The :link selector is used to select unvisited links.
• The :visited selector is used to select visited links.

a:link { 
    background-color: yellow;
}
a:visited { 
    color: pink;
}

References :

• https://www.w3schools.com/cssref/sel_link.asp
• https://www.w3schools.com/cssref/sel_visited.asp

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

Explanation of the different parts:

• Content – The content of the box, where text and images appear
• Padding – Clears an area around the content. The padding is transparent
• Border – A border that goes around the padding and content
• Margin – Clears an area outside the border. The margin is transparent

Note: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

References :

• https://www.w3schools.com/css/css_boxmodel.asp

Solution 1 :

#div1{float:right;width:100px;height:100px; background-color:blue;}
#div2{float:left;width:100px;height:100px; background-color:green;}
#div3{float:left;width:100px;height:100px; background-color:purple;}

<div id="container">
  <div id="div1">div1</div>
  <div id="div2">div2</div>
  <div id="div3">div3</div>
</div>

Solution 2 (using flexbox):

.example {
    display: flex;
    flex-direction: row;
}

.example > .a {order: 3; } /* Will be displayed third  */
.example > .b {order: 1; } /* Will be displayed second */
.example > .c {order: 2; } /* Will be displayed first  */

<div class="example">
    <div class="a">First</div>
    <div class="b">Second</div>
    <div class="c">Third</div>
</div>

If you want to achieve with bootstrap check for .pull-left and .pull-right for v3 or .float-left and .float-right for v4.

.topheader {
     position: relative;
     height: 20px;
   	
}
.bio{
    position:absolute;
    top: 0;
    right: 0;
    border: 1px solid;
}

<div class="topheader">
    <div class="bio">myname</div>
</div>

References :

• https://stackoverflow.com/questions/11492055/how-to-adjust-relative-div-height-with-respect-to-inner-absolute-height

References :

• https://www.w3schools.com/css/css_positioning.asp

• position: absolute : An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A “positioned” element is one whose position is anything except static.
• position: relative : An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

References :

• https://www.w3schools.com/css/css_positioning.asp

Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen), specific characteristics (such as the width of the browser viewport), or environment (such as ambient light conditions).

Media queries are used for the following:

• To conditionally apply styles with the CSS @media and @import at-rules.
• To target specific media for the , , and other HTML elements.
• To test and monitor media states using the Window.matchMedia() and MediaQueryList.addListener() JavaScript methods.

A media query is composed of an optional media type and any number of media feature expressions. Multiple queries can be combined in various ways by using logical operators. Media queries are case-insensitive.

@media rule to include a block of CSS properties only if a certain condition is true.

Media types :

• all – Suitable for all devices.
• print – Intended for paged material and documents viewed on a screen in print preview mode.
• screen – Intended primarily for screens.
• speech – Intended for speech synthesizers.

Logical operators :

• and – used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.
• not – used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type.
• only – used to apply a style only if an entire query matches, and is useful for preventing older browsers from applying selected styles. If you use the only operator, you must also specify a media type.
• , (comma) – used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.

@media only screen and (max-width: 600px) { ... } 
@media (min-height: 680px), screen and (orientation: portrait) { ... }
@media not screen and (color), print and (color) { ... }

References :

• https://www.w3schools.com/css/css_rwd_mediaqueries.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

• all – Suitable for all devices.
• print – Intended for paged material and documents viewed on a screen in print preview mode.
• screen – Intended primarily for screens.
• speech – Intended for speech synthesizers.

The viewport is the user’s visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. So, Pages to be optimized.

Pages optimized for a variety of devices must include a meta viewport tag in the head of the document. A meta viewport tag gives the browser instructions on how to control the page’s dimensions and scaling.

• Use the meta viewport tag to control the width and scaling of the browser’s viewport.
• Include width=device-width to match the screen’s width in device-independent pixels.
• Include initial-scale=1 to establish a 1:1 relationship between CSS pixels and device-independent pixels.
• Ensure your page is accessible by not disabling user scaling.

<meta name="viewport" content="width=device-width, initial-scale=1">

References :

• https://www.w3schools.com/css/css_rwd_viewport.asp
• https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
• https://developers.google.com/web/fundamentals/design-and-ux/responsive/

• content-box – Default box-sizing property. The width and height properties (and min/max properties) includes only the content. Border and padding are not included
• border-box – The width and height properties (and min/max properties) includes content, padding and border.

• pixel(px) is considered an absolute unit. Rem and em are considered relative units.
• The Pixel unit is fixed and is not resized with respect to other elements.
• Root element (rem) is relative to the root element.
• Element (Em) is relative to its parent element.
• Using pixel units while dealing with responsive web pages can result in a bad user experience because pixels do not resize them with respect to other elements.

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors.

Specificity Hierarchy :

Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector:

• Inline styles – An inline style is attached directly to the element to be styled. Example: <h1 style="color: #ffffff;">.
• IDs – An ID is a unique identifier for the page elements, such as #navbar.
• Classes, attributes and pseudo-classes – This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
• Elements and pseudo-elements – This category includes element names and pseudo-elements, such as h1, div, :before and :after.

<div id="test">
  <span>Text</span>
</div>

div#test span { color: green; }
div span { color: blue; }
span { color: red; }

No matter the order, text will be green because that rule is most specific. (Also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules)

References :

• https://www.w3schools.com/css/css_specificity.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
• https://medium.com/@dte/understanding-css-selector-specificity-a02238a02a59

CSS resets aim to remove all built-in browser styling. Standard elements like H1-6, p, strong, em, et cetera end up looking exactly alike, having no decoration at all. You’re then supposed to add all decoration yourself.

Normalize CSS aims to make built-in browser styling consistent across browsers. Elements like H1-6 will appear bold, larger et cetera in a consistent way across browsers. You’re then supposed to add only the difference in decoration your design needs.

References :

• https://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css
• http://necolas.github.io/normalize.css/
• https://meyerweb.com/eric/tools/css/reset/

The float property is used for positioning and layout on web pages. Floats can be used to create entire web layouts.

• A floated element is “invisible” to its parent
• A left/right floated element will try to be as close to the top and left/right of its parent element as possible
• Previously defined elements will push a floated element down
• A previously declared floated element will be given a more preferable position
• A position closer to the top of the parent element is preferred to a position closer to the left/right of the parent element
• A floated element should not extend outside its parent element

The float property can have one of the following values:

• left – The element floats to the left of its container
• right- The element floats to the right of its container
• none – The element does not float (will be displayed just where it occurs in the text). This is default
• inherit – The element inherits the float value of its parent

In its simplest use, the float property can be used to wrap text around images.

The clear property specifies what elements can float beside the cleared element and on which side.

The clear property can have one of the following values:

• none – Allows floating elements on both sides. This is default
• left – No floating elements allowed on the left side
• right- No floating elements allowed on the right side
• both – No floating elements allowed on either the left or the right side
• inherit – The element inherits the clear value of its parent

The most common way to use the clear property is after you have used a float property on an element.

If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. Then we can add overflow: auto; to the containing element to fix this problem.

References :

• https://css-tricks.com/all-about-floats/
• https://www.w3schools.com/css/css_float.asp
• https://bitsofco.de/how-floating-works/

CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS z-index property.

The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only effects elements that have a position value other than static (the default).

div {
  z-index: 1; /* integer */
}

stacking context :

The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.

A stacking context is formed, anywhere in the document, by any element in the following scenarios:

• Root element of document (HTML).
• Element with a position value “absolute” or “relative” and z-index value other than “auto”.
• Element with a position value “fixed” or “sticky” (sticky for all mobile browsers, but not older desktop).
• Element that is a child of a flex (flexbox) container, with z-index value other than “auto”.
• Element with a opacity value less than 1 (See the specification for opacity).
• Element with a mix-blend-mode value other than “normal”.
• Element with any of the following properties with value other than “none”:
  • transform
  • filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
• Element with a isolation value “isolate”.
• Element with a -webkit-overflow-scrolling value “touch”.
• Element with a will-change value specifying any property that would create a stacking context on non-initial value (see this post).

Within a stacking context, child elements are stacked according to the same rules previously explained. Importantly, the z-index values of its child stacking contexts only have meaning in this parent. Stacking contexts are treated atomically as a single unit in the parent stacking context.

References :

• https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
• https://stackoverflow.com/questions/32513540/understanding-z-index-stacking-order
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements.

According to W3C:

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts.

A BFC is an HTML box that satisfies at least one of the following conditions:

• The value of float is not none.
• The value of position is neither static nor relative.
• The value of display is table-cell, table-caption, inline-block, flex, or inline-flex.
• The value of overflow is not visible.

References :

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
• https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/
• https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/

The clear property specifies what elements can float beside the cleared element and on which side.

overflow – Specifies what happens if content overflows an element’s box.

The clear property can have one of the following values:

• none – Allows floating elements on both sides. This is default
• left – No floating elements allowed on the left side
• right- No floating elements allowed on the right side
• both – No floating elements allowed on either the left or the right side
• inherit – The element inherits the clear value of its parent

Techniques for Clearing Floats

• The Empty Div Method is, quite literally, an empty div. <div style="clear: both;"></div>. Sometimes you’ll see a <br> element or some other random element used, but div is the most common because it has no browser default styling, doesn’t have any special function, and is unlikely to be generically styled with CSS. This method is scorned by semantic purists since its presence has no contextual meaning at all to the page and is there purely for presentation. Of course in the strictest sense they are right, but it gets the job done right and doesn’t hurt anybody.
• The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However if you find yourself adding a new div just to apply this, it is equally as non-semantic as the empty div method and less adaptable. Also bear in mind that the overflow property isn’t specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.
• The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like “clearfix” to it. Then apply this CSS:

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.clearfix {
    overflow: auto;
}

References :

• https://www.w3schools.com/css/css_float.asp
• http://www.dave-woods.co.uk/float-and-clear-a-comparison-of-css-clearing-techniques/
• https://css-tricks.com/all-about-floats/

An image sprite is a collection of images put into a single image. Image sprites are used in numerous web apps where multiple images are used. Rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image, so the number of HTTP requests is reduced.

.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}

A background position can be added either as two x, y values after the url() in the background, or as background-position.

#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}

Note : Use a sprite generator that packs multiple images into one and generate the appropriate CSS for it.

References :

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
• https://www.w3schools.com/css/css_image_sprites.asp

• Graceful degradation — The practice of building an application for modern browsers while ensuring it remains functional in older browsers.
• Progressive enhancement — The practice of building an application for a base level of user experience, but adding functional enhancements when a browser supports it.
• Use caniuse.com to check for feature support.
• Autoprefixer for automatic vendor prefix insertion.
• Feature detection using Modernizr.

References :

• https://codeburst.io/clearing-your-front-end-job-interview-css-95bdd82871f2

These techniques are related to accessibility (a11y).

• visibility: hidden. However the element is still in the flow of the page, and still takes up space.
• width: 0; height: 0. Make the element not take up any space on the screen at all, resulting in not showing it.
• position; absolute; left: -99999px. Position it outside of the screen.
• text-indent: -9999px. This only works on text within the block elements.

References :

• https://codeburst.io/clearing-your-front-end-job-interview-css-95bdd82871f2

Advantages:

• CSS is made more maintainable.
• Easy to write nested selectors.
• Variables for consistent theming. Can share theme files across different projects.
• Mixins to generate repeated CSS.
• Splitting your code into multiple files. CSS files can be split up too but doing so will require a HTTP request to download each CSS file.

Disadvantages :

• The developer must have enough time to learn new features present in this preprocessor before using it.
• Using preprocessors may cause of losing benefits of browser’s built-in element inspector.
• Requires tools for preprocessing. Re-compilation time can be slow.

References :

• https://lovenoodles.cn/qsCenter/front_end/css/2018/03/01/115
• http://techaffinity.com/blog/advantages-of-css-preprocessors/

• using @font-face

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

• using font service link

<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

References :

• https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

One of the important things to understand about how browsers read your CSS selectors, is that they read them from right to left. That means that in the selector ul > li a[title=”home”] the first thing thing interpreted is a[title=”home”]. This first part is also referred to as the “key selector” in that ultimately, it is the element being selected.

#main-nav > li {   }  /* Slower than it might seem */

Even though that feels weirdly counter-intuitive… Since ID’s are so efficient we would think the browser could just find that ID quickly and then find the li children quickly. But in reality, the relatively slow li tag selector is run first.

If the browser can determine the element you are looking for using just one selector and you’ve used more, you have inefficient code on your hands.

So you have to be very careful on how you are choosing your selector. Give unique IDs to fetch the single element Or give class name properly to identify group of elements based on your requirement.

On the other hand, if you start by matching the leftmost part of the selector… what do you match it against? You have to start walking the DOM, looking for nodes that might match it. Just discovering that there’s nothing matching that leftmost part might take a while.So browsers match from the right; it gives an obvious starting point and lets you get rid of most of the candidate selectors very quickly.

References :

• https://programmerinnervoice.wordpress.com/2013/12/18/how-does-browser-read-css-selector/
• https://stackoverflow.com/a/5813672

‘mobile-first’ is an approach to responsive design, where you make a design for mobile screens, or smaller screens first and then add added features and content for larger screens.

‘Responsive’ website design takes into consideration the users’ environment and screen size while making the design. It includes mixing layouts and employing flexible grids and images. Responsive design also uses CSS media queries.

Knowing exactly who makes up a company’s audience is critical. Once it is understood who a company’s customers are and what devices they use to access the site, it will be possibly to develop a design that will satisfy customers and enhance their user experience.

References :

• https://codeburst.io/mobile-first-adaptive-or-responsive-design-which-to-choose-for-the-website-so-customers-want-to-aafc86443222
• https://codeburst.io/mobile-first-adaptive-or-responsive-design-which-to-choose-for-the-website-so-customers-want-to-aafc86443222
• https://www.quora.com/What-is-the-difference-between-mobile-first-website-design-and-responsive-website-design-Are-they-mutually-exclusive

Bootstrap, Foundation, Bulma, Tailwind CSS and Semantic UI

On retina devices the websites are not broken. They just look vague and pixels start appearing as low resolution images. So the only way to correct is to resize the images by following one of the techniques below:

• Using alternate high resolution pixels :

Suppose we have an image of 200px by 400px (CSS pixels) and we want to display it properly in a retina display, we can upload an alternate image of size 400px by 800px in our server and render them whenever the webpage is opened in a retina device.

/* for low resolution display */

.image {

    background-image: url(/path/to/my/lowreslogo.png);

    background-size: 200px 300px;

    height: 300px;

    width: 200px;

}

/* for high resolution display */

@media only screen and (min--moz-device-pixel-ratio: 2),

only screen and (-o-min-device-pixel-ratio: 2/1),

only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min-device-pixel-ratio: 2) {

.image {

    background: url(/path/to/my/highreslogo.png) no-repeat;

    background-size: 200px 400px;

/* rest of your styles... */

}

}

• Using @face-fonts instead of images icon :

Image fonts will automatically resize themselves on the high resolution devices just like normal fonts do. Using @face-fonts is an alternate solution to Bitmap icons.

• Using SVG images instead of Bitmap images :

Bitmap images are images that multiply their pixels in retina displays. But they come with a limitation of getting multiplied infinite number of times. This is where SVG images come into role. They also solve our problem of uploading alternate images of double resolution plus they solve the bandwidth problem too.

• Using JavaScript to replace all the images with double sized image :

We can use JavaScript to replace all images in a webpage but it will be a difficult task replacing each one of them by writing individual code.

 if (window.devicePixelRatio > 1)

References :

• https://www.sitepoint.com/css-techniques-for-retina-displays/

Yes, translate do not cause the browser to trigger repaint and layout and instead only acts on the compositor. I tend to only ever use translate/transform nowadays, and only using absolute positioning for an elements initial position. I’ll then translate it from that initial position for better performance.

When using translate instead of positioning, you don’t have to worry about breaking page flow. You won’t have to mess with margins and paddings regardless of elements initial positioning (static, relative).

Also browser support looks pretty good (except IE8), just remember that transitions are supposed to enhance user experience while content stays the same. Older browsers will still render all elements properly, but simply ignore fancy animations so no harm done.

References :

• https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/