Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS (Properties (Text (color, direction:ltr/rtl, letter-spacing:0px;, line…
CSS
Properties
Background
background-color:colorname/#hex/rgb/rgba
background-image:url("../folder/img.ext")
background-repeat:
repeat(default)/no-repeat/-x/-y
background-attachment:scroll(default)/fixed
background-position: left-center-right/bottom-top-center {% %}
background : CIRAP :no_entry:
Text
color
direction:ltr/rtl
letter-spacing:0px;
line-height:normal/0px/%
text-align:left-right-center
text-decoration:line-through/underline-overline
text-endent:%; (space before text)
text-transform:lowercas/uppercase/capitalize
whitespace:normal/nowrap
word-spacing:normal/0px
font
font-family
if 3> words => " "
font-size: 16px(default)100%/small/large/xx-
font-style:italic/normal/oblique
font-weight:normal/bold/bolder/light/lighter/100-900
link
:hover(onpass)
:active(onclick)
list
list-style-type:disc
list-style-image:url("");
list-style-position:inside-outside
lsit-style: tpi
position(on the page)
fixed/relative/absolute
top:px / left:px z-index:numberof position of the element
el:after or before { content;"add text to html"}
float
none(default)
left/right
for disabling float use clear class with clear prop clear:left/right/both
or use overflow:hidden
concept
grouping(multiple class or elements)
el,el,el or .cl,.cl,.cl
Nesting (ta7did)
.class elem
Overflow:scroll/hidden/auto(scroll)/visible/fixed
Visibility : Hidden(same place as workflow)/None/visible(default)
Additionals
outline(border of the border but the outline is out the element)
cursor:change the cursor of an element
Selectors
div.parent elem
direct child : div > child(second route)
*:all
next : elem + elem
cibling: elem ~ cibletout
Pseudo classes
first-letter:
first-line
first-child
parent child :first-child
Attributes
In css : [htmlattr:"val"]
Media
media which apply css on
media
type [css]
Structure
typing
selector
{
property:value
]
Element styling
inline>internal>external
bas>haut
class + id > selectors
Declaring in html5
<link rel="stylesheet" href="" />
in html : type:text/css
<head><style> </style> (internal stylesheet)
<p style"" > (inline)
Every prop has a default value
Box Model
contianer/child
Border
Border-width:px
Border-style:
Border-color
Margin
top/right/left/bottom
structure : xyxy
auto : center
accept negative values
Padding
inside the box model
same as margin proprities
width
default:auto
min-width/max-width
for positioning element