Everything is CSS is considered as a box and all of the styling applied based on the box properties of the element. It is important to understand these because if we have good grip in box model it will be easy to create complex layouts and dealing with flexbox and grid will be easy.

Padding

Padding is used to create the space between the content and border. This makes the box size big when we set the content size will not change and border go away from the content box creating gap around the content.

padding property sets the padding all around the content. padding-top this property set the padding to the top side of the content. padding-right this property set the padding to the right side of the content. padding-bottom this property set the padding to the bottom side of the content. padding-left this property set the padding to the left side of the content.

Border

Border property is used to set the border between margin and padding we can set the size, color, and style of the border.

border this is used to set the width, style and color border-top this is used to set the border width, style and color between top margin and top padding. border-right this is used to set the border width, style and color between right margin and right padding. border-bottom this is used to set the border width, style and color between bottom margin and bottom padding. border-left this is used to set the border width, style and color between left margin and left padding. we can also set the width , style and color individually by using these properties border-width border-style border-color

margin

Margin is used to create the space around the border. This makes the box size big and all the content around the box will be pushed.

margin property is used to set the margin around the box in single line. margin-top this property is used to set the margin to the top side of the box. margin-right this property is used to set the margin to the right side of the box. margin-bottom this property is used to set the margin to the bottom side of the box. margin-left this property is used to set the margin to the left side of the box.

Cascading Style Sheets (CSS) is used in styling the webpages, it is written inside HTML . It describes how the elements should be rendered on to screen like what size ,color ,position etc.

CSS selectors and its types

selectors are used to select elements to which the styling should be applied.

Universal Selector

its is used to apply styling to all the elements in the body.

Syntax:

* {
style properties 
}

Type selector

It is used to apply styling to the element of selected type.

Syntax:

p{
style properties 
}
h1{
style properties
}

Class Selector

It is used to apply styling to the element of class selected.

Syntax:

.class_name{
style properties 
}

ID Selector

It is used to apply styling to the element of class selected. It is same as class selector but it should be unique i.e multiple elements may have same class but they cannot have same ID .

Syntax:

#ID_name{
style properties 
}

Chained Selector

Chained selector is used to target some special tags with using multiple class names these classes are chained together using "." . Lets say you named multiple tags with same class name and want to target some special tag in them then simply we can add another class name to that tag and chain together and can add CSS we wanted.

Syntax:

tag.class_name{
style properties 
}

Descendant Selector

We use Descendant selector method when we want to target an specific element or tag inside some other tag (may not be direct child) most of the time we use multiple tags inside tags depending on the use cases in order to target specific tags we use Descendant selector method. The syntax is usually separated > between the tags.

Syntax:

tag1 tag 2{
style properties 
}

Direct Child Selector

We use direct child selector method when we want to target an specific element or tag inside some other tag (direct child) most of the time we use multiple tags inside tags depending on the use cases in order to target specific tags we use direct child selector method. The syntax is usually separated by space between the child tags.

Syntax:

tag1 > tag 2{
style properties 
}

Sibling Selector

Sibling selector is used to target the next sibling tags after the given tag. There are two different types of sibling tags we can use + and ~ for different use cases. + is used to target next single sibling and in case of the ~ targets all of the sibling tags with same tag name given.

Syntax:

class_name ~ tag{
style properties 
}
class_name + tag{
style properties 
}

Pseudo element Selector

Pseudo element is the keyword added to a selector that lets you style a specific part of the selected element. We can target the area which is not provided in HTML using the pseudo elements.

::after

This ::after will create an pseudo element after the selected target in order to add the content next to it. We will use content keyword in order for adding some "content" like text or anything else.

Syntax:

class_name ::after {
  content: "your content ";
  style properties 
}

::before

This ::before will create an pseudo element before the selected target in order to add the content at that place. We will use content keyword in order for adding some "content" like text or anything else. we can add required content before or after using these pseudo elements.

Syntax:

class_name ::before {
  content: "your content ";
  style properties 
}

HTML is a Hypertext Markup Language which is used to describe the contents of a web page. There are two parts in html head and body. In head u describe about the content like you give the title metadata ,etc. What you write in body is the content what you want to see in the browser. There are different tags we use them inside body and its rendered into the browser.

HTML Tags

Paragraph Tag

If you write anything inside a p tag (paragraph tag) that is directly rendered into the browser.

<p> this is a example of paragraph tag</p>

Heading Tag

This tag is used to write headings there 6 types h1 to h6 you can use them depending upon which size of the heading u need, h1 is for the big size headings and h6 is for small size headings.

<h2>this is example of heading</h2>

Anchor Tag

This tag is used to put links .if you write some text and you want user to direct to different page while clicking on that text then we use anchor tag.

<a href="www.google.com">google</a>

we should enter the link to redirect in href attribute.

br Tag

this tag is used to continue the content from next line. If we write anything after this tag they appear from next line in the browser.

<br>

Image Tag

This tag is used to insert the image in the browser.

<img src="./abc.jpg" alt="abc" >

In src we must enter the path to the image and in alt we have to enter what text you want to see in the browser if the image is failed to load.

A Server is nothing but a software program serves or provide service to another software program. the programs which are getting serviced are called clients. Web server is most commonly used server ,example of web servers are Apache ,Nginx etc.

Apache web server

Apache2 is the most popular web server since it is free and open source web server. It is used to develop and maintain open source HTTP server .Apache is considered open source software, which means the original source code is freely available for viewing and collaboration. Being open source has made Apache very popular with developers who have built and configured their own modules to apply specific functionality and improve on its core features.

cPanel

cPanel is a Linux-based GUI(graphical user interface) tool for server management. It is used to manage and publish websites.

Live server

A live server is an application that is used in web development to track changes. Generally when you make some changes in code you have to save the code and reload the page every time after the code changes to see those changes in the web, what live server does is on just saving the code the changes are reflected in web instead of reload every time.