cascading style sheet(css).pptx

css
•CSS stands for Cascading Style Sheet.
•CSS is used to design HTML tags.
•CSS is a widely used language on the web.
•HTML, CSS and JavaScript are used for web designing. It helps the web
designers to apply style on HTML tags.

Css-History
History of Cascading Style Sheet (CSS)
•1994: Cascading Style Sheet was First Proposed by Hakon
Wium Lie on 10th October
•1996: Finally, Cascading Style Sheet was published on
November with influencer Bert Bos, after which he became
co-author of Cascading Style Sheet.
•1996: Cascading Style Sheet became official with CSS and
was published in December

Css-advantages
Advantages of CSS
•Multiple Device Compatibility: CSS is compatible with all devices, be it desktop,
mobile, etc.
•Better than HTML styling: Styling with CSS is far less cumbersome and better
than with HTML
•Easy maintenance: Easier to maintain since all the styling is contained in
separate files and style changes in just one place are reflected in the entire web
page
•Faster page loading: Page loading is faster with CSS since multiple pages share
the same formatting it reduces file transfer size which helps pages load faster
•Time-Saving: We can reuse the CSS styles, thus saving time. The same style
sheet can also be used for different HTML pages just by adding a link to it.
•Browser support: CSS supports almost all the latest browsers like Chrome,
Safari, Firefox, etc.

Css-Versions
CSS version release
Several CSS versions have been released ever since the introduction of CSS, but there
are majorly three versions CSS1, CSS2, and CSS3. Each version builds on the last one
with some added features and enhancements. Currently CSS3 is the recommended
version by W3C, and it is the one in popular use.
CSS1 : CSS1 was the first official W3C Recommendation. It was published in December
1996. It supported simple visual formatting such as Font property, Color of text,
backgrounds, other elements, text attributes, etc.
CSS2: CSS2 was made the official W3C recommendation in May 1998, and it is built
upon CSS1 with additional support for absolute, relative, and fixed positioning of
elements and z-index property, etc.
CSS3 : CSS3 is the latest and currently recommended version. It was published as
a W3C recommendation in June 1999 and is based on the older CSS versions. CSS 3 is
divided into several separate documents called "modules". Each module adds new
capability or extends features defined in CSS 2.

CSS-syntax
CSS Syntax
A CSS rule set contains a selector and a declaration block.
•The lines inside /* and */ are CSS comments,

CSS-in HTML
Importing CSS to HTML
There are, in total, three ways of inserting CSS into an HTML page.
The ways are :
•Inline CSS
•Internal CSS
•External CSS
In case multiple methods of linking CSS are used for the same element, inline
CSS is given the most priority, followed by internal CSS, and external CSS
respectively.

CSS-in HTML
Importing CSS to HTML
There are, in total, three ways of inserting CSS into an HTML page.
The ways are :
•Inline CSS
•Internal CSS
•External CSS

CSS-in HTML
Inline CSS:
It is a way of adding a unique style to a particular element.
To use Inline Styles, you can add the style attribute in the relevant HTML tag,
then inside the style attribute, you can provide different styles.
<html>
<body>
<h1 style="color: black; text-align: center">Hello world</h1>
</body>
</html>
Inline CSS

CSS-in HTML
Internal CSS:
Internal CSS is used under one
single HTML page. For inserting
internal CSS, we place the
whole CSS style inside the head tag
of HTML by using the <style> tag.
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: Black;
text-align: center;
}
h2 {
color: #ff69b4;
text-align: center;
}
</style>
</head>
<body>
<h1>Header One</h1>
<h2>Header Two</h2>
</body>
</html>
Internal CSS

<head>
<link rel="stylesheet“ href="mystyle.css"
/>
</head>
<body>
<h1>Header One</h1>
<h2>Header Two</h2>
</body>
CSS-in HTML
External CSS :
With the help of external CSS, we use
the same CSS file again and again.
way we do it is by making a CSS file
and linking it to the HTML inside
the <head> tag using the <link> tag.
<link rel="stylesheet"
href="file_name.css">
External CSS

CSS-Properties
Color Syntax:
Color property in CSS is responsible for assigning the user-specified color to
the text on the web page.
Colors in CSS can be specified by the following methods:
1. Predefined/Cross-browser color names: red blue green, darkgrey
2. Hexadecimal colors
1. p1 {background-color: #ff0000;} color: blue !important;
3. Hexadecimal colors with transparency
1. p1a {background-color: #ff000080;}
2. To add transparency, add two additional digits between 00 and FF.
Color

CSS-Properties
Color Syntax:
4. RGB colors p1 {background-color: rgb(255, 0, 0);}
5. RGBA colors p1 {background-color: rgba(255, 0, 0, 0.3); The alpha
parameter is a number between 0.0 (fully transparent) and 1.0 (fully
opaque).
6. HSL colors
7. HSLA colors
8. Predefined/Cross-browser color names
Color

CSS-Properties
Color Syntax:
3. HSL colorsHue is a degree on the color wheel (from 0 to 360) - 0 (or
360) is red, 120 is green, 240 is blue. Saturation is a percentage value;
0% means a shade of gray and 100% is the full color. Lightness is also a
percentage; 0% is black, 100% is white.
4. HSLA colors
Color

CSS-Properties
Web safe colors emerged during the early era of the internet; a standardized
palette of 216 colors that displayed consistently across all major browsers.
What is Color Gamut?
Color gamut is a word used to describe the range of colors a device can generate. The
broader or wider the gamut, the more vibrant and saturated the colors can be.
Color

CSS-Properties
Color
What is sRGB?
A color space or collection of colors called sRGB was designed by
Microsoft and HP in 1996 to standardize the colors displayed by
electronic devices, and it has since become the norm
What is NTSC?
NTSC simply stands for “National Television Standards Committee”.
NTSC was established by the Federal Communications Commission
(FCC) in the 1940s to develop a standard color TV system for US.
The color property on your TV is controlled by the NTSC
standardized color scheme
DCI-P3,
formally known as Digital Cinema Initiatives – Protocol 3, is a color
space commonly used in digital cinema and is the color standard for
the film industry

CSS-Properties
Color Syntax:
Color property in CSS is responsible for assigning the user-specified color to
text on the web page.
selector {color:color_name;}
Background Color Syntax:
CSS background-color property sets the color of the background of the page. It
is quite similar to color property. The only difference is that it changes the
background color only.
div {
background-color:red;
}
Color

CSS-Properties
Format Syntax Example
Keyword fuchsia, lime, etc. h1 { color: lime; }
RGB % rgb(rrr%, ggg%, bbb%) h1 { color: rgb(30%, 30%, 30%); }
RGB Absolute rgb(rrr, ggg, bbb) h1 { color: rgb(0, 255, 255); }
Hex code #RRGGBB h1 { color: #0000FF; }
Short Hex code #RGB h1 { color: #00F; }
HSL hsl(hue value, saturation %, lightness%) h1 { color: hsl(120, 50%, 25%); }
Color

CSS-selectors
CSS combinators__check and apply selectors
<!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">
<title>css</title>
<style>
h1+p{color: red;}
</style>
</head>
<body>
<div class="first">
<h1>FirstHeading</h1>
<p>First Paragraph</p>
<div class="ifirst">
<ol>
<li>1</li>
<li>2</li>
</ol>
<p> this is inside _ifirst</p>
</div>
<p>after li but inside first</p>
</div>
<div class="second">
<h1>Second</h1>
<p>second paragraph 1</p>
<p>second paragraph 2</p>
</div>
</body>
</html>

CSS-combinators
The child selector selects all elements that are the immediate children of a
specified element
div > p {
color: white;
}
Child selector (>)
<div>
<p>This paragraph will be selected because it is inside a div</p>
<p>This paragraph will also be selected because it is inside a div</p>
<div>
<p>This paragraph will be selected because it is inside a div (inside another div
element).</p>
</div>
<section>
<p>This paragraph will not be selected because it is inside a div but also inside a
section element.</p>
</section>
<p>This paragraph will be selected because it is inside a div.</p>
</div>
<p>This paragraph will not be selected because it is not inside a div.</p>

CSS-combinators
It combines two selectors such that elements matched by the second selector
are selected only if they have an ancestor element matching the first selector
Parent_element Child_element {
css properties;
}
div p {
color:blue;
}
<div>
<p>This is paragraph in the div.</p>
</div>
Descendant selector (space)

CSS-combinators
The adjacent sibling selector is used to select an element that is adjacent to the
first specified element and also the sibling of the first element.
It uses the plus (+) sign to combine the two elements. The second element is
selected only when the element specified in the second place is immediately
after the first element and the first and the second elements are siblings.
h2 + p {
color:red;
}
<h2 style="color:red">heading is first sibling</h2>
<p>The adjacent sibling </p>
<p>sibling but not adjacent</p>
Adjacent Sibling Selector (+)

CSS-combinators
The general sibling selector selects all HTML elements that are siblings of a
specified element.
The second element is specified will be the element that is to be selected, and the first element
specified will be the element whose sibling should be the second element, and then only it will
be selected. It uses the tilde (~) sign to separate the elements
div ~ p {
background-color: yellow;
}
p>This is a paragraph.</p>
<div>
<p>This is a paragraph inside div.</p>
</div>
<p>This is a paragraph and also a sibling of div.</p>
<p> This paragraph is the sibling of div and paragraph first</p>
General Sibling Selector (tilde)

CSS-Attribute Selectors
Attribute Selectors

Css –Attribute Selectors
Attribute selectors

CSS-Selector
CSS [Attribute] selector In this type of attribute selector, the name of the
element is used and then the name of the attribute is specified in the square
brackets
a[target] { color: red;}
<a href="https://www.interviewbit.com/practice/" target=“abc">interviewbit.com</a>
Multiple elements:
p,a[target] { background-color: red; }
<p target=“def”> hello this is css</p>
CSS [Attribute] selector

CSS-Selector
CSS [Attribute] selector In this type of attribute selector, the name of the
element is used and then the name of the attribute is specified in the square
brackets
a[target=“abc”] { color: red;}
CSS [attribute = “value”] Selector

CSS-Selector
CSS [Attribute] selector In this case, the element will be selected even if the
value mentioned in the selector matches any value
a[target=“abc”] { color: red;}
CSS [attr~=value] Selector

CSS-Selector
CSS [attr|=value] Value
This attribute selector is used to select all the HTML elements whose attribute
has a value of a hyphen-separated list of words,
[class|=colored] {color:red; }
<p class="colored-text">Hello world!</p>
<p class="colored">Hello!</p>
CSS [attr|=value] Selector

CSS-Selector
[attribute^="value"] Selector
In the [attr^=val] type of attribute selector, the value need not be separated by
hyphen or space, the value of the attribute just need to begin with the value
specified in the selector
[class^=colored] { background-color: pink; color:red; }
<p class="colored-text">Hello world!</p>
<p class="coloredtopcontent">here you are!!</p>
[attribute^="value"] Selector

CSS-Selector
CSS [attribute$="value"] Selector
we will select HTML elements whose attribute’s value ends with the specified
value. The value need not be the whole word
[target $= "end"] {
color:red;
}
<div target="firstelementend">The first.</div>
<div target="second_element-end">The second </div>

CSS-Selector
CSS *[attribute = "value"] Selector
we can select elements whose attribute value matches the value specified in the
selector and the value can be present anywhere
[class *= "line"]
{
color:red;
}
<div class="firstline">The first.</div>
<div class="second">The second</div>
<div target="line-last">The last.</div>
CSS *[attribute = "value"] Selector

CSS-Box Model
Box Model
CSS Box Model:
With the help of the CSS box model, we can create
the design and layout of a webpage. It is used as a
toolkit for styling the layout of different elements.
TotalElementWidth=?
width+rightpadding+leftpadding+rightborder+le
ft border
TotalElementHeight=?
height+bottompadding+toppadding+bottomborder
+topborder

CSS-Box Model
•Margin Area This area consists of the border and margin of the element, the
dimension of the margin box is set by using the property margin-box
height and margin-box width. The use of margin area is to separate elements
from their neighbors.
•Border Area This is the area between the margin and the box's padding.
Border Area's dimensions are set by using the width and height of the border.
•Padding Area This area includes padding provided to the element, which is the
space around the element, padding area's dimension can be set using
of the padding box and height of the padding box.padding doesn’t allow
negative numbers
•Content Area This area consists of images, text or other types of media
content. Content Area is bounded by a content edge, and its dimension is set
using content-box height and width.
Box Model

CSS-Box Model
Margin Syntax:
CSS margin property is used to define the space around the HTML element. It
completely transparent and does not have any background color.
•We can assign values to margin property in form
of pixels (px), percentages (%), and em values
• h1 {margin : 10px;} /* assigns top right bottom and left margins to 10 px*/
•h2 {margin : 5% 10px;} /* 5% (top and bottom) margin and 10px for left and
right */
• h2{ margin: 10px 4% 3em; } represent the top, horizontal (left and right),
bottom margin,
• h2 { margin: 2px 1em 0 auto;} top, left, right, and bottom margin,
Margin

CSS-
CSS's border property : styles an element's border. This property combines
three other properties: border-width, border-style, and border-color, and can
used as a shorthand notation for these three.
p{
border: 5px dotted red;
}
Padding Syntax:
Paddings in CSS are used to add space around an element within a set border.
Different paddings can be selected for each side (top, right, bottom, left).
h1 {padding: 1px;}
Border and padding

CSS-Box Model
Height and Width Syntax:
The height and width properties are used to specify an element's height and
width.
The height and width properties may have the following values:
•auto - This is the default value. The browser calculates the height and width.
•length - Defines the height/width in px, cm etc.
•% - Defines the height/width in percent of the containing block.
•initial - Sets the height/width to its default value.
•inherit - The height/width will be inherited from its parent value.
•Min width and max width
Height and width

CSS-Box Model
Border –radius:
Four values - border-radius: 15px 50px 30px 5px; (first value applies
to top-left corner, second value applies to top-right corner, third value
applies to bottom-right corner, and fourth value applies to bottom-left
corner):
Two values - border-radius: 15px 50px; (first value applies to top-left
and bottom-right corners, and the second value applies to top-right and
bottom-left corners):
Three values - border-radius: 15px 50px 30px; (first value applies to
top-left corner, second value applies to top-right and bottom-left corners,
and third value applies to bottom-right corner):
Border Radius

CSS-Box Model
. The Box-sizing Property
The box-sizing property of CSS sets how the total width and height of the
elements are calculated
Content-box : This value gives you the default CSS box-sizing behavior.
For example, if you set an element's width to 100 px, and add a border of 5 px
and padding of 10 px, then the border and padding will be added to the box’s
size, resulting in an element that is wider than 100 px.
border-box : This value tells the browser to include any border and padding in
the values you specify for an element's width and height. For example, if you set
an element's width to 100 px, and add a border of 5 px and padding of 10px,
this value will make that 100 px to include the border and padding you have
added, the element’s width will remain 100px but the content area will shrink to
absorb that extra width.
Box sizing

CSS-font family
Font family
We can use various fonts, make them bold, change their color and adjust the
font style and size accordingly. This can be done using font-family in CSS and
font style in CSS.
The font-family property is used in CSS to specify the font for a text. It is a
prioritized list of various fonts, from the highest to lowest priority which is
separated by commas.
The browser selects the first font in the list and checks if that is installed or not,
otherwise proceeds to the next font. Many browsers do not support all the
fonts, so it's better to use multiple fonts.

CSS-font family
Font family_syntax
font family: Arial, sans-serif;
Here the browser will choose Arial first as it is specified first. If it is not
on our device, it will set sans-serif as the generic fallback option.
Types of CSS Font Families
There are two types of font families in CSS.
1.Specific Font Family
Specific font families in CSS have specific fonts with various styles within the
font family name.
These include Arial, Times New Roman, Tahoma, etc.
For example, Arial is a specific font within the Sans-Serif font family.

CSS-font family
Font family_syntax
2. Generic Font Family
The Generic font family in CSS is used for a general font, and almost all browsers support
them.
There are five generic font families in CSS:
1. Serif
1. Example: Times New Roman, Georgia etc
2. Sans-serif
1. Arial, Helvetica, Verdana, Trebuchet MS, and Gill Sans.
3. Monospace
1. Courier New, Monaco, Lucida Console, Consolas, and Everson Mono.
4. Cursive-
1. Comic Sans MS, Adobe Poetica, Sanvito, and Zapf-Chancery.
5. Fantasy-
1. Cottonwood, Critter, and Alpha Geometrique.

CSS-font family
Font family_syntax

CSS-font family
Font properties

CSS-Text Property
1. text-transform
h1 { text-transform: uppercase;}
h2 { text-transform: lowercase;}
P { text-transform: capitalize;}
Text

CSS-Text property
1. The text-decoration property allows you to specify the
following values:
none This removes any decoration already applied to the text.
underline This adds a line underneath the text.
overline This adds a line over the top of the text.
line-through This adds a line through words.
blink This animates the text to make it flash on and off (however
this is generally frowned upon, as it is considered rather annoying).
text-decoration: underline;
Text decoration

CSS-Text property
p { line-height: 1.4em;}
Line height property is best given in ems, not pixels, so that the gap between
lines is relative to the size of text the user has selected.
The line-height property sets the height of an entire line of text, so the
difference between the fontsize and the line-height is equivalent to the
leading
Line height

CSS-Text property
letter-spacing: 0.2em;.
word-spacing: 1em;
The default gap between words is set by the typeface (often around 0.25em
text-align:
 Left
 right
 center
 justify
Letter and word spacing

CSS-Text property
vertical-align:
baseline
sub super
top
text-top
middle
bottom text-bottom
It is not intended to allow you to vertically align text in the middle of block
level elements such as <p> and <div>, although it does have this effect when
used with table cells (the <td> and <th> elements).
It is more commonly used with inline elements such as <img>,
<em>, or <strong> elements.
Vertical-align

CSS-Text property
text-indent: The text-indent property allows you to indent the first line of
text within an element. The amount you want the line indented by can be
specified in a number of ways but is usually given in pixels or ems.
text-indent: 20px;
Text-indent

CSS-Text property
text-shadow
It is used to create a drop shadow, which is a dark version of the word just behind it and
slightly offset
The value of this property is quite complicated :
because it can take three lengths and a color for the drop shadow.
The first length indicates how far to the left or right the shadow should fall. The second
value indicates the distance to the top or bottom where the shadow should fall.
The third value is optional and specifies the amount of blur that should be applied to the
drop shadow
The fourth value is the color of the drop shadow
background-color: #cccccc;
color: #ffffff;
text-shadow: 2px 2px 7px #111111;}
Text-indent

The background-image property is used to add one or more images for an element by
separating the image's path using commas.
The default position of the background image is the top-left corner of the html page
1. background-image: url("image1.png"),url("image2.png");
CSS-Background Property
Background

background-repeat
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
Parameters: This property takes following values:
1. repeat: These parameters repeat the image in all the directions.
2. repeat-x: This parameter repeats the image in the x-axis direction.
3. repeat-y: This parameter repeats the image in the y axis direction.
4. no-repeat: This parameter doesn't an image to be repeated in any
direction.
5. inherit: The inherit parameter means the parameter will be inherited
the parent class in CSS.
6. initial: The initial means the default value of the background-repeat
property
Background repeat

The background-position property is used to adjust the position of the particular image. This
property takes a value, i.e Top, down, Top-left, center etc.
background-position: value;
Background
Position

The background-size property in used
to change the size of the background
image according to the user's
requirements.
background-size:
auto|length|cover|contain
Background Size
Value Description
auto Default value. The background image is displayed in its original
size
length Sets the width and height of the background image. The first
value sets the width, the second value sets the height. If only
one value is given, the second is set to "auto".
percentage Sets the width and height of the background image in percent
of the parent element. The first value sets the width, the
second value sets the height. If only one value is given, the
second is set to "auto"
cover Resize the background image to cover the entire container,
even if it has to stretch the image or cut a little bit off one of
the edges
contain Resize the background image to make sure the image is fully
visible
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

1. The background-color property is used to add the background color to the particular tag in
the HTML document.
background-color: color_name
2. The background-attachment property is used to handle this problem with
this property either we can fix the image on the background or we can scroll
the image with the page
background-attachment: scroll|fixed|local|
Local: Let's suppose you have a text area, and you want to scroll the image that is present
in the background text area with the content of the text area. This value is used to perform
this operation.
Background color and attachment

1. The background-clip property is used to control the flow of the background color of the
box model
background-clip: border-box|padding-box|content-box;
Parameters:
The default value of this property is border-box.
border-box: The border-box value allows the background color to be covered till the
border section of the box. In the above image, background-clip is set to the border
box.
paddingbox: The background color is restricted to the scope of the padding area
inside the box.
contentbox background color is restricted to the scope of the content area inside the
box.
Background Clip

Background: Set different background properties in one declaration:
body {
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-
attachment initial|inherit;;
}
Background

Flow is the arrangement of page elements, as defined by CSS
positioning statements, and the order of HTML elements
The CSS position property accepts five values used to determine the position of
an HTML element.
•static
•relative
•absolute
•fixed
•sticky
CSS-Position Property
Position

Static
All HTML elements are positioned static by default. With static positioning, the
elements are positioned along with the natural flow of the document. The
properties left, right, top, bottom, and z-index do not affect the elements
positioned as static.
Position static

Relative:
With relative positioning, the elements are positioned along with the natural
of the document. But unlike static elements, the position of
can be modified using left, right, top, bottom, and z-index properties..
Position relative

Absolute:
The absolute elements are positioned relative to the closest ancestor with any
position property other than static. If the closest ancestor has a static position,
the element is positioned relative to the next parent element without
the static position property..
Position absolute

Fixed:
Elements with fixed positioning are always positioned relative to
the HTML element (i.e.) the root of the document. The fixed elements stay in
same position irrespective of the scrolling. Like absolute elements,
the fixed elements are also removed from the natural flow of the document,
other elements occupy their place.
Position fixed

sticky:
With sticky positioning, the element behaves like a relative positioned until a
certain scroll point, and then it will be fixed.
.second{
background-color: blue;
position:sticky;
left: 500px;
top: 10px;
z-index: 1;
1. The z-index property defines the order of the overlapping HTML elements. Elements with
a higher z-index value will be placed on top of the elements with a lower z-index value.
Position sticky

Inline
It is used to display an element as an inline element. The inline elements are displayed in a
line, i.e., horizontally, and it will take as much of width as is necessary.
Block
It is used to display the elements like block elements. They are placed one below the other the
height and width can be changed but if unspecified, it will take the width of the container.
None
It is used to turn off the display of an element. The page layout will be rendered as if the
was removed and never existed
Inline-block
This property value is used to arrange the elements inline, but allows the height and width to be
set and reflected on the web page. It is a combination of inline and block property values
CSS-DISPLAY PROPERTIES
INLINE AND BLOCK

The default display value for most elements is either block or inline.
Display: inline It is used to display an element as an inline element. The inline elements are
displayed in a single line, inline property ignores the height and the width set by the user.
Display:block It is used to display the elements like block elements. They are placed one below
the other. Here, the height and width can be changed but if unspecified, it will take the width of
the container.
Display:inline-block This property value is used to arrange the elements inline, but allows the
height and width to be set and reflected on the web page.
None: None
It is used to turn off the display of an element. The page layout will be rendered as if the
was removed and never existed.
Display properties

Float is a CSS property that positions the element to
the left or right in its parent container. It enables the text, images,
other inline elements to wrap around the floating element.
float: none | left | right | inherit;
A floated element is out of the flow of the container though being a
part of it. Being out of the flow here means it separates itself from
rest of the page by creating a mini layout. They don't appear in the
order they are in the source.
Float

. Clear property specifies the position of the element next to a
floating element. It clears the floated elements on either side of the
element and pushes it to the next line.
•. none : The default value specifies that the next element is not
pushed below the floating element.
•left : The element is pushed below the left floating elements or the
element having float: left property.
right : The element is pushed below the right floating element or
element with float: right property.
both : If there is left floating element, we have to clear its left and
vice versa. Else the next element is not pushed below the floating
element
clear

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.first{
background-color: red;
color: white;
width: 75%;
height: 250px;
float: left;
padding:20px;
box-sizing: border-box;
}
.second{
color:white;
width: 25%;
height: 250px;
float:right;
}
.third{
clear:both;
}
</style>
</head>
<body>
<div class="clear">
<div class="first">
<p>Clear property values
none : It is the default value that specifies that the next element is not pushed below the floating element.
left : The element is pushed below the left floating elements or the element having float: left property.</p>
</div>
<div class="second">
<p>Elements beside a floating element float around it. Here is where the clear property comes to the rescue. Clear property specifies the position of the element next to a floating element. It clears
the floated elements on either side of the element and pushes it to the next line</p>
</div>
</div>
<div class="third">
<p>Elements beside a floating element float around it. Here is where the clear property comes to the rescue. Clear property specifies the position of the element next to a floating element. It clears
the floated elements on either side of the element and pushes it to the next line</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
padding:0;
margin: 0;
}
.head{
background-color: darkorange;
}
.head li{
color:white;
list-style-type: none;
font-weight: bold;
font-family: 'Times New Roman', Times, serif;
display: inline;
font-size: 1.5em;
margin-right: 20px;
cursor:pointer;
}
.head li:hover{
border-bottom: 4px solid rgb(105, 249, 2);
}
.head ul{
text-align: center;
padding: 20px;
}
.sidemenu{
background-color: lightsteelblue;
width: 10%;
height: 300px;
float: left;
}
.sidemenu ul{
text-align: center;
}
.sidemenu li{
margin-bottom: 2px;
font-size: 1.6em;
background-color: cadetblue;
list-style-type: none;
}
.sidemenu li:hover{
color:white;
cursor: pointer;
}
.article
{
height:300px;

CSS Grid is a two-dimensional layout system that completely
changes designing web pages and makes them far easier compared
to the previous systems like floats.
Grid is a layout system in CSS that allows you to create complex and
responsive designs. With grid, you can create a two-dimensional
of columns and rows that you can place elements into.
To create a grid in HTML, you need to use the display: grid; property
in CSS. Here's an example of a basic grid layout:
CSS-Grid
Grid

Before defining the grid layout on the webpage, we need to
understand some terminologies:
•Grid Container: The element on which display value is set
to grid becomes the grid container. Here, the box is the grid
container.
•Grid Items: The direct child elements of the grid container become
the grid items. Here, box-items are the grid items and not sub-
item.
CSS-Grid
Grid

CSS Lines
Grid lines are horizontal and vertical lines that run through the
CSS grid. These lines separate elements from one another.
CSS-Grid
Grid

Grid Tracks
It is basically the space or the area between the lines.
CSS-Grid
Grid

Grid Tracks
It is basically the space or the area between the lines.
Grid Cells: Grid Cells are the space present between any four
intersecting grid lines.
CSS-Grid
Grid

Grid Areas
Grid areas are nothing but a collection of grid cells that form a
rectangular area on the grid.
Grid areas can be of 1 cell or multiple cells
CSS-Grid
Grid

CSS Grid
• A grid container defines a grid layout with rows and columns.
• It contains grid items that are placed in this grid.
• Create a container with display:grid or display: inline-grid.
grid-template-columns property defines the number of grid columns.
grid-template-columns: 100px 100px 100px;
• This property can also set the column widths.
• The value is space-separated list where each value is either auto or a
column width.
CSS-Grid
Grid

The grid-template-rows property
grid-template-rows:100px 50px 50px 20px
• The grid-template-rows property defines the number of grid rows.
• This property can also set the row heights.
• The value is space-separated list where each value is either auto or a row
height.
CSS-Grid
Grid

Html code
<div class="grid-container">
<div class="item">Item 1</div>
</div>
Css code
.gridcontainer {
background-color: steelblue;
padding: 10px;
display: grid;
grid-gap: 10px;
grid-template-columns: 100px 100px 100px;
justify-content: end;
}
.item {
background-color: #ddd;
padding: 10px;
text-align: center;
}
CSS-Grid
Grid

Grid area name
grid-template-areas, allows us to create a named grid, meaning we can choose
different name for every area in the grid, and any element that has the
same grid-area name, will be placed there..
.item-1{
grid-area:"one";
}
.item-2{
grid-area:"two";
}
CSS-Grid
Grid area name
grid-template-area:"item1 item2 item3 item4"

CSS-Grid
Grid-area
.first{
background-color: green;
grid-area: first;
}
.second{
background-color:blue;
grid-area: second;
}
.third{
grid-area: third;
}
Here . signifies, that area is to be
.container{
height:200px;
width: 400px;
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr
1fr;
grid-template-rows:100px 50px 50px
20px;
grid-template-areas: "first first
first"
"second third third"
"second third third"
" second third third";
}

Ordering items
CSS grids allow us to order
elements irrerspective of the way
they are written in HTML. We can
write the HTML for an element
earlier and make it appear
afterward, this is done by using
the order property on the grid
item.
CSS-Grid
order
.container > div{
border:1px solid black;
}
.container{
display:grid;
grid-template-row: repeat(4,1fr);
}
.b{
order:4;
}

grid-column property
We can specify on which column
the element will start and on
which column it will end.
grid-column: 2 / 4;
grid-column: start-col / end-col;
If you don’t wanna specify the end
column we can use
the span keyword to specify how
many columns the element should
cover or for how many columns
the element should stretch
CSS-Grid
Grid column /grid row
grid-row property
This property is used to specify on which
row element is to be placed.
Just like grid-col we can specify on which
row the element will start and on which row
it will end.
grid-row: 1 / span 2;

Overlapping Grid Items
When specifying the size in grid-
template-rows or grid-template-
columns, some elements
containing a large amount of text
can overflow
To prevent this we can use min-
max function and specify the size
on the parent element. It takes
two arguments, the minimum
size and the max size.
CSS-Grid
minmax
.container{
display:grid;
grid-template-rows:
repeat(3,minmax(200px,auto);
}

grid-area property
grid-area property is applied on a
grid item and used to specify the
item’s size and location.
This property can be used as a
shorthand for four properties
making the code concise and
more readable.
The four properties are -
•Grid row start
•Grid column start
•Grid row end
•Grid column end
CSS-Grid
Grid area
.item{
grid-area: 1 / 3 / span 2 / span 2;
}

CSS Grid Alignment
There are two axes in a CSS grid,
horizontal and vertical axis and
can align items on both or either
of these axes
To align all items in the grid on
horizontal axis at once we can
the property align-items,
.container{
display:grid;
align-items:start;
}
CSS-Grid
Grid alignment
There are many values that can be used
with align-items for aligning items in the
vertical axis -
•auto
•normal
•start
•end
•center
•stretch
•baseline
•first baseline
•last baseline

CSS Grid Alignment
Aligning all items on the
horizontal axis
To align all items in the grid on
horizontal axis at once we can
the property justify-items,
.container{
display:grid;
justify-items:start;
}
CSS-Grid
Grid alignment
There are many values that can be used-
•auto
•normal
•start
•end
•center
•stretch
•baseline
•first baseline
•last baseline
place-items
The place-items property of
CSS specifies
the vertical and horizontal al
ignment of grid items in the
grid cell. It is a shorthand
property for setting align-
items and justify-
items properties in a single
declaration.
place-items: center end;

CSS grid-auto-columns
The grid-auto-columns property
of CSS specifies the width of the
column tracks of an implicitly-
created grid. When there are more
grid items than cells in the grid,
.grid-container{
grid-auto-columns: 1fr;
}
CSS-Grid
Grid alignment
grid-auto-rows
The grid-auto-rows property of CSS
specifies the height of the row tracks of an
implicitly-created grid.
.grid-container{
grid-auto-rows: 65px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>Grid</title>
<style>
p:first-child{
}
p:last-child{
}
p:nth-child(2)
{
background-color: greenyellow;
}
p:nth-child(3)
{
}
.container{
height:300px;
width: 500px;
background-color: black;
display: grid;
grid-template-columns:1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}
.first{
grid-row: 1/4;
}
.second{
background-color:green;
grid-column-start: 2;
grid-column-end: -2;
}
.third{
}
.fourth{
}
.fifth{
}
.sixth{
grid-row: span 2;
}
.seventh{
}
.eighth{
}
.containerone{
grid-template-columns: 200px 200px auto ;
}
.one1{
grid-area: one;
}
.one2{
grid-area: two;
}
.one3{
grid-area: three;
}
.one4{
grid-area: four;
}
</style>
</head>
<body>
<div class="container">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
<div class="fourth">4</div>
<div class="fifth">5</div>
<div class="sixth">6</div>
<div class="seventh">7</div>
<div class="eighth">8</div>
</div>
<h2>After Grid using name</h2>
<div class="containerone">
<div class="first one1">1</div>
<div class="second one2">2</div>
<div class="third one3">3</div>
<div class="fourth one4">4</div>
</div>
Zoom in :- COPY AND PASTE

CSS Pseudo Classes
What are CSS Media Queries?
Media Queries is a feature of CSS allowing content rendering to adapt to
different features such as screen resolution. CSS Media Queries apply different
custom styles to a browser or device to suit user preferences. It targets specific
characteristics and features to make the system more responsive.
. Media Query CSS Syntax
@media [not | only | all(default)] [mediatype] [logical
operator(like: and, or, not] [media feature expression] {
CSS-code;
}
Media queries

CSS Media Queries
@media screen and (max-width: 600px) {
/* The above code gives a red color to the text for screen sizes less than
600px*/
body {
color: red;
}
}
Media queries

CSS Media Queries
And
/*The code works when the screen has a minimum width of 600px and its a
landscape orientation*/
@media screen and (min-width: 600px) and (orientation: landscape) {
body {
color: blue;
}
}
Media queries-And

CSS Media Queries
•or (Comma-separated) –
•If either of the queries is true, we comma-separate them.
/*The code applies if either the screen is in landscape mode or it has a min-
width of 600px*/
@media screen and (min-width: 600px), screen and (orientation: landscape) {
body {
color: blue;
}
}
Media queries-or

CSS Media Queries
/*This media query styles on devices with viewport width between 600px to 900px*/
•@media screen and (min-width: 600px) and (max-width: 900px) { … }
•*The code changes the colour to red when the exact height of the div is 360px*/
•@media (height: 360px) {
• div {
• color: red;
• }
•}
•/*This media query styles on screen with current width of 800px*/
•@media screen and (device-width: 800px) { … }
•/*This media query styles on screen with current height of 800px*/
•@media screen and (device-height: 800px) { … }
Media queries-or

CSS Media Queries
/*@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }
Media queries-or

CSS Media Queries
How to Set CSS Breakpoints?
1. should first design on mobile before designing for any other devices.
2. So to cover all the sizes, we set breakpoints on the most popular
device sizes
Media queries-or

CSS Media Queries
•/* Extra small devices (phones, 600px and down) */
•@media only screen and (max-width: 600px) {...}
•/* Small devices (portrait tablets and large phones, 600px and up)
*/
•@media only screen and (min-width: 600px) {...}
•/* Medium devices (landscape tablets, 768px and up) */
•/* Large devices (laptops/desktops, 992px and up) */
•/* Extra large devices (large laptops and desktops, 1200px and
up) */
Media queries-or

CSS Media Queries
•Hide Elements With CSS Media Queries
•Hiding elements using media queries is of utmost importance
working on different screen sizes
@media screen and (max-width: 600px) {
div.BOX1 {
display: none;
}
}
Media queries-or

<!DOCTYPE html>
<html lang="en">
<head>
<title>Media queries</title>
<style>
.container p,h1{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container p{
font-size: 1.5em;
}
.box1{
background-color: tomato;
color: white;
text-align: justify;
}
.box1 h1{
text-align: center;
}
.box2{
background-color: rgb(80, 148, 3);
color: white;
}
.box2 h1{
text-align: center;
}
.box3{
color: white;
}
.box3 h1{
text-align: center;
}
.box4{
color: white;
}
.box4 h1{
text-align: center;
}
@media screen and (min-width:1100px)
{
.container{
display: grid;
grid-template-columns: 1fr 1fr;
gap:5px
}
}
@media screen and (min-width:1500px)
{
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap:5px
}
}
</style>
</head>
<body>
<div class="container">
<div class="box1">
<h1>This is the fisrt Block</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae iste ducimus quos, officiis impedit non cupiditate veniam deleniti quisquam adipisci hic atque minus at quasi vitae obcaecati dolorem sequi delectus!</p>
</div>
<div class="box2">
<h1>This is the second Block</h1>
</div>
<div class="box3">
<h1>This is the third Block</h1>
</div>
<div class="box4">
<h1>This is the fourth Block</h1>
</div>
</div>
</body>
</html>
Zoom
and
copy
the
cope

CSS Flex Box
What is CSS Flexbox?
•CSS Flexbox is a CSS layout module that is used to arrange and
organize items on web pages in one direction, i.e., horizontally and
vertically.
•CSS Flexbox helps in creating flexible and responsive layouts
we can adjust the flex items within the flex container.
•It is used to fill the extra space available or shrink the size of the
content if it is overflowing.
•we can arrange flex items using the display property as flex
Flex Box
the display: flex means the parent container will act as a block-level
element whereas the children of this parent container are flex items
and not the block-level items.

CSS Flex Box
Main Axis - The main axis is used as a primary axis for the flex-
container to align the flex items.
It is set using the flex-direction property.
The flex items are arranged from left to right.
It can go in the following directions: -
1.Left to Right
flex-direction: row
2.Right to Left
flex-direction: row-reverse
3.Top to Bottom
flex-direction: column
4.Bottom to Top
flex-direction: column-reverse
Flex Direction

CSS Flex Box
CSS flex-wrap
Flex-wrap defines the arrangement of flex items in a row that
wrap or not.
It takes the following values: -
•wrap - The flex items will wrap if it is necessary.
•nowrap - This is the default value that means the items will not
•wrap-reverse - The flex-items will wrap in reverse order if
Flex wrap

CSS Flex Box
justify-content
Justify-content allows you to align flex items along the main axis. It
defines the distribution of space around the flex items along the
main-axis of the flex container.
It takes the following values: -
start, center, space-between, space-around, space-evenly.
Justify-content

CSS Flex Box
justify-content
It has six different values that change how the list is aligned:
1.flex-start – this is the default value, it positions the items at the start of the
container.
2.flex-end – positions the items at the end of the container.
3.center – places items in the center.
4.space-around – places items with space distributed evenly around the start
and end of the list.
5.space-between – evenly distributes space items between the first item is
set at the start of the container, and the last item is set at the end.
6.space-evenly – spaces items such that they have equal amounts of space
before and after them.
Justify-content

CSS Flex Box
justify-content
space-around
The items are evenly distributed within the alignment container along the main axis. The
spacing between each pair of adjacent items is the same. The empty space before
the first and after the last item equals half of the space between each pair of
adjacent items.
space-evenly
The items are evenly distributed within the alignment container along the main axis. The
spacing between each pair of adjacent items, the main-start edge and the first item,
and the main-end edge and the last item, are all exactly the same.
justify-content:safe center;
justify-content:safe right;
Justify-content-explained in detail

CSS Flex Box
justify-content
Justify-content-explained in detail
Main-axis
Cross-axis
Flex-end Flex-start
end
start
1
2
3
4

CSS Flex Box
CSS align-items
Align items are used to align flex-items along the cross-axis. It takes
the following values: - start, end, stretch, center.
Align-Items

CSS Flex Box
The align-self property
you can explicitly declare the align-self property to target a single
item.
It accepts all of the same values as align-items plus a value of auto,
which will reset the value to that which is defined on the flex
container.
.box>*:first-child {
align-self: stretch;
}
Align-Items

CSS Flex Box
For align-content to work you need more height in your flex container than is required to
display the items. It then works on all the items as a set,
For align-content to work you need more height in your flex container than is required to display the
items. It dictates what happens with that free space, and the alignment of the entire set of items within
it.
The align-content property takes the following values:
align-content: flex-start
align-content: flex-end
align-content: center
align-content: space-between
align-content: space-around
align-content: stretch
align-content: space-evenly
Align-content

CSS Flex Box
The flex-flow property is a shorthand for setting the flex-direction and
flex-wrap properties, which together define the flex container’s main and
cross axes
flex-flow: <'flex-direction'> <'flex-wrap'>
Flex flow

CSS Flex Box
Properties for the Children (flex items)
CSS order
CSS order affects the order of the elements. It is only applied to the flex
items, not the flex container. We can assign the order for the flex-item by
the number as shown in the syntax.
Syntax:
order:2
Flex order

CSS Flex Box
CSS flex-grow
Flex-grow helps in increasing the size of the flex item. It grows its size
according to the width of the flex container.
flex-grow: 2;
Flex grow

CSS Flex Box
CSS Shrink
Flex-shrink property helps in shrinking the size if the size of the flex-item is
greater than the flex-container. It works opposite to the flex-grow.
The default value of CSS flex-shrink is 1.
We should remove the flex-wrap property to make flex-shrink work
Flex shrink

CSS Flex Box
CSS flex-basis
Flex-basis is used to define the initial size of the flex-item.
flex-basis: 10px;
Flex shrink

CSS Flex Box
CSS flex
To use flex-grow, flex-shrink, and flex-basis, we use CSS flex
property which is a shorthand property.
flex: 0 0 120px;
Flex

CSS Pseudo Classes
Pseudo-classes are used to style an element based on its state, such as when it is hovered over,
focused on, or in a particular state. Some examples of pseudo-classes include :hover, :active,
:focus, and :visited.
Pseudo-elements, on the other hand, are used to style a specific part of an element, such as the
first letter of a paragraph or the content before or after an element. Some examples of pseudo-
elements include ::before, ::after, ::first-line, and ::first-letter.
The main difference between pseudo-elements and pseudo-classes is that pseudo-elements target
a specific part of an element, while pseudo-classes target a specific state of an element. Both can
be very useful for creating complex and visually appealing designs in HTML and CSS.
.
Pseudo Classes

CSS Pseudo Classes
Pseudo-Class is a keyword added to a selector that gives a special state to the
selected element(s) when they meet the desired condition
element : pseudo-class {
css elements;
}
Different CSS pseudo-class selectors are:
:hover- This pseudo-class adds a special effect to the selected element when
you point the mouse cursor over it
:firstchild: he :first-child pseudo-class selector is used to target the specified
first element(child) immediately inside any parent element.
:link – it is used to show the links that are not visited yet on the webpage.
.
Pseudo Classes

CSS Pseudo Classes
:focus – it is used to select the elements that take input when they are in focus.
:active – it is used to represent an element that is being selected by the input
device.
:playing – it is a resource state pseudo-selector and is used to Represent a
media element that is capable of playing when that element is playing.
:paused- it is a resource state pseudo-selector and is used to Represent a media
media element that is capable of playing when that element is paused.
:checked – when the radio button or check-box is enabled they are selected
using this selector.
:enabled – helps to show the elements that are enabled.
:disabled- helps to show the elements that are disabled. Similarly, there are
plenty of pseudo-class selectors.
:scope – The CSS style which will be defined in the scope will be applied to every
Pseudo Classes

CSS Pseudo-elements Selectors
Pseudo-elements Selectors
A CSS pseudo-element is combined with the selector and is used to style a
specific part of the selected HTML elements. The pseudo-class is used to style
the element
pseudo-elements, we can use a double colon(::) instead of a single colon: as in
pseudo classes
::first-line It is used to apply styles to the first line of the text
::before - It is used to add content before the contents specific element. It uses
the content property.
::after - It works similar to the ::before pseudo-class but it adds the content
after the contents of the specified element.
::marker - This is used to select the bullet points or the number of the list
items.
::selection – The ::selection pseudo-element selects(highlights) the elements
when the user selects the element with the cursor.
Pseudo Elements

<!DOCTYPE html>
<html>
<head>
<style>
h1::before {
content: "elements inserted before";
color:red;
}
</style>
</head>
<body>
<h1>This is a heading h1</h1>
</body>
</html>
Example Pseudo Elements ::before

<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: "elements inserted after";
color:red;
}
</style>
</head>
<body>
</body>
</html>
Example Pseudo Elements ::after

Example Pseudo Elements ::marker
<!DOCTYPE html>
<html>
<head>
<style>
::marker {
color: red;
font-size: 23px;
}
</style>
</head>
<body>
<ul>
<li>one</li>
<li>Two</li>
</ul>
<ol>
<li>First</li>
<li>Second</li>
</ol>
</body>
</html>
OUTPUT

This text is selected from a webpage using the mouse.
Example Pseudo Elements ::selection
<style>
::selection {
color:yellow;
background: white;
}
</style>
</head>
<body>
<h1> This text is selected from a webpage
using the mouse :</h1>
</html>
OUTPUT

CSS Units
Units
Responsive means making the same web element fit to different screen sizes
automatically without creating a completely separate design for each screen size
CSS units can be classified into two major categories:
•Absolute: irrespective of the viewing window size, there is no change in the
dimensions of HTML elements
•Relative: These units are relative to some other length property like the parent
element's font size or the size of the viewport.

CSS Units
Absolute Units
CSS pt:
pt stands for point. 1 CSS pt is defined as 1/72th of an inch.
CSS pc:
pc stands for pica or picas. 1 CSS pt is defined as 1/6th of an inch
CSS cm:
This is our good ‘ol centimeter
CSS mm:
mm stands for millimeter
CSS in:
in stands for inch
Use case: This units pt, pc , cm is mainly used in printers to print the output on paper and is not so widely
used for on-screen outputs.
___________________________________________________________________________
CSS px:
px stands for Pixel. Pixels can be defined as 1/96th part of an inch.
Pixels are widely used in websites to make elements of fixed sizes (ex: in a logo) i.e we don’t want them to
change size with screen size variation
centimeter 2.54 cm = 1 inch
milimeter 10mm = 1cm

CSS Units
Relative Units
CSS %:
This is the percentage unit. The measurement of the element is relative to the dimensions of the parent
WidthOfHTMLelement=(K/100)∗WidthOfParentElement
K=width of html element e.g 50%;
CSS em:
1em refers to the default size of the property. So precisely, 1em is equivalent to 100%. (i.e 1em in case
plain text would be 16px if the root value is unaltered)
Font-size:2em will be exactly the same as it was with 200%;
_Note__________________________________________________________________________
If we put parent font size as 2em then again we put child font size as 2em it would be added up to 4em
(i.e 400% of the default value)
body{
font-size: 2em;
}
p{
font-size: 2em;
}

CSS Units
Relative Units
CSS rem:
This unit counters the adding-up effect of units like % and em. rem rather stands for Root em.
body{
font-size: 40px;
}
p{
font-size:2rem; //(2 x 16px=) 32px. It ignores the change in font size of 40px made to its parent
}
CSS ch:
This unit sizes relative to the width of the digit ‘0’ as in parent. For plain text 1ch=8px (this is only true
the font-size of the parent element is unchanged from the default value of 16px.);

CSS Units
Relative Units
CSS vh:
This stands for view height. If we want our element to have exactly the same height as your viewport/
view window then use 100vh to denote that.
CSS vw:
vw stands for View Width. 100vw means 100% the width of the viewport/view window.
width: 50vw; has same effect like 50%;
CSS vmin:
This unit is based on the smaller dimension of the viewport. If the viewport height is smaller than the
width, the value of 1vmin will be equal to 1% of the viewport height. Similarly, if the viewport width is
smaller than the height, the value of 1vmin will be equal to 1% of the viewport width.
CSS vmax:
This unit is based on the larger dimension of the viewport. If the viewport height is larger than the
the value of 1vmax will be equal to 1% of the viewport height. Similarly, if the viewport width is larger
than the height, the value of 1vmax will be equal to 1% of the viewport width.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/login.css">
<title>Document</title>
</head>
<body>
<section>
<div class="login">
<h2>Login <div id="dot"></div></h2>
<div class="inputbox">
<input type="email" placeholder="Enter email">
</div>
<input type="password" placeholder="Enter password">
</div>
<input type="submit" value="Login" id="btn">
</div>
<div class="group">
<a href="">Forget password</a>
<a href="">Signup</a>
</div>
</div>
</section>
</body>
</html>
HTML
Login form and animation use for green dot

/* color code background-image: #f43b47 #453a94 ;
color: #8f2c24;
*/
*{
margin:0;
padding:0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
overflow-x: hidden;
background-image: linear-gradient(to top, #f43b47 0%, #453a94 100%);
}
.login
{
position: relative;
padding: 60px;
background-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(15px);
border:1px solid #fff ;
border-bottom:1px solid rgba(255, 255, 255, 0.5);
border-right:1px solid rgba(255, 255, 255, 0.5);
border-radius: 20px;
width: 500px;
display: flex;
flex-direction: column;
gap:30px;
box-shadow:0.25px 50px rgba(0,0,0,0.1) ;
}
.login h2{
position: relative;
width: 100%;
text-align: center;
font-size: 2.5em;
font-weight: 500;
color: #453a94;
}
.login .inputbox input{
position: relative;
}
.login .inputbox input{
position: relative;
width: 100%;
padding: 15px 20px;
outline:none;
font-size: 1.25em;
color: #8f2c24;
border-radius: 5px;
background-color: #fff;
border: none;
}
.login .inputbox ::placeholder
{
color: #8f2c24;
}
.login .inputbox button{
position: relative;
border: none;
outline: none;
background-color: #8f2c24;
color: #fff;
cursor: pointer;
font-size: 1.5em;
font-weight: 500;
transition: 0.5s;
}
.login .inputbox #btn:hover{
background-image: linear-gradient(45deg, #f43b47a7 50%, #4c467a86 0%);
}
.login .group
{
display: flex;
justify-content: space-between;
}
.login .group a{
font-size:1.25em;
color: #8f2c24;
font-weight: 500;
text-decoration: none;
}
#dot
{
display: inline-block;
position: relative;
height: 10px;
width: 10px;
background-color: greenyellow;
border-radius: 50%;
animation: 2s dot infinite;
transition:1s background-color;
}
@keyframes dot {
from{
background-color: rgba(151, 246, 8,0.1);
}
css

https://pixlr.com/
https://htmlcolorcodes.com/
https://www.pexels.com/
https://www.flaticon.com/
https://www.remove.bg/upload

cascading style sheet(css).pptx

More Related Content

Similar to cascading style sheet(css).pptx

Recently uploaded

cascading style sheet(css).pptx