CSS summary with html 2023

MARGIN

div {
background-color: #DDD;
padding: 10px;
width: 70%;
margin: auto;
}

BORDER
div {
background-color: #DDD;
padding: 10px;
width: 70%;
margin: auto;
border-width: 10px;
border-color: red;
border-style: solid;
border: 10px solid red;
}

-----------------------------------------------------------------------------------
-----
OUTLINE

div {
background-color: #DDD;
width: 300px;
padding: 10px;
outline: 10px solid red;
border: 10px solid blue;
}

DISPLAY
-----------------------------------------------------------------------------------
-----
/*

Block

- Take Full Width If No Width
- Add Line Break
- Respect Padding, Margin, Width, Height

Inline

- Do Not Repsepct Width, Height
- Respect Padding And Margin [ Just Wight + Left ]
- Do Not Add Line Break
- Allow Elements Before And After It in The Same Line

Inline-Block

- Allow Elements Before And After It in The Same Line
- Respect Padding, Margin, Width, Height

*/

span {

, background-color: #EEE;
display: inline-block;
}
-----------------------------------------------------------------------------------
-----
visibility

div {
background-color: red;
margin: 10px 0;
}
.first {
visibility: hidden; -> hides but keeps place of things that are hidden


.one {
border-bottom: 2px solid red;
color: red;
}
.two {
border-bottom: 2px solid green;
color: green;
}
.three {
border-bottom: 2px solid blue;
color: blue;
}
.four {
border-bottom: 2px solid black;
color: black;

-----------------------------------------------------------------------------------
------
GROUPING COMMON DECLARATIONS
}
.one,
.two,
.three,
.four,
.my-p {
padding: 15px;

-----------------------------------------------------------------------------------
------
NESTING

div .special {
color: red;
}
margin: 12px 0;
background-color: #ededed;
}
display -> none hides things
}

-----------------------------------------------------------------------------------
------

DIMENSIONS

,div {
background-color: red;
padding: 10px;
display: inline-block;
max-width: 400px; OR min-width
(stops or continues from a certain number using min and max)
}

width: fit content; (fits content inside it)



///overflow

overflow of text outside of element

types- overflow: hidden-auto-visible;
overflow-x overflow-y

-------------------------------
-------------------------------
-------------------------------
-------------------------------
------------------------------------

TEXT CHANGING IN CSS
-----------------------------------------------------------------------------------
------------------------------

text-align: center right left

text direction in page : ltr or rtl

if image next to text -> : vertical-align
(alignment of both next to each other) : middle-top-bottom

text-decoration: underline -linethrough -overline- none

transformation: for changing text lower or uppercase ->
text-transform: lowercase or uppercase


letter-spacing: 1px ...

word-spacing : 1px ...

text-indent ->space before text like in essays

line-height: height between sentences (good for eyes of viewers) -already there
automatically

-----------------------------------

---> want to change a sentence or a word alone?
put it in span element and change it alone

--------------------------------------

, word-break :break -word or break-all

white-space
--------------------------------------------text-overflow


div {
background-color: #ddd;
padding: 10px;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div:hover {
overflow: visible;
}


--------------------------------------------

inherit -> makes elements take some properties of father elements to save time
takes the change men maib element its inside of div -> div p



font-family -> check if font-family is web friendly and acccepted

.with-ser {
font-family: 'Times New Roman', Times, serif;
}
.san-ser {
font-family: Arial, Helvetica, sans-serif;
}
.with-ser,
.san-ser {
background-color: #EEE;
padding: 10px;
}

serif-> with edges
sans-serif -> without edges


-----------------------------------------
font-size:
font-style : italic -oblique
font-weight : bold




-----------------------------------------
button {
background: transparent;
border: none;
color: red;
font-weight: bold;