<link rel="stylesheet" href="/style.css" />
<style>
div
{ color: #444;
}
</style>
<tag style="property: value"> </tag>
* all elements
div all div tags
div p paragraphs inside divs
div > pall p tags, one level deep in div
div + p p tags immediately after div
div ~ p p tags preceded by div
.classname all elements with class
#idname element with ID
div.classname divs with certain classname
div#idname div with certain ID
#idname *all elements inside #idname
a:link link in normal state
a:active link in clicked state
a:hover link with mouse over it
p::after{content:"yo";} add content after p
p::before add content before p
input:checked checked inputs
input:disabled disabled inputs
input:enabl denabled inputs
input:focus input has focus
input:in-range value in range
input:out-of-range input value out of range
input:valid input with valid value
input:invalid input with invalid value
input:optional no required attribute
input:required input with requred attribute
div:empty element with no children
p::first-letter first letter in p
p::first-line first line in p
p:first-of-type first of some type
p:last-of-type last of some type
:not(span) element that's not a span
p:first-child first child of its parent
p:last-childlast child of its parent
p:nth-child(2) second child of its parent
p:nth-child(3n+1) nth-child (an + b) formula
p:nth-last-child(2) second child from behind
p:nth-of-type(2) second p of its parent
p:nth-last-of-type(2) ...from behind
p:only-of-type unique of its parent
p:only-childonly child of its parent
@media screen and (max-width: 480px) { }
@media screen and (max-width: 600px), (max-height: 500px) {}
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: larger;
font: style variant weight size family;
text-align: justify;
letter-spacing: .15em;
text-decoration: underline;
word-spacing: 0.25em;
text-transform: uppercase;
line-height: normal;
background-image: url("Path");
background-position: right top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: yellow;
background: color image repeat attachment position;
border-width: 5px;
border-style: solid;
border-color: aqua;
border-radius: 15px;
border: width style color;
CSS animations allow one to animate transitions or other media files on the web page.
animation-name: myanimation;
animation-duration: 10s;
animation-timing-function: ease;
animation-delay: 5ms;
animation-iteration-count: 3;
animation-direction: normal;
animation-play-state: running;
animation-fill-mode: both;
Transitions let you define the transition between two states of an element.
transition-property: none;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 20ms;
Flexbox is a layout of CSS that lets you format HTML easily. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will "flex" to different sizes to fill the space. And overall, it makes the responsive design more manageable.
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: column wrap;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
order: 5; /* default is 0 */
flex-grow: 4; /* default 0 */
flex-shrink: 3; /* default 1 */
flex-basis: | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;
Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design layouts more easily and consistently across browsers.
display: grid | inline-grid;
grid-template-columns: 12px 12px 12px;
grid-template-rows: 8px auto 12px;
grid-template: none | grid-template-rows / grid-template-columns;
column-gap: line-size;
row-gap: line-size;
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: center;
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
grid-auto-flow: row | column | row dense | column dense;
font-family font of the element
font-style font style: normal, italic, oblique
font-variant set small-caps
font-weight use bold or thin characters
margin-bottom bottom margin
margin-left left margin
margin-right right margin
margin-top margin top
max-height maximum height of element
max-width maximum width of element
min-height minimum height
min-width minimum width
outline-offset gap between the element and the outline
outline-style outline style
outline-width outline width
overflowhide display or scroll if the content overflows its container
overflow-x horizontal overflow
overflow-y vertical overflow
paddingpadding between the element border and content
padding-bottom padding bottom
padding-left padding left
padding-right padding right
padding-top padding top
text-overflow the way how overflowed content is marked (ellipsis)
text-shadow text shadow
visibility visibility:hidden elements leave a gap
white-space how are white-spaces handled
width width of an element
word-break text breaking rules when text reaches the end of the container
word-spacing size of white space between words
word-wrap break long words and wrap onto the next line
z-index stack order of the element