Basics

sintax
selector{
property: value;
property2: value2;
}

Include external css file

<link rel="stylesheet" type="text/css" href="/style.css" />

Internal styles

<style type="text/css">
div { color: #444;}
</style>

Inline styles

<tag style="property: value"> </tag>

Clearfix

.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

Selectors

*all elements
divall div tags
div,pall divs and paragraphs(semua div dan paragraf)
div pparagraphs inside divs(paragraf di dalam div)
div > pall p tags, one level deep in div
div + pp tags immediately after div
div ~ pp tags preceded by div
.classnameall elements with class(semua element dengan class)
#idnameelement with ID(element id)
div.classnamedivs with certain classname(div dengan class tertentu)
div#idnamediv with certain ID(div dengan dengan id tertentu)
#idname *all elements inside #idname(semua element didalam idname
Pseudo classes

a:linklink in normal state

a:activelink in clicked state
a:hoverlink with mouse over it
a:visitedvisited link
p::after{content:"yo";}add content after p
p::beforeadd content before p
input:checkedchecked inputs
input:disableddisabled inputs
input:enabledenabled inputs
input:focusinput has focus
input:in-rangevalue in range
input:out-of-rangeinput value out of range
input:validinput with valid value
input:invalidinput with invalid value
input:optionalno required attribute
input:requiredinput with requred attribute
input:read-onlywith readonly attribute
input:read-writeno readonly attrib.
div:emptyelement with no children
p::first-letterfirst letter in p
p::first-linefirst line in p
p:first-of-typefirst of some type
p:last-of-typelast of some type
p:lang(en)p with en language attribute
:not(span)element that's not a span
p:first-childfirst 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-typeunique of its parent
p:only-childonly child of its parent
:rootdocuments root element
::selectionportion selected by user
:targethighlight active anchor

Attribute selectors

a[target]links with a target attribute

a[target="_blank"]links which open in new tab
[title~="chair"]title element containing a word
[class^="chair"]class starts with chair
[class|="chair"]class starts with the chair word
[class*="chair"]class contains chair
[class$="chair"]class ends with chair
input[type="button"]specified input type

Properties
align-contentbehavior of the flex-wrap property
align-itemsalignment for items inside the container
align-selfalignment for the selected item

allchanges all properties

animationbinds an animation to an element
animation-delaydelays animation start
animation-directionreverse animation or in alternate cycles
animation-durationanimation duration in seconds or ms
animation-fill-modestyle when the animation is not playing
animation-iteration-countnumber of an animation replays
animation-namename for the @keyframes animation
animation-play-statethe animation is running or paused
animation-timing-functionspeed curve of an animation
backface-visibilityis element visible when not facing the screen

backgroundall background properties in one declaration

background-attachmentis the background image fixed or scrolls
background-blend-modeblending mode of each background layer
background-clippainting area of the background
background-colorbackground color
background-imagebackground image
background-originwhere the background image is positioned
background-positionstarting position of the background image
-left top
-left center
-left bottom
-right top
-right center
-right bottom
-center top
-center
-center bottom
Mengunakan px ex: 50px 50px
Mengunakan % ex: 20% 50%

background-repeatthe way the background image is repeated

background-sizebackground image size
-auto
-lengt= berapa px
-persentase = menggunakan persen
- cover
-contain
-initial

bordersets all border properties in one line

border-bottombottom border properties in one line
border-bottom-colorcolor of the bottom border
border-bottom-left-radiusborder bottom left radius
border-bottom-right-radiusborder bottom right radius
border-bottom-styleborder bottom style
border-bottom-widthborder bottom width
border-collapseborder collapse
border-colorborder color
border-imagesets an image as border
border-image-outsetborder image area extends beyond the border box
border-image-repeatborder image repeated, rounded or stretched
border-image-slicehow to slice the border image
border-image-sourcepath to the border image
border-image-widthborder image width
border-leftleft border properties in one line
border-left-colorborder left color
border-left-styleborder left style
border-left-widthborder left width
border-radiusborder radius of the four rounded corners
border-rightright border properties in one line
border-right-colorborder right color
border-right-styleborder right style
border-right-widthborder right width
border-spacingborder spacing
border-styleborder style
border-toptop border properties in one line
border-top-colorborder top color
border-top-left-radiusborder top left radius
border-top-right-radiusborder top right radius
border-top-styleborder top style
border-top-widthborder top width
border-widthborder width

bottombottom offset for relative and absolute elements

box-shadowshadow to element
box-sizingbox sizing properties

caption-sideplacement of a table caption

cleardeny floating of an element
clipclip an absolutely positioned element
colortext color

column-countdivide the content in columns

column-fillbalanced fill or not
column-gapgap between the columns
column-ruleseparator between columns, like border
column-rule-colorcolumn rule color
column-rule-stylecolumn rule style
column-rule-widthcolumn rule width
column-spancolumn span
column-widthcolumn width
columnsset column-width and column-count

contentinsert content :before and :after elements

counter-incrementcount sections
counter-resetreset counter
cursorcursor type when element is hovered
directionwriting direction, Arabic is using rtl
displaybox display type
-inline
-block
 -contents

-flex
-grid
-inline-block
-inline-flex
-inline-grid
-inline-table
-list-item
-run-in
-table
-table-caption
-table-column-group
-table-header-group
-table-footer-group
-table-row-group
-table-cell
-table-column
-table-row
-none
-initial
empty-cellshide borders and background on empty table cells
filterimage effects: grayscale, blur, invert etc.

flexitem length, relative to others inside the container

flex-basisinitial length of a flexible item
flex-directiondirection of the flexible items
flex-flowshorthand for flex-direction and flex-wrap
flex-growhow much the item will grow relative other items
flex-shrinkhow to shrink the item relative to other items
flex-wrapwrap flexible items

floatfloat elements left or right

-left
-rigth
-none
-inherit

fontall font properties in one line

@font-facedeclare non-web-safe fonts
font-familyfont of the element
font-sizefont size
font-size-adjustcontrol font size if the first declared option is not available
font-stretchwiden or narrow text
font-stylefont style: normal, italic, oblique
font-variantset small-caps
font-weightuse bold or thin characters
hanging-punctuationcan a punctuation mark be placed outside the line box?

heightheight of the element

-auto
-leght ex: 50px dan seterusnya
-initial
justify-contentjustifies flexible container's items horizontally if necessary
@keyframesspecifies the animation code
leftleft offset for relative and absolute elements
letter-spacingspace between characters
line-heightline height of text or inline-block elements
list-styleall list properties in one line

list-style-imagereplace the list item marker with an image

list-style-positionlist item markers inside or outside the content flow
list-style-typeset the type of the list item marker
marginset the top, right, bottom and left margins in one line
margin-bottombottom margin
margin-leftleft margin
margin-rightright margin
margin-topmargin top
max-heightmaximum height of element
max-widthmaximum width of element
-none
-mengunakan px
-mengunakan persentase
-initial
@mediasee media queries
min-heightminimum height
min-widthminimum width
nav-downwhere to navigate when the the arrow-down button is pressed
nav-indexsets sequential navigation order
nav-leftwhere to navigate when the the arrow-left button is pressed
nav-rightwhere to navigate when the the arrow-right button is pressed
nav-upwhere to navigate when the the arrow-up button is pressed
opacitytransparency level of an element
orderreorder elements in a container
outlinedrow an outer border around elements
outline-coloroutline color
outline-offsetgap between the element and the outline
outline-styleoutline style
outline-widthoutline width
overflowhide, display or scroll if the content overflows its container
overflow-xhorizontal overflow
overflow-yvertical overflow

paddingpadding between the element border and content

padding-bottompadding bottom
padding-leftpadding left
padding-rightpadding right
padding-toppadding top

page-break-afteradds page break after an element

page-break-beforeadds page break before an element
page-break-insideallow page break inside an element
perspectivehow many pixels the 3D element is placed from the view
perspective-originwhere is the 3D element based in the x- and y-axis
positionpositioning type: absolute, fixed, relative, static
-static
-relative
-fixed
-absolute
-sticky
quotesset quotation marks to wrap an element
resizedeclare resizable elements
rightright offset for relative and absolute elements
tab-sizetab character space length
table-layouttable layout algorithm
text-alignhorizontal alignment of text
text-align-lasthorizontal alignment of last line of text
text-decorationoverline, underline or line-through the text
-overline
-line-through
-underline
-underline overline

text-indentindentation of the first line of the text

text-overflowthe way how overflowed content is marked (ellipsis)
text-shadowtext shadow
text-transformcapitalization of text
toptop offset for relative and absolute elements
transform2D 3D transformation. See widget.
transform-originchanges the position of transformed elements
transform-stylerender nested elements in 3D
transitiontransition properties in one line
transition-delaydelay before transition effect start
transition-durationtransition effect duration
transition-propertywhich CSS property is the transition affecting
transition-timing-functionspeed curve of the transition
unicode-bidishould the text be overridden to support more languages
user-selectdisable user content selection
vertical-alignvertical alignment
visibilityvisibility:hidden elements leave a gap
white-spacehow are white-spaces handled
widthwidth of an element
word-breaktext breaking rules when text reaches the end of the container
word-spacingsize of white space between words
word-wrapbreak long words and wrap onto the next line
z-indexstack order of the element

Color Picker

color: rgba(28,110,164, Transparansi);

background-color: rgba(28,110,164,0.9);
border: 3px solid rgba(28,110,164,0.9);
text-shadow: 1px 2px 2px rgba(28,110,164,0.9);
box-shadow: 2px 2px 7px 1px rgba(28,110,164,0.9);
Background

background: #D0E4F5 url("https://htmlcheatsheet.com/images/logo-css.png") no-repeat scroll 0% 0%

dapat menggukan px dan persen

0% 0% 50% 0% 100% 0%
0% 50% 50% 50% 100% 50%
0% 100% 50% 100% 100% 100%

X= px

Y= px

Repeat no, repeat, repeat-x, repeat-y

Attachement = scroll, fixed, local

Color rgba(208,228,245,0.76 transparansi)

Gradient

background: #1C6EA4;

background: -moz-linear-gradient(left, #1C6EA4 0%, #2388CB 31%, #144E75 100%);

background: -webkit-linear-gradient(left, #1C6EA4 0%, #2388CB 31%, #144E75 100%);

background: linear-gradient(to right, #1C6EA4 0%, #2388CB 31%, #144E75 100%);

Box shadow

-webkit-box-shadow: inset right down blur spread #000000;

box-shadow: 1px 17px 15px 23px #000000;

Button Generator

.myButton {

color: rgb(255, 255, 255);

font-size: 16px; line-height: 16px;

padding: 8px; border-radius: 11px; font-family: Georgia, serif; font-weight: normal; text-decoration:
none; font-style: normal; font-variant: normal; text-transform: none; background-image: linear-
gradient(to right, rgb(28, 110, 164) 0%, rgb(35, 136, 203) 31%, rgb(20, 78, 117) 100%); box-shadow:
rgba(0, 0, 0, 0.89) -2px -1px 26px 31px; border: 2px solid rgb(28, 110, 164); display: inline-block;}

.myButton:hover {

background: #1C6EA4; }

.myButton:active {

background: #144E75; }

Taxt shadow

text-shadow: kanan bawah blur rgba(28,110,164,trasparansi);

Boroder

border: 2px solid #1C6EA4;

style solid dotted dashed double groove ridge inset outset hidden none

position top right bottom left

border radius

border: 2px solid #1C6EA4;

font generator

font

size

leter spc

word spc

color

wight = normal bold

decoratoin = none Under over through

style = Normal Unset Italic oblique

variant = normal small caps

case = none Upper Lower capital

Trasfrom

transform: scale(1.1) rotate(13deg) translate(-6px, -7px) skew(10deg, -3deg);

reset css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,l
abel,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,d
etails,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,se
ction,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0;
font-size: 100%; font: inherit; vertical-align: baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,secti
on { display: block;}
body { line-height: 1;}
ol,ul { list-style: none;}
blockquote,q { quotes: none;}
 blockquote:before,blockquote:after,q:before,q:after { content: ''; content:
none;}
table { border-collapse: collapse; border-spacing: 0;}

media Queris

@media not|only mediatype and (media feature) {

CSS Code }
Link external file:
<link rel="stylesheet" media=mediatype and|not|only (media feature
href="mystylesheet.css">

Viewport is 480 pixels or smaller

@media screen and (max-width: 480px) { }

Viewport width smaller OR height smaller

@media screen and (max-width: 600px), (max-height: 500px) {

Print style
@media print { ... }

Night / dark mode

@media (prefers-color-scheme: dark) { ... }

Media types
all, print, screen, speech

Media features
widthviewport width
heightviewport height
orientationorientation of the viewport
aspect-ratioratio between width & height
colornumber of bits per color
color-indexnumber of displayable colors
monochromecolor on greyscale device
resolutionresolution of the device
scanscanning process of the device
griddevice is a grid or bitmap