Quick Links:
- See list of website designs here - Click here
- Learn CSS Animations by Josh M Comeau: Click here (Amazing list of posts on animation)
- The State of CSS 2021: Click here
- Css wow: Click here
- Css Selectors: Click here
- Learn Css Layout: Click here, Github
- Css Font Stack: Click here
- Article:
- Animation Libraries in Js: Click here
- Ansh Mehra Design Portfolio
- CSS Notes for Professionals: Click here
TODO: When to use .jpg or .png? the answer is WebP... sort of [ images on the web | part two ]
This is my personal repo for myself, its kinda cheat sheet.
Personal pro tip: Use run_parcel binary to run the entire folder at once 🥇︎. Source
Find base css @ https://github.com/sahilrajput03/my_bin/tree/master/snips/css . #base css, #basecss, #startcss, #startercss.
Awesome StackOverflow: Click here
To select a button with the class btn-primary and the disabled attribute in CSS, you can use the following selector:
.btn-primary:disabled {
/* Your styles here */
}Or, if you're using aria-disabled="true" for accessibility, use this selector:
.btn-primary[aria-disabled="true"] {
/* Your styles here */
}These selectors apply styles specifically to elements with the btn-primary class that are disabled.
In CSS, both the :root pseudo-class and the html tag can be used to refer to the root element of the document, but they have slightly different use cases and implications:
:root Pseudo-Class:
The :root pseudo-class matches the root element of the document, which is typically the element in an HTML document. It is often used to define custom properties (variables) because of its higher specificity compared to the html selector. This ensures that the custom properties are accessible from anywhere in the CSS, even if there are more specific rules targeting the html element.
Example:
:root {
--main-color: #3498db;
}
body {
background-color: var(--main-color);
}html Tag selector:
The html tag selector specifically targets the element. It is commonly used for setting global styles, such as font size, line height, and other base styles that are meant to be inherited by all elements.
Example:
html {
font-size: 16px;
line-height: 1.5;
}
body {
font-family: Arial, sans-serif;
}When to Use Which
Use :root when defining custom properties (variables) or when you want to ensure higher specificity.
Use html for setting base styles that apply to the entire document, especially when inheritance is a key concern.
In most practical scenarios, the choice between the two doesn't affect the outcome much, but using :root is generally considered more semantically correct for defining custom properties.
// use this code in browser console
document.designMode = 'on' /* Note the comma separated list of media queries which are independent to each other. */
@media (max-width: ${XL_MEDIA_BREAKPOINT}) and (min-width: ${LG_MEDIA_BREAKPOINT}), (max-width: ${MD_MEDIA_BREAKPOINT}) {
& {
flex-direction: column-reverse;
}
.text__details {
padding-inline-start: 0px;
}
}Source: Stackoverflow answer
way 1: common way
document.documentElement.style.setProperty('--your-variable', '#YOURCOLOR');way 2: Another cleaner way:
const root = document.querySelector(':root');
// set css variable
root.style.setProperty('--my-color', 'blue');
// to get css variable from :root
const color = getComputedStyle(root).getPropertyValue('--my-color'); // blueway 3: another way
var sheet = document.styleSheets[0];
sheet.insertRule(":root{--blue:#4444FF}");Source of below article text: Click here ~ Suggested by Eric
Source: Click here
https://twitter.com/argyleink/status/1588201392661204992
Date: 6 Dec, 2022
- Website: mantine.dev/, Github (16K*)
Tldr: Yes. Source: Click here
Download coreui admin: Click here
~Shagun
https://twitter.com/wesbos/status/1586360039174209536
::-webkit-scrollbar { /* WebKit */
width: 0;
height: 0;
}
Src: https://www.youtube.com/watch?v=iehzWCm8KHs
- Case studies of design: growth.design
- mobbin.design
- Muzli Plugin ~Chrome Plugin to show new design on new tabs
~By Ansh Mehra
https://www.cssscript.com/tag/confetti/
Redmi note5
Full responsivity -
Source: css-tricks
source: stackoverflow answer
This is such a helpful way to make a flex (say with direction row) to make it take only content's width only
Source: https://stackoverflow.com/a/54979559/10012446
html {
overflow-y: overlay;
}flex issues faced, i.e., items in a flex-direction: column I was not able to center items in horizontally using align-items: center
Possible Solution: 1. Make sure the items you want to be centered have to be block type else make them block by display: block or by display: inline-block.
Possible Solution: 2. Make sure you wrap the list of items if you have many in a div so that they get sqeezed to the common width of the div itself and thus will help the issue.
Browse all html tags @ https://www.w3schools.com/tags/tag_comment.asp
<head>
<meta />
<title></title>
</head>
<body>
<main>
<header>
<nav></nav>
<aside></aside>
</header>
<section>
<div>
<article>
<h1></h1>
<p></p>
<img src="" alt="" />
</article>
<article>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</article>
<hr />
<br />
<article>
<textarea name="" id="" cols="30" rows="10"></textarea>
</article>
<pre></pre>
<b>bold</b>
<u>underline</u>
<i>italics</i>
<a href="#"></a>
<code> </code>
<label for=""></label>
<caption></caption>
<blockquotes></blockquotes>
</div>
</section>
<footer></footer>
</main>
</body>Tips:
Install parcel via
npm i -g parcel-bundler- Use
live-servercommand on terminal to serve this whole directory. But with live-server you don't get hot-reload for css(though live-server does a whole page reload instead which makes scroll position lost on each change in css), so useparcel index.htmlin a particular directory to enable hot reload for css, yikes! - Use
lsrorpdto use live-server or parcel aliases from my_bin directly.
The width property say 20% on img tag means that img size will be 20% of its 🧿︎ own 🧿︎ original size(not the container).
Use command live-server to serve the whole project and navigate to different directories to view them.
- Want a color theme: https://coolors.co/generate ~ 🛌︎ sleeper.
:root css selector has the highest specificity, and we use it define global things, it could be vars or css properties. Also, using :root selector is just same as using html selector.
* is a universal selector that selects every css element, yo!
Source, timestamped in yt video here.
Side scrolling bug.
Learn about specificity here, amazing exaplanation about inline style, internal css, external style sheets,
and what now, say: classes or id or selector(say (div p p)) or !important, this vid is all you need to know about specificity.
#000 black
#111
...
#999
#aaa
...
#eee
#fff white
* All in-between shades are grey shades.
Depressed of calculating actual width of a HTML element via formula actual-width= (width+2*padding+2*margin) and actual-height= (height+2*padding+2*margin) , so use border-box from now
*,
*::before,
*::after {
box-sizing: border-box;
}- The benefit of using below code way
i.e., inherit wayis that all lower elements of a element that you define withbox-sizing: content-box;explicitly to be able to use that, then all the children elements in that would use that too, as with universal selector we are saying to all elements to just inherit from its parent in the hierarchy. Hacky, isn't it..? If you feel its Hacky, simply use the Way 1 though.
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}Note: Default value of box-sizing is content-box, so you must hate it. :D
-
Browser fallback(i.e, to make Internet explore work with css variables too. ) - Watch it out here how to fix. Also, you may use SASS to fix browser fallback pretty nicely as kevin suggets here, I didn't look at that though..
-
Manipulating css variables with js here.
-
Browse css variables playlist from kevin here.
-
Checkout my codesandbox example for cssvars using react(it has the plain html represetation too(i.e., without styled components too)), get it here.
Watch video here.
1 em/rem = 16px
/* Selects all direct🔅︎ or indirect🔅︎ `a` tags children of `nav__list` class. */
.nav__list a {
color: white;
}eg2.
.header h1 {
color: limegreen;
}.myclass > p {
/* ^^ this selects only direct ``p`` children in `.myclass` only. */
color: beige;
}div,
span {
color: limegreen;
}/* src: https://www.w3schools.com/css/css_selectors.asp */
/* in this example only <p> elements with class="center" will be red and center-aligned: */
p.center {
text-align: center;
color: red;
}
/* For debugging... */
debug {
border: 5px solid deeppink;
}eg1
.col + .col {
background-color: skyblue;
/* above will select the second column in two or more `col class` dom elements. */
margin-left: 100px;
}eg2
.split > * + * {
/* This above selector is adjacent item selector, that means that only second element will be selected. */
margin-left: 2em;
/* If i had "> * + * + *" as selector, then the third element will be selected, yo!! */
}
/* implemented in 01-design-with-notes *//* continue from here: https://youtu.be/bn-DQCifeQQ?t=1772 */
/* units: 5vh = 5 viewport height, 5vw = 5 viewport width. */
/** SHORTHANDS */
/* the keyword e1, e2 means example1, example2, etc. */
.e1-shorthand {
width: min(90%, 70.5rem);
}
.e1 {
width: 90%;
max-width: 70.5rem;
}
/* */
.e2 {
margin-bottom: 1rem;
/* rem basically means equal to the font size, yikes!! */
}
/* */
/* Notes .. */
/* Notes .. */
/* Notes .. */
/* Notes .. */
/* TODO */
/* look at min-max video of kevin powell now...! */
/* watch the rem video of kevin powell.. */
img {
/* This sets the width of image to be automatic aligned to 100% of the width of screen, yo!! */
max-width: 100%;
}
/* ******** */
/* shorthand */
img {
width: 70%;
max-width: 600px;
}
img {
width: min(500px, 70%);
/* min function basically computed 70% of the available area and check what is minimum i.e., 500px or our calculated 70%. */
/* This is shorthand of above, yikes!! */
}
/* ****** */
img {
width: max(500px, 70%);
}
img {
width: 70%;
min-width: 500px;
/* This is shorthand way, yo!! */
}
/* ************ */
img {
width: min(500px + 10%, 600px);
/* Note you must have space around `+` otherwise math won't work! */
}
/* ************ */
img {
width: clamp(200px, 50%, 20rem);
}
img {
width: 50%;
/*(test by shrinking the viewport) if 50% of width is less than 200px, then set `width: 200px;` otherwise `width: 50%;` */
min-width: 200px;
/*(test by growing the viewport) if 50% of width is greater than 25rem, then set `width: 25rem;` otherwise use `width: 50%;`*/
max-width: 25rem;
/* You may also test this via `max-width: 700px;` */
}/* 1em = 16px unless the element's parent has a value for that property set. */
/* The interesting thing about em is that it compounds over children(nesting makes the size multiply by the parent and so on.. */
/* Another interesting thing about em is that if setting property for padding/magin/etc. their value gets evaluated using the font-size value of that element if set(otherwise using the value set in parent). */
/* * em is really really good, as it allows us to size margins/paddings automatically proportional to our font-sizes. */
/* more.. */
/* padding: 1em 3em; */
/* more.. */
/* */
/* 2em=32px */
/* *********************8 */
/* rem stands for root em, yo! */
/* */
p {
margin: 2rem;
/* here, 2rem evaluates by looking what value for font-size we have set for html i.e., html{font-size: ** } */
/* And that makes rem to be absolute(only relative to html tag), and thats why its good!! */
/* Though, em is always gets multiplied from the parent's evaluated value(and parent too gets evaluate its value from its parent, and so on..). */
}
/* valid shorthands i.e., without preceiding 0 before the dot. */
p {
margin: 0.2rem;
}
p {
margin: 0.2em;
text-transform: uppercase;
letter-spacing: 5px;
/* ^^ This is useful say for a `BUY NOW` button in html. */
}
/* src: amazing video about em and rem from kevin powell: https://www.youtube.com/watch?v=_-aDOAMmDHI */Simply check the browser support by navigating to - https://caniuse.com/
sr: https://www.youtube.com/watch?v=U9VF-4euyRo
min function
Note: Below snippet is way how a min function can be used to calculates width on event of viewport changing.
p {
width: min(600px, 100%);
/* ABOVE IS EQUAL TO BELOW TWO LINES.. */
width: 100%;
max-width: 600px;
}max function
Note: Below snippet is way how a max function can be used to calculates width on event of viewport changing.
p {
width: max(200px, 100%);
/* ABOVE IS EQUAL TO BELOW TWO LINES.. */
width: 100%;
max-width: 200px;
}clamp function
Note: Below snippet is way how a clamp function can be used to calculates width on event of viewport changing.
p {
width: clamp(200px, 100%, 600px);
/* ABOVE IS EQUAL TO BELOW THREE LINES.. */
min-width: 200px;
width: 100%;
max-width: 600px;
}a:hover
// here hover is pseudo class.
p::before
// here before is pseudo element.p::before means that we care creating a pseudo element inside p tag but before all content, and the same applies to p::after i.e., we are creating element after all content inside p.
By default pseudo elements are inline elements i.e., they don't take entire line but share line with other elements. You can make them block elements by display: block.
The benefit of using pseudo elements is that we don't need extra markup (i.e., to write html) to get some content on page, we can just do this via pseudo elements only, yikes, so now you don't need to add empty divs to style them in css, yikes!
NOTE
pseudo elements on img tag just doesn't work, so don't try doing that(source: kevin powell)-> check why here (time stamped)?
Text in pseudo elments can't be selected by cursor, as mentioned in this stackoverlow answer.
- Add image using pseudo element like that
p::after {
content: url(//unsplash.it/200/200);
}- Add open quotes and close quotes to blockquote text like that -
blockquote::before {
content: open-quote;
font-size: 2rem;
}
blockquote::after {
content: close-quote;
font-size: 2rem;
}<style>
p[popeye] {
background-color: olive;
/* So this will set color for p tags having property `popeye`, yikes! */
}
</style>
<p popeye="yipee!">beautiful paragraph.</p>More on attribute selector from w3school and css-tricks
Better learn it from css-tricks article as it has very concise exaplanation for all the available options for the attribute selectors.
Really impressive article, as it has demonstrated some combining the different selectors too. Article on attribute selector from css-tricks here on attribute selector.
W3school links:
- https://www.w3schools.com/cssref/sel_attribute.asp
- https://www.w3schools.com/cssref/sel_attribute_value.asp
- https://www.w3schools.com/cssref/sel_attribute_value_contains.asp
- https://www.w3schools.com/cssref/sel_attribute_value_lang.asp
- https://www.w3schools.com/cssref/sel_attr_begin.asp
- https://www.w3schools.com/cssref/sel_attr_end.asp
- https://www.w3schools.com/cssref/sel_attr_contain.asp
Its just 75% size of the font-size, yikes!
Find the example my codepen here. Inspired from kevin's article.
This thing is popularly known as 'drop case' and you may read more about it here and there they explain some cross-browser way too but from can-i-use all current browser support this thing at the time.
Use
p {
white-space: nowrap;
}<style>
span {
padding: 30px;
background-color: red;
transition: background-color ease-out 1000ms, color ease-out 1000ms;
}
span:hover {
background-color: green;
color: white;
}
</style>
<span>I am a span text.</span>In above I have defined two transitions i.e., for background-color and color. (*color applies to text color in css, yo!)
NOTE - shorthand - inset: inset is shorthand for top, left, bottom, right properties.
p {
top: 0;
bottom: 0;
left: 0;
right: 0;
/* Above and below is equivalent. */
inset: 0 0 0 0; /* In same fashion as as we follow padding and margin. */
/* padding/margin */
/* All below fashion of assigning property work with inset shorthand as well. */
padding: 1px 2px 3px 4px; /* top right bottom left */
padding: 5px 15px 10px; /* top left/right bottom */
padding: 4px 8px; /* top/bottom left/right */
padding: 10px; /* value applied to all edges */
}Amaing below code samples from mdn docs for inset:
/* <length> values */
inset: 10px; /* value applied to all edges */
inset: 4px 8px; /* top/bottom left/right */
inset: 5px 15px 10px; /* top left/right bottom */
inset: 2.4em 3em 3em 3em; /* top right bottom left */
/* <percentage>s of the width (left/right) or height (top/bottom) of the containing block */
inset: 10% 5% 5% 5%;
/* Keyword value */
inset: auto;
/* Global values */
inset: inherit;
inset: initial;
inset: unset;Learn about all the transform possibilities @ https://www.w3schools.com/css/css3_2dtransforms.asp .
eg.1 transform
p {
/* transform: scale(1, 1); */
/* This is default ^^^. Yikes! */
/* First param is x axis width and second param is y-axis width. */
}In scale if you put like
p { transform: scale(2, 3); }
then p is increased by the size of an element (according to the parameters given for the width and height) like two times of its original width, and three times of its original height. AND ITS JUST THE SAME WAY as in general any image resolution thing like first parameter is width and second is height i.e, 200x400 img means 200 width and 400 height, yikes!!
🚵︎🚵︎🚵︎🤺︎🤺︎🤺︎🤺︎🤺︎🥇︎🥇︎🥇︎🥇︎
Watch out my example that I modidifed a little from w3schools's example in the chapter @ https://www.w3schools.com/code/tryit.asp?filename=GR21OP0LEVNP
Note, that I have added transition property to div#myDiv so that when i unhover(i.e., the event when you hover a element and after that you take your cursor of the element boundard) you would see it getting it to its original shape(default value: transform: none) with a smooth transition too instead of directly getting to its shape without animation🏅︎🏅︎.
CSS 2D Transforms: https://www.w3schools.com/css/css3_2dtransforms.asp The best and most interesting is when you use skew() and matrix() methods, and those two combines all other transform properties, yikes!!🧶︎🧶︎
CSS 3D Transforms: https://www.w3schools.com/css/css3_3dtransforms.asp
CSS transform Property: https://www.w3schools.com/cssref/css3_pr_transform.asp
.class1{
transform: matrix(1, 0, 0, 1, 0, 0);
/*The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()) */
/* 1st/4th: scale(width{default: 1},height{default: 1})*/
/*2nd/3rd: skew(height), skew(width) */
/* 5th/6th: movement(vertical), movement(horizontal) */
}
Check it here (time-stamped).
<style>
.boom .shankar {
color: aqua;
}
.shankar {
color: red;
/* This ^^ doesn't work even though it comes later in code coz the `.boom .shankar` selector has higher specificity, yo!! */
}
</style>
<div class="boom">
<div class="shankar">I am namah.</div>
</div>p {
color: rgba(0, 0, 0, 0.3);
/* here, 1 means normal, and LOWERING value will LOWER opacity. */
}via position:absolute
<style>
.centered {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}via align-text (for text only)
p {
text-align: center;
}via flexbox
.my-item {
display: flex;
align-items: center;
justify-content: center;
}via grid
.my-item {
display: grid;
place-items: center;
/* ^^ its shorthand for `justify-items: center` and `align-items: center` */
}<img src="./example.svg" alt="an svg image" />
<img src="./example.svg" width="2000" alt="an svg image with size" />
<!-- -->
<!-- Another 🔽︎ approach -->
<style>
.my-svg {
width: 1000px;
}
</style>
<img class="my-svg" src="./example.svg" alt="an svg image" />
<!-- direct approach -->
<svg></svg>
<!-- svg images are scalable vector graphics, you can scale them infinitely. -->kevin video on svg: https://youtu.be/ZJSCl6XEdP8
Generate CSS variables with SCSS:
Source: Click here
Sass: Syntactically Awesome Style Sheets
Scss (sass + css), and it supports existing css too, that means your existing css files would be just scss files by renaming to .scss files. BUT DRAWBACK OF SCSS is that you still got to use curly braces.
e.g.
body
color: redabove is not a valid scss but valid sass.
Online sass playground: https://www.sassmeister.com/
TIP: Use Options to change compilation scss to css VS. sass to css .
eg. valid sass
.nav
color: red
background: green
&__boom
color: pinkYou might not get autocompletion things in sass though so feel free to use bare css though🤠︎.
Note you don't need semicolons and braces.
To get emmet working in scss, just do as suggested here.
For sass, install this extension and you are all done.
Visit the sass-setup-kevin folder to start with sass/scss🚴︎.
Read about modules, mixins in scss/sass - They are great, read in docs here.
My notes: Mixins are basically functions in sass/scss and it makes it easy to execute a piece of code which is usually repeated at lots of places, and the good thing is we can pass values to our functions too, oops i meant to say mixins.
What is Partials in scss/sass ?
A partial is a Sass file named with a leading underscore. ~ Docs.
Read about Extend/Inheritance in sass Docs, its amazing!
Watch it here by kevin, 22 April,21
element{
background-image: url(./my-image.jpg)
}
.my-div{
<!-- Note: You need to have height and width specified to be able to see the image, also you can quote the url with ' or " or do not quote at all, and either way the url works.
background-image: url('https://i.picsum.photos/id/642/536/354.jpg?hmac=fsIxfyo75b-oAC-eFF5XxAGUAiN2k5bXddSQc7C4p30');
height: 200px;
width: 300px;
}See live demo @: https://codepen.io/sahilrajput03/pen/jOBaLON
Wow 🤺︎🤺︎: What a amazing "Try it out" from w3school @ https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_transform .
Amazing chapter @ w3school, read if you are living life @ https://www.w3schools.com/css/css3_transitions.asp
All transition-timing-functions:
The transition-timing-function property can have the following values:
ease - specifies a transition effect with a slow start, then fast, then end slowly (this is 🥇︎DEFAULT🥇︎)
linear - specifies a transition effect with the same speed from start to end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
<!-- Note below is a shorthand of above individual properties 🤺︎🤺︎(src: https://www.w3schools.com/css/css3_transitions.asp). -->
div {
transition: width 2s linear 1s;
}To see different transition-timing-function in action together, just see it at below codesandbox
Src: https://codesandbox.io/s/amazing-transition-timing-function-f9y2k?file=/src/App.js
Read on awesome info @ https://www.w3schools.com/css/css3_transitions.asp
src of below knowledge: https://stackoverflow.com/a/8595600 src of another answer linked in above answer: https://stackoverflow.com/a/14168210 and w3c resource links in ^^ this answer.
Amazing docs from w3school, please read this in whole when in moode: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
@media screen, print {
body { line-height: 1.2 }
}
So in above code, we can see for different type of medias we are defining different rules here.
From reading the docs about media types, some content is like below..
7.3 Recognized media types (media queries)
Read the amazing info @w3schools.com @ link: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
The names chosen for CSS media types reflect target devices for which the relevant properties make sense. In the following list of CSS media types the names of media types are normative, but the descriptions are informative. Likewise, the "Media" field in the description of each property is informative.
all
Suitable for all devices.
braille
Intended for braille tactile feedback devices.
embossed
Intended for paged braille printers.
handheld
Intended for handheld devices (typically small screen, limited bandwidth).
print
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.
projection
Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.
screen
Intended primarily for color computer screens.
speech
Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
tty
Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.
tv
Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).
Media type names are case-insensitive.
Media types are mutually exclusive in the sense that a user agent can only support one media type when rendering a document. However, user agents may use different media types on different canvases. For example, a document may (simultaneously) be shown in 'screen' mode on one canvas and 'print' mode on another canvas.
Note that a multimodal media type is still only one media type. The 'tv' media type, for example, is a multimodal media type that renders both visually and aurally to a single canvas.
@media and @import rules with unknown media types (that are nonetheless valid identifiers) are treated as if the unknown media types are not present. If an @media/@import rule contains a malformed media type (not an identifier) then the statement is invalid.
Note: Media Queries supercedes this error handling.
For example, in the following snippet, the rule on the P element applies in 'screen' mode (even though the '3D' media type is not known).
@media screen, 3D {
P { color: green; }
}
Note. Future updates of CSS may extend the list of media types. Authors should not rely on media type names that are not yet defined by a CSS specification.
src: https://www.w3.org/TR/CSS2/media.html
Also, this particular topic is also interesting: https://www.w3.org/TR/CSS2/media.html#media-groups
Read the whole w3c recommendations @ https://www.w3.org/TR/CSS2/media.html though.
Simply go to this codepen by kevin, he talks about it in below video 🥰︎.
Also, he said he got inspired about it via reading this article - Article on medium
transform: translate(-50%, -50%);The border property is a shorthand property for the following individual border properties:
border-width
border-style (required)
border-colorsrc: https://www.w3schools.com/css/css_border_shorthand.asp
.myitem {
border-top: 2px solid blue;
border-right: 2px dotted red;
border-bottom: 2px dotted yellow;
border-left: 2px solid deeppink;
}🤺︎ Amazing: src: https://www.w3schools.com/cssref/css3_pr_border-radius.asp
-
Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner).
-
Three values - border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner).
-
Two values - border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):
-
One value - border-radius: 15px; (the value applies to all four corners, which are rounded equally:
Always prefer outline instead of border coz outline doesn't cause existing layout to have sideaffects but border does. So if you are adding outline to any item you are not adding sizing differences to the ui but just adding some thing for debug only practise, yo!
Usage (syntax is same as border):
.twelfth {
outline: 2px solid deeppink;
}Use f2 to edit and save directly for fast access, yikes!!
src: https://www.w3schools.com/css/css_important.asp
Amazing..!!
Src: Kyle's youtube video
E.g., 1:
Below code will make these divs appear as side by side coz initial value for display property is iniline.
<div>div1</div>
<div>div2</div>
div{
display: initial;
}E.g., 2:
Below code demonstrates that some properties are always inherited like font-size, font-family whereas some are never inherited like border, outline,
<div>
I am a div.
<p>I am a paragraph.</p>
</div>
<p class="imp">I am paragraph imp.</p>
div{
font-size: 2rem;
/* ^ font-size is inherited in p tag as well. */
border: 1px solid blue;
/* ^ border is not inherited unless you specifically explicitly inherit it. */
}
p{
/* border: inherit; */
}E.g., 3
button{
all: unset;
<!-- ^^ This will remove all the browser's and other user defined css for this element, and now all the shit things are purged automatically(and thats what you want mostly for buttons). Yikes!! -->
background-color: red;
}E.g., 4: In below example the padding and border property values are set to browser's style sheet for chrome/firefox/etc and below code does nothing coz all the values for all the properties are set to rever by default. revert is only useful in cases when you just need to undo your own style property sometimes(which is very rare though).
button{
padding: revert;
border: revert;
}
More information:
- CSS Property values: initial, inherited,
- You can find default values of each css properties @ mdn in the "Formal definition" section.
- For a ``div`` in all browsers the value for `div` is set as `display: block` but by the css specifications's ``initial`` value for property of ``display`` is ``inline`` as you can read [here](https://developer.mozilla.org/en-US/docs/Web/CSS/display#formal_definition).
You should always use ``font-family: inherit`` in buttons (so they can actually get your custom font) coz otherwise they get font-family property as `Arial` from browser's ``User Agent Stylesheet``.
``display`` property has default value for inherited as false. [Src](https://developer.mozilla.org/en-US/docs/Web/CSS/display#formal_definition).
``border`` property has defaut value for inherited as false. [Src](https://developer.mozilla.org/en-US/docs/Web/CSS/border#formal_definition)
``font-size`` property has default value for inherited as true. (this means any nested child will have the same font-size coz they inherit the font-size of the parent. [Src](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#formal_definition)
``unset`` as value for a property will make that property to either set as ``inherit`` or ``initial`` where inherit means exactly what it means and ``initial`` means
- Magic: If you set ``all: unset`` in any element in css then all css properties of that selected element will be seet to ``inherit`` or ``initial``,<div>
<span>I am span 1.</span>
<span>I am span 2.</span>
<span>I am span 3.</span>
</div>
span:first-child{
color: red;
/* Only "I am span 1" will be coloured red. */
}
<div>
<span>I am span 1.</span>
<span>I am span 2.</span>
<span>I am span 3.</span>
</div>
span:last-child{
color: red;
/* Only "I am span 3" will be coloured red. */
}
<div>
<span>I am span 1.</span>
<span>I am span 2.</span>
<span>I am span 3.</span>
<span>I am span 4.</span>
<span>I am span 5.</span>
</div>
span:nth-child(2n){
color: red;
/* Only "I am span 2" and "I am span 4" will be coloured red. */
}
<div>
<span>I am span 1.</span>
<span>I am span 2.</span>
<span>I am span 3.</span>
</div>
span:nth-last-child(1){
color: red;
/* Only "I am span 3" will be coloured red. */
}
<div>
<span>I am span 1.</span>
<span>I am span 2.</span>
<span>I am span 3.</span>
</div>
<div><span>I am single span.</span></div>
span:only-child{
color: red;
/* Only "I am single span." will be coloured red. */
}
<div>
<span>I am span 1.</span>
<span>I am span 2.</span>
<span>I am span 3.</span>
</div>
<div>
<div>I am simple div.</div>
<span>I am simple span.</span>
</div>
span:first-of-type{
color: red;
/* Only "I am single span." and "I am span 1." will be coloured red. */
}
<div>
<span>I am span 1.</span>
<span>I am span 2.</span>
<span>I am span 3.</span>
</div>
<div>
<div>I am simple div.</div>
<span>I am simple span.</span>
</div>
span:last-of-type{
color: red;
/* Only "I am span3." and "I am simple span." will be coloured red. */
}
<div>
<div>I am span 1.</div>
<span>I am span 2.</span>
<span>I am span 3.</span>
</div>
<div>
<div>I am simple div1.</div>
<div>I am simple div2.</div>
<span>I am simple span1.</span>
<span>I am simple span2.</span>
</div>
span:nth-of-type(2n){
color: red;
/* Only "I am span3." and "I am simple span2." will be coloured red. */
}
<div>
<div>I am span 1.</div>
<span>I am span 2.</span>
<span>I am span 3.</span>
</div>
<div>
<div>I am simple div1.</div>
<div>I am simple div2.</div>
<span>I am simple span1.</span>
<span>I am simple span2.</span>
</div>
span:nth-last-of-type(2){
color: red;
/* Only "I am span2." and "I am simple span1." will be coloured red. */
}
<div>
<div>I am div 1.</div>
<div>I am div 2.</div>
<span>I am span 1.</span>
<div>I am div 3.</div>
</div>
<div>
<div>I am simple div1.</div>
<div>I am simple div2.</div>
<span>I am simple span1.</span>
<span>I am simple span2.</span>
</div>
span:only-of-type{
color: red;
/* Only "I am span1." will be coloured red. */
}
<div>
<span class='c1'>I am span 1.</span>
<span class='c2'>I am span 2.</span>
<span class='c3'>I am span 3.</span>
<span class='c2 c3'>I am span 4.</span>
</div>
span:not(.c2){
color: red;
/* Only "I am span1." will be coloured red. */
}
Date() and Date.now() gives you:
"Mon Aug 23 2021 18:49:44 GMT+0530 (India Standard Time)" and 1629724786923 respectively.