elements element,element div, p Selects all
elements element element div p Selects all
elements inside
elements where the parent is a
elements that are placed immediately after
element
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target=_blank] Selects all elements with target="_blank"
[attribute~=value] [title~=flower] Selects all elements with a title attribute containing the word "flower"
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value starting with "en"
[attribute^=value] a[href^="https"] Selects every element whose href attribute value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every element whose href attribute value ends with ".pdf"
[attribute*=value] a[href*="w3schools"] Selects every element whose href attribute value contains the substring "w3schools"
:active a:active Selects the active link
::after p::after Insert something after the content of each element
::before p::before Insert something before the content of each element
:checked input:checked Selects every checked element
:disabled input:disabled Selects every disabled element
:empty p:empty Selects every element that has no children (including text nodes)
:enabled input:enabled Selects every enabled element
:first-child p:first-child Selects every element that is the first child of its parent
::first-letter p::first-letter Selects the first letter of every element
::first-line p::first-line Selects the first line of every element
:first-of-type p:first-of-type Selects every element that is the first element of its parent
:focus input:focus Selects the input element which has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects input elements with a value within a specified range
:invalid input:invalid Selects all input elements with an invalid value
:lang(language) p:lang(it) Selects every element with a lang attribute equal to "it" (Italian)
:last-child p:last-child Selects every element that is the last child of its parent
:last-of-type p:last-of-type Selects every element that is the last element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a element
:nth-child(n) p:nth-child(2) Selects every element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every element that is the second element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every element that is the second element of its parent
:only-of-type p:only-of-type Selects every element that is the only element of its parent
:only-child p:only-child Selects every element that is the only child of its parent
:optional input:optional Selects input elements with no "required" attribute
:out-of-range input:out-of-range Selects input elements with a value outside a specified range
:read-only input:read-only Selects input elements with the "readonly" attribute specified
:read-write input:read-write Selects input elements with the "readonly" attribute NOT specified
:required input:required Selects input elements with the "required" attribute specified
:root :root Selects the document's root element
::selection ::selection Selects the portion of an element that is selected by a user
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all input elements with a valid value
:visited a:visited Selects all visited links
Box Model
-------------------------------------------------------
Property description Example
----------- ------------- ------------------------------------------
Content it is the content of an element text
Padding this is the space between element conent padding , padding-top , padding-bottom ,padding-left , padding-right
and element border
border this is the border surounding an element border,border-color,border-style,border-width,border-top ect,,,
and it has properties.
margin Sets Space between elements margin , margin-top , margin-bottom ,margin-left , margin-right
starting from element border
Positioning
--------------------------------------------------------
Property description Example
----------- ------------- ------------------------------------------
position places elements on screen, absolute, fixed, relative ,static ,sticky
Values
-----------
absolute Elements positioned in relation to its
parent element.Taken out of the flow
of the page , parent must be fixed,
absolute or relative
fixed Elements are positioned in relation
to the browser. taken out of the flow
of the page it ignors scrolling
relative Shifts elements, this looks at where
element would have been and shifts it
from its spot. reserves the place where
element would have been before the shifting
great companion to absolute.
static All Elements fall in the normal flow of the page .
Default position. Except HTML TAG
sticky Sticky positioning is a hybrid of relative and
fixed positioning. The element is treated as
relative positioned until it crosses a specified
threshold, at which point it is treated as fixed
positioned.
Property description Example
----------- ------------- ------------------------------------------
float stacks elements horizontally in a left,right
particular direction,
top, left, right, specifies the offsets used in absolute, top:10px; left:10px
bottom fixed, and relative positions,
display sets how the element is placed in the block, inline, none
doc flow
z-index sets the stacking order of elements, z-index of 1 is below z-index of 2
overflow sets what happens to content outside
Text
------------------------------------------------------------
Property description Example
----------- ------------------------ ------------------------------------------
font-family font used font-family :Helvetica, Arial
font-size text size, font-size :60px, 3em
color text color, color :#000, #abcdef
font-weight how bold the text is font-weight :bold
font-style what style the text is font-style :italic
text-decoration sets a variety of effects on text, text-decoration :underline, overline, none
text-align how text is aligned text-align :center
line-height spacing between lines line-height :2em
letter-spacing spacing between letters, letter-spacing :5px
text-indent indent of the first line, text-indent :2em
text-transform applies formatting to text, text-transform :uppercase, lowercase, capitalize
vertical-align align relative to baseline, vertical-align :text-top
Borders and Lists
-------------------------------------------------------------------
Property description Example
----------- ------------------------ ------------------------------------------
border sets border style for all borders, in border: solid 1px #000
the format: border: (solid, dashed,
dotted, double) (width) (color),
border-top {sets border style for a specific border-top: solid 1px #000
border-bottom border (same property syntax used border-bottom: solid 1px #000
border-left for padding and margin, e.g. border-left: solid 1px #000
border-right margin-left)} border-right: solid 1px #000
list-style-type sets style of bullets, e.g. square outside, inside
list-style-position sets how text wraps when bulleted,
list-style-image sets an image for a bullet, list-style-image:url(bullet.png)
Flex
----------------------------------------------------------------------------------------------------------------
Property description Example
----------- ------------------------ ------------------------------------------
flex The flex property specifies the length of flex-grow flex-shrink
the item,relative to the rest of the flexible flex-basis|auto|initial|inherit;
items inside the same container.
display This defines a flex container; display: flex; /* or inline-flex */
inline or block depending on the given value.
It enables a flex context for all its direct
children.
order By default, flex items are laid out in the order: