Cascading Style Sheets Cheatsheet &66 

page 1 of 2

Font Properties Text Properties

Font-Family Word-Spacing
Changes the font family of certain words, sentences, Defines an additional amount of space between words.
paragraphs, etc. P EM { word-spacing: 0.4em; }
P { font-family: "New Century Schoolbook", Times, serif; } P.note { word-spacing: -0.2em; }

Font-Style Letter-Spacing
Changes text: normal, oblique, and italics. Defines an additional amount of space between characters.
H1 { font-style: oblique; } H1 { letter-spacing: 0.1em; }
P { font-style: normal; } P.note { letter-spacing: -0.1em; }

Font-Variant Text-Decoration
Used to display font in normal or small-caps. Allows text to be decorated through one of five properties:
SPAN { font-variant: small-caps; } underline, overline, line-through, blink, none.
A:link, A:visited, A:active { text-decoration: none; }
Font-Weight
Used to specify the weight of the font. Vertical-Align
H1 { font-weight: 800; } or P { font-weight: normal; } Used to alter the vertical positioning of an inline element,
relative to its parent element or to the element's line.
Font-Size IMG.middle { vertical-align: middle; }
Used to modify the size of the displayed font. IMG { vertical-align: 50%; }
H1 { font-size: large; } or P { font-size: 12pt; } .exponent { vertical-align: super; }
LI { font-size: 90%; }
STRONG { font-size: larger; } Text-Transform
Allows for capitalizing the first letter of each word (capitalize),
Font capitalizing all letters of a word (uppercase), using all small
Used to combine all properties of fonts. letters in each word(lowercase), and the inital value(none).
P { font: italic bold 12pt/14pt Times, serif; } H1 { text-transform: uppercase; }
H2 { text-transform: capitalize; }

Color and Background Properties Text-Align

Color Used to justify text left, center, right, and justify.
Changes the color of text. H1 { text-align: center; }
H1 { color: blue; } or H2 { color: #000080; } P.newspaper { text-align: justify; }

Background-Color Text-Indent
Sets the background color of an element. Used to specify the amount of indentation prior to the first line
BODY { background-color: white; } of text.
H1 { background-color: #000080; } P { text-indent: 5em; }

Background-Image Line-Height
Sets the background image of an element. Used to control the spacing between baselines of text.
BODY { background-image: url(/images/foo.gif); } P { line-height: 200%; }
P { background-image: url(http://www.htmlhelp.com/bg.png); }

Background-Repeat Classification Properties

Determines how a specified background image is repeated. List-Style-Type
The repeat-x value will repeat the image horizontally while the Specifies the type of list-item marker, and is used if list-style-
repeat-y value will repeat the image vertically. image is none or if image loading is turned off.
BODY { background: white url(candybar.gif); LI.square { list-style-type: square; }
background-repeat: repeat-x; } UL.plain { list-style-type: none; }
OL { list-style-type: upper-alpha; } /* A B C D E etc. */
OL OL { list-style-type: decimal; } /* 1 2 3 4 5 etc. */
Background-Attachment
OL OL OL { list-style-type: lower-roman; } /* i ii iii iv v etc. */
Determines if a specified background image will scroll with the
content or be fixed with regard to the canvas. List-Style-Image
BODY { background: white url(candybar.gif);
Specifies the image that will be used as list-item marker when
background-attachment: fixed; }
image loading is turned on, replacing the marker specified in
Background the list-style-type property.
UL.check { list-style-image: url(/LI-markers/checkmark.gif); }
Used to combine all properties of background.
UL LI.x { list-style-image: url(x.png); }
BODY { background: white url(http://www.htmlhelp.com/foo.gif); }
BLOCKQUOTE { background: #7fffd4; }
P { background: url(../backgrounds/pawn.png) #f0f8ff fixed; } List-Style-Position
TABLE { background: red url(leaves.jpg) no-repeat bottom right; } Determines where the marker is placed in regard to the list
item. If the value inside is used, the lines will wrap under the
marker instead of being indented. outside is default.
UL { list-style-position: inside; }
 Cascading Style Sheets Cheatsheet (CSS 1&2)
page 2 of 2

Box Properties
Margin-Top Border-Left-Width
Sets the top margin of an element by specifying a length or a Used to specify the width of an element's left border.
percentage. P { border-left: 20%; }
BODY { margin-top: 5pt; }
Border-Width
Margin-Right Used to set the width of an element's border (either all
Sets the right margin of an element by specifying a length or a borders, or specifying top border, right border, bottom border,
percentage. left border).
P.narrow { margin-right: 50%; } P { border-width: 20%; }
P { border-width: 10px 5px 10px 5px; }
Margin-Bottom
sets the bottom margin of an element by specifying a length or Border-Color
a percentage. Used to set the color of an element's border.
DT { margin-bottom: 3em; } P { border-color: #00000; }

Margin-Left Border-Style
sets the left margin of an element by specifying a length or a Sets style of a border - none, dotted, dashed, solid, double.
percentage. P { border-style: dotted; }
ADDRESS { margin-left: 50%; }
Border-Top
Margin Sets the width, style, and color of an element's top border.
Sets the margins of an element by specifying top, bottom, left P { border-top: 10px, red, double; }
and right margins -- all either specifying length or percentage.
BODY { margin: 5em; } /* all margins 5em */ Border-Right
P { margin: 2em 4em; } /* top & bottom 2em, left & right 4em */ Sets the width, style, and color of an element's right border.
DIV { margin: 1em 2em 3em 4em; } P { border-right: 10px, red, double; }
/* top margin 1em, right 2em, bottom 3em, left 4em */
Border-Bottom
Padding-Top Sets the width, style, and color of an element's bottom border.
Describes the amount of space between the top border and P { border-bottom: 10px, red, double; }
the content of the selector.
P { padding-top: 20%; } Border-Left
Sets the width, style, and color of an element's left border.
Padding-Right P { border-left: 10px, red, double; }
Describes the amount of space between the right border and
the content of the selector. Border
P { padding-right: 20 px; } Sets the width, style, and color of an element's border.
P { border: 10px, red, double; }
Padding-Bottom
Describes the amount of space between the bottom border Width
and the content of the selector. Each block-level or replaced element can be given a width,
P { padding-bottom: 5 em; } specified as a length, a percentage, or as auto.
P { width: 15px; }
Padding-Left H1 { width: 35%; }
Describes the amount of space between the left border and .foo { width: auto; }
the content of the selector.
P { padding-left: 15 pt; } Height
Each block-level or replaced element can be given a height,
Padding specified as a length or as auto.
Shorthand for the padding-top, padding-right, padding-bottom, P { height: 15px; }
H1 { height: 35%; }
and padding-left properties.
.foo { height: auto; }
BLOCKQUOTE { padding: 2em 4em 5em 4em; }
Float
Border-Top-Width
Allows text to wrap around an element (left, right, none).
Used to specify the width of an element's top border.
P { float: left; }
P { border-top: 20%; }
H1 { float: right; }
.foo { float: none; }
Border-Right-Width
Used to specify the width of an element's right border.
Clear
P { border-right: 20%; }
Specifies whether an element allows floating elements to its
sides (left, right, none).
Border-Bottom-Width
P { clear: left; }
Used to specify the width of an element's bottom border. H1 { clear: right; }
P { border-bottom: 20%; } .foo { clear: none; }
 1)What is CSS? | Fork CSS

CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. The
reason for using this is to simplify the process of making web pages presentable. It allows you to apply
styles to web pages. More importantly, it enables you to do this independent of the HTML that makes up
each web page.

Why we learn CSS?

Styling is the essential property for any website. It increases the standards and overall look of the website
that makes it easier for the user to interact with it. A website can be made without CSS, as styling is MUST
since no user would want to interact with a dull and shabby website. So for knowing Web Development,
learning CSS is mandatory.

 Base for web development: HTML and CSS is the basic skill that every web developer should
know. It is the basic skill that is required for building a website.
 Makes your website look attractive: A website that's dull and plain will not attract the user most
probably, so adding some style would surely make your website presentable to the user.
 Makes the design come live: A web developer is responsible for making the design given to him
as a live product. It is used for styling to develop the design of the website.
 Increases user experience of the website: A website with a simple yet beautiful UI would help
the users to go through the website easily. It is used to make the user interface better.
 More career opportunities: Since CSS is a basic requirement while learning Web Development,
therefor there are abundant career opportunities for it. As a freelancer, you can land up to many
projects.
 2)Types of CSS | Fork CSS

There are three types of CSS which are given below:

 Inline CSS
 Internal or Embedded CSS
 External CSS

Inline CSS:

Inline CSS contains the CSS property in the body section attached with element is known as inline CSS. This
kind of style is specified within an HTML tag using the style attribute.
Example:

html

<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style = "color:#009900; font-size:50px;
font-style:italic; text-align:center;">
GeeksForGeeks
</p>

</body>
</html>

Output:
Internal or Embedded CSS:

This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within
the HTML file in the head section i.e the CSS is embedded within the HTML file.
Example:

html

<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>

<div class ="geeks">

A computer science portal for geeks
</div>
</div>
</body>
</html>

Output:
External CSS:

External CSS contains separate CSS file which contains only style property with the help of tag attributes
(For example class, id, heading, ... etc). CSS property written in a separate file with .css extension and should
be linked to the HTML document using link tag. This means that for each element, style can be set only
once and that will be applied across web pages.
Example: The file given below contains CSS property. This file save with .css extension. For Ex: geeks.css

body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}

Below is the HTML file that is making use of the created external style sheet

 link tag is used to link the external style sheet with the html webpage.
 href attribute is used to specify the location of the external style sheet file.

html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="geeks.css"/>
</head>

<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div id ="geeks">
A computer science portal for geeks
</div>
</div>
</body>
</html>

Output:

Properties of CSS:

Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the
least priority. Multiple style sheets can be defined on one page. If for an HTML tag, styles are defined in
multiple style sheets then the below order will be followed.

 As Inline has the highest priority, any styles that are defined in the internal and external style sheets
are overridden by Inline styles.
 Internal or Embedded stands second in the priority list and overrides the styles in the external style
sheet.
 External style sheets have the least priority. If there are no styles defined either in inline or internal
style sheet then external style sheet rules are applied for the HTML tags.

3)Text Formatting | Fork CSS

 Text Formatting with CSS

CSS text formatting properties is used to format text and style text. CSS text formatting include following
properties:

1. Text Color
Text-color property is used to set the color of the text.
Text-color can be set by using the name “red”, hex value “#ff0000” or by its RGB value“rgb(255, 0, 0).

Syntax:
body
{
color:color name;
}

Example:

html

<!DOCTYPE html>
<html>
<head>
<title>GFG - Text Formatting</title>
</head>
<body>
<h1>GEEKS FOR GEEKS</h1>
<h2>TEXT FORMATTING</h2>
<br>
<p style="color:red;">Text Color</p>
</body>
</html>

Output:
2. Text Alignment
Text alignment property is used to set the horizontal alignment of the text.
The text can be set to left, right, centered and justified alignment.
In justified alignment, line is stretched such that left and right margins are straight.

Syntax:
body
{
text-align:alignment type;
}

Example:

html

<!DOCTYPE html>
<html>
<head>
<title>GFG - Text Formatting</title>
</head>
<body>
<h1>GEEKS FOR GEEKS</h1>
<h2>TEXT FORMATTING</h2>
<p style="text-align:left">Left Aligned text (Default)</p>
<p style="text-align:right">Right Aligned text</p>
<p style="text-align:center">Center Aligned text</p>
<p style="text-align:justify">This text will be justified. This is a
Justified text.</p>
</body>
</html>
 Output:

3. Text Decoration
Text decoration is used to add or remove decorations from the text.
Text decoration can be underline, overline, line-through or none.

Syntax:
body
{
text-decoration:decoration type;
}

Example:

html

<!DOCTYPE html>
<html>
<head>
<title>GFG - Text Formatting</title>
</head>
<body>
<h1>GEEKS FOR GEEKS</h1>
<h2>TEXT FORMATTING</h2>
<p style="text-decoration:underline">Underlined text</p>
<p style="text-decoration:overline">Overline Text</p>
<p style="text-decoration:line-through">Line-Through Text</p>
<a href="#" style="text-decoration:none">Link without underline</a>
<br>
</body>
 </html>

Output:

4. Text Transformation
Text transformation property is used to change the case of text, uppercase or lowercase.
Text transformation can be uppercase, lowercase or capitalise .
Capitalise is used to change the first letter of each word to uppercase.

Syntax:
body
{
text-transform:type;
}

Example:

html

<!DOCTYPE html>
<html>
<head>
<title>GFG - Text Formatting</title>
</head>
<body>
<h1>GEEKS FOR GEEKS</h1>
<h2>TEXT FORMATTING</h2>
<p style="text-transform:uppercase;">Text in uppercase</p>
<p style="text-transform:lowercase;">Text in LOWERCASE</p>
<p style="text-transform:capitalize;">Text in capitalize</p>
<br>
</body>
</html>
 OUTPUT:

5. Text Indentation
Text indentation property is used to indent the first line of the paragraph.
The size can be in px, cm, pt.

Syntax:
body
{
text-indent:size;
}

Example:

html

<!DOCTYPE html>
<html>
<head>
<title>GFG - Text Formatting</title>
</head>
<body>
<h1>GEEKS FOR GEEKS</h1>
<h2>TEXT FORMATTING</h2>
<p style="text-indent:10px;">This is the first line of the para. This is
the dummy text. text indent is set to 10 px.</p>
<br>
</body>
</html>

Output:
6. Letter Spacing
This property is used to specify the space between the characters of the text.
The size can be given in px.

Syntax:
body
{
letter-spacing:size;
}

Example:

html

<!DOCTYPE html>
<html>
<head>
<title>GFG - Text Formatting</title>
</head>
<body>
<h1>GEEKS FOR GEEKS</h1>
<h2>TEXT FORMATTING</h2>
<p style="letter-spacing:4px;">Letter Spacing (4px)</p>
<p style="letter-spacing:10px;">Letter Spacing (10px)</p>
</body>
</html>

Output:

7. Line Height
This property is used to set the space between the lines.

Syntax:
body
{
line-height:size;
}
 Example:

html

<!DOCTYPE html>
<html>
<head>
<title>GFG - Text Formatting</title>
</head>
<body>
<h1>GEEKS FOR GEEKS</h1>
<h2>TEXT FORMATTING</h2>
<p style="line-height:4px;">Line Height (4px)</p>
<p style="line-height:40px;">Line Height (40px)</p>
</body>
</html>

Output:

8. Text Direction
Text direction property is used to set the direction of the text.
The direction can be set by using rtl : right to left .
Left to right is the default direction of the text.

Syntax:
body
{
direction:rtl;
}

Example:

html

<!DOCTYPE html>
<html>
 <head>
<title>GFG - Text Formatting</title>
</head>
<body>
<h1>GEEKS FOR GEEKS</h1>
<h2>TEXT FORMATTING</h2>
<p style="direction:rtl;">Right to left Text (rtl)</p>
</body>
</html>

Output:

9. Text Shadow
Text shadow property is used to add shadow to the text.
You can specify the horizontal size, vertical size and shadow color for the text.

Syntax:
body
{
text-shadow:horizontal size vertical size color name;
}

Example:

html

<!DOCTYPE html>
<html>
<head>
<title>GFG - Text Formatting</title>
</head>
<body>
<h1>GEEKS FOR GEEKS</h1>
<h2>TEXT FORMATTING</h2>
<p style="text-shadow:1px 1px blue;">Text with Shadow</p>
</body>
</html>
 Output:

10. Word Spacing

Word spacing is used to specify the space between the words of the line.
The size can be given in px.

Syntax:
body
{
word-spacing:size;
}

Example:

html

<!DOCTYPE html>
<html>
<head>
<title>GFG - Text Formatting</title>
</head>
<body>
<h1>GEEKS FOR GEEKS</h1>
<h2>TEXT FORMATTING</h2>
<p>Normal Text</p>
<p style="word-spacing:4px;">Text with Word Spacing (4px)</p>
</body>
</html>

Output:
11. Font Family
The font-family property specifies the font of an element. It can have multiple fonts as a backup
system i.e. if the browser doesn't support one font then the other can be used. In other words, this
property is used to specifies the family-name &/or generic-family, based on the priority from the
list, for the selected element.

The font-family can be categorized into 2 types:

o family-name: It contains the name of a font-family, such as "times", "courier", "arial", etc.
o generic-family: It contains name of a generic-family, such as"serif", "sans-serif", "cursive", "fantasy",
"monospace".

Syntax:

element_selector {
font-family: family-name|generic-family|initial|inherit;
}

Property values:

o fonts-name: This specifies the name of the font in quotes separated by commas.
o generic-family: It is used to set the font of text in an HTML document from the list of available fonts
from the font pool.
o initial: It is used to set an element’s CSS property to its default value.
o inherit: It is used to inherit a property to an element from its parent element property value.

Note: The font-name can be declared with the single quotes when using the style attribute in the
HTML & also it must be quoted when it contains white space.

Example:

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS | font-family Property </title>
<style>
.para1 {
font-family: "Impact", Times, serif;
}

.para2 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
 <body>
<h1>Font-family Property</h1>
<p class="para1">GeeksforGeeks in Impact font</p>

<p class="para2">GeeksforGeeks in Arial font.</p>

</body>
</html>
Output:

12. Font size

The font-size property in CSS is used to set the font size of text in HTML document.

Syntax:

font-size: medium|xx-small|x-small|small|large|x-large
|xx-large|smaller|larger|length|initial|inherit;

Property Values:

o absolute-size: The absolute-size is used to set the font size absolutely. The default value of absolute-
size is medium. The list of absolute-size property are xx-small, x-small, small, medium, large, x-large,
xx-large.

Syntax:

font-size: medium|xx-small|x-small|small|large|x-large|xx-large;

Example1:

html

<!DOCTYPE html>
<html>
<head>
<title>
CSS font-size property
</title>

<!-- CSS style to set font-size property -->

<style>
.xxsmall {
color:green;
font-size:xx-small;
}
.xsmall {
color:green;
font-size:x-small;
}
.small {
color:green;
font-size:small;
}
.medium {
color:green;
font-size:medium;
}
.large {
color:green;
font-size:large;
}
.xlarge {
color:green;
font-size:x-large;
}
.xxlarge {
color:green;
font-size:xx-large;
}
</style>
</head>

<body>
<h1>font-size property</h1>
 <div class = "xxsmall">font-size: xx-small;</div>
<div class = "xsmall">font-size: x-small;</div>
<div class = "small">font-size: small;</div>
<div class = "medium">font-size: medium;</div>
<div class = "large">font-size: large;</div>
<div class = "xlarge">font-size: x-large;</div>
<div class = "xxlarge">font-size: xx-large;</div>
</body>
</html>

Output:

Example:

html

<!DOCTYPE html>
<html>
<head>
<title>
CSS font-size Property
</title>

<!-- CSS property to set font-size -->

<style>
.length {
color:green;
font-size: 40px;
 }
</style>
</head>

<body>
<h1>font-size property</h1>

<div class = "length">font-size: length;</div>

</body>
</html>

Output:

13. Font Stretch

The font-stretch property in CSS is used to set the text wider or narrower. This property is not
working any font. Its only work when font family has a width-variant face.

Syntax:

font-stretch: normal|ultra-condensed|extra-condensed|condensed|
semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded;

Property Values:

o normal: It is the default font face. It does not stretch the font.
o ultra-condensed: It is used to specify font face more condensed than normal.
o extra-condensed: It is used to set text narrower then normal and not narrower then ultra-
condensed.
o condensed: It is used to set text narrower then semi-condensed and not narrower then extra-
condensed.
o semi-condensed: It is used to set text narrower then normal and not narrower then semi-
condensed.
o semi-expanded: It is used to set text wider than normal, but not wider then expanded.
o expanded: It is used to set text wider than semi-expanded, but not wider then extra-expanded.
o extra-expanded: It is used to set text wider than expanded, but not wider then ultra-expanded.
o ultra-expanded: It is used to set text wider than ultra-expanded.

Example:

html
<!--HTML code to illustrate font-stretch
Property -->
<!DOCTYPE html>
<html>
<head>
<title>
CSS font-stretch Property
</title>

<style>
.normal {
font-stretch: normal;
}

.ultra_condensed {
font-stretch: ultra-condensed;
}

.extra_condensed {
font-stretch: extra-condensed;
}

.condensed {
font-stretch: condensed;
}

.extra_condensed {
font-stretch: extra-condensed;
}

.semi_expanded {
font-stretch: semi-expanded;
}

.expanded {
font-stretch: expanded;
}

.extra_expanded {
font-stretch: extra-expanded;
}
 .ultra_expanded {
font-stretch: ultra-expanded;
}
</style>
</head>

<body>
<div class = "normal">
GeeksforGeeks: A computer science portal
</div>

<div class = "ultra_condensed">

GeeksforGeeks: A computer science portal
</div>

<div class = "extra_condensed">

GeeksforGeeks: A computer science portal
</div>

<div class = "condensed">

GeeksforGeeks: A computer science portal
</div>

<div class = "extra_condensed">

GeeksforGeeks: A computer science portal
</div>

<div class = "semi_expanded">

GeeksforGeeks: A computer science portal
</div>

<div class = "expanded">

GeeksforGeeks: A computer science portal
</div>

<div class = "extra_expanded">

GeeksforGeeks: A computer science portal
</div>

<div class = "ultra_expanded">

 GeeksforGeeks: A computer science portal
</div>
</body>

</html>
Output:

Note: This property will not work on any font.

14. Font Style
A font-style CSS property is used to style the given particular text in a normal, italic, or oblique face
from its font-family. Using the font-style property, we can assign importance along with decorating
the specific text. It helps to make a better user experience. In CSS, if we want to give designing to
any type of text then we can make the use of CSS font-style property.

Syntax:

font-style: normal|italic|oblique|initial|inherit;

Property values:

o normal: This is the default value of the font-style for which the browser will display normal font text.
o italic: This font-style is used to display the text as italic in the browser.
o oblique: This font-style specifies an angle for the slant of the text. The displayed font-style is oblique
in the browser.
o initial: This font-style property is used to set the font to its default value.
o inherit: This font-style property is used to inherit the current property from its parent element.

We will discuss all the font-style properties through the examples. Let's begin with
the normal font-style property.

o font-style: normal: Browser will display normal font text it is the default value.

Syntax:

font-style: normal;

Example:
 html

<!DOCTYPE html>
<html>
<head>
<title>GFG - Text Formatting</title>
</head>
<body>
<h2>Text Formatting</h2>
<p style="font-style: normal;">Font Style (normal)</p>
<p style="font-style: oblique;">Font Style (oblique)</p>
<p style="font-style: initial;">Font Style (initial)</p>
<p style="font-style: italic;">Font Style (Itatlic)</p>
<p style="font-style: inherit;">Font Style (inherit)</p>
</body>
</html>

Output:

15. Font Variant

The font-variant property is used to converted all lowercase letters into uppercase letters. But the
converted upper letters appear too small font-size than the original uppercase letters.

Syntax:

font-variant: normal|small-caps|initial;

Example:

html
 <!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>GFG - Text Formatting</title>
</head>
<body>
<h2>Text Formatting</h2>
<p style="font-variant: small-caps;">Font Variant (small caps)</p>
<p style="font-variant: normal;">Font Variant (normal)</p>
<p style="font-variant: initial;">Font Variant (initial)</p>
</body>
</html>

Output:

16. Font Weight

The font-weight property of the CSS is used to set the weight or thickness of the font being used
with the HTML Text. The font-weight applied will depend on font-family used and the browser. For
instance, some font-family is available only in specific weights.

Syntax:
font-weight: normal|bold|lighter|bolder|number|initial|inherit|unset;

Property Values:

o normal: This is the default font-weight & defines the normal font-weight. It is equal to the number
value 400.
o bold: This defines the bold font-weight, it is equal to the number value 700.
o lighter: This makes the font-weight one level lighter than the parent element, considering the
available font weights of the font family.
o bolder: This makes the font-weight one level heavier than the parent element, considering the
available font weights of the font family.
o number: This sets the font-weight according to the number specified. The number can range
between 1 to 1000. If the exact weight is unavailable, a suitable weight is applied.

Global Values:

o initial: This sets the font-weight to the initial(default) value.

o inherit: This sets the font-weight equal to the value inherited from its parent element.
 o unset: This sets the font-weight equal to the value inherited from its parent element since font-
weight is an inheritable property.

HTML

<!DOCTYPE html>
<html>
<head>
<title> font-weight property </title>
<!-- font-weight CSS property -->
<style>
body {
font-weight: bold;
font-family: sans-serif;
}

p.one {
font-weight: bold;
}

p.two {
font-weight: lighter;
}

p.three {
font-weight: 1000;
}

p.four {
font-weight: initial;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h3>CSS font-weight Property</h3>

<!-- font-weight: bold; length; property -->

<p class="one">
Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with a
free online placement preparation course.
 The course focuses on various MCQ's & Coding
question likely to be asked in the interviews
& make your upcoming placement season efficient
and successful.
</p>

<!-- font-weight: lighter; length; property -->

<p class="two">
Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with a
free online placement preparation course. The course
focuses on various MCQ's & Coding question likely to
be asked in the interviews & make your upcoming
placement season efficient and successful.
</p>

<!-- font-weight: 1000; length; property -->

<p class="three">
Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with
a free online placement preparation course. The
course focuses on various MCQ's & Coding question
likely to be asked in the interviews & make your
upcoming placement season efficient and successful.
</p>

<!-- font-weight: initial; length; property -->

<p class="four">
Prepare for the Recruitment drive of product based
companies like Microsoft, Amazon, Adobe etc with a
free online placement preparation course. The course
focuses on various MCQ's & Coding question likely to
be asked in the interviews & make your upcoming
placement season efficient and successful.
</p>

</body>
</html>
 Output:

4)Styling Images to fit in a Container

To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how
an image or video fits in the container. object-fit property: This property is used to specify how an image
or video resize and fit the container. It tells the content how to fit in a specific div container in various way
such as preserve that aspect ratio or stretch up and take up as much space as possible.

 Example 1: This example describes the auto-resize image fit to div container. This example does
not contain object-fit property.

HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
width:60%;
height:300px;
}
img {
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class = "geeks">
 <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt = "Geeks Image" />
</div>
</body>
</html>
Output:

In the above example as the object-fit property is not used, the image is being squeezed to fit the container,
and its original aspect ratio is destroyed.

 Example 2: This example is used to display the part of image when use resize the div container.

HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks {
width:60%;
height:300px;
}
img {
width:100%;
height:100%;
object-fit:cover;
}
</style>
</head>
 <body>
<div class = "geeks">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt = "Geeks Image" />
</div>
</body>
</html>
Output:

Note: Using object-fit: cover; will cut off the sides of the image, preserving the aspect ratio, and also filling
in space.

 Example 3: This example displays an image without using object-fit property. In this example, the
size of the image is set manually and the image will not be able to maintain its aspect ratio and
adjust or resize according to div container on resizing the browser window.

HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align:center;
}
img {
width:400px;
height:200px;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks Image">
</body>
</html>
Output:

 Example 4: This example displays the part of image or image using object-fit property. In this
example, the size of the image is set manually and the object-fit property is also used. In this case,
on resizing the browser the image will maintain its aspect ratio and will not be resized according to
div container.

HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align:center;
}
img {
width:400px;
height:200px;
object-fit: cover;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-25.png"
alt="Geeks Image">
</body>
</html>
Output:

 Note: The property object-fit: cover; will cut the sides of the image, preserving the aspect ratio, and
also filling in space.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.
You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.

5)Styling Links

Link is a connection from one web page to another web pages. CSS property can be used to style the links
in various different ways.
States of Link: Before discussing CSS properties, it is important to know the states of a link. Links can exist
in different states and they can be styled using pseudo classes.
There are four state of links given below:

 a:link => This is a normal, unvisited link.

 a:visited => This is a link visited by user at least once
 a:hover => This is a link when mouse hovers over it
 a:active => This is a link which is just clicked.

Syntax:

a:link {
color:color_name;
}

color_name can be given in any format like color name (green), HEX value (#5570f0) or RGB value rgb(25,
255, 2). There is another state ‘a:focus’ which is used to focused when a user uses tab key to navigate
through the links.
Default value of links:
  By default the links created are underlined.
 When mouse is hovered above a link, it changes to a hand icon.
 Normal/unvisited links are blue.
 Visited links a colored purple.
 Active links are colored red.
 When a link is focused, it has an outline around it.

Example

HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS links</title>
<style>
p {
font-size: 25px;
text-align: center;
}

</style>
</head>

<body>
<p><a href="https://www.geeksforgeeks.org/">GeeksforGeeks Simple Link</a></p>
</body>
</html>
Output:

CSS Properties of Links: Some basic CSS properties of links are given below:

 color
 font-family
 text-decoration
 background-color

color: This CSS property is used to change the color of link text.
Syntax:

a {
 color: color_name;
}

Example:

HTML
<!DOCTYPE html>
<html>
<head>
<title>Link color property</title>
<style>
p {
font-size: 20px;
text-align:center;
}

/*unvisited link will appear green*/

a:link{
color:red;
}

/*visited link will appear blue*/

a:visited{
color:blue;
}

/*when mouse hovers over link it will appear orange*/

a:hover{
color:orange;
}

/*when the link is clicked, it will appear black*/

a:active{
color:black;
}

</style>
</head>

<body>
<p><a href="https://www.geeksforgeeks.org/">GeeksforGeeks</a>
This link will change colours with different states.</p>
</body>
</html>
Output:

font-family: This property is used to change the font type of a link using font-family property.
Syntax:

a {
font-family: "family name";
}

Example:

HTML
<!DOCTYPE html>
<html>
<head>
<style>
/*Initial link font family arial*/
a {
font-family:Arial;
}
p {
font-size: 30px;
text-align:center;
}

/*unvisited link font family*/

a:link{
color:Arial;
}

/*visited link font family*/

a:visited{
font-family:Arial;
}
 /*when mouse hovers over it will change to times new roman*/
a:hover{
font-family:Times new roman;
}

/*when the link is clicked, it will changed to Comic sans ms*/

a:active{
font-family:Comic Sans MS;
}
</style>
</head>

<body>
<p><a href="https://www.geeksforgeeks.org/"
id="link">GeeksforGeeks</a> a Computer Science
Portal for Geeks.</p>
</body>
</html>
Output:

Text-Decoration: This property is basically used to remove/add underlines from/to a link.

Syntax:

a {
text-decoration: none;
}

Example:

HTML
<!DOCTYPE html>
<html>
<head>
<title>Text decoration in link</title>
 <style>

/*Set the font size for better visibility*/

p {
font-size: 2rem;
}

/*Removing underline using text-decoration*/

a{
text-decoration: none;
}
/*underline can be added using
text-decoration:underline;
*/
</style>
</head>
<body>
<p><a href="https://www.geeksforgeeks.org/" id="link">GeeksforGeeks</a> a Computer
Science
Portal for Geeks.</p>
</body>
</html>
Output:

background-color: This property is used to set the background color of link.

Syntax:

a {
background-color: color_name;
}

Example:

HTML
<!DOCTYPE html>
<html>
<head>
<title>background color</title>
<style>
/*Setting font size for better visibility*/
 p{
font-size: 2rem;
}
/*Designing unvisited link button*/
a:link{
background-color: powderblue;
color:green;
padding:5px 5px;
text-decoration: none;
display: inline-block;
}

/*Designing link button when mouse cursor hovers over it*/

a:hover{
background-color: green;
color:white;
padding:5px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<p><a href="https://www.geeksforgeeks.org/" id="link">
GeeksforGeeks</a> a Computer Science Portal for Geeks.</p>
</body>
</html>
Output:

CSS Link Button: CSS links can also be styled using buttons/boxes. The following example shows how CSS
links can be designed as buttons.
Example:

HTML
<!DOCTYPE html>
<html>
<head>
<title>Link button</title>
<style>
/*Setting font size for better visibility*/
p{
font-size: 2rem;
}
a {
background-color: green;
color:white;
padding:5px 5px;
border-radius:5px;
text-align: center;
text-decoration: none;
display: inline-block;
}
</style>
</head>
<body>
<p><a href="https://www.geeksforgeeks.org/" id="link">
GeeksforGeeks</a> a Computer Science Portal for Geeks.</p>
</body>
</html>
Output:

CSS units – %, em, rem, px, vh, vw

In this article, we will see how to set the CSS units in different ways.

 % – The % unit is used to set the font-size relative to the current font-size.
 em – It is used to set the relative size. It is relative to the font-size of the element.
Note: Here 2em meaning 2times the size of current font.
 rem – Relative to the browser base font-size.
 px – It defines the font-size in terms of pixels. (96px = 1in)
 vh – Relative to 1% of the height of the viewport.
 vw – Relative to 1% of the width of the viewport.

Example 1: The pixel unit is an absolute unit to set the width i.e. it is always the same. A percentage unit
is based on a relative unit i.e. it is based on its parent size.
HTML
<!DOCTYPE html>
<html>

<head>
<style>
.box {
background: red;
border: 1px solid black;
margin: 10px;
}

.parent {
background: white;
border: 1px solid black;
}

.fifty-percent {
width: 50%;
}

.one-hundred {
width: 100px;
}

.parent {
width: 250px;
;
}
</style>
</head>

<body>
<h3>Output-1 </h3>
<div class="box fifty-percent">50%</div>
<div class="box one-hundred">100px</div>
<hr>
<h3>Output-2 </h3>
<div class="parent">
<div class="box fifty-percent">50%</div>
<div class="box one-hundred">100px</div>
 </div>
</body>

</html>
Output :

Example 2: Another type of relative width is called view width (vw) and view height (vh). 1vw equals
one percent of the entire screen size so 100 vw would take up the entire width and 50vw obviously would
take up half the width but the important thing about vw versus percentages is that viewport units are
based on the entire screen size while rectangles are relative to their parent.

HTML
<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
<style>
.box {
background: red;
border: 1px solid black;
margin: 10px;
}

.parent {
background: white;
border: 1px solid black;
}
 .fifty-percent {
width: 50%;
}

.fifty-vw {
width: 50vw;
}

.twenty-five-vh {
height: 25vh;
}

.parent {
width: 100px;
;
}
</style>
</head>

<body>
<h3>Output-1 </h3>
<div class="box fifty-percent">50%</div>
<div class="box fifty-vw">50vw</div>
<div class="box twenty-five-vh">25vh</div>
<hr>
<h3>Output-2 </h3>
<div class="parent">
<div class="box fifty-percent">50%</div>
<div class="box fifty-vw">50vw</div>
<div class="box twenty-five-vh">25vh</div>
</div>
</body>

</html>
Output:
Example 3: Both REM units and EM units are relative but instead of being relative to things around them
such as the width of their parents or the height of the parents they’re actually relative to the font size.

HTML
<!DOCTYPE html>
<html>

<head>
<title>Page Title</title>
<style>
.parent {
background: white;
border: 1px solid black;
}

.one-rem {
font-size: 1rem;
}

.one-em {
font-size: 1em;
}

.two-rem {
font-size: 2rem;
}

.two-em {
font-size: 2em;
}

.parent {
font-size: 30px;
}
</style>
</head>

<body>
<h3>Output-1</h3>
<div class="one-rem">1rem</div>
<div class="one-em">1em</div>
<div class="two-rem">2rem</div>
<div class="two-em">2em</div>
<hr>
<h3>Output-2</h3>
<div class="parent">
 <div class="one-rem">1rem</div>
<div class="one-em">1em</div>
<div class="two-rem">2rem</div>
<div class="two-em">2em</div>
</div>
</body>

</html>
Output:

Difference between em and rem units in CSS

While setting the size of any element in CSS, we have two choices. The first one is absolute units and the
other is relative units. Absolute units are fixed and not relative to anything else. They are always identical
in any case. They involve cm, mm, px, etc. On the other side, relative units are relative to something else. It
may be the size of the parent element or the size of the main HTML. Relative units cover em, rem, vw, vh,
etc. These are scalable units and helps in responsive design. Many of us might get confused between the
relative units, especially the em and the rem units. Let’s break down the difference between those two.
Basically that both rem and em are scalable and relative units of size, but with em, the unit is relative to
the font size of its parent element, while the rem unit is only relative to the root font size of the HTML
document. The “r” in rem stands for “root”.

Lets’s understand both of them in detail.

1. em Unit: The em unit allows setting the font size of an element relative to the font size of its parent.
When the size of the parent element changes, the size of the child changes automatically.

Note: When em units are used on font-size property, the size is relative to the font-size of the parent. When
used on other properties, it’s relative to the font-size of that element itself. Here, only the first declaration
takes the reference of the parent.

 The font-size of the .child element will be 40px (2*20px).

 The margin of .child will be 60px. That’s 1.5 times the font-size of our element (1.5*40px).

Example:

HTML
<!DOCTYPE html>
<html>

<head>
<title>Em vs Rem</title>
</head>

<style>
.parent {
font-size: 20px;
}

.child-em {
font-size: 2em;
margin: 1.5em;
}
</style>

<body>
<div class="parent">
This is parent
<div class="child-em">
This is Child in em unit system
 </div>
</div>
</body>

</html>
Output:

em unit
2. rem Unit: The rem is based upon the font-size value of the root element, which is the <html> element.
And if the <html> element doesn’t have a specified font-size, the browser default value of 16px is used. So
here only the value of the root is considered, and there is no relation with a parent element.

Unlike em, here size is relative for all declarations, not only first. Let’s understand this with our previous
example.

 The font-size of the .child element will be 60px (2*30px).

 The margin of .child will be 45px. That’s 1.5 times the font-size of the html element (1.5*30px).

HTML
<!DOCTYPE html>
<html>

<head>
<title>Em vs Rem</title>
</head>

<style>
html {
font-size: 30px;
}

.parent {
font-size: 20px;
}
 .child-rem {
font-size: 2rem;
margin: 1.5rem;
}
</style>

<body>
<div class="parent">
This is parent
<div class="child-rem">
This is Child in rem unit system
</div>
</div>
</body>

</html>
Output:

rem unit
Difference between em and rem unit is given below:

Parameter em rem

em is relative to the font-size of its direct or rem is relative to the HTML (root)
Relativity
nearest parent font-size

Compounding Does not lead to a compounding

May lead to a compounding effect
Effect effect

Hope you got a clear difference between the em and the rem units. It is very easy to remember, r in rem
indicates root, is relative to the root (HTML) and em is relative to the parent.

Box Model
The CSS box model is a container that contains multiple properties including borders, margin, padding,
and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for
customizing the layout of different elements. The web browser renders every element as a rectangular box
according to the CSS box model. Box-Model has multiple properties in CSS. Some of them are given below:

 content: This property is used to displays the text, images, etc, that can be sized using the width &
height property.
 padding: This property is used to create space around the element, inside any defined border.
 border: This property is used to cover the content & any padding, & also allows to set the style,
color, and width of the border.
 margin: This property is used to create space around the element ie., around the border area.

The following figure illustrates the Box model in CSS.

 Content Area: This area consists of content like text, images, or other media content. It is bounded
by the content edge and its dimensions are given by content-box width and height.
 Padding Area: It includes the element’s padding. This area is actually the space around the content
area and within the border-box. Its dimensions are given by the width of the padding-box and the
height of the padding-box.
 Border Area: It is the area between the box’s padding and margin. Its dimensions are given by the
width and height of the border.
 Margin Area: This area consists of space between border and margin. The dimensions of the
Margin area are the margin-box width and the margin-box height. It is useful to separate the
element from its neighbors.

For setting the width & height property of an element(for properly rendering the content in the browser),
we need to understand the working of the CSS Box model.
While setting the width and height properties of an element with CSS, we have only set the width and
height of the content area. We need to add padding, borders, and margins in order to calculate the full size
of an element. Consider the below example.

p {
width: 80px;
height: 70px;
margin: 0;
border: 2px solid black;
padding: 5px;
}

The total width for the element can be calculated as:

Total element width = width + left padding + right padding + left border + right border + left margin
+ right margin
The <p> element can have a total width of 94px.

Total width = 80px (width) + 10px (left padding + right padding) + 4px (left border + right border) + 0px
(left margin + right margin) = 94px.

The total height for the element can be calculated as:

Total element height = height + top padding + bottom padding + top border + bottom border + top
margin + bottom margin
The <p> element can have a total height of 84px.

Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top border + bottom border)
+ 0px (top margin + bottom margin) = 84px.

We will understand the Box model concept through the examples.

Example 1: This example illustrates the use of the CSS Box model for aligning & displaying it properly.

HTML
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size: 36px;
font-weight: bold;
Text-align: center;
}

.gfg {
 margin-left: 60px;
border: 50px solid #009900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}

.gfg1 {
font-size: 42px;
font-weight: bold;
color: #009900;
margin-top: 60px;
background-color: #c5c5db;
}

.gfg2 {
font-size: 18px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>

<body>
<div class="main">CSS Box-Model Property</div>
<div class="gfg">
<div class="gfg1">GeeksforGeeks</div>
<div class="gfg2">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
Example 2: This example illustrates the Box Model by implementing the various properties.

HTML
<!DOCTYPE html>
<head>
<style>
.main {
font-size: 32px;
font-weight: bold;
text-align: center;
}

#box {
padding-top: 40px;
width: 400px;
height: 100px;
border: 50px solid green;
margin: 50px;
text-align: center;
font-size: 32px;
font-weight: bold;
}
</style>
</head>

<body>
<div class="main">CSS Box-Model Property</div>
<div id="box">GeeksforGeeks</div>
</body>
</html>
Output:

Supported Browser:

 Google Chrome
 Internet Explorer
 Microsoft Edge
 Firefox
 Opera
 Safari

Box Model

The CSS box model is a container that contains multiple properties including borders, margin, padding,
and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for
customizing the layout of different elements. The web browser renders every element as a rectangular box
according to the CSS box model. Box-Model has multiple properties in CSS. Some of them are given below:

 content: This property is used to displays the text, images, etc, that can be sized using the width &
height property.
  padding: This property is used to create space around the element, inside any defined border.
 border: This property is used to cover the content & any padding, & also allows to set the style,
color, and width of the border.
 margin: This property is used to create space around the element ie., around the border area.

The following figure illustrates the Box model in CSS.

 Content Area: This area consists of content like text, images, or other media content. It is bounded
by the content edge and its dimensions are given by content-box width and height.
 Padding Area: It includes the element’s padding. This area is actually the space around the content
area and within the border-box. Its dimensions are given by the width of the padding-box and the
height of the padding-box.
 Border Area: It is the area between the box’s padding and margin. Its dimensions are given by the
width and height of the border.
 Margin Area: This area consists of space between border and margin. The dimensions of the
Margin area are the margin-box width and the margin-box height. It is useful to separate the
element from its neighbors.

For setting the width & height property of an element(for properly rendering the content in the browser),
we need to understand the working of the CSS Box model.

While setting the width and height properties of an element with CSS, we have only set the width and
height of the content area. We need to add padding, borders, and margins in order to calculate the full size
of an element. Consider the below example.

p {
width: 80px;
height: 70px;
margin: 0;
border: 2px solid black;
 padding: 5px;
}

The total width for the element can be calculated as:

Total element width = width + left padding + right padding + left border + right border + left margin
+ right margin
The <p> element can have a total width of 94px.

Total width = 80px (width) + 10px (left padding + right padding) + 4px (left border + right border) + 0px
(left margin + right margin) = 94px.

The total height for the element can be calculated as:

Total element height = height + top padding + bottom padding + top border + bottom border + top
margin + bottom margin
The <p> element can have a total height of 84px.

Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top border + bottom border)
+ 0px (top margin + bottom margin) = 84px.

We will understand the Box model concept through the examples.

Example 1: This example illustrates the use of the CSS Box model for aligning & displaying it properly.

HTML
<!DOCTYPE html>
<head>
<title>CSS Box Model</title>
<style>
.main {
font-size: 36px;
font-weight: bold;
Text-align: center;
}

.gfg {
margin-left: 60px;
border: 50px solid #009900;
width: 300px;
height: 200px;
text-align: center;
padding: 50px;
}

.gfg1 {
 font-size: 42px;
font-weight: bold;
color: #009900;
margin-top: 60px;
background-color: #c5c5db;
}

.gfg2 {
font-size: 18px;
font-weight: bold;
background-color: #c5c5db;
}
</style>
</head>

<body>
<div class="main">CSS Box-Model Property</div>
<div class="gfg">
<div class="gfg1">GeeksforGeeks</div>
<div class="gfg2">
A computer science portal for geeks
</div>
</div>
</body>
</html>
Output:
Example 2: This example illustrates the Box Model by implementing the various properties.

HTML
<!DOCTYPE html>
<head>
<style>
.main {
font-size: 32px;
font-weight: bold;
text-align: center;
}

#box {
padding-top: 40px;
width: 400px;
height: 100px;
border: 50px solid green;
margin: 50px;
text-align: center;
font-size: 32px;
font-weight: bold;
}
</style>
</head>

<body>
<div class="main">CSS Box-Model Property</div>
<div id="box">GeeksforGeeks</div>
</body>
</html>
Output:

Supported Browser:

 Google Chrome
 Internet Explorer
 Microsoft Edge
 Firefox
 Opera
 Safari

Position property

The position property in CSS tells about the method of positioning for an element or an HTML entity.
There are five different types of position property available in CSS:

 Fixed
 Static
 Relative
 Absolute
 Sticky
The positioning of an element can be done using the top, right, bottom, and left properties. These specify
the distance of an HTML element from the edge of the viewport. To set the position by these four
properties, we have to declare the positioning method. Let’s understand each of these position methods in
detail:

Fixed: Any HTML element with position: fixed property will be positioned relative to the viewport. An
element with fixed positioning allows it to remain at the same position even we scroll the page. We can set
the position of the element using the top, right, bottom, left.

Example: The below example illustrates the CSS positioning element by using the position: fixed property.

HTML
<!DOCTYPE html>
<html>

<head>
<title> CSS Positioning Element</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}

.fixed {
position: fixed;
background: #cc0000;
color: #ffffff;
padding: 30px;
top: 50;
left: 10;
}

span {
padding: 5px;
border: 1px #ffffff dotted;
}
</style>
</head>

<body>
<div class="fixed">This div has
 <span>position: fixed;</span>
</div>
<pre>
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
</pre>
</body>

</html>
Output:
Static: This method of positioning is set by default. If we don’t mention the method of positioning for any
element, the element has the position: static method by default. By defining Static, the top, right, bottom
and left will not have any control over the element. The element will be positioned with the normal flow
of the page.

Example: The below example illustrates the CSS positioning element by using the position: static property.

HTML
<!DOCTYPE html>
<html>

<head>
<title> CSS Positioning Element</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}

.static {
position: static;
background: #cc0000;
color: #ffffff;
padding: 30px;
}

span {
 padding: 5px;
border: 1px #ffffff dotted;
}
</style>
</head>

<body>
<div class="static">
This div has
<span>position: static;</span>
</div>
<pre>
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
</pre>
</body>
</html>
Output:

Relative: An element with position: relative is positioned relatively with the other elements which are
sitting at top of it. If we set its top, right, bottom, or left, other elements will not fill up the gap left by this
element. An element with its position set to relative and when is adjusted using top , bottom ,left, right will
be positioned relative to its original position.

Example: The below example illustrates the CSS positioning element by using the position:
relative property. In the below illustration the top and left coordinates of the div are each to 100px.

HTML
<!DOCTYPE html>
<html>

<head>
<title> CSS Positioning Element</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}
 .relative {
position: relative;
background: #cc0000;
color: #ffffff;
padding: 30px;
top:100px;
left:100px;
}

span {
padding: 5px;
border: 1px #ffffff dotted;
}
</style>
</head>

<body>
<pre>
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
<div class="relative">
This div has <span>position: relative;</span>
</div>
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
 Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
</pre>
</body>

</html>
Output:

Absolute: An element with position: absolute will be positioned with respect to its nearest Non-static
ancestor. The positioning of this element does not depend upon its siblings or the elements which are at
the same level.

Example: The below example illustrates the CSS positioning element by using the position:
absolute property.

HTML
<!DOCTYPE html>
<html>

<head>
<title> CSS Positioning Element</title>
 <style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}

.absolute {
position: absolute;
background: #cc0000;
color: #ffffff;
padding: 30px;
font-size: 15px;
bottom: 20px;
right: 20px;
}

.relative {
position: relative;
background: #aad000;
height: 300px;
font-size: 30px;
border: 1px solid #121212;
text-align: center;
}

span {
padding: 5px;
border: 1px #ffffff dotted;
}

pre {
padding: 20px;
border: 1px solid #000000;
}
</style>
</head>

<body>
<pre>
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
<div class="relative">
<div >
This div has
<span>
<strong>position: relative;</strong>
</span>
</div>
<div class="absolute">
This div has
<span>
<strong>position: absolute;</strong>
</span>
</div>
</div>
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
 Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
</pre>
</body>

</html>
Output:

Sticky: Element with position: sticky and top: 0 played a role between fixed & relative based on the
position where it is placed. If the element is placed at the middle of the document then when the user
scrolls the document, the sticky element starts scrolling until it touches the top. When it touches the top, it
will be fixed at that place in spite of further scrolling. We can stick the element at the bottom, with
the bottom property.

Example: The below example illustrates the CSS positioning element by using the position: sticky property.

HTML
<!DOCTYPE html>
<html>

<head>
<title> CSS Positioning Element</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: sans-serif;
background: #efefef;
}

.sticky {
position: sticky;
background: #cc0000;
color: #ffffff;
padding: 30px;
top: 10px;
right: 50px;
}

span {
padding: 5px;
border: 1px #ffffff dotted;
}

pre {
padding: 20px;
border: 1px solid #000000;
}
</style>
</head>

<body>
<pre>
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
<div class="sticky">
This div has <span>position: sticky;</span>
</div>
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
 in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
Learn the most common Data Structures & Algorithms
to solve coding problems. Enrol now! Master core
Data Structures & Algorithms to ace interviews
from IIT & Stanford Alumni. TA Support. Placements
in Companies. Get Certified. 350+ Problems.A data
structure is a particular way of organizing data in
a computer so that it can be used effectively.
</pre>
</body>

</html>
Output:

Supported Browser:

 Google Chrome 1.0

 Microsoft Edge 12.0
 Firefox 1.0
 Internet Explorer 4.0
 Opera 4.0
 Safari 1.0

CSS Syntax and Selectors | Fork CSS

CSS Selectors

They are used to selecting HTML elements based on their element name, id, attributes, etc. It can select one
or more elements simultaneously.

CSS Selector can be divided into 5 categories:

 Simple Selector: It is used to select the HTML elements based on their element name, id, attributes,
etc.
 Combinators Selector: It is used for explaining the relationship between two selectors.'
 Pseudo-classes Selector: It is used to define the special state of an element.
 Pseudo Elements Selector: It is a keyword added to a selector that lets you style a specific part of
the selected elements.
 Attribute Selector Selector: It is used to select an element with some specific attribute or attribute
value.

We will focus ourselves to the Simple Selector & also understand its implementation through the examples.

The Simple Selector can be categorized in 3 ways:

CSS element selector:

The element selector in CSS is used to select HTML elements that are required to be styled. In a
selector declaration, there is the name of the HTML element, and the CSS properties which are to
be applied to that element are written inside the brackets {}.

Syntax:

element_name {
// CSS Property
}

Example: This example illustrates the use of the element selector for selecting the HTML elements
by their element name & style them.

HTML

<!DOCTYPE html>
<html>
 <head>

<!-- Syntax of h1 selector -->

<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Output:

 CSS id selector:

The #id selector is used to set the style of the given id. The id attribute is the unique identifier in an
HTML document. The id selector is used with a # character.

Syntax:

#id_name {
// CSS Property
}

Example: This example illustrates the use of the id selector for selecting the HTML elements by
their id & style them.

HTML

<!DOCTYPE html>
<html>
<head>

<!-- Style of id selector -->

<style>
#heading {
color: green;
text-align: center;
 font-size: 40px;
font-weight: bold;
}
</style>
</head>

<body>
<div id="heading"> GeeksforGeeks </div>
</body>
</html>
Output:




CSS class selector:

The .class selector is used to select all elements which belong to a particular class attribute. To select
the elements with a particular class, use (.) character with specifying the class name. The class name
is mostly used to set the CSS property to the given class.

Syntax:

.class_name {
// CSS Property
}

Example: This example illustrates the use of the class selector for selecting the HTML elements by
their class & style them.

HTML

<!DOCTYPE html>
<html>
<head>

<!-- Style of class selector -->

<style>
.heading {
color: green;
text-align: center;
 font-size: 40px;
font-weight: bold;
}
</style>
</head>

<body>
<div class="heading"> GeeksforGeeks </div>
</body>
</html>
Output:

For applying the common CSS style properties to all the HTML Elements then we can use
the universal selector which is denoted by a star(*) symbol.

CSS * Selector:

The * selector in CSS is used to select all the elements in an HTML document. It also selects all
elements which are inside under another element. It is also called the universal selector.

Syntax:

* {
// CSS property
}

Example: This example illustrates the use of the universal selector for selecting all the HTML
elements that contain the common CSS properties & styles them.

HTML

<!DOCTYPE html>
<html>
<head>
<title>* Selector</title>

<!-- CSS property of * selector -->

<style>
* {
 color: green;
text-align: center;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
<h2>*(Universal) Selector</h2>
<div>

<p>GFG</p>

<p>Geeks</p>

</div>

<p>It is a computer science portal for geeks.</p>

</body>
</html>
Output:

CSS | Specificity

When more than one set of CSS rules apply to the same element, the browser will have to decide which
specific set will be applied to the element. The rules the browser follows are collectively called Specificity

Specificity Rules include:

  CSS style applied by referencing external stylesheet has lowest precedence and is overridden by
Internal and inline CSS.
 Internal CSS is overridden by inline CSS.
 Inline CSS has highest priority and overrides all other selectors.

Example:

HTML
<html>

<head>
<link rel="stylesheet" type="text/css" href="external.css">
<style type="text/css">
h1 {
background-color: red;
color: white;
}

h2 {
color: blue;
}
</style>
</head>

<body>
<h1>
Internal CSS overrides external CSS
</h1>
<h2 style="color: green;">
Inline CSS overrides internal CSS
</h2>
</body>

</html>
“external.css” of Example 1:

HTML
h1{
background-color: lightgreen;
}
h2{
color: pink;
}
Output:

Specificity Hierarchy :Every element selector has a position in the Hierarchy.

1. Inline style: Inline style has highest priority.

2. Identifiers(ID): ID have the second highest priority.

3. Classes, pseudo-classes and attributes: Classes, pseudo-classes and attributes are come next.

4. Elements and pseudo-elements: Elements and pseudo-elements have lowest priority.

Example 2:

HTML
<html>

<head>
<style type="text/css">
h1 {
background-color: red;
color: white;
}

#second {
background-color: black;
color: white;
}

.third {
background-color: pink;
color: blue;
 }

#second1 {
color: blue;
}

.third1 {
color: red;
}
</style>
</head>

<body>
<h1 id="second" class="third">
ID has highest priority.
</h1>
<h1>
Element selectors has lowest priority.
</h1>
<h1 class="third">
Classes have higher priority than element selectors.
</h1>

<h2 style="color: green;" id="second1" class="third1">

Inline CSS has highest priority. </h2>

</body>

</html>
Output:
Note:

 When two or more selectors have equal specificity, the last(latest) one counts.
 Universal selectors like body and inherited selectors have least specificity.

Stacking Context

The stacking order describes the order in which HTML elements are positioned. By default, HTML
elements are positioned in the following order:

 Root element(<html>)
 Non-positioned elements in the order they’re defined(elements with no position described i.e.
static)
 Positioned elements in the order they are defined(elements with position other than static)

Let us try to understand how the default stacking order works:

Example 1: Default stacking order

Below is the HTML and CSS code to understand the default stacking order:

HTML
<!DOCTYPE html>
<html>

<head>
<title>Default stacking order</title>

<style>
.box {
box-sizing: border-box;
font-family: Arial;
color: #eee;
width: 125px;
 height: 125px;
text-align: center;
}

.blue,
.green {
position: absolute;
}

.red {
background: red;
}

.green {
background: green;
top: 40px;
left: 40px;
}

.blue {
background: blue;
top: 80px;
left: 80px;
}
</style>
</head>

<body>
<div class="box green">Positioned</div>
<div class="box blue">Positioned</div>
<div class="box red">Non-positioned</div>
</body>

</html>
Output:
Explanation: From the output, we can see that although we defined the red box in the end, it still came on
top of the green and blue box because it was non-positioned whereas the other two boxes were positioned.

z-index: In order to change the stacking order, we can use z-index. Element with higher z-index is placed
on top of the element with lower z-index. Let us use the same. An important thing to note is that in order
to use z-index, elements should be positioned. To learn more about CSS, positions, refer this article.

Example 2: Stacking with z-index

We use the previous example, but this time we will apply a z-index value to the green and blue boxes.

HTML
<!DOCTYPE html>
<html>

<head>
<title>Stacking with z-index</title>

<style>
.box {
box-sizing: border-box;
font-family: Arial;
color: #eee;
width: 125px;
height: 125px;
text-align: center;
}

.blue,
.green {
position: absolute;
}

.red {
 background: red;
z-index: 100;
/*No effect since red is non-positioned*/
}

.green {
background: green;
top: 40px;
left: 40px;
z-index: 3;
}

.blue {
background: blue;
top: 80px;
left: 80px;
z-index: 2;
}
</style>
</head>

<body>
<div class="box green">Positioned</div>
<div class="box blue">Positioned</div>
<div class="box red">Non-positioned</div>
</body>

</html>
Output:
Explanation: We observe that green box is placed on top of blue box because green box has a higher z-
index value(3) than blue box(2). Also, note that red box has a z-index value of 100, but there is no effect
since it is a non-positioned element.

Example 3: Now in order to understand stacking context, Let’s say we add another box to the layout and
we want the blue box to be behind it.

HTML
<!DOCTYPE html>
<html>

<head>
<title>Stacking context</title>

<style>
.box {
box-sizing: border-box;
font-family: Arial;
color: #eee;
width: 125px;
height: 125px;
text-align: center;
}

.blue,
.green,
.orange,
.purple {
position: absolute;
}

.red {
background: red;
z-index: 100;
}

.green {
background: green;
top: 60px;
left: 50px;
z-index: 1;
}
 .orange {
width: 85px;
height: 85px;
left: 20px;
background-color: orange;
font-family: Arial;
z-index: 3;
}

.purple {
background-color: purple;
top: 30px;
left: 30px;
z-index: 0;

.blue {
background: blue;
top: 100px;
left: 100px;
z-index: 2;
}
</style>
</head>

<body>
<div class="box green">Positioned
<div class="orange">Positioned</div>
</div>
<div class="box purple">Positioned</div>
<div class="box blue">Positioned</div>
<div class="box red">Non-positioned</div>
</body>

</html>
Output:

Explanation: We have added two new boxes: orange and purple. As expected, green box is on top of purple
box because green box has higher z-index value than purple box. However, the orange box is still behind
the blue box despite having a higher z-index value. Why is that so? By applying z-index value to an element,
a stacking context is formed. The fact that a stacking context is formed means it also affects its child
elements(orange box is a child of green box in this case). We can change the stacking order of child
elements, but it will only have a meaning in that stacking context.So, the orange box is still behind blue box
because they are not in the stacking context anymore.

Example 4: If we want to place blue box on top of orange box, there are two things that we can do:

 Either make the blue box a child element of green box

 Define orange box outside the green box

Here, we will make blue box a child element of green box.

HTML
<!DOCTYPE html>
<html>

<head>
<title>Modified stacking context</title>

<style>
.box {
box-sizing: border-box;
font-family: Arial;
color: #eee;
width: 125px;
height: 125px;
text-align: center;
}
.blue,
.green,
.orange,
.purple {
position: absolute;
}

.red {
background: red;
z-index: 100;
}

.green {
background: green;
top: 60px;
left: 50px;
z-index: 1;
}

.orange {
width: 85px;
height: 85px;
top: 40px;
left: 25px;
background-color: orange;
font-family: Arial;
z-index: 3;
}

.purple {
background-color: purple;
top: 30px;
left: 30px;
z-index: 0;

.blue {
background: blue;
width: 85px;
height: 85px;
top: 25px;
 left: 10px;
z-index: 2;
}
</style>
</head>

<body>
<div class="box green">Positioned
<div class="orange">Positioned</div>
<div class="blue">Positioned</div>
</div>
<div class="box purple">Positioned</div>
<div class="box red">Non-positioned</div>
</body>

</html>
Output:

Explanation: In above example, we see that blue box is behind orange box because they are in the same
stacking context. There are other properties that also cause a new stacking context to be formed. Some
examples are: transform, filter etc.

Media Queries | Fork CSS

Media Queries in CSS

The media query in CSS is used to create a responsive web design to make a user-friendly website. It
means that the view of web pages differs from system to system based on screen or media types. Media is
allowing us to reshape and design the user view page of the website for specific devices like Tablets,
Desktops, Mobile phones, etc.

Media queries can be used to check many things like the following

 Width and height of the viewport

 Width and height of the device
 Orientation
 Resolution

A media query consist of a media type that can contain one or more expression which can be
either true or false. The result of the query is true if the specified media matches the type of device where
the document is displayed on. If the media query is true then the style is applied. In simple words, it uses
the @media rule to add the block of CSS properties, based on certain conditions.

Syntax:

@media not | only mediatype and (expression)

{
// Code content
}

We can add the breakpoint to see the screen-width along with the width and height of the viewport for the
different devices. A breakpoint is a point or key that determines when to change the layout by reshaping
& adding the new rules inside the media queries. There are some common breakpoints, not a standard
resolution, that can be used for the different widths & heights of devices:

 For Mobile devices: 320px-480px

 For Tablets or iPad: 480px - 768px
 For Laptop or small-size screen: 768px -1024px
 For Desktop or large-size screen: 1024px -1200px
 For Extra-large size device: 1200px and more

These breakpoints can help to build responsive designs(ie., Mobile-first design) by specifying the different
sets of values for width & height. We can also use the media queries for changing the layout of a webpage
that will be depending on the orientation of the browser.

Example:

This example illustrates the use of the CSS Media query to build the mobile-first design by specifying the
different device-width.

HTML
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GeeksforGeeks CSS Media Query</title>
<meta name="description"
content="CSS Media Query for all devices
like mobile, tablet, desktop etc.">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="gfg-style.css">
</head>

<body>
<div class="gfg-div">GeeksforGeeks</div>
</body>

</html>
CSS Code:
The following CSS code specifies the media queries with different styling properties based on certain conditions that
will be displayed according to the device size.
CSS
* {
margin: 0;
padding: 0;
}

/* Default Design */
.gfg-div {

/* To make all elements center */

display: flex;
justify-content: center;
align-items: center;

/* Default Styling */
margin: 20px auto;
padding: 30px;
font-size: 30px;
 width: 300px;
height: 300px;
background-color: darkseagreen;
color: black;
}

/* For Desktop View */

@media screen and (min-width: 1024px) {
.gfg-div {
background-color: #63c971;
color: #fff;
}
}

/* For Tablet View */

@media screen and (min-device-width: 768px)
and (max-device-width: 1024px) {
.gfg-div {
width: 400px;
height: 400px;
background-color: orange;
color: black;
}
}

/* For Mobile Portrait View */

@media screen and (max-device-width: 480px)
and (orientation: portrait) {
.gfg-div {
width: 200px;
height: 200px;
background-color: red;
color: #fff;
}
}

/* For Mobile Landscape View */

@media screen and (max-device-width: 640px)
and (orientation: landscape) {
.gfg-div {
width: 400px;
height: 200px;
 background-color: cyan;
color: black;
}
}

/* For Mobile Phones Portrait or Landscape View */

@media screen and (max-device-width: 640px) {
.gfg-div {
width: 400px;
height: 200px;
background-color: chartreuse;
color: black;
}
}

/* For iPhone 4 Portrait or Landscape View */

@media screen and (min-device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
.gfg-div {
width: 400px;
height: 400px;
background-color: brown;
color: black;
}
}

/* For iPhone 5 Portrait or Landscape View */

@media (device-height: 568px) and (device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
.gfg-div {
width: 400px;
height: 400px;
background-color: cornflowerblue;
color: black;
}
}

/* For iPhone 6 and 6 plus Portrait or Landscape View */

@media (min-device-height: 667px) and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
.gfg-div {
width: 400px;
 height: 400px;
background-color: darkgoldenrod;
color: black;
}
}

Output:

Flex Box | Fork CSS

Flexbox

It is also called a flexible box model. It is basically a layout model that provides an easy and clean way to
arrange items within container. Flexbox is different from the block model which is vertically bias and the
inline which is horizontally bias. Flexbox was created for small-scales layouts and there's another standard
called grids which is geared more towards larger scale layouts, It works similar to the way to Twitter
bootstrap grid system works. Flexbox is responsive and mobile-friendly. To start with flexbox firstly create
a flex container. To create a flex container set the display property to flex.

Example:

.main-container {
display: flex;
}

Flex Properties:

 flex-direction
 flex-wrap
 flex-flow
 justify-content
 align-items
 align-content

1. flex-direction: The flex-direction is used to define the direction of flexible item. The default axis is
horizontal in flexbox, so the items flow into a row. Syntax:
2. // Stacking flex items column wise
3. flex-direction: column;
4.
5. // Stacking flex items from bottom to top
6. flex-direction: column-reverse;
7.
8. // Stacking flex items row wise
9. flex-direction: row;
10.
11. // Stacking flex items from right to left
12. flex-direction: row-reverse;
13.

Example:html

<!DOCTYPE html>
<html>
<head>
<title>flexbox</title>
<style>
.gfg_flex {
display: flex;
flex-direction: row;
background-color: green;
text-align:center;
}

.gfg_flex > div {

background-color: #f4f4f4;
width: 100px;
height:100px;
margin: 10px;
 font-size: 40px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>flex-direction Property</h2>
<div class="gfg_flex">
<div>Box A</div>
<div>Box B</div>
<div>Box C</div>
<div>Box D</div>
<div>Box E</div>
</div>
</body>
</html>

Output:

14. flex-wrap: The flex-wrap property is used to define the wrap of flex-items. If flex-wrap property
set to wrap then browser's window set the box. If browser window is smaller than elements then
elements go down to the next line. Syntax:
15. // Wrap flex items when necessary
16. flex-wrap: wrap;
17.
18. // Flex items will not wrap
19. flex-wrap: nowrap;
20.

Example:html

<!DOCTYPE html>
<html>
<head>
<title>flex-wrap property</title>
<style>
.gfg_flex {
display: flex;
flex-wrap: wrap;
text-align:center;
background-color: green;
}

.gfg_flex > div {

background-color: #f4f4f4;
width: 100px;
height:100px;
margin: 10px;
font-size: 40px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>flex-wrap Property</h2>
<div class="gfg_flex">
<div>Box A</div>
<div>Box B</div>
<div>Box C</div>
 <div>Box D</div>
<div>Box E</div>
<div>Box F</div>
<div>Box G</div>
<div>Box H</div>
<div>Box I</div>
</div>
</body>
</html>

Output:
Note: The flex-flow is a shorthand for flex-direction and flex-wrap. Syntax:

flex-flow: row wrap;

21. justify-content: The justify-content property is used to align the flex items according to the main
axis within a flexbox container. Syntax:
22. // Aligns the flex items at the center
23. justify-content: center;
24.
25. // The space is distributed around the flexbox items
26. //and it also adds space before the first item and after the last one.
27. justify-content: space-around;
28.
29. // Space between the lines
30. justify-content: space-between;
31.
32. // Aligns the flex items at the beginning of the container
33. justify-content: flex-start;
34.
35. // Aligns the flex items at the end of the container
36. justify-content: flex-end;
37.

Example:html

<!DOCTYPE html>
<html>
<head>
<title>justify flexbox property</title>
<style>
.flex1 {
display: flex;
justify-content: center;
background-color: green;
}

.flex2 {
display: flex;
justify-content: space-around;
background-color: green;
}

.flex3 {
display: flex;
justify-content: space-between;
background-color: green;
}

.flex4 {
display: flex;
justify-content: flex-start;
background-color: green;
}

.flex5 {
display: flex;
justify-content: flex-end;
background-color: green;
}

.flex-items {
background-color: #f4f4f4;
width: 100px;
 height:50px;
margin: 10px;
text-align: center;
font-size: 40px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>The justify-content Property</h2>
<b>justify-content: center </b>
<div class="flex1">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>justify-content: space-around </b>
<div class="flex2">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>justify-content: space-between </b>
<div class="flex3">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
 <b>justify-content: flex-start </b>
<div class="flex4">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>justify-content: flex-end </b>
<div class="flex5">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
</body>
</html>

Output:

38. align-items: This property is used to align flex items vertically according to the cross axis. Syntax:
39. // Aligns the flex items in the middle of the container
40. align-items: center;
41.
42. // Flexbox items are aligned at the baseline of the cross axis
43. align-items: baseline;
44.
45. // Stretches the flex items
46. align-items: stretch;
47.
48. // Aligns the flex items at the top of the container
49. align-items: flex-start;
50.
51. // Aligns elements at the bottom of the container
52. align-items: flex-end;
53.

Example:html

<!DOCTYPE html>
<html>
<head>
<title>align-items property</title>
<style>
.flex1 {
display: flex;
height: 200px;
align-items: center;
background-color: green;
}

.flex2 {
display: flex;
height: 200px;
align-items: baseline;
background-color: green;
}

.flex3 {
display: flex;
height: 200px;
align-items: stretch;
background-color: green;
}

.flex4 {
display: flex;
height: 200px;
align-items: flex-start;
background-color: green;
}
 .flex5 {
display: flex;
height: 200px;
align-items: flex-end;
background-color: green;
}

.flex-items {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>The align-items Property</h2>
<b>align-items: center </b>
<div class="flex1">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>align-items: baseline </b>
<div class="flex2">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
 </div>
<br>
<b>align-items: stretch </b>
<div class="flex3">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>align-items: flex-start </b>
<div class="flex4">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>align-items: flex-end </b>
<div class="flex5">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
</body>
</html>
 Output:

54. align-content: This property defines how each flex line is aligned within a flexbox and it only
applicable if flex-wrap: wrap is applied i.e. if there are multiple lines of flexbox items
present. Syntax :
55. // Displays the flex lines with equal space between them
56. align-content: space-between;
57.
58. // Displays the flex lines at the start of the container
59. align-content: flex-start;
60.
61. // Displays the flex lines at the end of the container
62. align-content: flex-end;
63.
64. // Dy using space-around property space will be
65. // Distributed equally around the flex lines
66. align-content: space-around;
67.
68. // Stretches the flex lines
69. align-content: stretch;
70.

Example:html

<!DOCTYPE html>
<html>
<head>
<title>align-content property</title>
<style>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
background-color: green;
}

.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
 font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>The align-content Property</h2>
<div class="main-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>

Output:

Grid | Fork CSS

Grid Layout

The CSS grid layout module is used to create a grid-based layout system, with the help of rows and
columns it makes it easier to design any webpage without using floats and positioning.

Syntax:

.class {
display:grid;
}

Note: An HTML element becomes a grid if that element sets display: grid; in style section or inline-grid.
Below you will see both examples.

CSS Grid Layout Properties:

These are the following grid-layout properties:

 column-gap: It is used to specify the amount of gap between the columns in which a given text is
divided using the column-count property.
 gap: It is used to set the spacing also caller gutter between the rows and columns.
 grid: It offers a grid-based layout system, with rows and columns, making it easier to design web
pages without floats and positioning.
 grid-area: It is used to set a grid item size and location in a grid layout.
 grid-auto-columns: It is used to specify the size for the columns of implicitly generated grid
containers.
 grid-auto-flow: It specifies exactly how auto-placed items get flow into the grid.
 grid-auto-rows: It is used to specify the size for the rows of implicitly generated grid containers.
 grid-column: It describes the number of properties that allow to design of grid structures and
control the placement of grid items using CSS.
 grid-column-end: It explains the number of columns an item will span, or on which column-line
the item will end.
 grid-column-gap: It is used to set the size of the gap between the columns in a grid layout.
 grid-column-start: It defines for which column line item will start.
 grid-gap: It is used to sets the size of the gap between the rows and columns in a grid layout.
 grid-row: It is used to specify the size and location in a grid layout.
  grid-row-end: It is used to define the grid item's end position within a grid row by specifying the
inline edge of its grid area.
 grid-row-gap: It is used to define the size of the gap between the grid elements.
 grid-row-start: It is used to define the grid items' start position within the grid row by specifying
the inline start edge of its grid area.
 grid-template: It is a shorthand property for defining grid columns, rows, and areas.
 grid-template-areas: It is used to specify the area within the grid layout.
 grid-template-columns: It is used to set the number of columns and size of the columns of the grid.
 grid-template-rows: It is used to set the number of rows and height of the rows in a grid.

Examples

 Example 1: This example illustrates the use of display: grid; property.

HTML

<!DOCTYPE html>
<html>

<head>
<style>

/* Designing all grid */

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: gray;
padding: 5px;
}

/* Designing all grid-items */

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
padding: 20px;
font-size: 30px;
text-align: center;
}

/* Designing h1 element */
h1 {
color: green;
text-align: center;
</style>
</head>
 <body>
<h1>GeeksforGeeks</h1>

<!-- Creating grid -->

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>

</html>
Output:

 Example 2: This example illustrates the use of display:inline-grid; property.

HTML

<!DOCTYPE html>
<html>

<head>
 <style>

/* Designing all grid */

.grid-container {
display: inline-grid;
grid-template-columns: auto auto auto;
background-color: gray;
padding: 5px;
}

/* Designing all grid-items */

.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
padding: 20px;
font-size: 30px;
}

/* Designing h1 element */
h1 {
color: green;
text-align: center;
</style>
</head>

<body>
<center>
<h1>GeeksforGeeks</h1>

<!-- Creating grids -->

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
 </center>
</body>

</html>
Output:

You can control the following things on a grid system:

o grid-column-gap
o grid-row-gap
o grid-gap
 Example 3: In the below code we used both grid-column-gap and grid-row-gap together.

HTML

<!DOCTYPE html>
<html>

<head>
<style>

/* Designing all grid */

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: gray;
grid-column-gap: 50px;
grid-row-gap: 50px;
padding: 5px;
}
 /* Designing all grid-items */
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid black;
padding: 20px;
font-size: 30px;
text-align: center;
}

/* Designing h1 element */
h1 {
color: green;
text-align: center;
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>

<!-- Creating grids -->

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</body>

</html>
Output:
 Note: Similarly grid-gap also works.

You can control the following things on a grid system:

o grid-column-lines
o grid-row-lines

 Example:4 In the below code we used both grid-column-lines and grid-row-lines together.

HTML

<!DOCTYPE html>
<html>

<head>
<style>

/* Designing all grid */

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: gray;
padding: 10px;
}
 /* Designing all grid-items */
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}

/* Grid Column */
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}

/* Grid row */
.item3 {
grid-row-start: 2;
grid-row-end: 5;
}

/* Designing h1 element */
h1 {
color: green;
text-align: center;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>

<!-- Creating grids -->

<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
 </div>
</body>

</html>
Output:

Classes

A Pseudo class in CSS is used to define the special state of an element. It can be combined with a CSS selector
to add an effect to existing elements based on their states. For Example, changing the style of an element
when the user hovers over it, or when a link is visited. All of these can be done using Pseudo Classes in CSS.

Note that pseudo-class names are not case-sensitive.

Syntax:

selector: pseudo-class{
property: value;
}

There are many Pseudo classes in CSS but the ones which are most commonly used are as follows:

 :hover Pseudo-class: This pseudo-class is used to add special effect to an element when our mouse
pointer is over it. The below example demonstrates that when your mouse enters the box area, its
background color changes from yellow to orange.
Example:

HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
.box{
background-color: yellow;
width: 300px;
height: 200px;
margin: auto;
font-size: 40px;
text-align: center;
}

.box:hover{
background-color: orange;
}

h1, h2{
color: green;
text-align: center;
}
</style>
</head>

<body>
<h1>Geeks For Geeks</h1>
<h2>:hover Pseudo-class</h2>
<div class="box">
My color changes if you hover over me!
</div>
</body>
</html>
Output:
  :active Pseudo-class: This pseudo-class is used to select an element which is activated when the
user clicks on it. The following example demonstrates that when you click on the box, its
background color changes for a moment.
Example:

HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
.box{
background-color: yellow;
width: 300px;
height: 200px;
margin: auto;
font-size: 40px;
text-align: center;
}

.box:active{
background-color: orange;
}

h1, h2{
color: green;
text-align: center;
 }
</style>
</head>

<body>
<h1>Geeks For Geeks</h1>
<h2>:active Pseudo-class</h2>
<div class="box">
My color changes for a moment if you click me!
</div>
</body>
</html>
Output:

 :focus Pseudo-class: This pseudo-class is used to select an element which is currently focused by
the user. It works on user input elements used in forms and is triggered as soon as the user clicks
on it. In the following example, the background color of the input field which is currently focused
changes.
Example:

HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
form{
 width: 300px;
height: 200px;
margin: 0 auto;
text-align: center;
line-height: 2rem;
}

label{
width: 30%;
}

input{
background-color: default;
float: right;
}

input:focus{
background-color: grey;
}

h1, h2{
color: green;
text-align: center;
}
</style>
</head>

<body>
<h1>Geeks For Geeks</h1>
<h2>:focus Pseudo-class</h2>
<form>
<label for="username">Username:</label>
<input type="text" name="username"
placeholder="Enter your username" />
<br>

<label for="emailid">Email-Id:</label>
<input type="email" name="emailid"
placeholder="Enter your email-id" />

<label for="Password">Password:</label>
 <input type="password" name="Password"
placeholder="Enter your password" />
</form>
</body>
</html>
Output:

 :visited Pseudo-class: This pseudo-class is used to select the links which have been already visited
by the user. In the following example, the color of the link changes once it is visited.
Example:

html

HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS transition-property property</title>
<style>
body{
text-align: center;
}

h1, h2{
color: green;
}

a:visited{
color: red;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>:visited Pseudo-class</h2>

<p>
<a href="https://www.geeksforgeeks.org/" target="_blank">
My color changes once you visit this link
</a>
</p>

</body>
</html>
Output:

Elements

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected
elements. For Example, Styling the first letter or line of an element,

Insert content before or after the content of an element. All of these can be done using Pseudo Elements in
CSS.

Note that in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.

Syntax:

selector::pseudo-element {
property: value;
}

There are many Pseudo Elements in CSS but the ones which are most commonly used are as follows:
  ::first-line Pseudo-element applies styles to the first line of a block-level element. Note that the
length of the first line depends on many factors, including the width of the element, the width of the
document, and the font size of the text. Note that only a few properties are applied for first-line
pseudo-element like font properties, color properties, background properties, word-spacing, letter-
spacing, text-decoration, vertical-align, text-transform, line-height, clear, etc.

Example:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>first-line Demo</title>
<style>
body{
background-color:whitesmoke;
color:green;
font-size: large;
text-align: center;
}

p::first-line{
color:Red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::first-line element</h2>

<p>This is a paragraph using first-line pseudo-element

to style first line of the paragraph.Content in the
first line turns red and becomes bold.</p>

</body>
</html>
Output:
  ::first-letter Pseudo-element applies styles to the first letter of the first line of a block-level
element, but only when not preceded by other content (such as images or inline tables). Note that
only a few properties are applied for first-line pseudo-element like font properties, color properties,
background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-
transform, line-height, clear, etc.

Example:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>first-letter Demo</title>
<style>
body{
background-color:whitesmoke;
color:green;
font-size: large;
text-align: center;
}
p::first-letter{
color:Red;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
 <h2>::first-letter element</h2>

<p>This is a paragraph using first-letter pseudo-element

to style first letter of the paragraph.first-letter element
turned the first letter of this paragraph to red
and made it bold.</p>

</body>
</html>
Output:

 ::before Pseudo-element creates a pseudo-element that is the first child of the selected element.
It is often used to add cosmetic content to an element with the content property. It is inline by
default.

Example:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>before Demo</title>
<style>
body{
background-color:whitesmoke;
color:green;
font-size: large;
 text-align: center;
}
p::before{
content: '"';
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::before element</h2>

<p>This is a paragraph to which we added red color quotation marks

using ::before element.</p>

</body>
</html>
Output:

 ::after Pseudo-element creates a pseudo-element that is the last child of the selected element. It is
often used to add cosmetic content to an element with the content property. It is inline by default.

Example:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>after Demo</title>
<style>
body{
background-color:whitesmoke;
color:green;
font-size: large;
text-align: center;
}
p::after{
content: '"';
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::after element</h2>

<p>This is a paragraph to which we added red color quotation marks

using ::after element.</p>

</body>
</html>
Output:
  ::marker Pseudo-element selects the marker box of a list item, which typically contains a bullet
or number. It works on any element or pseudo-element set to display: list-item, such as the <li> and
<summary> elements.

Example:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>marker Demo</title>
<style>
body{
background-color: whitesmoke;
color: green;
text-align: center;
}
ul{
width: 40px;
}
ul li::marker{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::marker element</h2>
 <ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>
Output:

 ::selection Pseudo-element applies styles to the part of a document that has been highlighted by
the user such as clicking and dragging the mouse across the text.

Example:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>selection Demo</title>
<style>
body{
background-color: whitesmoke;
color: green;
text-align: center;
}
p::selection{
color: red;
background-color: green;
font-size: 30px;
}
 ::selection{
color: green;
background-color: red;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::selection element</h2>

<p>Content in this paragraph turns red with

green background on selection.</p>

<span>As this is not a paragraph, you can notice red

background and green text on selection.</span>
</body>
</html>
Output:

Transformations | Fork CSS

Transform property
The transform property in CSS is used to change the coordinate space of the visual formatting model.
This is used to add effects like skew, rotate, translate, etc on elements.

Syntax:

transform: none|transform-functions|initial|inherit;

Note: The transformations can be of 2-D or 3-D type.

Values:

 none: No transformation takes place.

 matrix(x, x, x, x, x, x): It specifies a matrix transformation of 2-D type. It takes 6 values.
 matrix3d(x, x, x, x, x, x, x, x, x): It specifies a matrix transformation of 3-D type. It takes 9 values.
 translate(x, y): It specifies a translation across the X and Y axes.
 translate3d(x, y, z): It specifies a translation across the X, Y, and Z axes.
 translateX(x): It specifies the translation across the X-axis only.
 translateY(y): It specifies the translation across the Y-axis only.
 translateZ(z): It specifies the translation across the Z-axis only.
 rotate(angle): It specifies the angle of rotation.
 rotateX(angle): It specifies the rotation along with the X-axis corresponding to the angle of rotation.
 roatateY(angle): It specifies the rotation along with the Y-axis corresponding to the angle of rotation.
 roteteZ(angle): It specifies the rotation along with the Z-axis corresponding to the angle of rotation.
 scale(x, y): It specifies the scale transformation along the X and Y axes.
 scale3d(x, y, z): It specifies the scale transformation along the X, Y, and Z axes.
 scaleX(x): It specifies the scale transformation along the X-axis.
 scaleY(y): It specifies the scale transformation along the Y-axis.
 scaleZ(z): It specifies the scale transformation along the Z-axis.
 scale3d(x, y, z): It specifies the scale transformation along the X, Y, and Z axes.
 skew(angle, angle): It specifies the skew transformation along the X and Y axes corresponding to the skew
angles.
 skewX(angle): It specifies the skew transformation along with the X-axis corresponding to the skew angle.
 skewY(angle): It specifies the skew transformation along with the Y-axis corresponding to the skew angle.
 skewZ(angle): It specifies the skew transformation along with the Z-axis corresponding to the skew angle.
 perspective(x): It specifies the perspective of an element. Refer: Perspective property
 initial: It initializes the element to its default value.
 inherit: It inherits the value from its parent element.

Examples
 Example 1: Without the transform property.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 2: This example describes Matrix() property value.

HTML
 <!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: matrix(1, 0, -1, 1, 1, 0);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 3: This example describes Matrix3d() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
 <style>
.main {
display: grid;
padding: 30px;
background-color: green;
transform-style: preserve-3d;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform-style: preserve-3d;
position: absolute;
transform: translate(150px, 75%, 5em)
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 4: This example describes translate() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
 padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: translate(150px, 65%);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 5: This example describes translate3d() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}
 .GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: translate(150px, 65%, 5em);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 6: This example describes translateX() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
 color: green;
transform: translateX(150px);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 7: This example describes translateY() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: translateY(150px);
}
</style>
 </head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 8: This example describes translateZ() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: translateZ(150px);
}
 </style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 9: This example describes rotate() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: rotate(45deg);
}
</style>
</head>

<body>
 <div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 10: This example describes rotateX() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: rotateX(75deg);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
 </body>
</html>
Output:

 Example 11: This example describes rotateY() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: rotateY(75deg);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:
 Example 12: This example describes rotateZ() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: rotateZ(75deg);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:
 Example 13: This example describes scale() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: scale(1, 2);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:
 Example 14: This example describes scale3d() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: scale3d(2, 1, 5);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:
 Example 15: This example describes scaleX() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: scaleX(2);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 16: This example describes scaleY() property value.

HTML

<!DOCTYPE html>
 <html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: scaleY(2);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 17: This example describes scaleZ() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
 .main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: scaleZ(2);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 18: This example describes skew() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
 }

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: skew(30deg, 30deg);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 19: This example describes skewX() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
 font-size: 35px;
background-color: white;
color: green;
transform: skewX(30deg);
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 20: This example describes skewY() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: skewY(30deg);
 }
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 21: This example describes perspective() property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: perspective(30px);
}
</style>
</head>
 <body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
Output:

 Example 22: This example describes the initial property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: initial;
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
 </div>
</body>
</html>
Output:

 Example 23: This example describes inherit property value.

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Transform Property </title>
<style>
.main {
display: grid;
padding: 30px;
background-color: green;
transform: rotateX(45deg);
}

.GFG {
text-align: center;
font-size: 35px;
background-color: white;
color: green;
transform: inherit;
}
</style>
</head>

<body>
<div class="main">
<div class="GFG">GeeksforGeeks</div>
</div>
</body>
</html>
 Output:

Note: Sometimes the 3-D values don't give the correct output when they are used on 2-D elements,
Hence it is not recommended to use 3-D values for 2-D elements.

Transitions | Fork CSS

Transitions

Transitions in CSS allows us to control the way in which transition takes place between the two states of
the element. For example, when on hovering your mouse over a button, you can change the background
color of the element with help of CSS selector and pseudo-class. We can change any other or combination
of properties, though. Transition allows us to determine how the change in color takes place. We can use
the transitions to animate the changes, and make the changes visually appealing to the user and hence,
giving better user experience and interactivity. In this article, we will show you how to animate the
transition between the CSS properties.

There are four CSS properties which you should use, all or in part (at least two, transition-property and
transition-duration, is must), to animate the transition. All these properties must be placed along with
other CSS properties of the initial state of the element:

1. transition-property: This property allows you to select the CSS properties which you want to
animate during transition(change). Syntax:
2. transition-property: none | all | property | property1,
3. property2, ..., propertyN;
4.

Values:

o none is used to specify that no property should be selected.

o all is used to specify all the properties to be selected, though not all properties are animate-
able, only the properties which are animate-able will be influenced.
o We can specify a single property or a set of comma separated properties property1,
property2, ..., propertyN.
5. transition-duration: This property allows you to determine how long it will take to complete the
transition from one CSS property to the other. Syntax:
6. transition-duration: time;
7.

Here, time can be in seconds(s) or milliseconds(ms), you should use 's' or 'ms' after the number
(without quotes).
 8. transition-timing-function: This property allows you to determine the speed of change and the
manner of change, during the transition. Like, the change should be fast at the beginning and slow
at the end, etc. Syntax:
9. transition-timing-function: ease|ease-in|ease-out|ease-in-out|linear|
10. step-start|step-end;
11.

Note, there are other values which this transition-timing-function can take, only the most frequent
and simple are mentioned here.

12. transition-delay: This property allows you to determine the amount of time to wait before the
transition actually starts to take place. Syntax:
13. transition-delay: time;
14.

Here, again, time can be in seconds(s) or milliseconds(ms), and you should use 's' or 'ms' after the
number (without quotes).

The Shorthand Property

You can combine all the four transition properties mentioned above, into one single shorthand property,
according to the syntax given below. This saves us from writing long codes and prevents from getting
messy. Note the ordering of property, it has significance.

Syntax:

transition: (property name) | (duration) | (timing function) | (delay);

The value is taken by are same as mentioned above. This property must be placed with other CSS
properties, if any, of the initial state. You should use at least, property name and duration to get any
animate-able effect. Also, the ordering of the values matters. The first value is of the property name, second
for the duration and so on, as listed above. So, if only one number is mentioned, it will be taken up as
duration, and not as a delay.

Example: Changing property without using transitions.

html

<!DOCTYPE html>
<html>
<head>
<title>CSS Transition</title>

<style>
 h1{
color: green;
text-align: center;
}
div.one{
height: 150px;
width: 150px;
border: 1px dashed black;
margin: 0 auto;
background: #FFEBEE;
}
div.one:hover{
height: 300px;
width: 300px;
background: #BBDEFB;
}
</style>

</head>

<body>

<h1>GeeksForGeeks</h1>

<div class="one">
</div>

</body>
</html>
Output:

Example: Changing property using transitions.

html
<!DOCTYPE html>
<html>
<head>
<title>CSS Transition</title>

<style>
h1{
color: green;
text-align: center;
}
div.one{
height: 150px;
width: 150px;
border: 1px dashed black;
margin: 0 auto;
background: #FFEBEE;
transition: height 2s, width 2s, background 2s;
}
div.one:hover{
height: 300px;
width: 300px;
background: #BBDEFB;
}
</style>

</head>

<body>

<h1>GeeksForGeeks</h1>

<div class="one">
</div>

</body>

</html>
Output:

Animations | Fork CSS

CSS Animations

CSS Animations is a technique to change the appearance and behavior of various elements in web pages. It
is used to control the elements by changing their motions or display. It has two parts, one which contains
the CSS properties which describe the animation of the elements and the other contains certain keyframes
which indicate the animation properties of the element and the specific time intervals at which those have
to occur.

The @keyframes rule: Keyframes are the foundations with the help of which CSS Animations works. They
define the display of the animation at the respective stages of its whole duration. For example: In the
following code, the paragraph changes its color with time. At 0% completion, it is red, at 50% completion
it is of orange color and at full completion i.e. at 100%, it is brown.

Example: This example describes the CSS Animation using the @keyframe rule.

HTML
<!DOCTYPE html>
<html>

<head>
<style>
#gfg {
animation-name: color;
 animation-duration: 25s;
padding-top: 30px;
padding-bottom: 30px;
font-family: Times New Roman;
}

#geeks {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
}

#geeks1 {
font-size: 17px;
font-weight: bold;
text-align: center;
}

@keyframes color {
0% {
background-color: red;
}
50% {
background-color: orange;
}
100% {
background-color: brown;
}
}
</style>
</head>

<body>
<div id="gfg">
<div id="geeks">GeeksforGeeks</div>
<div id="geeks1">A computer science portal for geeks</div>
</div>
</body>

</html>
Output:

Animation Properties:

There are certain animation properties given below:

animation-name

It is used to specify the name of the @keyframes describing the animation.

animation-name: animation_name;

animation-duration

It is used to specify the time duration it takes animation to complete one cycle.

Example: This example describes the CSS Animation Properties using animation-duration
property.

HTML

<html>

<head>
<style>
 #gfg1 {
animation-name: text;
animation-duration: 5s;
animation-iteration-count: infinite;
}

#geek1 {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
}

#geek2 {
font-size: 17px;
font-weight: bold;
text-align: center;
}

@keyframes text {
from {
margin-top: 400px;
}
to {
margin-top: 0px;
}
}
</style>
</head>

<body>
<div id="gfg1">
<div id="geek1">GeeksforGeeks</div>
<div id="geek2">A computer science portal for geeks</div>
</div>
</body>

</html>
Output:
 The animation will look like this:



animation-timing-function

Specifies how the animation makes transitions through keyframes. It can have the following values:

o ease: The animation starts slowly, then fast, and then finally ends slowly (this is the default)
o linear: The animation plays with the same speed from start to end
o ease-in: The animation plays with a slow start
o ease-out: The animation plays with a slow end
o ease-in-out: The animation starts and ends slowly.

Example: This example describes the CSS Animation Properties using the animation-timing-
function property.

HTML

<!DOCTYPE html>
<html>

<head>
<style>
.geeks {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
font-family: Times New Roman;
}

.geeks1 {
font-size: 17px;
font-weight: bold;
text-align: center;
font-family: Times New Roman;
}

h2 {
width: 350px;
animation-name: text;
animation-duration: 4s;
animation-iteration-count: infinite;
background-color: rgb(255, 210, 85);
}
 #one {
animation-timing-function: ease;
}

#two {
animation-timing-function: linear;
}

#three {
animation-timing-function: ease-in;
}

#four {
animation-timing-function: ease-out;
}

#five {
animation-timing-function: ease-in-out;
}

@keyframes text {
from {
margin-left: 60%;
}
to {
margin-left: 0%;
}
}
</style>
</head>

<body>
<div class="geeks">GeeksforGeeks</div>
<div class="geeks1">A computer science portal for geeks</div>
<h2 id="one">This text is ease.</h2>
<h2 id="two">This text is linear.</h2>
<h2 id="three">This text is ease-in.</h2>
<h2 id="four">This text is ease-out.</h2>
<h2 id="five">This text is ease-in-out.</h2>
</body>
 </html>
Output:

animation-delay

It is used to specify the delay when the animation starts.

Example: This example describes the CSS Animation Properties using the animation-delay
property.

HTML

<!DOCTYPE html>
<html>

<head>
<style>
.geeks {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
font-family: Times New Roman;
 }

.geeks1 {
font-size: 17px;
font-weight: bold;
text-align: center;
font-family: Times New Roman;
}

#one {
animation-name: example;
animation-duration: 10s;
}

#two {
animation-name: example;
animation-duration: 10s;
animation-delay: 10s;
}

@keyframes example {
from {
background-color: orange;
}
to {
background-color: white;
}
}
</style>
</head>

<body>
<div class="geeks">GeeksforGeeks</div>
<div class="geeks1">A computer science portal for geeks</div>
<h2 id="one">Text animation without delayed.</h2>
<h2 id="two">Text animation with 10 second delay.</h2> </body>

</html>
Output:


animation-iteration-count

It is used to specify the number of times the animation will repeat. It can specify as infinite to repeat
the animation indefinitely.

Example: This example describes the CSS Animation Properties using an animation-iteration-
count property.

HTML

<!DOCTYPE html>
<html>

<head>
<style>
.geeks {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
font-family: Times New Roman;
}

.geeks1 {
font-size: 17px;
font-weight: bold;
text-align: center;
font-family: Times New Roman;
}
 #one {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: 2;
}

#two {
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}

@keyframes example {
from {
background-color: orange;
}
to {
background-color: white;
}
}
</style>
</head>

<body>
<div class="geeks">GeeksforGeeks</div>
<div class="geeks1">A computer science portal for geeks</div>
<h2 id="one">This text changes its color two times.</h2>
<h2 id="two">This text changes its color infinite times.</h2>
</body>

</html>
Output:


animation-direction

Specifies the direction of the animation. It can have the following values:

o normal: The animation is played forward. This is the default value.

o reverse: The animation is played in the reverse direction i.e. backward.
o alternate: The animation is played forwards first, and then backward.
o alternate-reverse: The animation is played backward first, and then forwards.

Example: This example describes the CSS Animation Properties using the animation-direction
property.

HTML

<!DOCTYPE html>
<html>

<head>
<style>
.geeks {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
font-family: Times New Roman;
}

.geeks1 {
font-size: 17px;
font-weight: bold;
text-align: center;
font-family: Times New Roman;
}

h2 {
width: 100%;
animation-name: text;
animation-duration: 2s;
animation-iteration-count: infinite;
}
 #one {
animation-direction: normal;
}

#two {
animation-direction: reverse;
}

#three {
animation-direction: alternate;
}

#four {
animation-direction: alternate-reverse;
}

@keyframes text {
from {
margin-left: 60%;
}
to {
margin-left: 0%;
}
}
</style>
</head>

<body>
<div class="geeks">GeeksforGeeks</div>
<div class="geeks1">A computer science portal for geeks</div>
<h2 id="one">This text is normal.</h2>
<h2 id="two">This text is reverse.</h2>
<h2 id="three">This text is alternate.</h2>
<h2 id="four">This text is alternate-reverse.</h2>
</body>

</html>
Output:


animation-fill-mode

Specifies what values are applied by the animation before and after it is executed.

o none: Animation will not apply any properties to the element before or after it is executed. This is
the default value.
o forwards: The element will retain the same animation properties of the last keyframe after the
animation completes.
o backwards: The element will get the properties of the first keyframe before the start of the
animation.
o both: The animation will follow the rules for both forwards and backward i.e. it will get the
properties defined for the initial keyframe before the start and will retain the value of the last
keyframe after the completion of the animation.

Example: This example describes the CSS Animation Properties using an animation-fill-mode
property.

HTML

<!DOCTYPE html>
<html>

<head>
<style>
.geeks {
font-size: 40px;
text-align: center;
font-weight: bold;
color: #090;
padding-bottom: 5px;
 font-family: Times New Roman;
}

.geeks1 {
font-size: 17px;
font-weight: bold;
text-align: center;
font-family: Times New Roman;
}

h2 {
width: 400px;
background-color: orange;
animation-name: text;
animation-duration: 3s;
}

#one {
animation-fill-mode: none;
}

#two {
animation-fill-mode: forwards;
}

#three {
animation-fill-mode: backwards;
animation-delay: 2s;
}

#four {
animation-fill-mode: both;
animation-delay: 2s;
}

@keyframes text {
from {
margin-left: 0%;
background-color: #aaaaaa;
}
to {
margin-left: 60%;
 background-color: #008000;
}
}
</style>
</head>

<body>
<div class="geeks">GeeksforGeeks</div>
<div class="geeks1">A computer science portal for geeks</div>
<h2 id="one">none</h2>
<h2 id="two">forwards</h2>
<h2 id="three">backwards</h2>
<h2 id="four">both</h2>
</body>

</html>
Output:

animation-play-state: This allows you to play/pause the animation.

Shorthand Code for animations

It is a shorthand way of implying the animation properties for a quicker code. The properties should be in
the following order:

animation: [animation-name] [animation-duration] [animation-timing-function] [animati

on-delay]
[animation-iteration-count] [animation-direction] [animation-fill-mode]
[animation-play-state];
For example, normally the animation code would be like this:

Example: This example describes the CSS Animation Properties using an animation-play-state property,
without animation shorthand property.

HTML
<!DOCTYPE html>
<html>

<head>
<style>
#g4g {
width: 400px;
height: 100px;
position: relative;
animation-name: GFG;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

@keyframes GFG {
0% {
left: 0px;
top: 0px;
}
25% {
left: 200px;
top: 200px;
}
50% {
left: 200px;
top: 0px;
}
75% {
left: 0px;
top: 200px;
}
100% {
left: 0px;
top: 0px;
 }
}
</style>
</head>

<body>
<img id="g4g" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png">
</body>

</html>
Output:

In shorthand the above HTML code can be written as:

Example: This example describes the CSS Animation Properties using an animation-play-state property,
with animation shorthand property.

HTML
<!DOCTYPE html>
<html>

<head>
<style>
#geeks4g {
width: 400px;
height: 100px;
position: relative;
animation: GFG 5s linear 1s infinite alternate;
}
 @keyframes GFG {
0% {
left: 0px;
top: 0px;
}
25% {
left: 200px;
top: 200px;
}
50% {
left: 200px;
top: 0px;
}
75% {
left: 0px;
top: 200px;
}
100% {
left: 0px;
top: 0px;
}
}
</style>
</head>

<body>
<img id="geeks4g" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png">
</body>

</html>
Output: