DEV Community: Dipesh Joshi

CSS Positions

Dipesh Joshi — Sat, 24 Dec 2022 15:11:50 +0000

Hi Friends, I have written a blog on CSS Positioning, hope it will easy to read and understand.

CSS Positions Property with Example

Position Property has 5 values-

Static
Relative
Absolute
Fixed
Sticky

Sticky Position

It is default position of every element.
Explanation- lets take a box and we can see there will be no change in box position.

by applying static position nothing is change.

//HTML Code-

<body>

  <div class="container">

  <div class="child"></div>

  </div>

</body>

//CSS Code-

*{

  margin:0;

  padding:0;

  box-sizing: border-box;


}

.container{

  height:100px;

  width:100px;

  border:1px solid black;

  background-color:lightgreen;

  position:static;

}

Relative & Absolute

Both works in same way except that

Relative -> works on Parent Class
Absolute -> words on Children class

Explanation- lets take a box means we are working only on container, child is not in role till now.

After applying position relative we can see box moved 100px from left.

//HTML Code-

<body>

  <div class="container">

  <div class="child"></div>

  </div>

</body>

//CSS Code-

*{

  margin:0;

  padding:0;

  box-sizing: border-box;


}

.container{

  height:100px;

  width:100px;

  border:1px solid black;

  background-color:lightgreen;

  position:relative;

  left:100px;

}

Relative vs Absolute

Now lets take a children to explain it. child box moved 100px from its parent means outer box as seen in below image.

//HTML Code-

<body>

  <div class="container">

  <div class="child"></div>

  </div>

</body>

//CSS Code-

*{

  margin:0;

  padding:0;

  box-sizing: border-box;


}

.container{

  height:300px;

  width:300px;

  border:1px solid black;

  background-color:lightgreen;

  position:relative;

}

.child{

  width:100px;

  height:100px;

  background-color:pink;

  border:1px solid black;

  position:absolute;

  left:100px

}

Suppose we are giving relative position to body not the parent box then output will be shown like below. here we are assuming that parent box is in middle of the page

body {

  position: relative;

}

.container {

  height: 300px;

  width: 300px;

  margin:auto;

  border: 1px solid black;

  background-color: lightgreen;

}

.child {

  width: 100px;

  height: 100px;

  background-color: pink;

  border: 1px solid black;

  position: absolute;

  left: 100px;

}

Fixed Position After applying fixed position to the box it has fixed at its given position. Even we scroll, it will no move from its fixed position i.e. 100px from top and 200px from left.

//HTML Code-

<body>

  <div class="container">

    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 

     Tempore, soluta?</p>

  <div class="child-box"></div>

   <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. 

    Tempore, soluta?</p>

</div>

</body>

//CSS Code-

.container {

  height: 1000px;

}

.child-box {

  width: 100px;

  height: 100px;

  background-color: pink;

  border: 1px solid black;

  position: fixed;

  top:100px;

  left: 200px;

}

Sticky Position

//CSS Code-

.child-box {

  width: 100px;

  height: 100px;

  background-color: pink;

  border: 1px solid black;

  position: sticky;

  top:10px;

  left: 200px;

}

We can understand by below example-

After applying sticky position to the box- if we check without scrolling it will remain at its original position means 200px from left.

But when we check with scrolling, box moves up but when it reached at given position means 10px from top then it sticks there.

This article is published w/ Scattr ↗️

CSS Float & Clear

Dipesh Joshi — Sat, 24 Dec 2022 15:11:47 +0000

FLOAT

The CSS float property specifies how an element should float.
so let’s Understand with the example
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent
so here in example we have very 2 images there will taking space and not beutifull visually too
so make it them right or left side we used
float:left or float:right

Example:1st of float

Example:2nd of float

when we make navigation bar and we applied float and our element(li) out from ul container.
when we float ul make it smaller so li comes out of ul to prevent this overflow . property of overflow comes in picture
this li overflow from ul stop by overflow : auto

code

output

code

output

CLEAR PROPERTY

CLEAR PROPERTY APPLY ON FLOATED ELEMENT AND NON-FLOATED ELEMENT TOO
clear property decide the other floated element stay left or right of floated element
The clear property specifies what elements can float beside the cleared element and on which side.
The clear property can have one of the following values:
none - Allows floating elements on both sides. This is default
left - No floating elements allowed on the left side
right- No floating elements allowed on the right side
both - No floating elements allowed on either the left or the right side
inherit - The element inherits the clear value of its parent
The most common way to use the clear property is after you have used a float property on an element.

When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the web page.

there is only one difference with you can make change in output1 and output 2 which is clear:right;

output 1

output 2

This article is published w/ Scattr ↗️

Input Elments

Dipesh Joshi — Sat, 24 Dec 2022 15:10:37 +0000

We will know about the Input element. The input element is used to create form fields that accept user input.
The input tag is used within the form element. It is an empty element that contains only attributes. Let's know the different input types in HTML -

HTML Input types :-

Input Type Text :

This is a default value. It defines a single-line text field. The text input accepts alphanumeric characters for fields like, name, address, etc.

Example :

<input type="text">

Input Type Password :-

The password input type is used to create an obscured text control.

Example :

<input type="password">

Input Type Email :-

This input field is for email where the user enters their email address. This input type has been specifically designed to handle and validate email addresses.

Example :

<input type="email">

Input Type Date :-

This input field is for a date. Where the user enters a date, like their date of birth.

Example :

<input type="date">

Input Type Submit :-

This is a button input that submits the form.

Example :

<input type="submit">

Input Type File :-

This input type specifies a file selection control in which the user selects the file from their device.

Example :

<input type="file">

Input Type Radio :-

It defines a radio button. in the radio inputs, the user can click only one value at a time.

Example :

<input type="radio">

Input Type Number:-

It defines a field for entering a number. Using this input type, you can enter a value in two ways – from the keyword and by clicking the little up and down buttons provided in the input field.

Example :

<input type="number">

Input Type Checkbox :-

It defines a checkbox button. In the input type, the user can select more than one option.

Example :

<input type="checkbox">

Input Type Search:-

This input type creates a search input field. This field is used to enter a query. You can search whatever you want.

Example :

<input type="search">

Input Type Reset:-

This input type is used to define a reset button. Clicking a reset button will clear all input elements in the form to their original value.

Example :

<input type="reset">

This article is published w/ Scattr ↗️

HTML & Html Element

Dipesh Joshi — Sat, 24 Dec 2022 15:10:35 +0000

to learn how to make websites then first step to know about HTML.
html is the Structurer of all websites

HTML

HTML stands for Hypertext markup language.
This is the standard markup language for creating web pages. It describes the structure of a web page .

Structure of HTML :-

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style/style.css">

    <title>This is a Title</title>

</head>

<body>

     <h1>This is a heading</h1>

     <p>This is a paragraph</p>

</body>

</html>

HTML Elements

HTML Elements tells the browser how to display content.
HTML elements are created with tags. It is defined by a start tag and an end tag and between these tags there is content.
Some HTML elements represent visible components on a web page, such as text, images, or buttons, while others denote different sections of the page or provide meta information about the document.
Some HTML elements that don't have an end tag are called empty elements. Now Let's see some tags :

Basic HTML Tags:

<html>: This is the root element of an HTML element.

<head>: This is a container for metadata. It is placed between the <html> tag

        and the <body> tag.

<link>: It defines the relationship between a document and external resources.

<title>: It defines the title of a document.

<body>: It defines the document's body. and is a container for all the visible

        contents, such as headings, paragraphs, images, audio, videos, hyperlinks,

        tables, lists, etc.

Heading Tags :

HTML heading tag is used to define the heading of the HTML document.

The <h1> tag defines the most important tag, and <h6> defines the least

important heading.

Example :

<h1>This  is heading 1 </h1><h2>This  is heading 2</h2><h3>This  is heading 3</h3><h4>This  is heading 4</h4><h5>This  is heading 5</h5><h6>This  is heading 6</h6>

Paragraph Tag :

A paragraph always starts on a new line and is usually a block of text.

HTML paragraph defined with the <p> tag.

Example :

<p> This is a paragraph </p><p> This is another paragraph </p>

HTML Links :

The HTML anchor tag defines a hyperlink that links one page to another page.

HTML links are defined with the <a> tag.

Example :

<a href="https://www.ineuron.ai"></a>

href - It means Hypertext Reference. which indicates the link's destination.

Image Tag :

The <img> tag is used to embed an image in an HTML page. This is a self-closing

tag, which means this tag has no end tag.

<img src="" >

src - This is an attribute. It specifies the path to the image to be displayed

on a web page.

###

HTML Formatting Elements :

<b> : Bold Text

<strong> : Important Text

<i> : Italic Text

<em> : Emphasized Text

<mark> : Marked Text (Highlighted text)

<small> : Smaller text

<sub> : Subscript text

<sup> : Superscript text

<q> : Quotation mark

<blockquote> : Defines a section that is quoted from another source.

<cite> : Defines the title of a work.

<address> : Defines contact information for the author of a document.

<ins> : Inserted text (Underline text)

<del> : Deleted text

Empty Elements :

This article is published w/ Scattr ↗️