CSS stands for Cascading Style Sheets

Selector defines the html element on which the styling is applied

The declarations are separated by semi-colon ;
There are three ways to add CSS into html, inline, internal and
external

Inline CSS:
A inline CSS is written using style attribute inside an html element , it
can apply styling to a single element.

Internal CSS:
In an internal CSS , we use style tag in the head tag, which can be
applied to the current html document but not all others html
documents

External CSS:
In an external CSS, we use separate file to include the CSS file in the
html, which can be reused for many documents.
Cascading means which style should be applied to the elements
when multiple styles are used.
We have inline>internal==external
Internal and external have same preference, but if we use internal
first and used external(last) last, the external will applied and vice-
versa

Selectors in CSS:
Selectors are nothing but the html elements on which we apply the
styling, we have 3 selectors Element selector, class selector and id
selector
1)Element selector: we use the elements like h1, p

2)Class selector: In class selector we use class attribute followed by

class name, we use .(period) character to access the class, there can
be multiple classes given to tag by adding space
3)id selector: In id selector we use hash character (#) to access the
html element, it selects only one element unique with id attribute

Grouping selector: sometimes we need to apply style to multiple

elements, instead of having redundant code we can group them
using the ,(comma)

Universal Selector: it applies style to all html elements, * (asterisk)

Specificity defines which style should be applied to the html
elements when multiple styles are their on a single selector
Inline>id>class>element
Inheritance in CSS:
Inheritance in CSS is used to apply the style of parent to the children,
if children don’t have anystyles.

CSS inheritance can be inherited for font family like (color,

weight,size)
It cannot be inherited for height, width, margin, padding, but we can
also inherit them by using the inherit keyword, but only the direct
child elements are inherited.
BOX model in CSS:
Box model describes the layout of the html elements, a css box
model consists of content, padding, border and margin
Background in CSS:
CSS background properties are:

Background image:
Background-repeat: By default the background-repeat works for both
horizontal and vertical direction.
Background-size:
Background-position: By default it is placed at top-left
Background-attachment:
Border:
The border is used to set the elements border, CSS border specifies
you to set the element’s width, style, colour.
Text align and direction:
Text-decoration:
Underline
Overline
Line-through= cut the text
None= removes the text-decoration, basically used for anchor tags
Content overflow in CSS:
Overflow: overflow property specifies what happened if their the
content is more than the box size such that it becomes overfit.
Units in CSS:
For some CSS properties negative values are also allowed for example
margin
There are two types of length units:
1)Absolute: absolute units are fixed length of an element, but not
recommended to use as screen size vary.
Eg: cm, px, mm
2)Relative: these specify the length related to another length
property
Font-weight:
The thickness of our font, we have bold, lighter and the value varies
from 100-900
Font-family: The handwriting for our text
Line-height:50px|normal;
The distance between two lines
Text-transform:lowercase|uppercase|capitalize
Border-radius: This is used to round the edges of the element’s
border
Border-radius:50%|10px; 50% mean to make circle
Padding:
Padding-top|right|bottom|left
Margin: This is similar to the padding , but this is distance between
one box and other box

Level-3
Units in CSS
Relative: %,em,rem
Percent(%): It is often used to define the size relative to its parent
object
Width:33%;
Em: the size depends on the parent
Fontsize:3em; means 3 times of parent’s size
Rem:font size of root element like in body it have default 16px
If we use font-size:5rem; means 5*16=80px
Vh:viewport of height
1vh means 1 percent to horizontal height
vw: viewport of width

Position Property:
The position property sets how an element is positioned in a
document
Position: static/ relative /absolute/ fixed
Static: default position (The top, right, bottom, left, z-index have no
effect)
Relative: element is relative to itself (all above properties will work)
Absolute: positioned relative to its closest non-static ancestor

Fixed: positioned relative to browser

Sticky: positioned based on user’s scroll position

Z-index: It decides the stack level of elements

Overlapping elements with a larger z-index cover those with a
smaller one
Background image (unsplash.com is used to have free images)

Background Size: cover/ contain/ auto (By default)

Cover: This will fit in the box without having any empty spaces, we
use cover only more
Level-4 (Flex Box)
Flex box is a one dimensional layout method for arranging items in
rows or columns, if we set display: flex; for any container then it will
become flex container

This direction sets how flex items are placed in the flex container,
along which axis and direction
Flex-direction : row(default) | row-reverse | column | column-reverse
Row: main-axis: row and direction is from left to right
Row-reverse: main-axis: row but the direction is from right to left

Column: main-axis: column and direction is from top to bottom

Column-reverse: main-axis: column and direction is from bottom to
top

Justify-content: flex-start | flex-end | centre | space-evenly

This is used for alignment along the main axis, this is used for Flex
container, not for flex items. The direction is not changed only the
layout is changed
Flex-start:

Flex-end:
Centre:

Space-around:
Space-evenly:

Flex-wrap: nowrap | wrap | wrap-reverse

flex-wrap property controls whether the flex container's items should
stay in a single row or wrap onto multiple rows
nowrap: This is default

Wrap:
Wrap-reverse

Align-items: start | end | centre

End
Centre:

Flex Properties, these are applied on the flex items, these are having
higher priority than flex container properties
Align-self: flex-start | flex-end | centre
Alignment of individual along the cross axis
Flex-grow: how much a flex item will grow relative to the rest of the
flex items if spaces is available

Flex-shrink:

Media Queries: Help in creating a responsive website

Level-5 (Transitions, Transforms and Animations)
Transitions: Transitions enable you to define the transition between
two states of an element
CSS Transform: Used to apply 2D and 3D transformations to an
element
Transform: rotate | scale | translate

CSS Scale : To increase or decrease the size

Transform: scale(2) // double size is increased
scaleX() | scaleY()  for x-axis only and y-axis only
Transform: translate();

Transform: skew() -> vanakara ayyitadi

Transform:skew(45deg);

Animation: To animate CSS elements

But the animation is not yet applied, we use animation properties to
apply the animation

Animation-direction: normal | reverse | alternate | alternate-reverse

% in Animation:
Amazon Clone
https://fontawesome.com/search This is font awesome, which is
used to insert icons into our web page
But before using the icons, first we need to link the font awesome in
or html file
Git and GitHub [Sheryians Coding School]

There are 3 persons x,y,z working on same project, x will works on

nav-bar, y works on hero section and z works on footer. The major
problem is how to collaborate in the project from different locations,
by using whatsapp it is difficult to send many files, which is a complex
task, then How?

When the persons from different locations add their code in to

central codebase is known as GitHub .

If person z is went offline due to weak internet connection, he can

make changes and add code locally and once his internet works
good, he will update the central codebase.
Git is used by the individuals to manage their project locally with
different versions, then we use git. This is a version control system
that helps to track changes in code.
Example: A like button functionality have 4 variations, that four
variations are stored in local system and based on the project
requirements, the one variation is added to central codebase such
that other variations are not visible to everyone

git config --global user.name “name”

git config --global user.email email@gmail.com
fit config --global core.editor “code –wait”
This will take to editor, until we close the code editor it will display as
waiting in cmd
git config --global core.autocrlf //This is used to handle line endings
in file
input: converts windows format to linux/mac
true: converts windows format to linux/mac
false: no changes, line endings stay as they are
--global -e
This is used to open the git configuration file in default text editor for
editing
To make changes or update we have 2 step process:
Add: This will add the change and ready to commit
Commit: The changes needs to be saved or committed
To create new repository (folder)
-> goto repositories and click new
-> give folder name, Description, click on Add Readme file
-> then click on create repository
Setting up Git:
This is in our local system, we can use vscode or (git bash)
Git --version //To know whether installed and to see version
Configuring Git:
Git config --global user.name “Manideep”
This command will set your global git username and this is included
in your commits, others know who made the changes.
Git config --global user.email “kukunarapumanideep@gmail.com”
This command will set your global git email and this is included in
your commits, show the changes with your email.
Git config --list
This command lists all your current Git configurations, such as
username, email, ie shows what values you have set.
Clone: Cloning a repository from github to our local machine
Git clone <- some link ->
Some link means, open which repository you want to clone, click on
code, then copy https and paste in terminal (VS Code)
Status: displays the state of the code ie, when u clone from github
and if you make any changes in the file, then type git status , it will
say the file is modified and we have file Name as M in yellow colour
saying it was modified, so to commit we need to follow 2-step
process which is add and commit
Basically we have 4 status:
Untracked: new files created and git doesn’t yet track
Modified: when the file is changed
Staged: file is ready to commit ie after the changes and modification
it was added and next stage is commit
Unmodified: unchanged, no changes made
Add and Commit:
Git add filename //This is to add single file or changed files into git
staging area
If we have multiple files to add, we use git add .
Git commit -m “some message” // after adding, we need to commit
files, this will be committed in local not in remote
Push command:
To upload the local repo content to remote repo
Git push origin main
Origin is nothing but the repository which was cloned in remote and
main is the branch in which we push the code
Init Command:
When we create a repository, it will not become directly a git repo,
so we make it as git repo by using git init
An empty git repo is created
Now we create some files like index.html in localRepo repo, it will
display as U (Untracked)

So we use this

If we want to keep our project in github repo follow this

-> open github … profile…. Repositories….create a new
repository….dont add readme file
-> git remote add origin <-link (https)->
-> git remote -v (to verify remote)
-> git branch (to see in which branch…. By default is master)
-> But change it name to main git branch -M main
-> git push -u origin main
-u is set-upstream which establishes a connection between local
branch and remote, after this we can simply run git push in future, git
will know which remote branch to push
The work-flow is:
1) create a repo in github
2) clone the repo in local system
3) create the files and change if needed
4) add the files
5) commit the files
6)push it
Git branches:
When there are multiple people to work on project to develop
different features, we have branches which are distributed as copies
to all, after all commits they are combined at last ie final commit
The main usage of branch is the developer wont wait for other’s
commits, so each have their own copy, instead of waiting
Branch Commands:

1) The command is used to see what branches are there and in which
branch we are currently
2) The command is used to rename the branch name which we are
currently on git branch -M myBranch
3) to navigate to another branch
4) to create and navigate to that new branch
4) to delete a branch, note: we cannot delete the branch which we
are currently on , to delete the current branch we need to navigate to
some other branch and we can delete that.
The third image (push) is used to push code from local to remote
repo which is in github

We can merge the code in two ways:

1) By using the commands
2) By creating a pull request on github
When we are using PR it will merge code in github but not in local
repo, so we need to merge in local repo also

We moved to Main and we merge the code of feature1 in main, this

helps in changing code in local repo

Resolving Merge Conflicts:

An event that takes place when Git is unable to automatically resolve
differences in code between two commits
For example:

We have different content like (dropdown) in main branch and

(button) in another branch, we will have merge conflict so to avoid
we need to change manually, in above we can see some options like
Accept Current Change | Accept incoming change from other branch
After resolving conflicts, we need to merge main with feature1
I am in main so git merge feature1

Undoing Changes:
1) This is used when we added but not committed
One file: git reset index.html
Multiple files: git reset
2) This is used when we added and committed

3) But when we have multiple commits and we need to undo all of

them we use hash
Git log //to see all commits with hash value
Git --hard is used to modify to previous commit in VS code also

Fork: This is used to have code and everything on other person

repository on git to our own repository, and we can make the
changes in our repository
A fork is a new repository that shares code and visibility settings with
original “upstream” repository, this is a rough copy