CSS CheatSheet http://overapi.com/css
CSS Specificity –
Specificity ranking from lowest to highest..
Type Selector(h1) – lowest
Class selectors(.example)
ID selectors(#example) – highest
CSS Specifity Calculator – play around to understand
https://specificity.keegan.st/
Typography:
Typeface: a set of fonts, designed with common characteristics and composed of glyphs
Font: Individual files that are part of typeface
Free fonts from https://fonts.google.com/
CSS Units:
In simple words, You’re looking at a monitor which is comprised of lots of tiny dots that are used to make up an image. These are pixels. you do need to understand that pixels are an absolute unit of measurement. Absolute means that they are the same size regardless of the size of anything else.16px on your laptop monitor is not the same as 16px on your iPad. Pixels are absolute but not consistent.Pixels are defined as a single point in a graphic image, and are often tied to viewport resolution. If a viewport is 1600×900, that typically means that there are 1600px pixel columns & 900 pixel rows, with a pixel in each cell.
Box Model:
* offsetHeight is a measurement in pixels of the element’s CSS height, including border, padding and the element’s horizontal scrollbar.
* clientHeight property returns the viewable height of an element in pixels, including padding, but not the border, scrollbar or margin.
* scrollHeight value is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. The height is measured in the same way as clientHeight: it includes the element’s padding, but not its border, margin or horizontal scrollbar.
How to use Combinator Selectors to apply CSS properties..
Sibling Selector
Psuedo-class selectors
Eg for :first-of-type and :last-of-type
Box Model:
How paddings,borders increase the height and width of an element using border-box: content-box. Below is the example..
Box-Sizing : Border-box
Using box-sizing: border-box you can keep the height and width of an element same but content shrinks inside element with margins, padding and border. Pls see the below screenshot.
remove default margins in between inline blocks using font-size: 0 for the parent and font-size: px to child. Please find the below screenshots.
Remove space around elements
Before:
After:
here is the fiddle https://jsfiddle.net/sathyavakacharla/oucnx19z/8/
Position:
In below screenshot, we haven’t specified position relative to parent, hence offsets(bottom and left) considers from page flow.
New position value ‘sticky’ added recently by w3c but not supported by IE browsers..
https://www.w3schools.com/howto/howto_css_sticky_element.asp
Z-Index:
position is mandatory to apply z-index property on any element.
Background Images and its properties…
When it reaches to offset(top:10px), sticky gets activated like shown below..
display: grid
Flex Box:
The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.
Best tutorials to learn flex box is:
https://cssreference.io/flexbox/
https://tympanus.net/codrops/css_reference/flexbox/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Video tutorials
https://scrimba.com/playlist/pVaDAv
Images
SVG
Transitions and Keyframes
BEM(Block Element Modifier):
It is a known fact that the right styleguide can significantly increase development speed, debugging, and the implementation of new features in legacy code. Sadly, most CSS codebases are sometimes developed without any structure or naming conventions. This leads to an unmaintainable CSS codebase in the long term.
The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.
clearly explained here..http://getbem.com/naming/
Quick glance from getbem.com
https://css-tricks.com/bem-101/
Anchor tag new attributes noopener noreferrer
<a href=”https://www.google.com” target=”_blank” rel=”noopener noreferrer”>Google</a>
This new feature is to avoid a potentially serious vulnerability on these kind of links.
The vulnerability explained
You have a link on “Page A” to “Page B”. Let’s say that link has a target=”_blank” tag, which means that “Page B” will open in a new tab or a new window of your browser. Now, here comes the issue.
For some reason, when the above scenario happens, “Page B” can for a moment control “Page A” with a simple Javascript code. An attacker could use this to download something to your device, intercept private data being sent, change cookies that are dropped, or take your reader to any page they wanted. So, it’s serious.
Beating the vulnerability
To avoid this behavior you can use the following attribute:
noopener
“Instructs the browser to open the link without granting the new browsing context access to the document that opened it — by not setting the Window.opener property on the opened window (it returns null).”
However, not all browsers support the previous tag, so to be sure you’ve closed the vulnerability you also need to use the following attribute on your links:
noreferrer
“Prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the Referer: HTTP header.”
