There are three ways to add CSS in an HTML file
Inline CSS (like within a line we perform little bit styling)
Then there is internal CSS (this is done in html file inside the head tag and all the stylings are made
within style tag and as if I want to add up a let’s say style in <h1> tag I will just write h1{all styling here
like changing background color } inside a style tag)
Another method is external it is the most popular method to style the file in which a separate css file is
made and all the changings are done in that file also it can be reusable and we just have to link our html
file with css file using link tag just as given below
Ok now if I want to style changings in body I will write body and within curly braces I will do things for
styling also same with paragraphs
but if I want add up something like changings to only one paragraph and not to rest of the paragraphs I
will just make the id and call the things with their ids (#id)
If want to apply stylings in 2 or more paragraphs equally we will make a class of them
Fonts here:
Ok so usually we have to write 2 fonts so that if web-browser is not supportable than the other font will
be displayed.
Also can change font size, font weight (bold) and also font style (italic, underline)
Link Google Fonts with the html file:
Just go to google fonts and select a font of your choice, then click share button to copy link and then
paste in href like given below
We can also download the fonts and don’t need to add up any link html rather do the following in css
file font-family in font-face shows how the font will be called. And in src url you need to give the path of
the downloaded fonts
Borders
You can just add a border with border property and use short hand properties by just giving the values
of border-width(thickness), border-color, border-style (how border will look like {solid, dashed, double,
none etc.})
And if need rounded corners than used the property border-radius
We can just apply borders to the end or only to top or only to left or right according to neeed
Add Shadows to text and box
Ok so here first value of 3px is for horizontal shadow setting, 3px second value is for vertical shadow
setting, 3rd value of 5px is how much we need to set it as blur and forth will be the color
Then there is box shadow
We first need to give its length and height to create a box and then need to add the box shadow thing
there
Margin
It is an area outside of the text or element. As if we look above to heading 1 and paragraph it is not
directly connected with web browser it is due to the margin so if we want to eliminate that we will set
our margin to 0.
Float
It is used to wrap the image around the text. Otherwise image will be shown above and text will be
shown under that
But sometimes image flow out of the container or I should say it will be lil bit flowing towards other
elements and disturbing all the stylings so we just go to body and make it sure that everything that is
floating should remain at its own place
Overflow
If something is overflowing or moving out of the box than we need to handle it.
overflow: display (it means the content which is overflowing should be shown)
overflow: hidden(it means to hide the overflow content but if you will copy paste it will copy and paste
the whole content
overflow: clip-margin: 13px (It means you r allowing 13px of the overflowing data to be shown and rest
will reman hidden)
overflow: scroll: the box or container will generate a scroll-bar to show all of the content by scrolling it.
But if scroll-bar is not needed it will be still shown but will be disabled
overflow: auto this mean that the scroll bar will be shown if needed and will not be shown if its not
needed.
Display
Ok so already know that div takes all the width and span just takes that space needed to it
In inline we cant set the width and height as it just take the space needed for it but in block element we
can add hight and width to insure that the element contains that much specific space
So its how our text is going to appear with things
display: inline will wrap the text after it as it takes only necessary space
display: block will take all the width and will not allow the other text to wrap around till its width and
height is set
display: inline-block this means the things are inline but we can set their height and width
display: none it will show nothing like the element do not exist
display: hidden it will hide the things but there will be space which will show that something is hidden
there
Position
Relative: sets the text where it should be it can have height and left or right attribute
fixed: sets the element to 1 position and you cant change it all of the text is always under it it has
bottom up right left attributes
absolute: if there is box 1 with relative position and box 2 insideee the box 1 has absolute position this
means it will be fixed inside the box1 but when box 1 moves as it is in thee box1 it will also move but
remain at the same position inside the box 1
sticky and fixed are almost same both remain at same position
static is the default position of an element
Website Bg is an image
Same as above download an image (high resolution) place it in your folder and the go to body in css use
background-image: url(image address) and there you go
If image is smaller and not high resolutional so need to change the following things
Combinators
Ok so it tells the relation between elements.
Pseudo classes
These are the classes which perform something depending on mouse events such as if the cursor is on a
button it will change the color of the button so this will be set in hover class and if we need to do
something with a button if it is pressed it will be done in active class
Link is also a pseudo class
Not (:hover) will do the opposite of hover
It will select that item which will be in parenthesis. Nth-child is also a pseudo class
If want to select even elements, write even in parenthesis
For every 3rd element selection write 3n
And if need to start with 1 while selecting every 3rd element write 3n+1
Pseudo elements:
If need to add properties only on first word then will use pseudo elements
Selection will change the styling of selected text
We can change the bullet of unordered list using marker pseudo class and just put any shape at the
place of content
Pagination
Dropdown:
body{
background-color: rgb(183, 247, 80);
}
.dropdown{
display: inline;
}
.dropdown button{
font-size: 16px;
padding: 8px 10px;
background-color: hsla(160, 89%, 21%, 0.966);
color: rgb(154, 231, 206);
cursor: pointer;
}
.dropdown a{
display: block;
padding: 10px 20px;
text-decoration: none;
background-color: hsl(210, 9%, 77%);
font-family:cursive;
}
.dropdown .foodName{
display: none;
position: absolute;
box-shadow: 10px 10px 30px rgb(110, 110, 110);
max-width: 150px;
}
.dropdown:hover .foodName{
display: block;
}
.dropdown:hover button{
background-color: rgb(49, 8, 88);
}
.dropdown a:hover{
background-color: yellowgreen;
}
Flex
It will set the things to row or column or row reverse or column reverse according to need. If it was row
it would n 1 2 3 4
Justify will set the element to left but will not change the positioning of them as flex-direction has done
Space between will assigns each element a uniform space
Space around will include the ending areas or margins also
Justify is used for x-axis
Align is used for y-axis
If you ran out of space and eleements are more than can use flex-wrap property
align-self property can be applied on a single element
order:1 will change the order of box 1 to end and -1 to start
then there are tranformations (scaleX or scaleY(12px), translate(x-axis,yaxis), rotationX or rotation or
rotationZ(13px), skewX or skewY(45deg)) and animation
For changing colors in animation
For glowing effect
For performing animations infinitely use animation-iteration-count property and to work like doing
iteration from left to right to left or alternatively use animation-direction
The stop motion effect
