Scribd
Upload
47 views

Web Development: Suhaib Rehman Trainer

The document discusses CSS (Cascading Style Sheets), which is a language used to style and lay out web pages. CSS is used to design HTML tags and is widely used on the web. There are three main ways to import CSS into HTML pages: inline CSS, internal CSS within <style> tags, and external CSS via <link> tags. CSS properties like color can be defined using keywords, hexadecimal codes, RGB and HSL values to specify text and background colors.

Uploaded by

Suhaib Rehman
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
47 views

Web Development: Suhaib Rehman Trainer

The document discusses CSS (Cascading Style Sheets), which is a language used to style and lay out web pages. CSS is used to design HTML tags and is widely used on the web. There are three main ways to import CSS into HTML pages: inline CSS, internal CSS within <style> tags, and external CSS via <link> tags. CSS properties like color can be defined using keywords, hexadecimal codes, RGB and HSL values to specify text and background colors.

Uploaded by

Suhaib Rehman
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 169

WEB DEVELOPMENT

css SUHAIB REHMAN


TRAINER
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 17th
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
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, and then inside
the style attribute, you can provide different styles.

<html>
<body>
<h1 style="color: black; text-align: center">Hello world</h1>
</body>
</html>
CSS-in HTML

Internal CSS <html>


<head>
<style>
body {
background-color: linen;
}

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

External CSS

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

Color

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.
CSS-Properties

Color

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
CSS-Properties

Color

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
CSS-Properties

Color
CSS-Properties

Color

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.
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
Color Syntax:
Color property in CSS is responsible for assigning the user-specified color to the 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;
}
CSS-Properties

Color
Color Syntax:
Color property in CSS is responsible for assigning the user-specified color to the 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;
}
CSS-Properties
Color
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%); }


CSS-selectors

CSS combinators
CSS-selectors

CSS combinators
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
Child selector (>)

The child selector selects all elements that are the immediate children of a specified element
<div>
div > p { <p>This paragraph will be selected because it is inside a div</p>
color: white; <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

Descendant selector (space)


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>
CSS-combinators
Adjacent Sibling Selector (+)

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>
CSS-combinators
General Sibling Selector (tilde)

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>
CSS-Attribute Selectors
Attribute Selectors
Css –Attribute Selectors
Attribute selectors
CSS-Selector

CSS [Attribute] 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; }
<a href="https://www.interviewbit.com/practice/" target=“abc">interviewbit.com</a>
<p target=“def”> hello this is css</p>
CSS-Selector

CSS [attribute = “value”] 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;}


<a href="https://www.interviewbit.com/practice/" target=“abc">interviewbit.com</a>
CSS-Selector

CSS [attr~=value] 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;}


<a href="https://www.interviewbit.com/practice/" target=“abc">interviewbit.com</a>
CSS-Selector

CSS [attr|=value] 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-Selector

[attribute^="value"] 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>
CSS-Selector

CSS [attribute$="value"] Selector

CSS [attribute$="value"] 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


CSS *[attribute = "value"] 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 Pseudo Classes
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.
.
CSS Pseudo Classes
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.
.
CSS Pseudo Classes
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 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 element
inside the parent element
CSS Pseudo-elements Selectors

Pseudo Elements
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.
CSS Variables
The var() function is used to insert the value of a CSS variable.

:root {
--blue: #1e90ff;
--white: #ffffff;
}

button {
--blue: #0000ff; /* local variable will override global */
color: var(--blue);
}
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

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 the width 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.
CSS-Box Model

Margin

Margin Syntax:
CSS margin property is used to define the space around the HTML element. It is 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), and bottom
margin,
• h2 { margin: 2px 1em 0 auto;} top, left, right, and bottom margin,
CSS-

Border and padding

CSS's border property : styles an element's border. This property combines three other
properties: border-width, border-style, and border-color, and can be 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;}
CSS-Box Model

Height and width

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
CSS-Box Model

Border Radius

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):
CSS-Box Model

Box sizing

. 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.
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 installed 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 one 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 family_syntax
CSS-font family
Font properties
CSS-font family
Font properties
The different CSS font properties are-
•CSS Font-color color: < color name >;
•CSS font-size font-size: xx-small | x-large | xx-large | larger | smaller | 20% | 2em | 7px;
•CSS font-weight font-weight: normal | bold | bolder | lighter | <number [1,1000]>;
•font-style: normal | italic | oblique;
•CSS font-family: font-family: family-name|generic-family|initial;
•CSS font-stretch: font-stretch: normal | semi-condensed | condensed | extra-condensed | ultra-condensed |
semi-expanded | expanded | extra-expanded | ultra-expanded ;
•CSS line-height: line-height: normal|number|length|percentage|initial;
.
Short Hand :
font: <font-style> <font-variant> <font-weight> <font-size/line-height> <font-family>;
CSS-Text Property
Text

1. text-transform

h1 { text-transform: uppercase;}
h2 { text-transform: lowercase;}
P { text-transform: capitalize;}
CSS-Text property
Text decoration

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;
CSS-Text property
Line height

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
CSS-Text property
Letter and word spacing

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
CSS-Text property
Vertical-align
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.
CSS-Text property
Text-indent

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;
CSS-Text property
Text-indent
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;}
CSS-Background Property
Background

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 repeat

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 from the parent
class in CSS.
6. initial: The initial means the default value of the background-repeat property
CSS-Background Property
Background Position

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;
CSS-Background Property
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".
The background-size property in used to change
the size of the background image according to percentage Sets the width and height of the background image in percent
the user's requirements. of the parent element. The first value sets the width, the
second value sets the height. If only one value is given, the
background-size: auto|length|cover| second is set to "auto"

contain 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.
CSS-Background Property
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".
The background-size property in used to change
the size of the background image according to percentage Sets the width and height of the background image in percent
the user's requirements. of the parent element. The first value sets the width, the
second value sets the height. If only one value is given, the
background-size: auto|length|cover| second is set to "auto"

contain 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.
CSS-Background Property

Background color and attachment

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.
CSS-Background Property

Background Clip

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.
CSS-Background Property

Background

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;;
}
CSS-Position Property

Position

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

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.
CSS-Position Property

Position relative

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

Position absolute

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..
CSS-Position Property

Position fixed

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 the same position irrespective of the
scrolling. Like absolute elements, the fixed elements are also removed from the natural flow
of the document, and other elements occupy their place.
CSS-Position Property

Position sticky

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.
CSS-DISPLAY PROPERTIES

INLINE AND BLOCK

Inline
It is used to display an element as an inline element. The inline elements are displayed in a single 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 element 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

Display properties

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 element was removed
and never existed.
CSS-DISPLAY PROPERTIES

Float

Float is a CSS property that positions the element to the left or right in its parent
container. It enables the text, images, or 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 the rest of the page by
creating a mini layout. They don't appear in the order they are in the source.
CSS-DISPLAY PROPERTIES

clear

. 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
<!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>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{
background-color: blue;
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>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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

Grid

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 grid 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
CSS-Grid

Grid
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-box-item.
CSS-Grid

Grid
CSS-Grid

Grid

CSS Lines
Grid lines are horizontal and vertical lines that run through the entire 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

Grid
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 class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</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 area name

Grid area name


grid-template-areas, allows us to create a named grid, meaning we can choose a 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";
}
grid-template-area:"item1 item2 item3 item4"
.item-2{
grid-area:"two";
}
CSS-Grid

Grid-area

.first{ .container{
background-color: green; height:200px;
grid-area: first; width: 400px;
display: grid;
gap: 10px;
} grid-template-columns: 1fr 1fr
.second{ 1fr;
background-color:blue; grid-template-rows:100px 50px 50px
grid-area: second; 20px;
grid-template-areas: "first first
} first"
.third{ "second third third"
background-color:red; "second third third"
" second third third";
grid-area: third;
}
}

Here . signifies, that area is to be left empty.


CSS-Grid

order

.container > div{


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

Grid column /grid row


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

minmax

Overlapping Grid Items .container{


When specifying the size in grid-
template-rows or grid-template-
columns, some elements containing a display:grid;
large amount of text can overflow

To prevent this we can use min-max grid-template-rows:


function and specify the size on the repeat(3,minmax(200px,auto);
parent element. It takes two arguments,
the minimum size and the max size.
}
CSS-Grid

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

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

Grid alignment

CSS Grid Alignment


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

Grid alignment

CSS grid-auto-columns
The grid-auto-columns property of CSS grid-auto-rows
specifies the width of the column tracks The grid-auto-rows property of CSS specifies the
of an implicitly-created grid. When there height of the row tracks of an implicitly-created
are more grid items than cells in the grid.
grid, .grid-container{
grid-auto-rows: 65px;
.grid-container{ }
grid-auto-columns: 1fr;
}
<!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>Grid</title>
<style>
p:first-child{
background-color: red;
}

p:last-child{
background-color: blue;
}
p:nth-child(2)
{
background-color: greenyellow;

}
p:nth-child(3)
{
background-color: yellow;
}
.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{
background-color: green;
grid-row: 1/4;

}
.second{
background-color:green;
grid-column-start: 2;
grid-column-end: -2;

}
.third{

Zoom in :- COPY AND PASTE


background-color:red;

}
.fourth{
background-color: yellow;

}
.fifth{
background-color: red;

}
.sixth{
background-color: green;
grid-row: span 2;

}
.seventh{
background-color: red;

}
.eighth{
background-color: yellow;
}
.containerone{
grid-template-columns: 200px 200px auto ;
}
.one1{
grid-area: one;
background-color: red;
}
.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>
</body>
CSS Pseudo Classes
Media queries

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;
}
CSS Media Queries
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;
}
}
CSS Media Queries
Media queries-And

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;
}
}
CSS Media Queries
Media queries-or

•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;
}
}
CSS Media Queries
Media queries-or
/*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) { … }
CSS Media Queries
Media queries-or

/*@media all and (orientation:portrait) { … }


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

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
CSS Media Queries
Media queries-or

• /* 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) */
• @media only screen and (min-width: 768px) {...}
• /* Large devices (laptops/desktops, 992px and up) */
• @media only screen and (min-width: 992px) {...}
• /* Extra large devices (large laptops and desktops, 1200px and up) */
• @media only screen and (min-width: 1200px) {...}
CSS Media Queries
Media queries-or

•Hide Elements With CSS Media Queries


•Hiding elements using media queries is of utmost importance when working on
different screen sizes

@media screen and (max-width: 600px) {


div.BOX1 {
display: none;
}
}
<!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>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;
text-align: justify;
}
.box2 h1{
text-align: center;
text-align: justify;
}
.box3{
background-color: rgb(3, 120, 204);
color: white;
text-align: justify;
}
.box3 h1{
text-align: center;
}

Zoom and
.box4{

copy the
background-color: rgb(163, 4, 70);
color: white;
text-align: justify;

cope
}
.box4 h1{
text-align: center;
text-align: justify;
}

@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>
<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="box3">
<h1>This is the third 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="box4">
<h1>This is the fourth 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>
</body>
</html>
CSS Flex Box
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
What is CSS Flexbox? and not the block-level items.
•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 where 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
CSS Flex Box
Flex Box
CSS Flex Box
Flex Direction
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
CSS Flex Box
Flex Box
CSS Flex Box
Flex wrap

CSS flex-wrap
Flex-wrap defines the arrangement of flex items in a row that should 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.
•wrap-reverse - The flex-items will wrap in reverse order if necessary.
CSS Flex Box
Justify-content

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.
CSS Flex Box
Justify-content
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.
CSS Flex Box
Justify-content-explained in detail
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;
CSS Flex Box
Justify-content-explained in detail
start end
4 3 2 1

Flex-end Main-axis Flex-start

justify-content

Cross-axis
CSS Flex Box
Align-Items

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

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;
}
CSS Flex Box
Align-content

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
CSS Flex Box
Flex flow

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'>


CSS Flex Box
Flex order

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
CSS Flex Box
Flex grow

Properties for the Children (flex items)


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;
CSS Flex Box
Flex grow
CSS Flex Box
Flex shrink

Properties for the Children (flex items)


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
CSS Flex Box
Flex shrink
CSS Flex Box
Flex shrink

Properties for the Children (flex items)


CSS flex-basis
Flex-basis is used to define the initial size of the flex-item.

flex-basis: 10px;
CSS Flex Box
Flex

Properties for the Children (flex items)


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;
CSS Flex Box
Flex Box
Transform
The transform property allows you to visually manipulate an element by skewing, rotating,
translating, or scaling
Values
scale(): Affects the size of the element. This also applies to the font-size, padding, height, and
width of an element, too. It’s also a a shorthand function for the scaleX and scaleY functions.

skewX() and skewY(): Tilts an element to the left or right, like turning a rectangle into a
parallelogram. skew() is a shorthand that combines skewX() and skewY by accepting both
values.

translate(): Moves an element sideways or up and down.

rotate(): Rotates the element clockwise from its current position.


transform: skewX(25deg);
transform: skew(25deg, 25deg);
transform: rotate(25deg);
We can also use the rotateX, rotateY, and rotateZ functions, like so:

transform: translate(20px, 10px);


transform: translateX(value);
transform: translateY(value);
transform: scale(20) skew(-20deg);
CSS transitions
provide a way to control animation speed when changing CSS properties. Instead of having
property changes take effect immediately, you can cause the changes in a property to take
place over a period of time.

The transition-timing-function property can have the following values:

ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
linear - specifies a transition effect with the same speed from start to end
ease-in - specifies a transition effect with a slow start
ease-out - specifies a transition effect with a slow end
ease-in-out - specifies a transition effect with a slow start and end
cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
Animation
The animation property in CSS can be used to animate many other CSS properties
such as color, background-color, height, or width. Each animation needs to be
defined with the @keyframes at-rule which is then called with the animation
property,
Sub-properties
animation-name: declares the name of the @keyframes at-rule to manipulate.

animation-duration: the length of time it takes for an animation to complete one cycle.

animation-timing-function: establishes preset acceleration curves such as ease or linear.


animation-delay: the time between the element being loaded and the start of the animation
animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.
animation-iteration-count: the number of times the animation should be performed.
animation-fill-mode: sets which values are applied before/after the animation.
For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to
before when the animation began.
animation-play-state: pause/play the animation.
ease, ease-out, ease-in, ease-in-out, linear, cubic-
animation-timing-function
bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))

animation-duration Xs or Xms

animation-delay Xs or Xms

animation-iteration-count X

animation-fill-mode forwards, backwards, both, none

animation-direction normal, alternate

animation-play-state paused, running, running


animation: name duration timing-function delay
iteration-count direction fill-mode;
CSS Pseudo Classes
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.
.
CSS Pseudo Classes
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.
.
CSS Pseudo Classes
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 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 element
inside the parent element
CSS Pseudo-elements Selectors

Pseudo Elements
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.
CSS Pseudo-elements Selectors

Example Pseudo Elements ::before


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

<h1>This is a heading h1</h1>

<h1>This is a heading h1</h1>

</body>
</html>
CSS Pseudo-elements Selectors

Example Pseudo Elements ::after


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

<h1>This is a heading h1</h1>

<h1>This is a heading h1</h1>

</body>
</html>
CSS Pseudo-elements Selectors

Example Pseudo Elements ::marker


<!DOCTYPE html>
<html>
<head>
<style>
::marker {
color: red;
OUTPUT font-size: 23px;
}
</style>
</head>
<body>

<ul>
<li>one</li>
<li>Two</li>
</ul>

<ol>
<li>First</li>
<li>Second</li>
</ol>

</body>
</html>
CSS Pseudo-elements Selectors

Example Pseudo Elements ::selection

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

</html>
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: centimeter 2.54 cm = 1 inch
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 milimeter 10mm = 1cm
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
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 of 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 if 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 width, 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> Login form and animation use for green dot
<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="/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>
<div class="inputbox">
<input type="password" placeholder="Enter password">
</div>
<div class="inputbox">
<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
/* 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%;
css
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%;
https://www.pexels.com/
https://pixlr.com/

https://htmlcolorcodes.com/

https://www.flaticon.com/
https://www.remove.bg/upload
THANK YOU
CSS-Grid

You might also like