cssvalidator is used to check if there's any errors in the css file, since css

doesn't tell you there's errors.

class start with a period ".".
for id, use #.
class is better to use than id.
you can use more than one selector, like:
h1, h2{
color: blue;
}
if you want to select an element that is inside another element, you can do:
p span{
whatever you wanna do..} #any span that is in P will be affected. another
approach which is better is to give the span a class like <span class="highlight">
and then in the css, you can do .highlight{
whatever }
universal selector: *{
....} affects everything.
classes are more specific than using just a selector and they would take
precedence, they will be the one the will actually be applied.
if you use the universal selector, then it will be applied to everything, even the
lines, this is different from using body selector, like if you use border while
using the *, then there will be border around everything, even the lines.
there's the main element, it should appear only once per page. but not everything
is included in the main, like it doesn't include headers or footers. elements are
the least specific, class more specific, id the most specific, the more specific
something is, the more chances that it will be the one to be applied.
for ex if you are applying some effects to a paragraph, one throung a selector and
the other using a class, the class will override the selector.
background for background color, color is for font color.
you can use rgb() for colors, but also you can use rgba(), the fourth value is for
transparency, if it is set to 1, the text will completly disappear, if you put it
at 0.5, then it will just be visible.
if you wanna check if your background matches with the color text, you can use the
coolors.ca and then choose the contaster option.
if you set the font size for something, then the browser settings will not be able
to change the size, for ex if you change your browser setting to bigger font, if
you had set the font size, it will not get bigger, but if there was not any font
size set, then it will affect the text, and it will get bigger.
the percentage is always relative to something else.
rem : typically used for font size. 1rem is like the default size of the font for a
browser, 2rem is 2 times bigger than the default size.
ch is a measurement that can be used when working with width in texts, so if you do
like width : 40ch, it means that each line, there shouldn't be more than
40characters.
if you want the body element to include the whole page and not only until the
content, you could do sth:
body{
min-height : 100vh #viewheight}
if you wanna get rid of all the default margins, you can do:
*{
margin :0;
padding :0;
box-sizing: border-box;
} also called css reset.
outline is another property that is similiar to border, if you use it, it will
surround the border, and you can use outline-offset to give it a distance from the
border, positive values will give space between outline and border and negative,
will bring the outline inside the border. It has the same settings as border, like,
you can do: outline : 5px dashed blue;
if you give some div a margin, you can use the keyword auto, to center it
horizontally.
#example margin:#top 0 (will center it left and right) auto #bottom margin 0;
you can make a circle, if you have a div, using border radius, you just have to put
it to half the width of div, and half the height of it and yes, widht and height
should be equal to make a perfect circle.
if you select a body in the css, and do something, not everything in the body will
inherit it, like button or form will not inherit the effects that you do in the
body, what you can do is to specify button, form {
the effect that you did : inherit; #this will inherit it from the
body}.
shelf+ALT+A to comment a block of code.
text-transform : capitalize(first letter big) or lowercase or uppercase.
if you wanna indent the first line of a paragraph, use text-indent.
line-height: the bigger it is, the more space between lines.
letter-spacing: the space between letters.
word-spacing: the space between words.
styling links: (a tags){
to give it an underline, you can use text-decoration:underline.
the color of the link can be set by color. (default is blue).
so if you set the color to anything, then the visited link color which is usually
purple will change, but it's fine you can change it to purple manually.
if you want to change the mouse when it is on the link, use curser : pointer;
a:visited{
color:purple;} #back to default haha
a:hover {
color : anycolor you want;}
a:active { #when you click the link
color : anycolor;} #remember the order is important here, first a itself, then
a:visited, then a:hover and etc..
another important pseudoclass is a:focus, you can put this with a:hover together,
doing this will able you to go through the links when you press Tab (it outlines
the link), without using the mouse, you can do sth like:
a:hover , a:focus{
color :anything;}
opacity gives transparency to anything.}

list styling{
for ordered list:
list-style-type : lower-alpha; # the order of items will be alphabets, you can
also choose decimal.
you can also style ordered list in html, so somthing like this:
<ol start="3" #the ordering will start from 3 reveresed#will go down 3 2 1 >
you can also give the list items value, and then it will affect the bullet
points.
for unordered list:
list-style-type : square; # the list items will have a square before them.
if you text-align : center, then only the list items will be centered and the
bullet points will stay the same, to change that, use list-style-position : inside
#will put the bullet points just before the list items and outside is the default.
you can use any of line-height, letter-spaceing and anyother typography property in
here to style your list.
you can use an image instead of the bullet points, using list-style-image :
url("the path");
now imagine that you have both ordered list and unordered list in your html, and if
you do:
li{
color : blue;}
all list items will be affected, doesn't matter if it is ul or ol. if you want to
just change list items of ul you can do:
ul li{
anything}
but what if you want to change just the second list item of the unordered list, you
can use the pseudoclass here, something like:
ul li:nth-child(2){
anything}, will change just the 2 list item, you can also pass odd or even.
pseudo-element always start with two columns:
::marker{ #can affect the bullet points or numbers in case of ol
#only affects the bullet points not the list items.
content : "only $5 >>" all the bullet points will be replaced by this.
}
Display:
relates to wheter something is a block level element or inline level element.
Block level elements have 100 percent width (of what is available to them)and they
will create new line and if you have more than 1, they will stack on top of each
other, they also have some default margins. for example, the main is a block level
element, and if you have a P inside the main(which is also a block level element),
then The P will have 100 percent width of the main's width, since it's inside main.
If you change the width of the main, the widht of P will also change.
IF you have a span element in your P, then that span is an inline element, inline
elements can't be given a margin or height, if you give it, nothing will change,
you can apply padding, but if it is too big of a padding, it might overlap other
elements before it or after, so to fix this, you can use the display property, if
you use inline-block, then if you give it padding, it will not overlap other
elements before it, you can also give it height and margin now. remember inline
elements do not stack on top of each other.
list items are block elements and a tags are inline elements by default.
and if you have a couple of inline elements in one line and want to only apply
margin to left and right not top and bottom, you can do:
li{
display : inline-block; #this will put all list elements in one line
margin-inline: 0.5 rem;
}
by the way, if you put the display to none, the element will completely disappear.
Floats:
imagine you have a Div and then some paragraphs afterthat, and assume that the
div is a perfectly shaped square, since both the div and the paragraphs are block
level elements they will be put sequentially on top of each other, or in other
words they will stack on each other, now what if you didn't want that, what if you
wanted the first paragraph after the div, to be put to the left of the div or to
the right, well that's where you can use the float property, so you just need to
select that div with a class or sth, and then say float: left; which means that the
div will be on the left and the text will be on the right or the other way around.
However the text might be very close to the div, if you want some space between
them, you might think to select P and add margin but that won't work, what you can
do is that inside the div that you selected you can add margin to add some space
between them. Another problem might be if you want just the first p to be on the
right or the left of a div, and right now, the begining of the second paragraph is
also floating, and you might not want that, one way to resolve this issue is to use
the clear property, so create a new div after the first P and before the second P
and give it a class so you can select it, then do clear: both # to clear any
floating whether if it is to the right or to the left and now the second paragraph
will only start after the first div and it will not be floating anymore.
but this might not work if you want to have the div and the text in a container
with border around them, and clear might still work if the text is at least as long
as the div element inside the container, the other way you can fix this is, inside
the container class for this, you can use the overflow property, like overflow:
auto; and the better way is display : flow-root; and this will make sure that the
div element will be inside the container and it is not overlaping other elements
after it.

Columns:
so imagine you have 5 paragraphs and they are inside a container(for ex a section
tag) and the section has a class, what if you wanted just the 4 paragraphs to be
displayed in columns like a table, well, what you can do is to just put that 4
paragraph inside that section and then select it in css with the class or id and
then say column-count : 4; since there's 4 paragraphs in section, then there will
be 4 columns so 1 p per column.
If you want each column to have a certain width, no matter the screen size(if you
don't set this, for different screen types, widht will be different which might not
be something you want.), you can use column-width :for ex 250px; this means that
each column should be at least 250px; remember the number of columns may be reduced
if the screen is smaller, but the width of the column that is shown in screen,
won't be less than that certain width that you set using column-width. The shortuct
for this is to just use columns: 4#fourcolumns 250px#the width;
column-rule: 3px solid #333; #same as border, it will give each column a border, if
the columns disapear, the borders will disapear too.
to add space between columns, you can use column-gap: 3rem; will add space between
columns.
unicode-table.com/en/ is the site where you can get symbols, quotation marks,
emojis. so just click on the symbol and copy the html code that it gives you, then
you can use it in your paragraph, just remember that after the symbol's code there
should be a semicoloumn ";". for example, you want to highlight a quote that
someone said, so you want it to be surounded by the quotation marks, so here you
can use that site. Now how this relates to columns, what if you wanted a quote to
be in the middle of the column between the Paragraphs, like on magazines, so you
can do this, first you should put the Paragraph with the quote inside the section
that is using columns property and then select it in css and use the column-span:
all#it will span all columns in the page. Now we still have to think about what
will happen if the screen is small and the quote that is spanning the columns get's
werid, like if you have a quote "where's my car?" -the Someone, then if the screen
gets smaller then, you might see the "-the" part in one line and the "someone" in
other line, which is not something you want to see, you want it to go to the next
line all together, not just the "someone" part, to fix this, in the html file, use
the span element to wrap the part of the text that you don't want weird thing to
happen to it and give it a class so you can select it in css, select it and use
white-space :nowrap; this will ensure that the weird thing will not happen and that
the "the someone" will not be broken into two lines.

Positions:
Static: the default for everything.
absolute: if the div or element that you are applying the position property to
doesn't already have a parent(meaning that it is not inside another container or
div or element that has its position set to relative), then that element will be
positioned according to the web browser or the body(basically), so if you set the
position to absolute and then say top:0; that mean that the top margin for this
element will be 0 and it will stick to top of the body or the webpage or if it has
a parent to the top of its parent element. And if the element or div has a parent
and that parent has another parent and both of the parents have their position
property set to relative, then if you set the position for this element ot
absoulte, then it will be positioned according to its nearest parent.
relative: the same as absoulute except you don't have to set the parent to have
the relative position, if you set the position of an element that is inside another
div to relative, then its parent position will automatically be set to relative.
fixed: is always relevent to the body or the webpage, just like absolute
positioning if it didn't have a parent, but the difference is, once the position is
set, if you scroll down the page, the element with fixed position, will just stay
on its place on the screen, everything else will move, but that will not move.
Also, if you have two divs with different backgrounds, and they overlap with each
other, what will be on top, is determined by what comes first in the html, so if
you have div A and you have div B and you want div A to be on top of div B and not
the other way around, you should put div B first and then div A and that way, div A
will be on top, but that is not convenient, that's why you can do this in css too,
all you have to do is to go and select div A and use the z-index property by
putting it to 1 (0 is the default value) and that will make sure that it will
always be on top.
sticky: search it up
Flexbox:
in order to see, what we can do with flexbox, we first need to have some setups.
So imagine you have a main tag in your html with a class=container and inside this
main, you have 5 or 6 divs each with class=box. then when you are
styling .container, normally the divs will stack on top of each other, since they
are block-level elements and take up 100 percent width, but if you put display:
flex, things will change, for one, anydiv or property inside the container will
become flex items. and the divs will be put horizontally instead of vertically.
justify-content: flex-start; this is the default position of divs when we say
display: flex, so if you do justify-content: flex-start you will not see
anychanges.
justify-content: flex-end #they will be put in the opposite of where they were with
flex-start. justify-content: center will center them horizontally.
gap: 1rem; will make space between each flex item.
justify-content has some other options which are easy to understand by their name.
align-items # the opposite of justify-content, it will adjust position vertically.
align-items : flex-start; this is again the default pos when you set the display to
flex. flex-end will put it in the opposite side. center will center it vertically.
you can also change flex-direction, or the direction in which the flex items are
put, by default they are put in row, but you can change flex-direction: column, and
this will make it so that the flex items are put on top of each other in one column
and then you can adjust justify-content and align-items appropriately. you can also
give the flex-direction: row-reverse; will reverse the flex items, and yeah there's
column-reverse too. Another problem that you want to solve is, that right now, with
these mentioned settings our flexbox will not adjust itself if the screen got
smaller and as a result we might end up not seeing some of the divs at all, because
the screen is too small and flexbox is not making itself smaller, you can solve
this by flex-wrap: wrap;
you can set the flex direction and flex wrap using a shrotcut, flex-flow: here the
flex direction flexwrap;
align-content # can take the same values as the justify content and it is used to
align rows.
you can also set properties on flex items individually and that will also change
the flex box.
Now you can make each of the flex items a flex box. imagine they all have a number
inside of them and you want to center that number, you should first select that
flex item and set its display to flex to make it a flex item, now anything inside
that box will be another flex item, including that number that you want to control.
then you can center it with justify-content and align items.
now, till now, we were working with more than 2 divs, now if we remove all those
other divs and only leave 2 divs and if we remove the min-width or comment it out,
then the divs will only have enough width to fit the number inside of them, so if
you give them flex-basis: 100px; both will have a width of 100px, now you might
think that flex basis is the same as min-width, but that's not the case. another
property that is used with flex-basis is flex-grow, which should come before flex-
basis, and if you put flex-grow to a value like 1, and if all of the divs have the
same class name, and you are selecting that class name and applying these
properties, then that value of 1 means that if they need to grow to fill out the
page, then all the divs (or just 2 divs in this case) will grow the same, and when
you set this, you will see that the width changes and now you get why I was saying
the flex-basis is not min-width. now you might be asking what is flex-basis for
exactly, well imagine if you select only the second div by doing sth like:
.div:nth-child(2) { #select the second div, div is nameofclass
flex-grow : 2;}
so basically if you select the second div and overwrite its flex-grow value, and
set it to 2 instead of 1, that means that the second div will grow twice as faster,
so you might imagine that after you set this, the second div should take double the
space, will this might not be true and that's because of the flex-basis, see
because you set the flex-basis to 100px, that means that no matter the value of
flex-grow for each of the boxes, they both will have at least width of 100px, but
after that, the div that has flex-grow of 2 will get twice as much as extra space
left than the div that has flex-grow set to 1.
the next important property that we have to consider is the flex-shrink. for this,
if you have the flex-wrap set somewhere, you should go and set it to nowrap,
because it shouldn't be active for shrink to work, now you can think of flex-shrink
as the opposite of flex-grow, so imagine the previous example but with flex-shrimp,
since the second div's flex-shrink is set to 2 and the first one is set to 1, if
the divs are taking up the entire screen (you might have to increase flex-basis for
this), and then if the screen gets smaller, the second div will shrink twice as
faster as the first div and they will not shrink below the flex-basis, that's their
limit.
now there's a shortuct for all of this, it's just called flex,
so you can do:
flex: 1 1 250px; #the first value is flex-grow, second is shrink and third is flex-
basis.
the last flex property that we are gonna cover is order property, this can change
the order of a flexitem.
for ex: you have 6 divs all on the center horizontally and vertically and you want
to change the position of the second div, like for ex you want it to be instead of
the 6th div, then 2nd div's current placement value is 0, if you want to move it
instead of the 6th div, you have to select the second div and set its order to 4,
since 0+1 will get it to be instead of the third div, 0+2, will take the place of
the fourth one and ..0+4 will be the sixth position, if you set the order back to
0, it will come back. and if you set it to -1, it will replace the first div's
place.
to work and practice with flex box, there's a website called flexboxfroggy.com that
has gamelike challenges that are fun.

Grid:
same as flexbox, grid is another way to move objects around in screen, imagine
you have a html file, there're 6 divs all with the same class name, and they are
all inside another class called container, now normally as divs are block-level
elements, they will have 100 percent width of the screen and would stack on top of
each other, now if you select the container class that has all the divs, you can
start applying grid properties from there and since all divs are children of
container class, if you set properties here, they would inherit it. if you set the
display to grid, all of those divs will become grid items, now you will not see
anychanges yet.
another property is grid-auto-flow: row# which is the default version, and it means
that all the grid items be like rows, and if you set it to row, you won't see any
changes, since they are already like that before but if you set it to column, they
will stick to top of the screen and now we have 6 columns one for each divs, but
this property doesn't give us enough control or a lot of things will be set
automatically this way, which we don't want most of the times, so we can use other
efficent properties.
instead what we can use is
grid-template-columns:200px 100px 200px # this way we can assign a width for each
of the columns, notice that we had 6 divs and I only gave 3 widths, that means that
there will be 3 columns and 6 divs, you might ask how? well, they will stack up on
each other to fit in three columns, now ofcourse you could give 6 widths if you
wanted 6 columns. another measeure you can use which is very popular too, is the fr
or fraction measurement unit, so basically if you say grid-template-columns: 2fr
2fr 1fr, this means that the screen will be divided into 5 parts, 2 parts will be
given to first column, 2 parts to the second column and 1 part to the third one,
it's just easier.
now what if you want all the columns to have the same width, now it is easy to do
that if we have 2 or 3 columns, but what if we have more than that, writing the
same value for each column, would take space and time, an easier way would be to
use repeat() function, so you can do grid-template-columns: repeat(4, 1fr) # means
4 columns and each 1 fr.
you can also do something like, repeat(2, 1fr 2fr), now if we only have 2 divs,
this means that we will have 2 columns and first one will width 1fr and second will
2fr but if we have like 4, then we could look at this as a pattern that will be
repeated as long as there's colums remaining, so again for 4 columns, 1 column
will be 1fr, 2 column will be 2fr, and then the pattern will restart, third would
be 1fr and fourth will be 2fr.
all we did up unitl now was to style the columns, we can style the rows, with grid-
auto-rows, if we set it to something like 200px, the height of each row, will be
set 200px. another way you can do this is to use minmax function. so
minmax(minimumheight, maximumheight), if you set maximumheight to auto, that means
that it will be whatever the height of the container class is, if the height of the
container class is set to be 200px, the maximumheight=auto means that the maximum
height of the row, will be 200px, but the row will not get shorter than
minimumheight.
row-gap : 1em; #if you have more than one row, there will be a gap between them,
same with column-gap.
now as I said, since we applied grid properties to container class, the children
which are the divs inherited them, now there are some properties that you can apply
to each grid item, for example you want to select the first div only and apply some
grid properties to it.
.box:first-child {} #how to select the first.
grid-column-start: 1;
grid-column-end : 4;
so if you set these two properties to a grid item, what will happen is that this
grid item will now be taking up the space of 4 columns. now let me explain, since
we have 6 divs, and we set 4 columns with the minmax(2, auto), we will have two
rows, the first 4 divs will be on the first row, and the last 2 divs will be on the
second row, under the first and the second row, now if you set these two properties
to the first row, then this grid item, will take up the space of itself obviously,
take up the space of the second grid item, the third grid item or div, and
everything else will be pushed and we will end up with 2(complete) rows. or in
other words, the first div will start at the first column and end befor the fourth
column. we can do the same with grid-row-start and grid-row-end and this time it
will take up the space of rows(increase the height of the div) and push other rows
further down. shortcut for these are:
grid-column: 1 / 4; #start at 1 and end at 4.
grid-row: 1/3; #start at 1 and end at 3.
Now, the same as the flexbox, here you can also make a grid-item a grid itself,
select a grid item and set its display to grid, with doing this, you can control
whatever content you have inside the div, imagine there's a number and you want to
center it inside the box. align-content has the same values here, center end start
and justify content too, if you set both of these to center, whatever is inside
will be centered. the shortcut for both of these are place-content: center center;
the first one is align content, the second one is justify-content.
the last important thing about grids is grid areas and it's just easier and better
to watch it on video on https://www.youtube.com/watch?v=OXGznpKZ_sA&t=15128s
starting from 4:37:24 onwords.
and yeah that's grid layout, and just like flex-box, there's a game where you can
practice grid with, its on cssgridgarden.com.