try.css

/**
-------------------------------------------------------------------------------
css have 3 main elements
selector{
	property:value;
}

1-you can select a whole tag like using element selector:
h2{
	
	
}
here all h2 tags will have the style priovided

2-also you can select a class , class is identified in html <tagname class="name"></tagname>
, it is used in c++ so all elements of class: name will be selected

.name{
	
	
}
here all elements of class name are selected

3- you can select using id , id is a unique defined id for one tag

#id{
	
}
 note id overrides class & class overrides element ;
 
4- inline selector is written in html , it overrides all mentioned selectors before & it is hardly used.
"!important" keyword makes the selector whatever where it was overrides any selector
-----------------------------------------------------------------------------------
the multiple & combined selectrors

1- we can select like 
h1,h2,h3{
	
}
here we selected the three elements all at once

2- 
div p{
	
}
the space here make the selected elements are the <p> tag inside the <div> tag

but it if it is like
div > p{
	
}
the tag<p> must be a direct child to tag<div>

3- 
div+p{
	
}
here we select <p> that comes after <div>

4- [width]
{
	
}
here we select all tags with attribute width
--------------------------------------------------------------------------------
pseudo element selectors:
div::front{
	
}
here we select elements after the div , it really doesn't exist but it will be just after the div so we can add content:""  to se it
::first-child{
	
}
means the first child
::nth-child(n){
	
}
select the nth child

there is a pseudo classes like:
::hover{
	
}
means when you touch or pass over the content of the tag
--------------------------------------------------------------------------------
Layout for webpage:

1-Block, for sections in a webpage
2-Inline, for text
3-Table, for two-dimensional table data
4-Positioned, for explicit position of an element
--------------------------------------------------------------------------------
short hand properties:
are properties where you can write more than a property like:
border: size stylr color;
padding: top right bottom left
and so all......
--------------------------------------------------------------------------------
Some attributes for box model:
background-color:
width:
height:
border-style:
border-width:
border-color:
border-radius: "radius of border corners" or "radius of x / radius of y"
padding:
margin:

min-width: this defines the minimum width 
max-width: this defines the maximum width
same exists for height!

To hide an element:
you can use visibilty:hidden;
or 
display:none;
-------------------------------------------------------------------------
there are some properties to make image as a border , you can find them online.
there are also some properties for box-shadow:inset offset-x offset-y blur spread-radius color.
--------------------------------------------------------------------------------
coloring systems
1-#rrggbb
2-rgb(r%,g%,b%)
3-rgba(r%,g%,b%,transparency)
4-hcl(hue%,sat%,lightness%)
5-hcla(h%,s%,l%,transparency)
--------------------------------------------------------------------------------
Positioning:
the default is static position: it gives them the html default position & not affected by tansitions
1-inherit: position of the parent div
2-absolute: relative to the whole page "body"
2-fixed: relative to the view port "seen part"
3-relative: relative to it's given position
4-sticky
z-index:
the layers of the page so the element of

floating:
doesn't have specific position , default is none
--------------------------------------------------------------------------------
overflow:
if it is hidden inside a div:
	any overflow will be cutten inside this div.
if it is scroll:
	the div itself will have a scroll.
--------------------------------------------------------------------------------
display: " property "
the properties for display are:
1- table: it affects the data inside the container of the table according to 
 - caption
  -row 
  -cell
  -column
  -etc
 check folder table to learn more!
2-flex:
it affects what is inside the container , make the width flexible untill the components width is reached
container attributes:
 1-flex wrap: it makes the objects go along cross"y" axis when width is less then total width
 2-flex direction: it is default as a row , if it is column the height will be the flexible one 
 3-flex flow : short hand for both wrap&direction
 4-justify-content: "center , stretch "default" , space evenly (equal space between them) , space between like evenly but no space with margins , etc..." 
 5-allign-items: have same properties but not height stretch
 6-allign-content: have same properties but appear in wrapping
item attributes
 1-order : it's order to appear , it's default 0 
 2-allign-self: just allign this item , not the whole container
 3-flex-basis: it takes the width or height of the flex display according to row-> width , column->height
 4-flex-shrinkig: when no wrap , will you shrink this item"1 else "0" and default is 1;
 5-flex-gow: when no wrap , will you grow this item"1 else "0" and default is 0;
 // note you can assign different values indicating the ratio of growth
 6-flex: short hand for "grow shrink basis"

 3-Display grid: 2d like table and regulate data like flex
, by default it have 1 column and number of rows=number of container items and doesn't apply to floating items.
 container attributes:
	1-grid template columns: takes values according to number of columns like : 100px 100px here 2 columns , each of 100 px width
	2-grid template rows: same as columns but for rows
	3-grid auto rows: it takes the height of the automatic rows made by the grid.
	4-grid auto columns: it takes the width of the automatic columns made by the grid.
	5-grid auto flow: it's default is rows , means that 1 column is created and rows are created automatic & inverse happens in case of columns written
	6-row-gap: height of gap between each row
	7-column-gap: width of gap between each column
	8-gap: short hand for both "row column"	
		--> some values used in columns and rows grid template
		1-fit-content(200px) here it will fit the content unitll width or height reach 100px then it will wrap
		2-min-max(100px,200px) here it will fil the content from min=100px and max=200px then it will pass the data
		3-repeat(4,"value") here it will make 4 equal columns with width or height value or repeat(autofill,width) makes number of columns just fills the screen
		4-fr here it will divide the columns or rows values using fraction so if : 1fr,2fr the second will be double the first
item attributes:
	1-grid-row-start:row number or name to start in
	2-grid-row-end:row number or name to end in
	number can be "span number"
	3-grid-row : short hand for row start and end "start/end"
	same exist for columns
	4-grid-area: short hanf for both row and column
	5-align-self
	6-justify-self
--------------------------------------------------------------------------------
Background:
1-background-color: solid color for background .
2-background-image: image for background , note if this image is small it will be repeated to cover the div.
3-background-repeat: it controls the repeat of the image with attributes : repeat - norepeat - repeat x - repeat y - round - round x - round y
4-background-origin: defines the box from which the background begins.
5-background-clip: defines the box from which the background is being cut.
6-background-positin: defines the alignment of the image of background : center-left-right-top-etc...
7-background-size: it's attributes are ->
	1-cover: makes the image cover all the div.
	2-contain: scales the image to the largest size such that both its width and its height can fit inside the content area.
8-background-attachment:
9-background: shorthand for all this.
--------------------------------------------------------------------------------
linear gradient:
it can be written for background image.
it takes colors.
it can take directions like : tobottom-toright-toleft-etc...
it can take pixels or length: which is length of colors.

radial gradient:
like linear one but with angles or circular and not linear.
see this:
repeating graients:
it takes beginning and ending for each color , it repeats the gradient untill filling the tag , not just filling it one time.
https://www.w3schools.com/css/css3_gradients.asp
--------------------------------------------------------------------------------
filter:
it applies to the div and most used for the properties of images , it's functions are:
	1-blur(value%)	
	2-brightness(value%)	
	3-contrast(value%)	
	4-drop-shadow(x , y ,blur , color)
	5-grayscale(value%)	
	6-sepia(value%)	// like gray scale or old films
	7-hue-rotate(value%)	// hue circle rotation
	8-opacity(value%)	//transparency
	9-saturate(value%)	
--------------------------------------------------------------------------------
for done shapes using gradient:
https://projects.verou.me/css3patterns/
--------------------------------------------------------------------------------
Fonts:
 fonts are important and make sure that the fonts exists on users devices , and I advice to use Google fonts which is web font 
 so it doesn't depend on user downloaded font or use famous fonts like arial which exists on most devices.
 -- you can also download the font and put it on the server of the web , this is most used with font icons like font awesome library.
 Here is how to put google font in your html,css code , starts at 6:00
 -->https://www.youtube.com/watch?v=MBq8ZFEIIaQ&list=PLDoPjvoNmBAzHSjcR-HnW9tnxyuye8KbF&index=1
	1-font-family:"f","f alt";
	 browser will get f if found else it will make the family= f alt.	"This is the generic family"
	2-font-size: px
	3-font-weight: bold or 800 "ExtraBold" , 400
	4-font-style: italic,
	5-font-stretch:
	6-font-synthesis:
	7-font-varient-position: can be sub-> like H2O or super-> like power
	8-font-varient-caps:
	9-font-varient-numeric:
	10-font-varient: short hand.
	11-line-height: height of text line
	-- it is better to get weight and style embedded in the font form the webfont as it will not be browser dependant
	@font-face{
	src:url("downloaded font location")
	font-family:"Give a custom name that you will use with this font"
	}
	-- you can define more than a font-face with the same family name and change the defined weight,style for them 
		so if weight is 100 for example the defined one for light will work and if 800 the extra bold with work
		, same for style.

	--there are font-types and differ in font-file extension , eot,ttf,woff,svg
		see font-types video on mahara tech.
		or read more:https://heyakash.medium.com/understanding-of-font-formats-ttf-otf-woff-eot-svg-e55e00a1ef2
	-- see this for font icons:https://youtu.be/EoIxR4cq-Ew?si=BlKrGyOxdXVPqZ8U
	-- the most famous library is font-awesome

	Text-styling:
		text-decoration: it cares about line and it has familiar properties we've know before.
		text-shadow: like box shadow but around text.
	Column-styling::
		just splits the text into columns & contains familiar properties.
--------------------------------------------------------------------------------
Transition:

note: if it is on the div it self this happens when hover and unhover but if it is on the pseudo class this happens on hover only.
	1-transition-property : defines the property to be trnasitioned when action is done like hover.
	2-transition-duration : time taken to transition.
	3-transition-delay: time waiting to start the animation.
	4-transition-timing-function: it is used to control how the time is distributed ex:
		1-ease-out: means the time of transition is less or faster at the end.
		2-ease-in: 	//	//	//	//	//	//	//	//	//	//	//	//	//    beginning.
		3-ease-in-out: faster at both begining and ending.
		4-cubic-bezier(x1,y1,x2,y2) points of the cubic curve of time..
			https://easings.net/
	5- transition: short hand for all this.
--------------------------------------------------------------------------------
Animation:
to create animation we write:
@key-frame name{
from{
 initial state
}
to{
 finatl state
}
}
or we can write it as
@key-frame name{
0%{

}
25%{

}
50%{

}
100%{

}
}
where percentage is of the time
then at the selector we use the following properties:
animation-name: name;
animation-duration: time which animation takes;
animation-delay: time to begin animation;
animation-timing-function:steps(number of steps to distribute time on)
animation-iteration-count: times to repeat the animation.
animation-directon: reverse-> will reverse the steps , alternate-> will go from 0 to 100 then from 100 to 0
animation-fill-mode:forward -> will keep the last step the final shape , backward
--------------------------------------------------------------------------------
transform :
transform-origin: detect the point of the origin point to transform from.

scaleX,scaleY,translateX,translateY,skewX,skewY,rotateZ
all of theese are functions written after transform for 2d:

rotateX,rotateY,prespective:how far from the screen,
all of theese are functions written after transform for 3d:

back-face-visibilty:it determines when rotation around x,y will backface be visible or hidden.
--------------------------------------------------------------------------------
https://developer.mozilla.org/en-US/docs/Web/CSS/content
see this for content to write in before&after pseudo elements.

https://www.w3schools.com/css/css_pseudo_classes.asp
see this for pseudo classes.
--------------------------------------------------------------------------------
 media quries & responsive design
 @media condition{
	
 }
 -------------------------------------------------------------------------------
**/
*{ /** this is a universal selector , used to put default values**/
	font-size:24px;
}
body{
	/** padding **/
	/** it is the inner spaces in the page**/
	/** top  right  bottom  left , non set value takes it's value from opposite one & if just one is wtritten all takes it**/
	padding: 10px 20px;
	/** margins **/
	/** it's usage is like padding **/
	/** it is the space left on the sides of the box so it can be negative**/
	margin: 5px;
}
font{
	color:white;
	font-size:16px;
	font-style:ariel;
}
.Links{
	color:red;
	font-size:18px;
	font-style:ariel;
}
.Heads{
	color:white;
	font-size:32px;
	font-style:ariel;
}
#win{ 
	color:green; /** green is just to identify that id overrides class **/
	font-size:32px;
	font-style:ariel;
}