Learning Resources
Indexes
- Selectors
- element, .class-name, #id, element.className
- [aria-hidden="true"] (selects elements with aria-hidden attribute with value true),
- div.row * (all child elements of div of class row)
- li > a (Only direct descendants, not all)
- li + a (Only the first a after each li)
- li, a (All a elements and all li elements)
- li ~ a (a element following a li element)- Cascading and Inheritance
- Last property is used for same element
- id > className > element
- inherit (Inherit parents property)
- initial (Sets to initial value of that property)
- unset (Resets the property to its natural value)- Box Model
- content, padding, border, margin- Position
- position: relative | absolute | fixed | sticky;
- top, right, bottom, left- Display
- display: block | inline-block | inline | table | flex | grid;- Flexbox
display: flex;
flex-direction: row | column;
flex-wrap: wrap | nowrap | wrap-reverse;
justify-content: flex-start | flex-end | center | space-around | space-between |
space-evenly;
align-items: flex-start | flex-end | center | space-around | space-between |
space-evenly;- Grid
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 120px;
gap: 10px;
column-gap: 10px;
row-gap: 10px;- Float
float: left | right;- Calc
width: calc(100%-20px);- Pseudo Elements
- p::first-line, p::first-letter
- p::after, p::before
- ::marker(marker of all lists)
- ::selection: color, background, cursor, and outline (on selecting text)- Pseudo Classes
- a:active (Selects the active link)
- a:hover (Selects links on mouse over)
- a:link (Selects all unvisited links)
- a:visited (Selects all visited links)
- input:checked (Selects every checked <input> element)
- input:focus (Selects the <input> element that has focus)
- input:disabled (Selects every disabled <input> element)
- input:enabled (Selects every enabled <input> element)
- input:in-range (Selects <input> elements with a value within a specified range)
- input:out-of-range (Selects <input> elements with a value outside a specified range)
- input:valid (Selects all <input> elements with a valid value)
- input:invalid (Selects all <input> elements with an invalid value)
- input:optional (Selects <input> elements with no "required" attribute)
- input:read-only (Selects <input> elements with a "readonly" attribute specified)
- input:read-write (Selects <input> elements with no "readonly" attribute)
- input:required (Selects <input> elements with a "required" attribute specified)
- p:empty (Selects every <p> element that has no children)
- p:first-child (Selects every <p> elements that is the first child of its parent)
- p:first-of-type (Selects every <p> element that is the first <p> element of its parent)
- p:last-child (Selects every <p> elements that is the last child of its parent)
- p:last-of-type (Selects every <p> element that is the last <p> element of its parent)
- p:lang(it) (Selects every <p> element with a lang attribute value starting with "it")
- :not(p) (Selects every element that is not a <p> element)
- p:nth-child(2) (Selects every <p> element that is the second child of its parent)
- p:nth-last-child(2) (Selects every <p> element that is the second child of its parent, counting from the last child)
- p:nth-last-of-type(2) (Selects every <p> element that is the second <p> element of its parent, counting from the last child)
- p:nth-of-type(2) (Selects every <p> element that is the second <p> element of its parent)
- a:nth-childe(odd) (Selects all odd elements of a given type)
- a:nth-childe(even) (Selects all even elements of a given type)
- a:nth-childe(3n) (Selects every 3rd anchor element)
- p:only-of-type (Selects every <p> element that is the only <p> element of its parent)
- (p:only-child Selects every <p> element that is the only child of its parent)
- :root (Selects the document's root element)
- #news:target (Selects the current active #news element )- Custom Properties
-CSS variables :root {
--background: "red";
}
element {
--main-bg-color: brown;
}
p {
background-color: var(--background);
}- Media Queries
@media (min-width: 600px) {
html {
font-size: 1.2px;
}
}
@media not|only mediatype and (expressions) {
CSS-Code;
}
- meidatypes = all | screen | print | speech | orientation
/* When the width is between 600px and 900px OR above 1100px - change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {}- Animations
transition: 0.2s ease-in-out alternate;
animation: animationName 0.2s linear infinite;
@keyframe animationName {
to {
}
from {
}
}
@keyframe animationName {
0% {
}
50% {
}
100% {
}
}-
Easy
-
Medium
-
Hard
