{"id":13518232,"url":"https://github.com/vasanthk/css-refresher-notes","last_synced_at":"2025-05-15T20:07:15.539Z","repository":{"id":35074715,"uuid":"39223502","full_name":"vasanthk/css-refresher-notes","owner":"vasanthk","description":"CSS Refresher!","archived":false,"fork":false,"pushed_at":"2023-03-13T16:47:08.000Z","size":198,"stargazers_count":1580,"open_issues_count":2,"forks_count":184,"subscribers_count":69,"default_branch":"master","last_synced_at":"2025-04-08T02:41:31.918Z","etag":null,"topics":["css","css-methodologies","css3","flexbox"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vasanthk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-07-16T22:28:31.000Z","updated_at":"2025-03-29T04:21:54.000Z","dependencies_parsed_at":"2023-02-10T21:10:30.351Z","dependency_job_id":"9f363eda-3b47-4087-8151-f381c9a7e39d","html_url":"https://github.com/vasanthk/css-refresher-notes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasanthk%2Fcss-refresher-notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasanthk%2Fcss-refresher-notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasanthk%2Fcss-refresher-notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vasanthk%2Fcss-refresher-notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vasanthk","download_url":"https://codeload.github.com/vasanthk/css-refresher-notes/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254414499,"owners_count":22067272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-methodologies","css3","flexbox"],"created_at":"2024-08-01T05:01:42.426Z","updated_at":"2025-05-15T20:07:10.463Z","avatar_url":"https://github.com/vasanthk.png","language":null,"readme":"# CSS Refresher Notes\n\nThis is a quick refresher of CSS concepts compiled from various articles online. Contributions are always welcome :)\n\nI have linked to most of the articles used, sorry if I missed any. Huge thanks to the community!\n\n**Table of Contents**\n\n- [Positioning](#positioning)\n- [Display](#display)\n- [Floats](#floats)\n- [CSS Selectors](#css-selectors)\n- [Selector efficiency](#selector-efficiency)\n- [Repaints and Reflows](#repaints-and-reflows)\n- [CSS3 Properties](#css3-properties)\n- [CSS3 Media queries](#css3-media-queries)\n- [Responsive Web Design](#responsive-web-design)\n- [CSS3 Transitions](#css3-transitions)\n- [CSS Animations](#css-animations)\n- [Scalable Vector Graphics (SVG)](#scalable-vector-graphics-svg)\n- [CSS Sprites](#css-sprites)\n- [Vertical Alignment](#vertical-alignment)\n- [Known Issues](#known-issues)\n\n## Positioning\n\nCSS Position allows up to 5 different values. But essentially only 4 values are commonly used.\n\n```css\ndiv {\n  position: static; /* default */\n  position: relative;\n  position: absolute;\n  position: fixed;\n  position: sticky;\n  position: inherit; /* Not very common */\n}\n```\n\n**Static (default):**\n* The only reason you would ever set an element to position: static is to forcefully-remove some positioning that got applied to an element outside of your control. This is fairly rare, as positioning doesn't cascade.\n\n**Relative:**\n* Allows nudging elements in different directions with top, right, bottom and left values. Its starting point is where it normally lies in the flow of the document, not the top left of the page.\n* When set to position relative, elements take up the same amount of space at the same exact position it was supposed to take as if its position was static.\n* It introduces the ability to use z-index on that element, which doesn't really work with statically positioned elements. Even if you don't set a z-index value, this element will now appear on top of any other statically positioned element.\n* It limits the scope of absolutely positioned child elements. Any element that is a child of the relatively positioned element can be absolutely positioned within that block.\n\n**Absolute:**\n* Position absolute takes the element out of the document flow. This means that it no longer takes up any space like what static and relative does. Think of it as an element with a giant strip of velcro on its back. Just tell it where to stick and it sticks.\n* You use the positioning attributes top, left, bottom and right to set the location. Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the html element itself meaning it will be placed relatively to the page itself.\n* The trade-off, and most important thing to remember, about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements.\n\n**Fixed:**\n* Similar to position absolute, an element that has fixed position is taken out of the document flow.\n* The element is positioned relative to the viewport, or the browser window itself.\n* Major difference with position absolute is it always takes its positioning relative to the browser window.\n* Since the fixed value behaves similar to the absolute value, we can stretch the width of the element to fit the viewport by setting offset values for left and right to zero.\n\n**Sticky:**\n* This is a hybrid of relative and fixed positioning.\n* The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioning.\n* For more info, find the demo from the MDN (https://codepen.io/simevidas/pen/JbdJRZ)\n\n**Inherits:**\n* It works as the name implies: The element inherits the value of its parent element. Typically, position property elements do not naturally inherit their parent’s values—the static value is assigned if no position value is given. Ultimately, you can type inherit or the parent element’s value and get the same result.\n\n**Summary**\n* Relative positioning will allow you to tweak an element’s position relative to its normal starting point.\n* Absolute positioning will allow you to tweak an element’s position relative to its first non-statically-positioned ancestor (defaults to page bounds if none is found).\n* Both relatively and absolutely positioned items won’t affect the static and fixed items around them (absolutely positioned items are removed from the flow, relatively positioned items occupy their original position).\n\n**Gotchas:**\n* You can’t apply both the position property and the float property to the same element. Both are conflicting instructions for what positioning scheme to use. If an element has both float and position:absolute or fixed, the float property won't apply.\n* Margins don’t [collapse](http://www.sitepoint.com/web-foundations/collapsing-margins/) on absolutely positioned elements. Suppose you have a paragraph with a margin-bottom of 20px applied. Right below the paragraph is an image with a margin-top of 30px applied.\nThe space between the paragraph and the image will not be 50px (20px + 30px), but rather 30px (30px \u003e 20px). This is known as collapsing margins. The simplest way to stop the margin collapse from occurring is to add padding or borders to each element.\nThe two margins combine (or collapse) to become one margin. Absolutely positioned elements do not have margins that collapse, which might make them act differently than expected.\n\n*More reading:*\n\n[Absolute, Relative, Fixed Positioning: How Do They Differ?](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/)\n\n[CSS Positioning 101](http://alistapart.com/article/css-positioning-101)\n\n[Learn CSS Positioning in Ten Steps](http://www.barelyfitz.com/screencast/html-training/css/positioning/)\n\n[CSS Cheat Sheet](https://www.interviewbit.com/css-cheat-sheet/)\n\n## Display\nEvery element on a web page is a rectangular [box](http://www.sitepoint.com/web-foundations/css-box-model/). The display property in CSS determines just how that rectangular box behaves.\n\n```css\ndiv {\n\tdisplay: inline;\n\tdisplay: inline-block;\n\tdisplay: block;\n\tdisplay: run-in;\n\tdisplay: none;\n}\n\n```\n* Default value of all elements is inline. Most \"User Agent stylesheets\" (the default styles the browser applies to all sites) reset many elements to \"block\"\n\n**Inline:**\n* Default value for elements. Think of elements like span, b or em\n* Will ignore top and bottom margin/padding settings, but will apply left and right margin/padding. Only moves horizontally, not vertically.\n* Is subject to vertical-align property.\n* Will ignore width and height properties.\n* If floated left or right, will automatically become a block-level element, subject to all block characteristics.\n\n**Inline Block:**\n* Very similar to inline to its parents in that it will set inline with the natural flow of text.\n* Very similar to block to its children in that it can have a width and height and its content can move vertically.\n* Think of a display:block element that has been rendered (or converted to an image) and then placed in the document inline\n* Margin and paddings work properly.\n* Width and height will be respected.\n* There is a \"bug\" which causes extra margin in inline block elements. See on [Known Issues](#extra-margin-on-inline-block-elements)\n\n**Block:**\n* A number of elements are set to block by the browser UA stylesheet. They are usually container elements such as div, section and ul. Also text 'blocks' like p and h1.\n* Block level elements do not sit inline, but break past them. If no width is set, will expand naturally to fill its parent container.\n* Can have margins and/or padding.\n* If no height is set, will expand naturally to fit its child elements (assuming they are not floated or positioned). So, for a block element, it’s not necessary to give it a set width or to give it a width of 100%.\n* Ignores the vertical-align property.\n\n**Run-in:**\n* Not supported in Firefox + spec not well defined yet.\n* To begin to understand it though, it's like if you want a header element to sit inline with the text below it.\n\n**None:**\n* Totally removes the element from the page.\n* While the element is still in the DOM, it is removed visually and in any other conceivable way (you can't tab to it or it's children , it is ignored by screen readers etc.)\n\n**Table values:**\n* There is a whole set of display values that force non-table elements to behave like table-elements.\n* It's rare-ish, but it sometimes allows you to be \"more semantic\" with your code while utilizing the unique positioning powers of tables.\n\n```css\ndiv {\n  display: table;\n  display: inline-table; /* like a table inside an inline-block */\n  display: table-cell;\n  display: table-column;\n  display: table-colgroup;\n  display: table-header-group;\n  display: table-row-group;\n  display: table-footer-group;\n  display: table-row;\n  display: table-caption;\n}\n```\n\n* To use, just mimic normal table structure. Simple example:\n```html\n\u003cdiv style=\"display: table;\"\u003e\n  \u003cdiv style=\"display: table-row;\"\u003e\n    \u003cdiv style=\"display: table-cell;\"\u003e\n      Gross but sometimes useful.\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n**Flexbox:**\n* Aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word 'flex')\n* The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).\n* A flex container expands items to fill available free space, or shrinks them to prevent overflow.\n* Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).\n* Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.\n* As with inline-block and inline-table, there is also inline-flex.\n\n*More reading:*\n\n[Flexbox Froggy](http://flexboxfroggy.com/)\n\n[Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\n[Flexbox reference](http://tympanus.net/codrops/css_reference/flexbox/)\n\n**Grid:**\n* The grid property in CSS is the foundation of Grid Layout. It aims at fixing issues with older layout techniques like float and inline-block, which both have issues and weren't really designed for page layout.\n* Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for lay out into columns and rows using a set of predictable sizing behaviors.\n* Along with the fact this method fixes the issues we encounter with older layout techniques, its main benefit is you can display a page in a way which can differ from the flow order.\n* An older deprecated version of the spec is implemented in IE10/11. The current version of the spec is present in all other modern browsers (Chrome, Safari, Firefox, and Edge 16+).\n* As with inline-block and inline-table, there is also inline-grid.\n\n*More reading:*\n\n[A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)\n\n[Grid Garden](http://cssgridgarden.com/)\n\n[CSS Almanac: Display](https://css-tricks.com/almanac/properties/d/display/)\n\n[The Difference Between “Block” and “Inline”](http://www.impressivewebs.com/difference-block-inline-css/)\n\n[Learn CSS Layout: The \"display\" property](http://learnlayout.com/display.html)\n\n## Floats\n* Floated elements are first laid out according to the normal flow, then taken out of the normal flow and sent as far to the right or left (depending on which value is applied) of the parent element.\nIn other words, they go from stacking on top of each other to sitting next to each other, given that there is enough room in the parent element for each floated element to sit.\n* Generally, a floated element should have an explicitly set width (unless it is a replaced element, like an image). This ensures that the float behaves as expected and helps to avoid issues in certain browsers.\n* Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of flow in relation to other block elements. When we use a floated image in a paragraph - the text in the paragraph is inline, so it flows around the floated element.\n* The clear property has five values available: left, right, both, inherit, and none. Assigning a value of left says the top edge of this element must sit below any element that has the float: left property applied to it.\n* A rule that I have found that works nicely for my layouts is float first. That is, in my HTML, I almost always place my floated elements first in the markup, and before any non-floated elements that my float will interact with,\nsuch as the paragraph in the example above. Most of the time, this gives the desired result.\n* Collapsing is when a parent element that contains any number of floated elements doesn’t expand to completely surround those elements in the way it would if the elements were not floated.\n* There is a method that allows a parent element to clear itself of any floated elements inside it. It uses a CSS property called overflow with a value of hidden.\nNote that the overflow property was not intended for this type of use, and could cause some issues such as hiding content or causing unwanted scrollbars to appear.\n* **Trick: For clearing floats adding a ‘overflow:auto’ to the parent element also does the trick.**\n* Note that overflow: auto doesn't clear floats — it causes the element to contain its floats by way of establishing a new block formatting context for them so that they don't intrude to other elements in the parent context.\nThat is what forces the parent to stretch to contain them. You can only clear a float if you add a clearing element after the float. A parent element cannot clear its floating children.\n* A better way to clear floats is to add a `clearfix` class to the container element with the following styles\n  ```css\n  .clearfix:after {\n    content: \"\";\n    display: table;\n    clear: both;\n  }\n  ```\n\n**9 Rules governing Floats**\n\n1. Floated elements are pushed to the edge of their containers, no further.\n\n2. Any floated element will either appear next to or below a previous floated element. If the elements are floated left, the second element will appear to the right of the first. If they’re floated right, the second element will appear to the left of the first.\n\n3. A left-floating box can't be further right than a right-floating box.\n\n4. Floated elements can't go higher than their container’s top edge (this gets more complicated when collapsing margins are involved, see original rule).\n\n5. A floated element can't be higher than a previous block level or floated element.\n\n6. A floated element can't be higher than a previous line of inline elements.\n\n7. One floated element next to another floated element can’t stick out past the edge of its container.\n\n8. A floating box must be placed as high as possible.\n\n9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.\n\n**Gotchas**\n```html\n\u003cimg src=\"http://lorempixum.com/200/200/\"\u003e\n\u003cp\u003eLorem ipsum...\u003c/p\u003e\n```\n```css\nimg {\n  float: right;\n  margin: 20px;\n}\n```\n\nAny margin that we add to the paragraph is being applied way off to the right of the image. This is because the image is actually inside of the paragraph’s box! This is why it doesn’t increase the space between the image and the paragraph.\n\n*More reading:*\n\n[Everything You Never Knew About CSS Floats](http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/)\n\n[CSS Floats 101](http://alistapart.com/article/css-floats-101)\n\n[Clearing Floats](http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/)\n\n## CSS Selectors\n\n```css\ndiv#container \u003e ul {\n  border: 1px solid black;\n}\n```\n\nThe difference between the standard X Y and X \u003e Y is that the latter will only select direct children.\n\n```css\nul ~ p {\n   color: red;\n}\n```\n\nThis sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized.\nIt will select, referring to our example above, any p elements, as long as they follow a ul.\n\n```css\na[href*=\"google\"] {\n  color: #1f6053;\n}\n```\n\nThe star designates that the proceeding value must appear somewhere in the attribute's value.\n\n```css\na[href^=\"http\"] {\n   background: url(path/to/external/icon.png) no-repeat;\n   padding-left: 10px;\n}\n```\n\nIf we want to target all anchor tags that have a href which begins with http, we could use a selector similar to the snippet shown above.\n\n```css\na[href$=\".jpg\"] {\n   color: red;\n}\n```\n\nAgain, we use a regular expressions symbol, $, to refer to the end of a string. In this case, we're searching for all anchors which link to an image -- or at least a url that ends with .jpg\n\n```css\na[data-info~=\"image\"] {\n   border: 1px solid black;\n}\n```\n\nThe tilde (~) symbol allows us to target an attribute which has a spaced-separated list of values.\n\n```css\ndiv:not(#container) {\n   color: blue;\n}\n```\n\nThis selects all divs, except for the one which has an id of container.\n\n```css\np::first-line {\n   font-weight: bold;\n   font-size: 1.2em;\n}\n```\n\nWe can use pseudo elements (designated by ::) to style fragments of an element, such as the first line, or the first letter. This works only for **block level elements**.\n\n```css\nli:nth-child(3) {\n   color: red;\n}\n```\n\nnth child pseudo classes target specific elements in the stack. It accepts an integer as a parameter, however, this is not zero-based. If you wish to target the second list item, use li:nth-child(2).\nWe can even use this to select a variable set of children. For example, we could do li:nth-child(4n) to select every fourth list item.\n\n```css\nli:nth-last-child(2) {\n   color: red;\n}\n```\n\nWhat if you had a huge list of items in a ul, and only needed to access, say, the 2nd to the last item out of 10? Rather than doing li:nth-child(8), you could instead use the nth-last-child pseudo class.\n\n```css\nli:first-child {\n    border-top: none;\n}\n\nli:last-child {\n   border-bottom: none;\n}\n```\n\nThis is particularly useful when assigning border and padding/margin styles for a table list.\n\n*More reading:*\n\n[The 30 CSS Selectors you Must Memorize](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048)\n\n[What is a Universal Selector in CSS?](https://www.scaler.com/topics/universal-selector-in-css/)\n\n## Selector efficiency\n\nThe following list of selectors is in decreasing order of specificity:\n* ID selectors (e.g., #example).\n* Class selectors (e.g., .example), attributes selectors (e.g., [type=\"radio\"]) and pseudo-classes (e.g., :hover).\n* Type selectors (e.g., h1) and pseudo-elements (e.g., :before).\n* Universal selector (*), combinators (+, \u003e, ~, ' ') and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)\n\nInline styles added to an element (e.g., style=\"font-weight:bold\") always overwrite any styles in external stylesheets and thus can be thought of as having the highest specificity.\n\nBelow is a longer list:\n* id (#myid)\n* class (.myclass)\n* tag (div, h1, p)\n* adjacent sibling (h1 + p)\n* child (ul \u003e li)\n* descendant (li a)\n* universal (*)\n* attribute (a[rel=”external”])\n* pseudo-class and pseudo element (a:hover, li:first)\n\n*More Reading*\n\n[CSS Selectors: Should You Optimize Them To Perform Better?](http://vanseodesign.com/css/css-selector-performance/)\n\n## Repaints and Reflows\n\n**Repaint**\n\nAlso known as redraw - is what happens whenever something is made visible when it was not previously visible, or vice versa, without altering the layout of the document. An example would be when adding an outline to an element, changing the background color, or changing the visibility style. Repaint is expensive in terms of performance, as it requires the engine to search through all elements to determine what is visible, and what should be displayed.\n\n**Reflow**\n\nA reflow is a more significant change. This will happen whenever the DOM tree is manipulated, whenever a style is changed that affects the layout, whenever the className property of an element is changed, or whenever the browser window size is changed. The engine must then reflow the relevant element to work out where the various parts of it should now be displayed. Its children will also be reflowed to take the new layout of their parent into account. Elements that appear after the element in the DOM will also be reflowed to calculate their new layout, as they may have been moved by the initial reflows. Ancestor elements will also reflow, to account for the changes in size of their children. Finally, everything is repainted.\n\nReflows are very expensive in terms of performance, and is one of the main causes of slow DOM scripts, especially on devices with low processing power, such as phones. In many cases, they are equivalent to laying out the entire page again.\n\n**Minimal reflow**\n\nNormal reflows may affect the whole document. The more of the document that is reflowed, the longer the reflow will take. Elements that are positioned absolutely or fixed, do not affect the layout of the main document, so if they reflow, they are the only thing that reflows. The document behind them will need to repaint to allow for any changes, but this is much less of a problem than an entire reflow.\n\nSo if an animation does not need to be applied to the whole document, it is better if it can be applied only to a positioned element. For most animations, this is all that is needed anyway.\n\n*What causes a reflow*\n\n* Resizing a window.\n* Changing the font.\n* Adding or removing a stylesheet.\n* Content changes, such as a user typing text in an input box.\n* Activation of CSS pseudo classes such as :hover (In IE the activation of the pseudo class of a sibling).\n* Manipulating the class attribute.\n* A script manipulating the DOM\n* Calculating offsetWidth and offsetHeight\n* Setting a property of the style attribute.\n\nFor a comprehensive list of what forces reflows - check Paul Irish's gist [here](https://gist.github.com/paulirish/5d52fb081b3570c81e3a)\n\n**How to minimize the effect of reflows on performance**\n\n* Change classes on the element you wish to style (as low in the DOM tree as possible).\n* Avoid setting multiple inline styles.\n* Apply animations to elements that are position fixed or absolute.\n* Trade smoothness for speed.\n* Avoid tables for layout. Even a minor change to a cell will cause reflows on all other nodes of the table.\n* Avoid JavaScript expressions in the CSS (IE only).\n\n**Note**\n\n* Sweating over the selectors used in modern browsers is futile. Most selection methods are now so fast it’s really not worth spending much time over. Furthermore, there is disparity across browsers of what the slowest selectors are anyway. Look here last to speed up your CSS.\n* Excessive unused styles are likely to cost more, performance wise, than any selectors you chose so look to tidy up there second. 3000 lines that are unused or surplus on a page are not even that uncommon. While it’s common to bunch all the styles up into a great big single styles.css, if different areas of your site/web application can have different (additional) stylesheets added (dependency graph style), that may be the better option.\n\n*More Reading*\n\n[Reflows \u0026 Repaints: CSS performance making your JavaScript slow?](http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/)\n\n[Writing efficient CSS selectors](http://csswizardry.com/2011/09/writing-efficient-css-selectors/)\n\n[Why do browsers match CSS selectors from right to left?](http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left)\n\n[CSS performance revisited: selectors, bloat and expensive styles](http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/)\n\n## CSS3 Properties\n\n**border-radius**\n\n```css\n-webkit-border-radius: 4px;\n-moz-border-radius: 4px;\nborder-radius: 4px;\n```\n\nAllows rounded corners in elements. Can also be used to create circles.\n\n*Support: IE9+*\n\n**box-shadow**\n\n```css\n-webkit-box-shadow: 1px 1px 3px #292929;\n-moz-box-shadow: 1px 1px 3px #292929;\nbox-shadow: 1px 1px 3px #292929;\n```\n\nThe box-shadow property allows us to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.\n\nbox-shadow accepts four parameters: x-offset, y-offset, blur, color of shadow.\n\n* The first value defines the horizontal offset of the shadow, with a positive value offsetting the shadow to the right of the element, and a negative value to the left.\n* The second value defines the vertical offset of the shadow, with a positive value offsetting the shadow from the bottom of the element, and a negative value from the top.\n* If supplied, an optional third value defines the blur distance of the shadow. Only positive values are allowed, and the larger the value, the more the shadow’s edge is blurred.\n* An optional fourth value can be supplied to define the spread distance of the shadow. A positive value will cause the shadow shape to expand in all directions, while a negative value will cause the shadow shape to contract.\n\nAn optional ‘inset’ keyword can be supplied, preceding the length and color values. If present, this keyword causes the shadow to be drawn inside the element.\n\n```css\n-webkit-box-shadow: 0 0 20px #333 inset;\n-moz-box-shadow: 0 0 20px #333 inset;\nbox-shadow: 0 0 20px #333 inset;\n```\n\ntext-shadow has the same set of properties as well.\n\nIt allows you to immediately apply depth to your elements. We can apply multiple shadows by using comma as a separator.\n\n*Support: IE9+*\n\n*More reading:*\n\n[Box-shadow, one of CSS3’s best new features](http://www.css3.info/preview/box-shadow/)\n\n[CSS Almanac: box-shadow](https://css-tricks.com/almanac/properties/b/box-shadow/)\n\n**text-shadow**\n\n```css\ncolor: #fff /* text color to white */\ntext-shadow: 0 0 50px #333;\n```\n\nText shadows are like box shadows except that they are shadows for text rather than the whole element. Luckily, there is no vendor prefix necessary for text shadow.\n\nThe options for text shadow are the same as for box-shadow except that there is *no inset* text shadow support.\n\nAs with box shadows, it is possible to have multiple text shadows just by separating them with commas. Here is an example that creates a flaming text effect.\n\n```css\ntext-shadow: 0 0 4px #ccc,\n             0 -5px 4px #ff3,\n             2px -10px 6px #fd3,\n             -2px -15px 11px #f80,\n             2px -18px 18px #f20;\n```\n\n*Support: IE10+*\n\n**Gradients**\n\nJust as you can declare the background of an element to be a solid color in CSS, you can also declare that background to be a gradient. Using gradients declared in CSS, rather using an actual image file, is better for control and performance.\n\nGradients are typically one color that fades into another, but in CSS you can control every aspect of how that happens, from the direction to the colors (as many as you want) to where those color changes happen.\n\n```css\n.gradient {\n  /* can be treated like a fallback */\n  background-color: red;\n\n  /* will be \"on top\", if browser supports it */\n  background-image: linear-gradient(red, orange);\n\n  /* these will reset other properties, like background-position, but it does know what you mean */\n  background: red;\n  background: linear-gradient(red, orange);\n}\n```\n\n*Support: IE10+*\n\n***Linear Gradient***\n\nPerhaps the most common and useful type of gradient is the linear-gradient(). The gradients \"axis\" can go from left-to-right, top-to-bottom, or at any angle you chose. Not declaring an angle will assume top-to-bottom.\nTo make it left-to-right, you pass an additional parameter at the beginning of the linear-gradient() function starting with the word \"to\", indicating the direction, like \"to right\". This \"to\" syntax works for corners as well.\nYou aren't limited to just two colors either. In fact you can have as many comma-separated colors as you want.\nYou can also declare where you want any particular color to \"start\". Those are called \"color-stops\". Say you wanted yellow to take up the majority of the space, but red only a little bit in the beginning, you could make the yellow color-stop pretty early:\n\n```css\n.gradient {\n  height: 100px;\n  background-image:\n    linear-gradient(\n      to right,\n      red,\n      yellow 10%\n    );\n}\n```\n\n***Gotchas***\n\n* We tend to think of gradients as fading colors, but if you have two color stops that are the same, [you can make a solid color instantly change to another solid color](http://codepen.io/chriscoyier/pen/csgoD). This can be useful for declaring a full-height background that simulates columns.\n\n* There are three different syntaxes that browsers have supported:\n\n  - Old: original WebKit-only way, with stuff like from() and color-stop()\n\n  - Tweener: old angle system, e.g. \"left\"\n\n  - New: new angle system, e.g. \"to right\"\n\nThe way degrees work in the OLD vs NEW syntax is a bit different. The OLD (and TWEENER - usually prefixed) way defines 0deg and left-to-right and proceeds counter-clockwise, while the NEW (usually unprefixed) way defines 0deg as bottom-to-top and proceeds clockwise.\n\nOLD (or TWEENER) = (450 - new) % 360\n\nor even simpler:\n\nNEW = 90 - OLD\nOLD = 90 - NEW\n\nlike:\n\nOLD linear-gradient(135deg, red, blue)\nNEW linear-gradient(315deg, red, blue)\n\n***Radial Gradients***\n\nRadial gradient differ from linear in that they start at a single point and emanate outwards. Gradients are often used to simulate a lighting, which as we know isn't always straight, so they can be useful to make a gradient seem even more natural.\n\nThe default is for the first color to start in the (center center) of the element and fade to the end color toward the edge of the element. The fade happens at an equal rate no matter which direction. The default gradient shape is an ellipse.\n\nThe possible values for fade  are: closest-corner, closest-side, farthest-corner, farthest-side. You can think of it like: \"I want this radial gradient to fade from the center point to the __________, and everywhere else fills in to accommodate that.\"\nA radial gradient doesn't have to start at the default center either, you can specify a certain point by using \"at ______\" as part of the first parameter.\n\n***Gotchas***\n\n* There are again three different syntaxes that browsers have supported:\n\n  - Old: Prefixed with -webkit-, stuff like from() and color-stop()\n\n  - Tweener: First param was location of center. That will completely break now in browsers that support new syntax unprefixed, so make sure any tweener syntax is prefixed.\n\n  - New: Verbose first param, like \"circle closest-corner at top right\"\n\n* It is recommended to used autoprefixers like [postcss](https://github.com/postcss/autoprefixer) to handle vendor prefixes to make it work across different browsers consistently.\n\n***Repeating Gradients***\n\nThe size of the gradient is determined by the final color stop. If that's at 20px, the size of the gradient (which then repeats) is a 20px by 20px square.\n\n```css\n.repeat {\n  background-image:\n    repeating-linear-gradient(\n      45deg,\n      yellow,\n      yellow 10px,\n      red 10px,\n      red 20px /* determines size */\n    );\n}\n```\n\nThey can be used with both linear and radial varieties.\n\nThere is a trick, with non-repeating gradients, to create the gradient in such a way that if it was a little tiny rectangle, it would line up with other little tiny rectangle versions of itself to create a repeating pattern. So essentially create that gradient and set the background-size to make that little tiny rectangle. That made it easy to make stripes, which you could then rotate or whatever.\n\n*More reading:*\n\n[CSS Gradients](https://css-tricks.com/css3-gradients/)\n\n## CSS3 Media queries\n\nCSS Media Queries are a feature in CSS3 which allows you to specify when certain CSS rules should be applied. This allows you to apply a special CSS for mobile, or adjust a layout for print.\n\nThere are three ways to invoke media-query-dependent styles.\n\n* First of all, as stylesheets in the link element of HTML or XHTML:\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" media=\"all and (color)\" href=\"/style.css\"\u003e\n```\n\nSecondly, in XML:\n\n```html\n\u003c?xml-stylesheet media=\"all and (color)\" rel=\"stylesheet\" href=\"/style.css\" ?\u003e\n```\n\nAnd finally, in CSS stylesheets using @import rules:\n\n```css\n@import url(\"/style.css\") all and (color);\n```\n\nOr using @media rules:\n\n```css\n@media all and (color) { /* one or more rule sets... */ }\n```\n\nThere are currently 13 media features catered for in the specification: width, height, device-width, device-height, orientation, aspect-ratio,device-aspect-ratio, color, color-index, monochrome, resolution, scan, and grid. All but orientation, scan, and grid can accept min- and max- prefixes as well.\n\n## Responsive Web Design\n\n***Setting the viewport***\n\n```html\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n```\n\nA meta viewport element gives the browser instructions on how to control the page's dimensions and scaling.\n\nThe width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).\n\nThe initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.\n\n***Gotchas***\n\n1. Do NOT use large fixed width elements - If an image is displayed at a width wider than the viewport it can cause the viewport to scroll horizontally.\n\n2. Do NOT let the content rely on a particular viewport width to render well - Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.\n\n3. Use CSS media queries to apply different styling for small and large screens - Setting large absolute CSS widths for page elements, will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.\n\n***Building a Responsive Grid-View***\n\nA responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.\n\nFirst ensure that all HTML elements have the [box-sizing](https://css-tricks.com/box-sizing/) property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements.\n\nAdd the following code in your CSS:\n\n```css\n* {\n    box-sizing: border-box;\n}\n```\n\n***Responsive Images***\n\nImages will be responsive and scale up and down if the width property is set to 100%.\n**A better option would be to set max-width property to 100% since the image will scale down if it has to, but never scale up to be larger than its original size.**\n\nBackground images can also respond to resizing and scaling.\n\n* If the background-size property is set to \"contain\", the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio\n* If the background-size property is set to \"100% 100%\", the background image will stretch to cover the entire content area.\n* If the background-size property is set to \"cover\", the background image will scale to cover the entire content area. The \"cover\" value keeps the aspect ratio, and some part of the background image may be clipped\n\nA large image can be perfect on a big computer screen, but useless on a small device. To reduce the load, you can use media queries to display different images on different devices.\n\nYou can use the media query min-device-width, instead of min-width, which checks the device width, instead of the browser width. Then the image will not change when you resize the browser window:\n\n```css\n/* For devices smaller than 400px: */\nbody {\n    background-image: url('img_smallflower.jpg');\n}\n\n/* For devices 400px and larger: */\n@media only screen and (min-device-width: 400px) {\n    body {\n        background-image: url('img_flowers.jpg');\n    }\n}\n```\n\nHTML5 introduced the picture element, which lets you define more than one image. (No IE support :(  .. only Edge 13+)\n\nThe picture element works similar to the video and audio elements. You set up different sources, and the first source that fits the preferences is the one being used:\n\n```css\n\u003cpicture\u003e\n  \u003csource srcset=\"img_smallflower.jpg\" media=\"(max-width: 400px)\"\u003e\n  \u003csource srcset=\"img_flowers.jpg\"\u003e\n  \u003cimg src=\"img_flowers.jpg\" alt=\"Flowers\"\u003e\n\u003c/picture\u003e\n```\n\nThe srcset attribute is required, and defines the source of the image. The media attribute is optional, and accepts the media queries you find in CSS @media rule. You should also define an img element for browsers that do not support the picture element (good fallback option).\n\n***Responsive Videos***\n\n* Using The width Property\n\n  - If the width property is set to 100%, the video player will be responsive and scale up and down. However, it can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.\n\n  ```css\n  video {\n      max-width: 100%;\n      height: auto;\n  }\n  ```\n\n*More reading:*\n\n[w3schools - Responsive Web Design](http://www.w3schools.com/css/css_rwd_intro.asp)\n\n[9 basic principles of responsive web design](http://blog.froont.com/9-basic-principles-of-responsive-web-design/)\n\n## CSS3 Transitions\n\nA CSS transition allows you to change the property of an element over a given duration that you set.\n\n* transition-property: The property to be transitioned (in this case, the background property)\n* transition-duration: How long the transition should last (0.3 seconds)\n* transition-timing-function: How fast the transition happens over time (ease)\n\nThe timing function value allows the speed of the transition to change over time by defining one of six possibilities: *ease, linear, ease-in, ease-out, ease-in-out, and cubic-bezier* (which allows you to define your own timing curve).\n\nYou may want the transition to also happen on the :focus or :active pseudo-classes of the link as well. Instead of having to add the transition property stack to each of those declarations, the transition instructions are attached to the normal state and therefore declared only once.\n\n```css\na.foo {\n  padding: 5px 10px;\n  background: #9c3;\n  -webkit-transition: background .3s ease,\n    color 0.2s linear;\n  -moz-transition: background .3s ease,\n    color 0.2s linear;\n  -o-transition: background .3s ease, color 0.2s linear;\n  transition: background .3s ease, color 0.2s linear;\n}\na.foo:hover,\na.foo:focus {\n  color: #030;\n  background: #690;\n}\n```\n\nLet’s say that along with the background color, we also want to change the link’s text color and transition that as well. We can do that by stringing multiple transitions together, separated by a comma. Each can have their varying duration and timing functions. An alternative to listing multiple properties is using the all value. This will transition all available properties.\n\nAnother basic use of changing states is to change the background of an input box on focus.\n\n```css\ninput.ourInputBox:focus{\n -webkit-transition:background-color 0.5s linear;\n background:#CCC;\n}\n```\n\nThis time, we put the transition declaration into the hover state, so that we aren’t adding additional unnecessary classes to the CSS. We apply the transition once the input box acquires focus.\n\n*More reading:*\n\n[Understanding CSS3 Transitions](http://alistapart.com/article/understanding-css3-transitions)\n\n[CSS Fundamentals: CSS3 Transitions](http://code.tutsplus.com/tutorials/css-fundamentals-css3-transitions--pre-10922)\n\n## CSS Animations\n\nWhile CSS transitions are all about altering element properties as they move from state to state, CSS animations are dependent on keyframes and animation properties.\n\n* keyframes: Used to define the styles an element will have at various times.\n* animation properties: Used to assign @keyframes to a specific element and determine how it is animated.\n\n***Keyframes***\n\nKeyframes are the foundation of CSS animations. They define what the animation looks like at each stage of the animation timeline. Each @keyframes is composed of:\n\n- Name of the animation: A name that describes the animation, for example, bounceIn.\n\n- Stages of the animation: Each stage of the animation is represented as a percentage. 0% represents the beginning state of the animation. 100% represents the ending state of the animation. Multiple intermediate states can be added in between.\n\n- CSS Properties: The CSS properties defined for each stage of the animation timeline.\n\nLet’s take a look at a simple @keyframes I’ve named “bounceIn”. This @keyframes has three stages. At the first stage (0%), the element is at opacity 0 and scaled down to 10 percent of its default size, using CSS transform scale. At the second stage (60%) the element fades in to full opacity and grows to 120 percent of its default size. At the final stage (100%), it scales down slightly and returns to its default size.\n\nThe @keyframes are added to your main CSS file.\n\n```css\n@keyframes bounceIn {\n  0% {\n    transform: scale(0.1);\n    opacity: 0;\n  }\n  60% {\n    transform: scale(1.2);\n    opacity: 1;\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n```\n\n***Animation Properties***\n\nOnce the @keyframes are defined, the animation properties must be added in order for your animation to function.\n\nAnimation properties do two things:\n\n* They assign the @keyframes to the elements you want to animate.\n* They define how it is animated.\n\nThe animation properties are added to the CSS selectors(or elements) that you want to animate, You must add the following two animation properties for the animation to take effect.\n\n* animation-name: The name of the animation defined in the @keyframes.\n* animation-duration: The duration of the animations, in seconds (eg. 5s) or milliseconds (eg. 200ms).\n\nContinuing with the above bounceIn example, we’ll add animation-name and animation-duration to the div that we want to animate.\n\n```css\ndiv {\n  animation-duration: 2s;\n  animation-name: bounceIn;\n}\n```\n\nShorthand syntax:\n```css\ndiv {\n  animation: bounceIn 2s;\n}\n```\n\nBy adding both the @keyframes and the animation properties, we have a simple animation!\n\nIn addition to the required animation-name and animation-duration properties, you can further customize and create complex animations using the following properties:\n\n* animation-timing-function – specifies the speed curve of the animation.\n* animation-delay – specifies a delay for the start of an animation.\n* animation-iteration-count – specifies the number of times an animation should be played.\n* animation-direction – specifies whether an animation should play in reverse direction or alternate cycles.\n* animation-fill-mode – specifies a style for the element when the animation is not playing. Such as when it is finished or when it has a delay.\n* animation-play-state – specifies whether the animation is running or paused.\n\nOrder used in shorthand syntax:\n\nanimation: [animation-name] [animation-duration] [animation-timing-function]\n[animation-delay] [animation-iteration-count] [animation-direction]\n[animation-fill-mode] [animation-play-state];\n\nTo add multiple animations to a selector, you simply separate the values with a comma. Here’s an example:\n\n```css\n.div {\n  animation: slideIn 2s, rotate 1.75s;\n}\n```\n\n*More reading:*\n\n[An Introduction to CSS Transitions \u0026 Animations](https://www.elegantthemes.com/blog/tips-tricks/an-introduction-to-css-transitions-animations)\n\n[CSS Animation for Beginners](https://robots.thoughtbot.com/css-animation-for-beginners)\n\n[Simple CSS3 Transitions, Transforms, \u0026 Animations Compilation](http://callmenick.com/post/simple-css3-transitions-transforms-animations-compilation)\n\n[Learn to Code Advanced HTML \u0026 CSS](http://learn.shayhowe.com/advanced-html-css/performance-organization/)\n\n[Advanced HTML - CSS](https://skillcrush.com/blog/advanced-css/)\n\n\n## Scalable Vector Graphics (SVG)\n\nSVG stands for scalable vector graphics. It is an XML-based format that supports animation and interactivity.\nIn other words, SVG is a technology that allows us to create graphics by writing a code. Moreover, it is scalable. While non-vector graphics like PNG and JPEG have fixed sizes and cannot be scaled without loosing quality, SVG can be mathematically scaled to any size.\n\nWe can use \".svg\" file in our code by setting it as an image source just like any other image \"\u003c img src='say_hello.svg'\u003e\". But it's not so interesting.\nOne of the greatest things about SVG is that it is actually text file in XML format. So we can open it, read it and interact with it. We can take our SVG code, put in DOM and play with it - change elements parameters like position, background color or font family using JavaScript and CSS. Moreover, each element of SVG can be animated. And it's really awesome.\n\nSo, basically, we should always use SVG graphics instead of PNG or JPEG, when we are talking about basic shapes, logos and vector graphic.\n\nHere's a simple red circle SVG\n```css\n\u003csvg width=\"100\" height=\"100\"\u003e\n    \u003ccircle cx=\"50\" cy=\"50\" r=\"40\" fill=\"red\" /\u003e\n\u003c/svg\u003e\n```\n\n***Common element parameters***\n\nUsually graphs starts (x,y = 0) from bottom left corner. In SVG start point is top left corner.\n\nEach SVG shape (element) has some basic parameters:\n* X - X coordinate of top left corner of the element\n* Y - Y coordinate of top left corner of the element\n* Fill - element background color.\n* Fill-opacity - opacity of background color\n* Stroke - element border color.\n* Stroke-width - element border size.\n\n***Pros:***\n  - Resolution independent: Scalability without changing the image quality. It is widely used for devices with screens Retina and those close to them.\n  - Small size. SVG image elements take up much less space than their twins created in raster format.\n  - Flexibility. With CSS, you can quickly change the graphics settings on the site, such as background color or the position of the logo on the page. To do this, you can edit the file in any text editor.\n  - It’s possible to view the contents of the SVG file in any browser (IE, Chrome, Opera, FireFox, Safari, etc.).\n  - No unnecessary HTTP requests, unlike using an img tag\n  - SEO friendly: text labels, descriptions can be searched by search engines.\n  - We have scripting control for custom interactive events and animation.\n\n***Cons:***\n  - The file size is growing very fast, if the object consists of a large number of small elements.\n  - It’s impossible to read a part of the graphic object, only the entire object and it slows you down.\n\n*Support: IE9+*\n\n*More reading:*\n\n[Introduction to SVG](http://tonyfreed.com/blog/introduction-to-svg)\n\n[An introduction to SVG](http://engageinteractive.co.uk/blog/an-introduction-to-svg)\n\n[The Simple Intro to SVG Animation](http://davidwalsh.name/svg-animation)\n\n[Icon fonts vs SVG - which is the best option?](http://www.creativebloq.com/web-design/icon-fonts-vs-svg-101413211)\n\n*Videos:*\n\n[Using SVG - Intro](https://www.youtube.com/watch?v=vvuH6qS2M5Q)\n\n[SVG Tutorials - Playlist](https://www.youtube.com/watch?v=PQxtlY19kto\u0026list=PLL8woMHwr36F2tCFnWTbVBQAGQ6nTcXOO)\n\n[Working with SVG, A Primer - Sara Soueidan](https://www.youtube.com/watch?v=uKNX23lvnPo)\n\n[You Don't Know SVG - Dmitry Baranovskiy](https://www.youtube.com/watch?v=SeLOt_BRAqc)\n\n[SVG is for Everybody - Chris Coyier](https://www.youtube.com/watch?v=w83XRCkMtHQ)\n\n[Building Better Interfaces With SVG - Sara Soueidan](https://www.youtube.com/watch?v=lMFfTRiipOQ)\n\n[SVG Lessons I Learned The Hard Way - Sara Soueidan](https://www.youtube.com/watch?v=NkLDuPf5P0A)\n\n## CSS Sprites\n\n​A CSS sprite is a performance optimization technique that combines multiple images into a single image called a sprite sheet or tile set. Sprites reduce network congestion by reducing the number of downloads needed to render a web page.\n\nWhile combining several images into one with sprites, all images are loaded with a single HTTP request. Browsers limit the number of concurrent requests a site can make and HTTP requests require a bit of handshaking. Thus, sprites are important for the same reasons that minifying and concatenating CSS and JavaScript are important.\n\n**Using Sprites in CSS**\n\nYou set the same background-image on several CSS classes and set the background position and dimensions of the individual classes to display a single portion of the sprite.\n\n```css\n.flags-canada, .flags-mexico, .flags-usa {\n  background-image: url('../images/flags.png');\n  background-repeat: no-repeat;\n}\n\n.flags-canada {\n  height: 128px;\n  background-position: -5px -5px;\n}\n\n.flags-usa {\n  height: 135px;\n  background-position: -5px -143px;\n}\n\n.flags-mexico {\n  height: 147px;\n  background-position: -5px -288px;\n}\n```\n**Benefits**\n\n​CSS sprites reduce overall page load time while giving enterprises more control over the performance of their website.\n\n* Users experience faster page load times since images appear as soon as the sprite sheet is downloaded.\n* Enterprises see greater throughput and lower resource usage as fewer HTTP requests are made, reducing the amount of network congestion.\n\n*More reading:*\n\n[CSS Sprites: What They Are, Why They’re Cool, and How To Use Them](https://css-tricks.com/css-sprites/)\n\n[What are CSS Sprites](https://www.maxcdn.com/one/visual-glossary/css-sprites/)\n\n[w3schools - Image Sprites](http://www.w3schools.com/css/css_image_sprites.asp)\n\n## Vertical Alignment\n\nVertical alignment is one of the main reasons some people think CSS is confusing. You wonder, I guess, why is it so *hard* to align content vertically with CSS? Why don't they create a property that does it automatically? _Why does `vertical-align` not work for me?!_\n\nAbout the `vertical-align` question: this property is only for aligning inline or table-cell elements, hope it ends your doubt about it.\n\nAnd about being hard, well, turns out it is not that hard, but there are some questions you have to do to yourself when wanting do align something vertically:\n\n* Is it a inline or block-level element?\n* If it's a text, is it single or multi-line?\n* Do you always know the height of the content?\n* Can you use CSS3?\n\n**The line-height method:**\n\nThis method can be used when you're vertically aligning a single-line text, single-line inline-level element or a image.\n\nLet's say you have the following HTML:\n\n```html\n  \u003cdiv class=\"parent\"\u003e\n    \u003cspan class=\"child\"\u003eHello!\u003c/span\u003e\n  \u003c/div\u003e\n```\n\nYou'll then align the `.child` content with:\n\n```css\n  .parent {\n    height: 150px;\n  }\n\n  .child {\n    line-height: 150px;\n  }\n```\n\nBut if the content of `.child` is directly inside `.parent` like this:\n\n```html\n  \u003cdiv class=\"parent\"\u003e\n    Hello!\n  \u003c/div\u003e\n```\n\nYou then can put the `line-height` property on it:\n\n```css\n  .parent {\n    height: 150px;\n    line-height: 150px;\n  }\n```\n\nIf, instead of a `\u003cspan\u003e` you have a `\u003cimg\u003e`:\n\n```html\n  \u003cdiv class=\"parent\"\u003e\n    \u003cimg src=\"image.jpg\" class=\"child-image\"/\u003e\n  \u003c/div\u003e\n```\n\nYou got to change to:\n\n```css\n  .parent {\n    height: 150px;\n    line-height: 150px;\n  }\n\n  .child-image {\n    vertical-align: middle; /* Aha! Here it does work :) */\n  }\n```\n\n**The CSS table method:**\n\nThis method consists in simulating a table with CSS. Let's say you have the given HTML:\n\n```html\n  \u003cdiv class=\"parent\"\u003e\n    \u003cdiv class=\"child\"\u003e\n      Hello, CSS table method!\n    \u003c/div\u003e\n  \u003c/div\u003e\n```\n\nYou'll align `.child` with:\n\n```css\n  .parent {\n    display: table;\n  }\n\n  .child {\n    display: table-cell;\n    vertical-align: middle; /* Yep, it works here too! */\n  }\n```\n\nThis way, it doesn't matter what's the height of `.parent`, `.child` will always be vertically aligned.\n\nSadly this method does not work with older versions of Internet Explorer.\n\n**The absolute position method:**\n\nThis method has two ways to be implemented:\n\n1 - If you know the height of the element you want to align\n\n2 - If you don't know this height (only works if you can use CSS3)\n\nLet's say you have the following HTML:\n\n```html\n  \u003cdiv class=\"parent\"\u003e\n    \u003cdiv class=\"child\"\u003e\n      Hello, absolute position method!\n    \u003c/div\u003e\n  \u003c/div\u003e\n```\n\nWith the _first_ way, you can align `.child`with:\n\n```css\n  .parent {\n    position: relative;\n    height: 300px; /* It is important that parent have a height different from `auto` */\n  }\n\n  .child {\n    position: absolute;\n    top: 50%;\n    height: 50px;\n    margin-top: -25px;\n  }\n```\n\nAnd with the _second_ way, you should do this:\n\n```css\n  .parent {\n    position: relative;\n    height: 300px; /* It is important that parent have a height different from `auto` */\n  }\n\n  .child {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n```\n\nThere are the main ways to do it, but you can still vertically align using flexbox, padding, stretching, etc.\n\n*More reading:*\n\n[Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/)\n\n[6 Methods For Vertical Centering With CSS](http://vanseodesign.com/css/vertical-centering/)\n\n[Vertical align anything with just 3 lines of CSS](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/)\n\n[How to center in CSS](http://howtocenterincss.com/)\n\n---\n\n## Known Issues\n\n### Extra margin on inline-block elements\nLet's suppose you need to create a list and the items should be side by side horizontally,\nwithout any spacing between them.\n\nThe code could be something like that:\n\n```html\n\u003cul\u003e\n  \u003cli\u003eItem 1\u003c/li\u003e\n  \u003cli\u003eItem 2\u003c/li\u003e\n  \u003cli\u003eItem 3\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n```css\nli {\n  display: inline-block;\n  background: red;\n}\n```\n\nThen, you see on the browser. Yeah, it seems to work properly, except by the extra spacing between the items.\nYou don't ask for that, and, even adding `margin: 0` in the code, the problem is still there.\n\nThe problem occurs because when you use display inline-block, the whitespace in the HTML becomes\na visual space on the browser.\n\nSo, let's take a look in some ways to solve that:\n\n#### No spaces in the HTML\nSo, if the whitespace is the problem, let's remove it.\n\n```html\n  \u003cul\u003e\n    \u003cli\u003eItem 1\u003c/li\u003e\u003cli\u003eItem 2\u003c/li\u003e\u003cli\u003eItem 3\u003c/li\u003e\n  \u003c/ul\u003e\n```\n#### Comments in the HTML\nIt works like the previous solution, but instead you literally remove the whitespaces,\nyou use comments to do that.\n\n```html\n\u003cul\u003e\n   \u003cli\u003eItem content\u003c/li\u003e\u003c!--\n--\u003e\u003cli\u003eItem content\u003c/li\u003e\u003c!--\n--\u003e\u003cli\u003eItem content\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n#### font-size: 0 on parent element\nYou just add font-size: 0, on their parent which will remove the whitespaces,\nand then you set the right font size on inline block element.\n\n```css\n ul {\n   font-size: 0;\n }\n\n li {\n   display: inline-block;\n   background: red;\n   font-size: 14px;\n }\n```\n\n#### Negative margin on inline block elements\nPretty clear, the extra margin rendered is 4px, so, let's add a 4px of negative margin in the element.\n\n```css\nli {\n  display: inline-block;\n  margin: 0 -4px;\n}\n```\n\n*More reading:*\n\n[Fighting the Space Between Inline Block Elements](https://css-tricks.com/fighting-the-space-between-inline-block-elements/)\n\n[Remove Whitespace Between Inline-Block Elements](http://davidwalsh.name/remove-whitespace-inline-block)\n\n[CSS display inline-block Extra Margin/Space](https://tylercipriani.com/2012/08/01/display-inline-block-extra-margin.html)\n\n---\n\n*CSS Links*\n\n[CSS for Devs - Slides](http://elijahmanor.com/talks/css-for-devs/#/)\n\n[5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours](http://designshack.net/articles/css/5-steps-to-drastically-improve-your-css-knowledge-in-24-hours/)\n\n[CSS3 Mastery](http://code.tutsplus.com/series/css3-mastery--net-18126)\n\n[Getting to Work with CSS3 Power Tools](http://code.tutsplus.com/tutorials/getting-to-work-with-css3-power-tools--net-13894)\n\n[CSS pro tips](https://github.com/AllThingsSmitty/css-protips)\n","funding_links":[],"categories":["Others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasanthk%2Fcss-refresher-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvasanthk%2Fcss-refresher-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvasanthk%2Fcss-refresher-notes/lists"}