Scribd
Upload
2 views

CSS pdf

The document provides an introduction to CSS, explaining its purpose, syntax, and how it can be applied to HTML documents. It covers various methods of adding CSS, including inline, internal, and external styles, as well as the concept of selectors and specificity. Additionally, it discusses inheritance, the box model, and background properties in CSS.

Uploaded by

Ahalya Lakshmi Pamireddy
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

CSS pdf

The document provides an introduction to CSS, explaining its purpose, syntax, and how it can be applied to HTML documents. It covers various methods of adding CSS, including inline, internal, and external styles, as well as the concept of selectors and specificity. Additionally, it discusses inheritance, the box model, and background properties in CSS.

Uploaded by

Ahalya Lakshmi Pamireddy
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 66

CSS

::: Chapter - 1 : Intro to CSS :::

Topic - 1: Introduction to CSS :::

*** Overview ::

>> CSS stands for ""Cascading Style Sheets""


>> CSS describes how HTML elements are to be presented on screen
>> CSS can control the layout of multiple web pages all at once
>> Includes adding visuals like colour, fonts, layouts, etc.

Syntax : selector {
property : value ;
}

. The selector defines the HTML element to which styling is done.

. which each declaration includes a CSS property "name and a value", separated by
a "colon".

. Multiple CSS declarations are separated with "semicolons", and declaration


blocks are enclosed with "curly braces".

. The semicolon after every property declaration is compulsory.

Example : p {
color : blue ;
font-family : monospace ;
}

In the above example, styling is done to the p tag, which is a paragraph tag and
acts as a selector. Styling is done using two properties. One is the text colour as
property, and blue is the value for that, same as font-family as property and
monospace.

::: HTML Document with CSS :::

Below is an example of how an HTML document looks before adding CSS styling to it.

EX: <h1> Welcome to Coding Ninjas! </h1>


<h2> Where coding is a way of life. </h2>
Output: Welcome to Coding Ninjas!

Where coding is a way of life.

Browser after adding the CSS styling to the above HTML code.

HTML: <h1> Welcome to Coding Ninjas! </h1>


<h2> Where coding is a way of life. </h2>

CSS: h1 {
font-family: monospace;

h2 {
color: blue;
}

Output: Welcome to Coding Ninjas! - It will display in monospace.

Where coding is a way of life - It will display in blue color.

:: Sample Code ::

Sample.html ::

<!DOCTYPE html>
<html>
<head>
<title>My WEb</title>

" <link rel="stylesheet" href="SAMPLE1.css"> "

</head>

<body>
<h1>My book</h1>
<p>My data</p>
</body>
</html>

SAMPLE1.CSS ::

h1 {
color: blue;
}

p {
background-color: aqua;
}

Output: My book will display in blue color.


My data background color display in aqua color.

Topic - 2 : Adding CSS to HTML :::

*** Overview :::

The browser formats the HTML document based upon the information in
the stylesheet. The browser access the stylesheets from the HTML document itself.
There are three ways to add CSS styles to your document. Each of them can contain
multiple properties:

. Inline styles
. Internal styles
. External styles

1. Inline style ::

An inline stylesheet is applied directly to the HTML code using the


style attribute. The inline stylesheet syntax contains properties written inside
the style attribute.

>> Multiple properties can be defined at a time separated by a semicolon.

>> An inline style is used to apply a unique style to a single element.

Example : <p style = " color:blue ; font-size:40px "> Inline CSS </p>

2. Internal style ::

An internal or in-page stylesheet holds the CSS code for the web page.
The internal stylesheet contains the styles for that HTML written inside the HTML
document and can be used only for that document. They cannot be reused.

>> Internal CSS can be applied using <style> tag inside the <head> tag.

Example : <style>
h1 { color : blue ; }
h2 { color : red ; }
p { color : green ; }
</style>

3. External styles ::

In an external stylesheet, a different CSS file is made by which one


can change the look of an entire website by changing just that one file. The syntax
is similar to internal stylesheets, but it is applied using a complete different
CSS file. It is saved with the '.css' extension. Like 'styles.css'.

>> To use external stylesheet, a reference is provided to file inside the <link>
element:

Syntax : <link rel="stylesheet" type="text/css" href="styles.css">

NOTE: The <link> element goes inside the <head> section of the HTML document. The
'styles.css' contains the CSS syntax code only.

. rel defines the relationship with the linked document

. href defines the location of the linked document

. type defines the media type of the linked document

:: Cascading ::

Cascading order defines which style will be applied to elements when


multiple styles are used.

Cascading order priority : Inline > ( internal ≅ external ) > browser default

The internal and external CSS are treated equally by the browser. But the order of
their definition decides which one’s property will get preference.

>> If the link to external CSS is defined before the internal CSS, then properties
of internal CSS will get the preference, i.e. internal CSS > external CSS.

>> If the link to external CSS is defined after the internal CSS, then properties
of external CSS will get preference over internal CSS, i.e. external CSS > internal
CSS.

Topic - 3 : Selectors :::


:: Selectors in CSS ::

*** Overview ::

Selectors point to the HTML element which we want to style. We use


selectors in internal and external stylesheets. There are mainly three types of
selectors that are used to apply styles:

. Element selector
. Class selector
. Id selector

Specificity defines which style will be applied to the HTML element when
multiple styles are applied from different selectors. If the specificity is the
same, then the latest rule is applied.

Specificity Order : Inline > id selector > class selector > tag selector > browser
default.

NOTE: If the same property is defined inside the same type of selector, then the
property defined at the last will be used by the browser.

Example : p{
color : red ;
font-size : 20px ;
color : blue ;
}

In the above example colour of the p tag is given twice, it could be by mistake,
and the colour blue will be the final colour of that paragraph.

1. Element Selector ::

"The element selector selects all elements with the specified element
name". This will select all the elements in the HTML document. This method is not
used so commonly. So, to apply styles to only some elements, we need to use some
restrictions.

Syntax: element { css declarations; }

EX:
HTML : <h1> Blue Color </h1>

CSS : h1 {
color: blue;
}

Output: Blue Color

2. Class Selector ::

The class selector selects multiple elements which have the same class with
a specific class attribute. To select elements with a specific class, write a
period(.) character, followed by the name of the class.

Syntax: .class-name {css declarations ; }

>> To use a class selector, the class attribute is used in the HTML element's
opening tag.

>> The value of the class attribute contains the name of the class. There can be
multiple classes added to the tag by giving space in between.

EX:

HTML : <p class = "class1"> Class 1 </p>


<p class = "class 1 class2"> Class 2 </p>
<p class = "class3"> Class 3 </p>
<p class = "class3 class2"> Class 4 </p>

CSS : .class1 { color: red; }


.class2 { text-align: right; }
.class3 { color: green; }
.class4 { text-align: left; }

Output: Class 1
Class 2
Class 3
Class 4

3. Id Selector ::

The id selector selects only one element with a specific id attribute.


To select an element with a specific id, write a "hash(#) character", followed by
the name of the id.
Syntax : #class-name { css declarations; }

>> To use the id selector, the id attribute is used in the HTML element's opening
tag. The value of the id attribute contains the name of the id. There can only be
one id in the tag. The id is unique in an HTML page. If another element is given
the same id, the styles would not be applied by the browser.

EX:

HTML : <p id="id1"> Text 1 </p>


<p id="id2"> Text 2 </p>
<p id="id3"> Text 3 </p>

CSS : #id1 {
color: red;
}
#id2 {
color: blue;
}
#id3 {
color: green;
background-color: red;
}

Output: Text 1
Text 2
Text 3

4. Grouping selector ::

Sometimes we need to apply specific styles to different elements, and to


reduce the redundancy in the code, we use grouping. Separate the selectors with a
comma followed by the CSS declarations.

Without grouping : h1{


color : red ;
background : black ;
}

p{
color: red ;
background : black ;
}

With grouping : h1,p {


color: red ;
background : black ;
}
5. Universal Selector ::

. The universal selector (*) selects all HTML elements on the page.

Example : * {
text-align: center;
color: blue;
}

::: Chapter - 2: Deep Dive - 1 :::

Topic - 1: Inheritance:

:: Inheritance in CSS ::

*** Overview ::

CSS rulesets cascade down the CSS hierarchy from parent selectors to
their children selectors. These CSS rulesets are inherited from their parent
selectors.

>> If the CSS property is not specified, the child element will naturally inherit a
CSS property with its value from the parent element.

EX: :: Sample Example for Inheritance ::

Sample.html ::

<!DOCTYPE html>
<html>
<head>
<title>My WEb</title>
<link rel="stylesheet" type="text/css" href="SAMPLE1.css">
</head>

<body>
<h1>My book</h1>
<h1>Data</h1>
<p>My data</p>

<div id="Parent">
Parent Div
<div id="Child1">Child1 Div-l</div>
<div id="Child2">Child Div-ll</div>
</div>
</body>
</html>

SAMPLE.css ::

h1 {
color: blue;
}

p {
background-color: aqua;
}

#Parent {
color: red;
}

Output:

My book
Data
My data

Parent Div
Child1 Div-l
Child Div-ll

>> You can see we only specified the colour: red for the parent div but the child
div’s also got that property. This is because of CSS Inheritance.

NOTE : Inheritance in CSS occurs when an inheritable property is not set on an


element. It goes up in its parent chain to set the property value to its parent
value.

CSS Properties which can be inherited :

. font-size
. font-family
. font-weight
. color

CSS Properties that can’t be inherited :

. height
. width
. border
. margin
. padding etc.
There is a way by which these properties can also be inherited. For that, we need
to use the inherit keyword.

:: Inherit keyword ::

The inherit keyword specifies that a property should inherit its value
from its parent element.

>> The inherit keyword can be used for any CSS property and on any HTML element.

EX:

HTML : <div id="Parent">


Parent Div
<div id="Child1">Child1 Div-l</div>
<div id="Child2">Child Div-ll</div>
</div>

CSS : #Parent {
height: 100px;
color: red;
}

#Child1 {
height: inherit;
}

Output: Parent Div


Child Div-l

Child Div-ll

>> Parent div has the properties of color:red and height:100px , the color property
was automatically inherited by the child div’s, but the height property is not
inheritable. To inherit the height property inherit keyword is used. So the height
of the Child-I div becomes 100px.

NOTE : Only direct child elements can inherit a CSS property from its parent
element using the inherit value if the CSS property is set by its parent element.
This is to ensure that the CSS property to be inherited is inheritable.

Topic - 2: Box Model ::

:: Box Model in CSS ::

*** Overview ::
Box model describes the layout of the elements. The HTML elements are
considered as boxes.

The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and content. The image below
illustrates the box model.

MARGIN
BORDER
PADDING
CONTENT

. Content - The content of the box, where text and images appear

. Padding - Clears an area around the content. The padding is transparent

. Border - A border that goes around the padding and content

. Margin - Clears an area outside the border. The margin is transparent.

>> The element’s "total width" is equal to the total of the horizontal borders,
padding, and content width of the element.

>> The "total height" of the element is equal to the total of the vertical
borders, padding, and content height of the element.

EX:

HTML : <div>
Welcome to Coding Ninjas !
At Coding Ninjas, our mission is to continuously innovate
the best ways to train the next generation of developers and to transform the way
tech education is delivered.
</div>

CSS : div {
width: 300px;
border: 15px solid red;
padding: 50px;
margin: 20px;
}

Output: Welcome to Coding Ninjas !


At Coding Ninjas, our mission is
to continuously innovate the best
ways to train the next generation
of developers and to transform the
way tech education is delivered.
:: Width and Height of an Element ::

By using CSS’s width and height properties, only the height and width
of the content box is set. To calculate the total size of an element, you must also
add padding, borders and margins.

EX: div { | Calculation:


width: 400px; |
padding: 10px; | 400px (width)
border: 5px solid gray; | + 20px (left + right padding)
margin: 10; | + 10px (left + right border)
} | = 430px.

. Width of this div will be 450.

Topic - 3: Background in CSS ::

:: Background ::

The background properties are used to define the background effects


for elements. "The background of an element is the total size of the element". It
includes padding and border but not the margin because, as per the definition,
padding is the inner space contained in the content, but the margin is the outer
empty area from the content.

Margin
Border
Padding
Content

Margins are applied outside of the borders.

Backgrounds can be filled with a colour or image, clipped or resized,


and otherwise modified. CSS background properties:

. background-image
. background-repeat
. background-size
. background-position
. background-attachment

1. background-color ::

The background-color property sets the "background color" of an


element. It has the same value as that of the color property.
Even if you write background rather than background-color, it will do the same
work.

EX: HTML: <div>


Welcome to Coding Ninjas !
</div>

CSS: div {
background-color : red;
}

(or)

div {
background : red;
}

2. background-image ::

The background-image property is used to "specify an image to use as


the background" of an element. This can set one or more background images for an
element. url value is used to set the background image.

>> url('URL') - specifies the URL of the image. You can specify more than one image
by separating the URLs with a comma

NOTE : By default, a background-image is placed at the top-left corner of an


element and is repeated, covering the entire element both vertically and
horizontally.

EX: HTML : <div>


Welcome to Coding Ninjas !
</div>

CSS : div{
height: 150px;
width: 200px;
background-image: url('cn.jpg');
}

Output: Welcome to Coding Ninjas Background Coding Ninjas logo will


display.

>> You must be curious this was not the expected result. The image should cover the
whole area and should not repeat for that let’s move on and learn how to do that.

3. background-repeat ::
The background-repeat property is used to specify how/if a background
image will be repeated.

By default, a background image repeats both vertically and horizontally, so


background-repeat will how the image repetition works.

The values this property can take are:

. repeat - This is the default value. The background image is repeated both
vertically and horizontally. The last image will be clipped if it does not fit.

. repeat-x - The image is repeated only horizontally

. repeat-y - The image is repeated only vertically

. no-repeat - The image will only be shown once

. space - the background-image is repeated without clipping. The space remaining


is distributed evenly between images, with the first and last images pinned to
sides of the element

. round - the image is repeated and shrink or stretch to fill the space

Updating the CSS of the above example ::

EX: HTML : <div>


Welcome to Coding Ninjas !
</div>

CSS : div{
height: 150px;
width: 200px;
background-image: url('cn.jpg');
background-repeat: no-repeat;
}

The repetition of the image is stopped. Now let’s see how to cover the image in the
whole div.

4. background-size ::

The background-size property is used to "specify the size of the background


images".

The values it can take are:

. auto - This is a default value. The image is displayed in its original size
. length - sets the width and height of the background image. The first value sets
the width, the second value sets the height

. percentage - sets the width and height of the background image in per cent. The
first value sets the width, the second value sets the height. If only one value is
given, the second is set to "auto"

. cover - resizes the background image to cover the horizontal width of the
container

. contain - resizes the background image to make sure the image is fully visible

Use the background-size : cover if the image is small and repeating itself, and
background-size : contain if the image is overflowing the area.

Updating the CSS of the above example ::

EX: HTML : <div>


Welcome to Coding Ninjas !
</div>

CSS : div{
height: 150px;
width: 200px;
background-image: url('cn.jpg');
background-repeat: no-repeat;
background-size: cover;
}

Output: Welcome to Coding Ninjas !. The background image size will


be display with the help of background-size.

>> This was the expedited result where the image should not repeat and cover the
whole area.

5. background-position ::

The background-position property is used to "specify the initial


position of a background image".

By default, a background image is placed at the top-left corner of an element, and


you can change the position with the background-position property.

>> The values this property can take are(X represents horizontal position and Y
represents vertical position):

. X Y - they both can each take value from one of the following - left, right,
top, bottom, centre. If one value is specified, the other value will be “centre.”

. Xpos Ypos - specifies the horizontal and vertical position relative to the
viewport. Units can be any of the CSS units. If you only specify one value, the
other value will be 50%.

EX: HTML : <div>


Welcome to Coding Ninjas !
</div>

CSS : div{
height: 150px;
width: 200px;
background-image: url('cn.jpg');
background-repeat: no-repeat;
background-position: 20% 30%;
}

Output: Welcome to Coding Ninjas !

Here the backgroundimage position will be displayed with the help of the X and Y
value of background-position.

6. background-attachment ::

The background-attachment property is used to specify whether a


background image scrolls with the rest of the page or is fixed.

The values it can take are:

. scroll - This is default value. The background image will scroll with the page

. fixed - The background image will not scroll with the page

. local - The background image will scroll with the element's contents

Topic - 4: Borders ::

:: Borders in CSS ::

*** Overview ::

The border property is used to set the element's border. CSS borders
allow you to specify the "style, width, and colour" of an element's border.

>> The border is a shorthand for "border-width, border-style, and border-color"


written together.

The below example applies the border property to a div.

Browser : | Welcome to Coding Ninjas ! |


1. Border Width ::

>> The border-width property specifies the width of the four borders.

>> The width can be set as an absolute or relative size or using one of the three
predefined values: "thin, medium, or thick".

Ex: border-width: 2px 10px 4px 20px;

Output: Welcome to Coding Ninjas !

** top border -> 2px;


** right border -> 10px;
** bottom border -> 4px;
** left border -> 20px;

2. Border Style ::

>> The border-style property specifies what kind of border to display.

>> The values for border-style are: "dotted, dashed, solid, double, groove, ridge,
inset,
outset, none, hidden".

EX: border-style : dotted dashed solid double;

Output: Welcome to Coding Ninjas !

** dotted top border,


** dashed right border,
** solid bottom border,
** double-lined left border.

NOTE : It is necessary to add border-style property; else, no other border


properties will work.

3. Border Color ::

>> The border-color property specifies the color of the four borders.

>> The value of the property is the same as that of the color property. But now
you can provide different colours to different border sides.

>> If border-color is not set, it inherits the color of the element.


EX: border-color: red green;

Output: Welcome to Coding Ninjas !

** top and bottom border color -> red


** left and right border color -> green.

:: Border Individual Sides ::

Using the border property, we can provide width, style and color to
all the borders separately, but still, we have to give some value to all the sides
of the border. CSS border also have property to give border value individually to
each of the border sides. The border property for the sides are:

. border-top
. border-right
. border-bottom
. border-left

This is further broken to provide style, width and color separately to the border
sides. Some of them are: "border-top-style, border-right-width, border-left-color",
etc.

4. border Radius ::

The border-radius property is used to "add rounded borders" to an


element. Values can be absolute(eg. in px) or relative(eg. in %) for this
property.

Ex: border-radius: 10px;

Output: (Welcome to Coding Ninjas ! )

The border-radius can be provided in the "elliptical form" as well.


Therefore, you need to provide horizontal and vertical radius differently. This is
done using a slash ("/") between horizontal and vertical radius.

Syntax : border-radius : horizontal radius / vertical radius ;

EX: border-radius: 30px/10px;

Output: | Welcome to Coding Ninjas ! |


Topic - 5: Text Direction and Align ::

:: Text Direction and align in CSS ::

*** Overview ::

The direction property specifies the "text direction/writing


direction" within a block-level element.

:: writing modes ::

A writing mode in CSS refers to whether the "text is running


horizontally or vertically". The writing-mode property allows us to switch from one
writing mode to another. You can change the writing mode of parts of your layout
for creative purposes.

Writing Mode Direction

vertical-rl Text displays vertically

horizontal-lr Text displays horizontally

:: Text align ::

The text-align property is used to set the "horizontal alignment" of a


text.
A text can be aligned left, right, centered, or justified.

EX: HTML: <p id="center"> center </p>


<p id="left"> left </p>
<p id="right"> right </p>

CSS: #center {
text-align: center;
}

#left {
text-align: left;
}

#right {
text-align: right;
}

Output: center
left
right
Topic - 6: Overflow ::

:: Content Overflow in CSS ::

*** Overview ::

The overflow property is used to "specify what happens if the content of


an element overflows", i.e. the content’s height or width is larger than the
element’s height or width. This property adds a scroll bar or clips the content
when an element's content is too big to fit in a specified area.

The values that the overflow property can take are:

. visible - This is the default value. The content overflows and is seen outside
the box

. hidden - Only the content that fits inside the box is visible, and the overflow
is clipped

. scroll - All the content is visible through a scroll bar added to the box
auto - a scroll-bar gets added if content overflows

. auto - A scroll-bar gets added if content overflows.

1. visible ::

By default, the overflow content is visible, i.e. it renders outside the


element's box.

EX: HTML: <div>


HTML is short for HyperText Markup Language
</div>

CSS: div {
background-color: lightgreen;
width: 200px;
height: 200px;
Overflow: visible;
}

2. hidden ::

In overflow: hidden the overflow content outside the box is not rendered
on the web page.
Changing CSS of the above mentioned example :

EX: CSS: div {


background-color: lightgreen;
width:200px;
height: 200px;
overflow:hidden;
}

3. scroll ::

In overflow: scroll, the overflow is clipped, and a scrollbar is


added to scroll inside the box.

NOTE : This adds a scrollbar both horizontally and vertically.

EX: CSS: div {


background-color: lightgreen;
width:200px;
height: 200px;
overflow:scroll;
}

4. auto ::

The overflow : auto is similar to scroll, but it only adds the scrollbar if
needed.

EX: CSS : div {


overflow: auto;
}

5. overflow-x and overflow-y :

The overflow-x and overflow-y are used to handle the overflow


horizontally or vertically.

>> overflow-x is used to handle the horizontal overflow of content.

>> overflow-y is used to handle the vertical overflow of content.

EX: CSS: div {


overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}
NOTE : The overflow property only works for block elements with a specified height.

** Interview Questions **

1. What is the Box model in CSS? Which CSS properties are a part of it?

Ans 1 .
A rectangle box is wrapped around every HTML element. The box
model is used to determine the height and width of the rectangular box. The CSS Box
consists of Width and height (or, in the absence of that, default values and the
content inside), padding, borders, margin.

Margin
Border
Padding
Content

>> Content: Actual Content of the box where the text or image is placed.
>> Padding: Area surrounding the content (Space between the border and content).
>> Border: Area surrounding the padding.
>> Margin: Area surrounding the border

2. What is VH/VW (viewport height/ viewport width) in CSS?

Ans 2 .
It’s a CSS unit used to measure the height and width in percentage with
respect to the viewport. It is used mainly in responsive design techniques. "The
measure VH is equal to 1/100 of the height of the viewport". If the height of the
browser is 1000px, 1vh is equal to 10px. Similarly, if the width is 1000px, then 1
vw is equal to 10px.

3. Difference between margin and padding?

Ans 3 . MARGIN PADDING

1. The outer space of an 1. The inner space of an


element, i.e, margin, element, i.e, padding,
is the space outside is space inside the
the border. element's border.

2. It can be negative 2. It does not allow


any float number. negative numbers.

3. We can set the margin 3. We cannot set the


to auto. padding to auto.

4. Styling of an element 4. Padding is affected by


such as background the styling of an
color does not affect element, such as back-
the margin. ground color.

4 . How does this property work overflow: hidden?

Ans 4 .
The overflow property in CSS is used for specifying whether
the content has to be clipped or the scrollbars have to be added to the content
area when the content size exceeds the specified container size where the content
is enclosed. If the value of overflow is hidden, the content gets clipped post the
size of the container thereby making the content invisible.

For example,

div {
width: 150px;
height: 50px;
overflow: hidden;
}

If the content of the div is very large and exceeds the height of 50px, the content
gets clipped post 50px and the rest of the content is not made visible

5 . Different Box Sizing Property?

Ans 5 .
The box-sizing CSS property sets how the total width and
height of an element are calculated.

>> Content-box: The default width and height values apply to the element's content
only. The padding and border are added to the outside of the box.

>> Padding-box: Width and height values apply to the element's content and its
padding. The border is added to the outside of the box. Currently, only Firefox
supports the padding-box value.

>> Border-box: Width and height values apply to the content, padding, and border

::: Chapter - 3 : Deep dive - ll :::

Topic - 1: CSS Units ::

::: Units in CSS :::

*** Overview ::
>> CSS units are used for "expressing the size" of different properties.

>> The units are expressed by a "number followed by the unit symbol". Many CSS
properties take "length" values, such as width, margin, padding, font-size, border-
width, etc.

Examples : margin : 10px ;


padding : 2em ;
border-radius : 50% etc.

>> Whitespace cannot appear between the number and the unit.

>> If the value is 0, the unit can be omitted.

>> For some CSS properties, negative lengths are allowed, like margin.

There are two types of length units:

1. Absolute
2. Relative

1. Absolute Units ::

The absolute units are a "fixed size/length" of the element. Absolute


length units are not recommended for use on-screen because screen sizes vary so
much.

The absolute units consist of the following :

. cm - centimeters
. mm - millimeters in inches (1in = 96px = 2.54cm)
. px - pixels (1px = 1/96th of 1in)
. pt - points (1pt = 1/72 of 1in)
. pc - picas (1pc = 12 pt)
. px is most commonly used.

2. Relative Units ::

Relative length units specify a length relative to another length property.

Some of the relative units are the following:

. em - Relative to the font size of the element (2em means 2 times the size of the
current font)
. rem - Relative to the font size of the root element
. vw - Relative to 1% of the width of the browser window size
. vh - Relative to 1% of the height of the browser window size
. % - Relative to the parent element

Topic - 2: Sizing Items ::

:: Sizing items in CSS ::

*** Overview ::

Using CSS sizes can be given to the elements, divs, images etc., in many
ways, and we will cover them in this module.

1. Absolute sizing ::

Absolute sizing can be given to the images, divs, elements etc., "which
means that the size will be fixed and will not change according to screen sizes and
will not adjust to fit the content inside it".

EX: HTML : <div>


Welcome to Coding Ninjas !
</div>

CSS: div {
background-color: lightblue;
Width: 150px;
height: 150px;
}

Output: Welcome to Coding Ninjas !

2. Relative sizing ::

. Percentage
. Rem
. Min and max
. Viewport

:: Percentage ::

Size can be given using percentages. In this, the per percentage is


relative to its parent element. If there is no parent div, then it is considered
relative to the viewport(screen size of the page).
EX: HTML: <div id="parent">
<div id="child">
Welcome to Coding Ninjas !
</div>
</div>

CSS: #parent {
background-color: lightgrey;
width: 150px;
height: 150px;
}

#child {
background-color: lightblue;
width: 70%;
height: 70%;
}

Output: Welcome to
Coding Ninjas !

:: rem ::

This is used for font sizing, relative to the root element’s font size
(generally 14px).

EX: HTML: <p> Normal text </p>


<p style="font-size: 2rem;"> Size of text 2 rem </p>

Browser: Size of text 2 rem

::: MIN/MAX Height/Width :::

Height or width properties are used to set the height and width of the
element to a specific size. But its size becomes fixed with this, and this brings
problems in smaller devices. The browser then gets a scrollbar to scroll through
the entire content.

So, to overcome this problem, CSS provides a min and max property like min-height,
max-width etc. This specifies the maximum height/width that an element can have. If
the browser window's width becomes smaller than the element’s width, the element
width adjusts with the browser width.

But, a very small element is very difficult to read. So, the CSS provides another
property min-width that specifies the minimum width that the element can have.

Let’s understand it with an example, suppose you have a box with some content, and
the words of that paragraph are not fixed, so the size of the box can not be fixed,
but you want to set a minimum height. The box will always be at least this height
but will then grow taller if there is more content than the box has space for at
its minimum height

EX: HTML : <div>


Welcome to Coding Ninjas !
</div>

CSS: div {
background-color: lightblue;
Width: 150px;
height: 150px;
}

Output: Welcome to Coding Ninjas !

:: Viewport ::

Viewport means the visible area on the web browser and elements can
have a size relative to the viewport.

. vh - Viewport height
. vw - Viewport width

Sizing of the items can be done relative to the viewport height/width like height :
80vh , width : 50vw etc.

Topic - 3: Colors and Images :::

::: Colors and Images in CSS :::

:: Color ::

The color property is used to set the foreground color of an element's


text context and its decoration.

The color property can be specified in 6 different ways. Each one of them provides
has some difference from the other. Although color can also be applied to
backgrounds and borders.

1. By name ::

All modern browsers support 140 different colors named in CSS. Unlike
HTML, CSS will completely ignore unknown keywords.
>> The color keywords all represent plain, solid colors, without transparency
like orangered, green, blue, lightgrey, etc.

EX: <h2 style="color: orangered;"> orangered </h2>

Output: orangered - name


#ff6347 - hex
rgb(255, 99, 71)
hsl(9, 100%, 64%)
rgba(255, 99, 71, 0.8)
hsla(9, 100%, 64%, 0.8)

2. Using rgb ::

RGB stands for "Red, Green and Blue". It is a color model where the
combination of red, green and blue forms a color. The intensity of each color has
values ranging from 0 to 255. This provides a very large number of colors dataset.

>> RGB value for black : rgb(0, 0, 0) and for white : rgb(255, 255, 255).

EX: <h2 style="color:rgb(255, 99, 71);">rgb(255, 99, 71) </h2>

Output: orangered - name


#ff6347 - hex
rgb(255, 99, 71)
hsl(9, 100%, 64%)
rgba(255, 99, 71, 0.8)
hsla(9, 100%, 64%, 0.8)

3. By hex code ::

The colors can be represented by "6 digits hexadecimal code". The codes
are made using the "3 colors(Red, Green and Blue)". First 2 digits are red, next 2
are green and last 2 are blue. "So, the syntax for hex code is: #RRGGBB".

>> Each hexadecimal value between 00 - FF is similar to 0 - 255.

>> #000000 is black and #FFFFFF is white.

EX: <h2 style="color:##ff6347;">#ff6347 </h2>

Output: orangered - name


#ff6347 - hex
rgb(255, 99, 71)
hsl(9, 100%, 64%)
rgba(255, 99, 71, 0.8)
hsla(9, 100%, 64%, 0.8)
3. Using hsl ::

The color can also be specified using the HSL (Hue, Saturation and Lightness)
components.

. Hue, is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and
240 is blue.

. Saturation, represents the amount of saturation in the color. It is a percentage


value, 0% means a shade of gray, and 100% is the full color.

. Lightness, represents the amount of light in the color. It is also a percentage,


0% is black, 50% is neither light or dark, 100% is white.

EX: <h2 style="color:hsl(9, 100%, 64%);"hsl(9, 100%, 64%) </h2>

Output: orangered - name


#ff6347 - hex
rgb(255, 99, 71)
hsl(9, 100%, 64%)
rgba(255, 99, 71, 0.8)
hsla(9, 100%, 64%, 0.8)

5. Using rgba ::

"RGBA (Red, Green, Blue, Alpha)" is an extension of RGB, provided with


alpha transparency. This alpha value determines the opacity of the RGB defined
color.

The alpha parameter is a number between 0.0 (transparent) and 1.0 (opaque).

EX: rgba(255, 0, 0, 0.6) is a red color, with 0.6 opacity

Output: red color

6. Using hsla ::

"HSLA (Hue, Saturation, Lightness, Alpha)" is also an extension of


HSL, provided with alpha transparency. The alpha value and property is the same as
that in RGBA.

EX: hsla(0, 100, 50%, 0.6) is a red color with 0.6 opacity

Output: red color.


:: Sizing Images ::

If an image is placed inside a box that is smaller or larger than the dimensions of
the image, it will either appear smaller than the box, or overflow out of the box.
Here comes the role of CSS to adjust the size.

. picture overflow

. picture smaller than the div

Solution 1 :
In this case we can set the size of the image to max-width : 100%
and max-height:100% of the outer div. By this the overflow image will adjust to the
size of div but the smaller image will remain in the same position and problem
sustains.

Solution 2 :
Using the object-fit property. When using object-fit the
replaced element can be sized to fit a box in a variety of ways.

>> object-fit : cover - Sizes the image down, maintaining the aspect ratio so
that it neatly fills the box.

>> object-fit : contain - image will be scaled down until it is small enough to
fit inside the box.

Picture Overflow ::

EX: HTML : <div>


<img src="logo.jpg" class="contain">
</div>

CSS: div {
height: 100px;
width: 150px;
border: 2px solid red;
}

img {
height: 100%;
width: 100%;
}

.contain {
object-fit: contain;
}

Output: logo will be fit in size.


Picture Smaller than div ::

EX: HTML : <div>


<img src="logo.jpg" class="cover">
</div>

CSS: div {
height: 250px;
width: 650px;
border: 2px solid red;
}

img {
height: 100%;
width: 100%;
}

.cover {
object-fit: cover;
}

Output: logo will be fit in size cover full the screen.

Topic - 4: Styling form elements ::

:: Styling form elements in CSS ::

*** Overview :::

A basic HTML form looks very simple but usually, we don’t see forms on
websites that simple, they are styled which is done using the CSS.

** Basic HTML form ::

HTML :: <form>
<label for="fname"> First name: </label><br>
<input type="text" id="fname" name="fname"> <br>

<label for="lname"> Last name: </label><br>


<input type="text" id="lname" name="lname">
</form>

Output : First name:


| |
Last name:
| |
** Selecting inputs for styling ::

CSS: input {
border : 2px solid red;
}

Output: First name:


| |
-> border will display in red color.
Last name:
| |

** Selecting different inputs for styling ::

The example above applies to all <input> elements. If you only want to
style a specific input type, you can use attribute selectors:

>> input[type=text] - will only select text fields

>> input[type=password] - will only select password fields

>> input[type=number] - will only select number fields

EX: HTML : <form>


<label for="name"> Full name: </label><br>
<input type="text" id="name" name="fname"> <br>

<label for="pass"> Password: </label><br>


<input type="Password" id="pass" name="pass">
</form>

CSS : input[type=password] {

border : 2px solid red;


}

Output: Full name:


| |
password:
| | -> border will be displayed in red color.

** Padded Inputs ::

This helps in providing padding in the input fields


EX: CSS: input {
border : 2px solid red;
padding: 5px;
}

Output: Full name:


| | -> red color
Password:
| |

** Coloured Inputs ::

background-color property is used to add a background color to the


input, and the color property to change the text color.

EX: CSS : input {


background-color: lightblue;
color: red;
}

Output: Full name:


| |
Password:
| |

** Focused Inputs ::

By default, some browsers will add a blue outline around the input
when it gets focused (clicked on). You can remove this behaviour by adding outline:
none; to the input or you can change the property on focus.

EX: CSS: input: focus {


border : 2px solid red;
background-color: lightgrey;
}

Output: Full name:


| |
Password:
| | -> background color will be lightgrey

*** Styling Buttons ::

Buttons are commonly used in forms for submitting the form data.

>>> You can color the button , give borders to it , make rounded borders etc.
EX: HTML : <input type="submit" value="BUtton">

CSS : input[type=submit] {
background-color: red;
padding: 5px;
border: 2px solid black;
border-radius: 10px;
}

Output: Full name:


| |
Password:
| |

Button -> background color will be red.

Topic - 5: Styling Links ::

::: Styling Links in CSS :::

Overview ::

A Link is generated by HTML using the anchor tag, and it can be


styled or beautified in many ways like color, font-family, background, etc.

There are four links states:

>> a : link - Normal, unvisited link


>> a : visited - Link the user has visited
>> a : hover - Link when the user mouses over it
>> a : active - Link the moment it is clicked

"Generally, an unvisited link is "underlined and blue". A visited link is


"underlined and purple". An active link is "underlined and red"".

:: Text Decoration ::

It is generally used to "remove the underline from the links".

EX: HTML: <a href="https://www.codingninjas.com/> Link to Coding Ninjas </a>

CSS: a {
text-decoration: none;
}
Before : Link to Coding Ninjas -> underline

After : Link to Coding Ninjas

:: Background color ::

We can also specify background color for the link and by this the
link will look like it is enclosed in a coloured rectangular div.

EX: CSS: a {
background-color: lightgreen;
}

Output: Link to Coding Ninjas -> background color will be green.

Now by using the background colour property the link can also be made to
look like a button.

:: Link as a Button ::

Modifying the above example by giving some padding to the anchor tag,
which will make the rectangle look like a button.

EX: CSS: a {
text-decoration: none;
background-color: lightgreen;
padding: 10px;
border-radius: 10px;
}

Output: Link to Coding Ninjas

Topic - 6 : Text and Font Styling ::

:: Text and Font Styling in CSS ::

** Overview ::

Various properties are provided to change the look and style of


text in the HTML document. These styles will apply only to the content of any
element that is text. We will look into some of the most used text and font styling
properties.
Font properties define the look of the font like font family, boldness, size and
style. The first 4 are font properties.

Text properties define the layout and presentation of the text on the HTML page.

1. font-size ::

This defines the size of the text. The font-size value can be an
absolute or relative size, i.e., values can be applied in px, %, em, etc.

EX: CSS: h1 {

font-size: 40px;
}

h2 {

font-size: 1.875em;

Output: h1

h2

2. font-family ::

The font family of a text is set with the font-family property.


The font-family property should hold several font names as a "fallback" system. If
the browser does not support the first font, it tries the next font, and so on.

Start with the font you want, and end with a generic family, to let the browser
pick a similar font in the generic family if no other fonts are available.

EX: HTML : <p> Welcome to Coding Ninjas </p>

CSS: p {
font-family : monospace;
}

Output: Welcome to Coding Ninjas

3. font-weight ::

The font-weight property specifies the weight/thickness of a font.


The weight ranges from light to bold. Values can be: bold, bolder, inherit,
initial, lighter, normal, unset. Alternatively, we can use numeric values ranging
from 100-900 to define the
weight of the font.
EX: CSS: p {
font-weight: bold;
}

Output: Welcome to Coding Ninjas

4. font-style ::

The font-style property specifies the style for a text. The values for
this property are: normal, italic, oblique, initial, inherit.

EX: CSS: p {

font-style : italic;

Output: Welcome to Coding Ninjas

** color ::

We have already discussed applying color to text using the color property.
The color can be defined either by name, hex code, rgb, rgba, hsl, or hsla.

** text-align ::

We have already discussed applying The text-align property is used to


set the horizontal alignment of a text. A text can be aligned left, right,
centered, or justified.

** text-indent ::

The text-indent property specifies the indentation of the first line


in a text block. Negative values are allowed. The first line will be indented to
the left if the value is Negative.

EX: HTML : <p> Don't you love exploring beautiful</p>

CSS : p {
text-indent: 100px;
}

Output: Don't you just love exploring beautiful


** text-transform ::

The text-transform property is used to specify the case of the letters


in a text. It can be used to turn text to:

>> uppercase - turns every character to uppercase

>> lowercase - turns every character to lowercase

>> capitalize - turns the first letter of each word to uppercase and other to
lowercase

>> none - text renders as it is. It is the default

** text-decoration ::

The text-decoration property is used to "set or remove decorations


from text". The value text-decoration: none; is often used to remove underlines
from links.It is used to decorate the text. It has 4 values:

>> underline - puts a line under the text

>> overline - puts a line above the text

>> line-through - puts a line through the text

>> none - removes any of the above decorations

EX: <p style="text-decoration: line-through;"> Welcome to Coding Ninjas</p>


<p style="text-decoration: overline;"> Welcome to Coding Ninjas </p>

Output: Welcome to Coding Ninjas----------

____________________________________
Welcome to Coding Ninjas

** line-height ::

The line-height property "sets the height of the lines in an element". It


does not change the size of the font.

The font-size value can be an absolute or relative size, i.e., values can be
applied in px, %, em, etc. If no unit is specified then it is multiplied by the
element’s font size.

** letter-spacing ::
The letter-spacing property is used to specify the space between the
characters in a text. This is used to increase or decrease the space between the
characters only.

The value of letter-spacing can be absolute or relative.

EX: CSS: p {

letter-spacing: 10px;

Output: C o d i n g N i n j a s

** word-spacing ::

The word-spacing property is used to specify the "space between the


words" in a text.
This is used to increase or decrease the space between the words.
The value of word-spacing can be absolute or relative.

EX: CSS: p {
word-spacing: 10px;
}

Output: Welcome to Coding Ninjas

** text-shadow ::

>> The text-shadow property "adds shadow to text".

>> The value contains 3 values, which are the position of the horizontal shadow,
the

position of the vertical shadow and the color of the shadow.

EX: CSS : p {
text-shadow: 2px 1px red;
}

Output: Coding Ninjas

::: Interview Questions :::

1. Is it important to test the webpage in different browsers?


Ans 1.

It’s most important to test a website in different browsers when you’re


first designing it, or when making major changes. However, it’s also important to
repeat these tests periodically, since browsers go through a lot of updates and
changes.

2. Why background and color are the separate properties if they should
always be set together?

Ans 2.

There are two reasons behind this:

>> It enhances the legibility of style sheets. The background property is a complex
property in CSS, and if it is combined with color, the complexity will further
increase.

>> Color is an inherited property while the background is not. So this can make
confusion further.

3. What is the use of CSS Opacity?

Ans 3 .

The CSS opacity property is used to specify the transparency of an


element. In simple words, you can say that it specifies the clarity of the image.
In technical terms, Opacity is defined as the degree to which light is allowed to
travel through an object.

Example : <style>
img{
Opacity : 0.6 ;
}
</style>

::: Chapter - 4 : CSS advanced :::

Topic - 1 : Text Effects

::: Text Effects in CSS :::

*** Overview :::

CSS styling is also applied on texts to beautify them or some more


properties to it . The properties of the text effect help us to make the text
attractive and clear.

There are some text effect properties in CSS that are listed below:

>> word-break
>> word-wrap
>> text-overflow
>> writing-mode

1. word break ::

It specifies how words should break at the end of the line. It defines the
line break rules.

Values that word-break can take :

. keep-all : It breaks the word in the default style.

. break-all : It inserts the word break between the characters in order to prevent
the word overflow.

EX: HTML : <div> Lorem ipsum is simply dummy text of the printing
and typesetting. </div>

CSS : div {
height: 150px; width: 150px;
border: 2px solid black;
word-break: break-all;
}

Output: Lorem ipsum is simpl


y dummy text of the
printing and type
setting.

CSS : div {
height: 150px; width: 150px;
border: 2px solid black;
word-break: keep-all;
}

Output: Lorem ipsum is simply


dummy text of the
printing and
typesetting.

2. word wrap ::
This property is used to break the long words and shift them onto the
next line. This property is used to prevent overflow when an unbreakable string is
too long to fit in the containing box in the very same line.

EX: HTML : <div> Lorem ipsum is simply dummy text of the printing and
typesetting </div>

Output: Lorem ipsum is simply


dummy text of the printing
and typesetting

CSS : div {
height: 150px;
width: 150px;
border: 2px solid black;
word-wrap: break-word;
}

Output: Lorem ipsum is si


mpl dummy text of
the printing and
typesetting

3. text-overflow ::

It specifies how the overflowed text will look like, which is not
visible to the user. text-overflow decides whether the text should be clipped or
show some dots (....).

EX: HTML: <p> Lorem ipsum is simply dummy text of the printing and
typesetting </p>

CSS : p {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipis;
}

Browser : | Lorem ipsum is si... |

CSS : For clip

Browser : | Lorem ipsum is simply dummy : |

Topic - 2 : Transforms in CSS :::

*** Overview :::


CSS Transforms is used to "translate, rotate, scale, and skews"
elements. Transformation is an effect used to change shape, size and position.

There is two type of transformation - 2D and 3D transformation.

Transform | Remarks
Method |
______________________________________________________________________

translate(x, y) It is used to transform along

X-axis and Y-axis.


______________________________________________________________________

translateX(n) along X-axis


______________________________________________________________________

translateY(n) along Y-axis


______________________________________________________________________

rotate() To rotate the element based on an


angle.
______________________________________________________________________

scale(x, y) To change the width and height of


an element.
______________________________________________________________________

scaleX(n) It is used to change the width of an


element.
______________________________________________________________________

scaleY(n) height of an element


______________________________________________________________________

skewX() It specifies the skew transforms along


with X-axis.
______________________________________________________________________

skewY() It specifies the skew transforms along


with Y-axis.
______________________________________________________________________

matrix() It specifies matrix transforms.


______________________________________________________________________

1. translate( ) ::

This method moves an element from its current position according to the
given parameters, i.e. X-axis and Y-axis.

Example : div{
transform: translate(20,50) ;
}

>> It shifts the div 20px right and 50 down.

2. rotate( ) ::

This method rotates an element "clockwise or anticlockwise" according


to a given degree in the parameter.

. Positive Degree Parameter - Rotate clockwise

. Negative Degree Parameter - Rotate anti-clockwise

Example : div{
transform: rotate(60) ;
}

>> It rotates the div 60 deg clockwise.

3. scale( ) ::

This method "increases or decreases" the size of an element according to


the parameters given for the width and height.

Syntax : scale ( width , height ) ;

Example : div{
transform: scale(2 , 4) ;
}

The size of the element becomes : twice the original width, thrice the actual
height.

Example2: div{
transform: scale(0.5 , 2) ;
}

Size of the element becomes : half the original width, twice the original height

4. scaleX( ) and scaleY( ) ::

>> scaleX( ) increases or decreases the size of an element along the X-axis, i.e.
width.

>> scaleY( ) increases or decreases the size of an element along the Y-axis,i.e.
height.

Example : scaleX(2) ;
Increases the width of element by 2 times.
scaleY(0.5);

Decreases the height of element by half.

5.skewX( ) and skewY( ) ::

>> skewX( ) : skews an element along the X-axis by the given angle.

>> skewY( ) : skews an element along the Y-axis by the given angle.

EX: skewX(30deg);

skewY(30deg);

6. matrix( ) ::

This method combines all the 2D transform methods and passes them into
parameters.

>> It takes six parameters : rotate, scale, move (translate), and skew elements.

Syntax : matrix( scaleX( ) , skewY( ) , skewX( ) , scaleY( ) , translateX( ) ,


translateY( ) )

EX: transform : matrix(1, -0.3, 0, 1, 0);

Topic - 3 : Transition :::

::: Transition in CSS :::

*** Overview :::

CSS transitions are added to change the element gradually with the time
specified from one style to another. Similar work can also be done using
JavaScript.

Transition works on hover. Generally, the transition is used with transform.

Properties of transition :

>> transition-property : CSS property on which transition is to be applied.


>> transition-duration : Time Duration for how long should the transition take.
>> transition-delay : The delay time, i.e., the transition starts after this time.
>> transition-timing-function : The type of transition function.
NOTE : To create a transition effect, transition duration and transition are
mandatory to mention else, there will be no transition effect.

Example : A div of 100px * 100px will get 200px*100px on hover within 3


seconds

HTML : <div> </div>

CSS : div{
height: 100px;
width: 100px;
border:2px solid black ;
transition-property: height ;
transition-duration: 3s;
}

div : hover{
height: 200px;
}

*** Transition on multiple properties :::

To apply transitions on multiple properties, separate the properties


with a comma and specify the change in the hover section.

Editing the above example where width also becomes 200px.

CSS : div{
height: 100px;
width: 100px;
border:2px solid black ;
transition-property: height , width ;
transition-duration: 3s;
}

div : hover{
height: 200px;
width : 200px;
}

**** transition delay :::

The transition-delay property specifies a delay (in seconds) for the


transition effect.

Example : Transition will start effecting 2 second delay


CSS : div{
transition-property: height , width ;
transition-duration: 3s;
transition-delay : 2s ;
}

**** transition timing function :::

The transition-timing-function property specifies the speed curve of the


transition effect and the type of transition for effect.

>> ease : Transition effect with a slow start, then fast, then end slowly
(Default)
>> linear : Transition effect with the same speed from start to end
>> ease-in : Transition effect with a slow start
>> ease-out : Transition effect with a slow end
>> ease-in-out : Transition effect with a slow start and end
>> cubic-bezier(n,n,n,n) : Defines own values in a cubic-bezier function

CSS : div{
transition-property : height , width ;
transition-duration : 3s ;
transition-timing-function: ease-in-out;
}

Transition shorthand

All the transition features could also be written in a single CSS line.

Toipc - 4: Animation ::

:::: Animation in CSS ::::

**** Overview :::

CSS Animation property is used to create animation on the webpage. It can


be used as a replacement for animation created by Flash and JavaScript. An
animation lets an element gradually change from one style to another.

Animation can change as many CSS properties, as many times.

1. @keyframes :::
Animation is created with a specific name and then its functionality is
described using the @keyframes rule. We need to mention the animation from and to.

Let’s take an example where a square div changes its shape to a circle.

HTML : <div> </div>


CSS : div{
height: 100px;
width: 100px;
border:2px solid black ;
animation-name: sample ;
animation-duration: 5s ;
}

@keyframes sample{
from{border-radius: 0;}
to{border-radius: 50%;}
}

NOTE : If the animation-duration property is not specified, no animation will


occur, because the default value is 0 seconds and animation occurring for 0 seconds
means no animation.

2. Animation at stages :::

In the above example, we transformed a square to a circle with


animation that you cannot see in this doc but you must try the code in your editor
and see the results on the browser. We can also make multiple changes in animation
with time

Let’s see that with an example where the animation duration is 3 seconds and at
each second colour of the div changes.

CSS : div {
width: 100px;
height: 100px;
background-color: red;
animation-name: sample;
animation-duration: 3s;
}

@keyframes sample {
0% {background-color: red;}
50% {background-color: blue;}
100% {background-color: green;}
}

3. animation-iteration-count :::
This property specifies the number of times animation should play.

In the below example the square changes to circle 3 times just like a loop.

HTML : <div> </div>


CSS : div{
height: 100px;
width: 100px;
border:2px solid black ;
animation-name: sample ;
animation-duration: 5s ;
animation-iteration-count: 3 ;
}

@keyframes sample{
from{border-radius: 0;}
to{border-radius: 50%;}
}

4. Animation direction :::

This property specifies if or not the animation should play in reserve on


an alternate cycle or normally.

. normal : Animation is played as normal (Default)

. reverse : Animation is played in the reverse direction (backwards)

. alternate : Animation is played forwards first, then backwards

. alternate-reverse : The animation is played backwards first, then forwards

In the below example technically square should have been converted into a circle
but after applying the property “animation-direction : reverse”, the circle is
converted to a square.

CSS : div{
height: 100px;
width: 100px;
border:2px solid black ;
animation-name: sample ;
animation-duration: 5s ;
animation-direction : reverse ;
}

@keyframes sample{
from{border-radius: 0;}
to{border-radius: 50%;}
}
4. Animation timing function :::

This property specifies the speed curve of the animation. It is the same as the
transition timing function.

. ease : Animation with a slow start, then fast, then end slowly (Default)

. linear : Animation with the same speed from start to end

. ease-in : Animation with a slow start

. ease-out : Animation with a slow end

. ease-in-out - Animation with a slow start and end

. cubic-bezier(n,n,n,n) : Define own values in a cubic-bezier function

Chapter - 5 :: Flexbox :::

Topic - 1 : Introduction to Flex::

::: Intro to Flex in CSS ::

*** Overview ::

The Flexbox layout provides an efficient way to layout, align and


distribute space among items in a container. This is helpful when the size of the
elements in the container is unknown and/or dynamic.

Using the flex in a container gives the ability to alter its items width/height and
order as well to best fit in the space available. A flex container expands items to
fill available free space or shrinks them to prevent overflow.

The flex is a value for the display property. It has to be provided in the
container for the flex to work. Only if it is defined inside the container, flex
properties will work. Flex properties are defined on the child elements.

The Flexible Box Layout Module makes designing a flexible, responsive layout
structure easier without using float or positioning.

To make the container to be flex, add this property in the container:

display: flex ;
display: inline-flex; for the inline variation.

In the below example, a parent div contains 3 divs with display property as flex.

EX: HTML: <div class="parent">


<div> Div 1 </div>
<div> Div 2 </div>
<div> Div 3 </div>
</div>

CSS: .parent {
display: flex;
background-color: lightgreen;
}

.parent > div {


background-color: grey;
margin: 10px;
padding: 20px;
}

Output: Div 1 Div 2 Div 3

>> The same code without display: flex;

Output: Div 1
Div 2
Div 3

Topic - 2: Flex Direction :::

::: Flex Direction in CSS :::

The flex-direction property defines in which direction the container


lays out the flex-items.

It may take 4 values:

1. flex-direction : row (Default)


2. flex-direction : column
3. flex-direction : row-reverse
4. flex-direction : column-reverse

1. row ::

. The row value stacks the flex items "horizontally, from left to right".
. For forward direction, add the flex-direction: row ; to the flex-container class.

It will not change anything as this is the default value and the layout will still
look the same.

EX: CSS : .parent {


display: flex;
flex-direction: row;
background-color: lightgreen;
}

Output:: Div 1 Div 2 Div 3

2. column ::

. The column value stacks the flex items "vertically, from top to bottom".

For downward direction, add the flex-direction: column ; to the flex-container


class.

EX: CSS : .parent {


display: flex;
flex-direction: column;
background-color: lightgreen;
}

Output: Div 1
Div 2
Div 3

3. row-reverse ::

. The row-reverse value stacks the flex items "horizontally, from right to left".

For backward direction, add the flex-direction: row-reverse ; to the flex container
class.

EX: CSS : .parent {


display: flex;
flex-direction: row-reverse;
background-color: lightgreen;
}

Output: Div 3 Div 2 Div 1

4. column-reverse ::

. The column-reverse value stacks the flex items "vertically, from bottom to top".

For upward direction, add the flex-direction: column-reverse ; to the flex


container class.
EX: CSS : .parent {
display: flex;
flex-direction: column-reverse;
background-color: lightgreen;
}

Output: Div 3
Div 2
Div 1

** ORDER ::

The order property is used to specify the order of the flex items in
the flex container. This property value must be a whole number. By default, the
number is 0(zero).
The higher the number the latter would the flex item appear in the flex container.

The flex items are displayed in the order like:

>> First, the items not having order property or order : 0 ; property is displayed
in sequence in which they appear in the source order.

>> Then the items are displayed in ascending order of the value of the order
property. The items having the same order value are displayed in the sequence in
which they appear in the source order.

In the below example order is : Div2 , Div 1 , Div 3.

EX: HTML : <!DOCTYPE html>


<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent">
<div style="order: 1"> Div 1 </div>
<div style="order: 0"> Div 2 </div>
<div style="order: 2"> Div 3 </div>
</div>
</body>
</html>

CSS: .parent {
display: flex;
background-color: lightgreen;
}

.parent > div {


background-color: grey;
margin: 10px;
padding: 20px;
}
Output: Div 2 Div 1 Div 3

Topic - 3 : Flex Wrap:::

::: Flex Wrap in CSS :::

The flex-wrap property specifies whether the flex items should wrap or
not.
By default, flex items "try to fit into one line". This property allows you to
change that and allow the items to flow into multiple lines as needed with this
property.

. nowrap (Default)
. wrap
. wrap-reverse

In the above example width of the container is 250 px, and the width of 6 divs is
70px each that sums up to 420px which is greater than the width of the container.
And as per the property of flex, it is adjusted in a single line now let’s see the
results for the wrap.

EX: HTML : <div class="flex-container">

<div> div 1</div>


<div> div 2</div>
<div> div 3</div>
<div> div 4</div>
<div> div 5</div>
<div> div 6</div>

<div>

CSS: .flex-container {
display: flex;
width: 250px;
height:200px;
background-color:
lightgreen;
}

.flex-container div {
width: 70px;
height:70px;
background-color: #7ff9ae;
border : 1px solid black;
}

Output: div 1 div 2 div 3 div 4 div 5 div 6


1. nowrap ::

The nowrap value specifies that the flex items will not wrap, i.e. it
will make all the flex-items appear in a single line, no matter how many items are
present inside the flex-container. It is a default value but you can use flex-wrap:
nowrap ; as well in the flex-container class.

EX: CSS: CSS {


flex-wrap : no-wrap;
}

Output: div 1 div 2 div 3 div 4 div 5 div 6

2. wrap ::

The wrap value specifies that the flex items will wrap if necessary,
i.e. if the total flex items are width is larger than the width of the container,
the items will arrange themselves in the next row.

The vertical spacing of the items will be automatically decided by this property.

Use flex-wrap: wrap ; in the flex-container class to wrap the items.

EX: CSS {
flex-wrap : wrap;
}

Output: div 1 div 2 div 3


div 4 div 5 div 6

3. wrap-reverse ::

The wrap-reverse value specifies that the flex items will wrap in
reverse order if necessary, i.e. if the total flex items are width is larger than
the width of the container, the items will arrange themselves in the next column
but the items will start from the bottom of the container. Use flex-wrap: wrap-
reverse ; in the flex-container class to wrap the items.

EX: CSS : CSS {


flex-wrap: wrap-reverse;
}

Output: div 4 div 5 div 6

div 1 div 2 div 3

Topic - 4: Flex Grow & Shrink :::

::: Flex Grow in CSS :::


The flex-grow property specifies the ratio with which a flex item
grows relative to the other flex items when there is some extra space available.
This controls the extent how much a flex-item grows, with respect to other flex
items.

This takes up any value from 0(zero) to any positive number.

0(zero) means that the flex items' width would not change.

EX: <div class="flex-container">


<div style="flex-grow: 0;> Div 1 </div>
<div style="flex-grow: 2;> Div 2 </div>
<div style="flex-grow: 3;> Div 3 </div>
</div>

Output: div 1 div 2 div 3

>> Here, only the div2 and div3 grows, when the width of the container is
increased. Also, div3 increases twice as much as div2. Now, width of div1 is 70px,
div2 is 120px and div3 is 170px.

::: Flex Shrink in CSS :::

The flex-shrink property specifies the ratio with which a "flex item
shrinks relative to the other flex items" when there is some extra space available.
This is just the opposite of flex-grow.

Here, also the range of value if from "0(zero) to any positive number". Zero means
width would not change.

EX: <div class="flex-container">


<div style="flex-shrink: 0;> Div 1 </div>
<div style="flex-shrink: 2;> Div 2 </div>
<div style="flex-shrink: 4;> Div 3 </div>
</div>

Output: div 1 div 2 div 3

>>> Here, only the div2 and div3 shrink, when the width of the container is
decreased. Also, div3 decreases twice as much as div2. Now, width of div1 is 100px,
div2 is 70px and div3 is 40px.

Topic - 5: Justify Content:::

::: Justify content in CSS :::


The justify-content property is used to "align the flex items along
the main axis". This defines the alignment along the main axis. This property
distributes extra free space inside the layout between the elements.

The justify-content property takes on any of the values below:

1. flex-start (Default)
2. flex-end
3. center
4. space-between
5. space-around
6. space-evenly

1. flex-start :::

The flex-start value aligns the items towards the start of the main
axis. This is the default value. Else use justify-content: flex-start ; in the
flex-container class.

EX: HTML: <div class="flex-container">


<div> div 1 </div>
<div> div 2 </div>
<div> div 3 </div>
</div>

CSS: .flex-container {
display: flex;
justify-content : flex-start;
}

Output: div 1 div 2 div 3

2. flex-end ::

The flex-end value aligns the items towards the end of the main axis.
Use justify-content: flex-end ; in the flex-container class.

EX: CSS: .flex-container {


display: flex;
justify-content : flex-end;
}

Output: div 1 div 2 div 3

3. center :::
The center value aligns the items towards the center of the main axis.
Use justify-content: center ; in the flex-container class.

EX: CSS: .flex-container {


display: flex;
justify-content : center;
}

Output: div 1 div 2 div 3

4. space-between :::

The space-between value distributes the remaining space between the


items evenly along the main axis. No space is provided towards the start of the
first container and the end of the last container. So, there is the same spacing
between the items.

Use justify-content: space-between ; in the flex-container class.

EX: CSS: .flex-container {


justify-content : space-between;
}

Output: div 1 div 2 div 3

5. space-around :::

The space-around value distributes the remaining space around the items
evenly
along the main axis. Visually the spaces do not seem to be equal. This is because
all the flex items have equal space on both sides.

Suppose each item gets a spacing of 10px on both sides of each other. So, the first
item will have 10px on the left side. The first item will have 10px on the right
side and the second item will have 10px on its left side. This will total to 20px
spacing between them. Similarly, the last item has only 10px spacing on its right
side.

EX: CSS: .flex-container {


display: flex;
justify-content : space-around;
}

Output: div 1 div 2 div 3

6. space-evenly :::
The space-evenly value distributes the remaining "space between the items and edges
of the container evenly along the main axis".

EX: CSS: .flex-container {


display: flex;
justify-content : space-evenly;
}

Output: div 1 div 2 div 3

Brief Explanation image

>>> flex-start : |||


>>> flex-end : |||
>>> center: |||
>>> space-between: | | |
>>> space-around: | | |
>>> space-evenly: | | |

Topic - 6 : Flex Align :::

::: Flex Align Items in CSS :::

The align-items property is used to align the flex items along the
cross-axis. The cross-axis is perpendicular to the main axis.

If the main axis is horizontal, then the cross-axis is vertical. If the main axis
is vertical, then the cross axis is horizontal.

Align-items can be set to any of these values:

1. flex-start
2. flex-end
3. center
4. stretch (Default)
5. baseline

1. stretch ::

The stretch value stretches the flex items to fill the container along the cross
axis.
This is the default value. Else use align-items: stretch ; in the flex-container
class.

EX: CSS : .flex-container {


display: flex;
align-items: stretch;
}

.flex-container div {
width: 50px;
min-height: 50px;
}

Output: div 1 div 2 div 3

2. flex-start :::

The flex-start value aligns the items towards the start of the cross axis.

EX: .flex-container {
display: flex;
align-items: flex-start;
}

Output: div 1 div 2 div 3

3. flex-end ::

The flex-end value aligns the items towards the end of the cross axis.

EX: .flex-container {
display: flex;
align-items:flex-end;
}

Output:
div 1 div 2 div 3

4. center ::

The center value aligns the items towards the center of the cross axis

EX: .flex-container {
display: flex;
align-items: center;
}

Output: div 1 div 2 div 3

5.baseline :::
The baseline value aligns the flex items such as the "baselines of the content
inside the items". This means that the bottom base of the content inside the flex
item will be the axis to align the items.

To work with this property, we need to make some variations in the above code. The
changes are highlighted.

EX: HTML: <div class="flex-container">


<div> <h3> div 1 </h3> </div>
<div> <h3> div 1 </h3> </div>
<div> <h3> div 1 </h3> </div>
</div>

CSS: .flex-container {
display: flex;
align-items: baseline;
}

Output: div 1 div 2 div 3

::: Flex Align Content in CSS :::

Align-content property is used to align the flex lines, i.e., multiple lines
of flex items.

This property aligns flex lines when there is extra space in the cross-axis,
similar to how

justify-content aligns individual items within the main-axis.

Align-content can be set to any of these values:

1. stretch ( Default )
2. flex-start
3. flex-end
4. center
5. space-between
6. space-around

1. stretch :::

The stretch value stretches the flex items present in multiple lines
to fill the container equally along the cross axis. This is the default value. Else
use align-content: stretch ;

EX: CSS: .flex-container {


display: flex;
flex-wrap: wrap;
align-content: stretch;
}
Output: div 1 div 2 div 3

2.flex-start

The flex-start value aligns the multiple lines of flex items towards the start of
the cross axis. Use align-content: flex-start ; in the flex-container class.

EX: CSS: .flex-container {


display: flex;
flex-wrap: wrap;
align-content: flex-start;
}

Output: div 1 div 2 div 3

3. flex-end :::

The flex-end value aligns the multiple lines of flex items towards the
end of the cross axis. Use align-content: flex-end ; in the flex-container class.

EX: CSS: .flex-container {


display: flex;
flex-wrap: wrap;
align-content: flex-end;
}

Output: div 1 div 2 div 3

4.center :::

The center value aligns the multiple lines of flex items towards the
center of the cross axis.

EX: CSS: .flex-container {


display: flex;
flex-wrap: wrap;
align-content: center;
}

Output: div 1 div 2 div 3

5. space-between :::

The space-between value distributes the remaining space between the


multiple lines of flex items evenly along the cross axis. No space is provided
towards the start of the first container and the end of the last container. The
space at the top and bottom of the container is because of the margin of the flex
items.
EX: CSS: .flex-container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}

Output: div 1 div 2 div 3

6.space-around :::

The space-around value distributes the remaining space around the


multiple lines of flex items evenly along the main axis.

EX: CSS: .flex-container {


display: flex;
flex-wrap: wrap;
align-content: space-around;
}

Output: div 1 div 2 div 3

:::: FLex Align Self in CSS ::::

The align-self property is used for the alignment of selected flex items
inside the flex container. This overrides the default alignment set by the flex
container.

Align-self can be set to any of these values:

1. auto ( Default )
2. flex-start
3. flex-end
4. center
5. stretch
6. baseline

EX: HTML : <div class="flex-container">


<div> Div 1 </div>
<div id="div2"> Div 2 </div>
<div> Div 3 </div>
</div>

CSS: .flex-container {
display: flex;
align-items: stretch;
}

#div2 {
align-self: flex-start;
}
Output: div 1 div 2 div 3

>> In general align-items were stretch but we did align-self as flex-start for 2nd
div.

2. flex-end ::

The flex-end value aligns the selected flex items towards the end of the
cross axis.

EX: CSS: .flex-container {


display: flex;
align-items: stretch;
}

#div2 {
align-self: flex-end;
}

Output: div 1 div 2 div 3

3. center ::

The center value aligns the selected flex items towards the center of the
cross axis.

EX: CSS: .flex-container {


display: flex;
align-items: stretch;
}

#div2 {
align-self: center;
}

Output: div 1 div 2 div 3

4. stretch ::

The stretch value stretches the selected flex items to fill the container
along the cross axis.

CSS: .flex-container {
display: flex;
align-items: stretch;
}

#div2 {
align-self: stretch;
}
Output: div 1 div 2 div 3

5. baseline ::

The baseline value aligns the flex items such as the baselines of the
content inside the items. This means that the bottom base of the content inside the
flex item will be the axis to align the items.

To see this property work, we need to make some variation in the above code. The
changes are highlighted:

EX: HTML : <div class="flex-container">


<div id="div1"> <h3> Div 1</3> </div>
<div> <h2> Div 2 </h2> </div>
<div id="div3"> <h1> Div 3 </h1>
</div>
</div>

CSS: .flex-container {
display: flex;
align-items: stretch;
}

#div1 {
align-self: baseline;
}

#div3 {
align-self: baseline;
}

Output: div 1 div 2 div 3

Here, h2 is not given the baseline property. Therefore, it is not aligned and is
stretched by default.

Topic - 7 :: Flex Shorthand:::

Flex Shorthand in CSS

Shorthand properties are used to combine some flex properties together, so that
they can be defined in one line.

Flex Flow
The flex-flow property is a shorthand property to combine flex-direction and flex
wrap

properties in one property.

CSS Syntax : flex-flow : flex-direction flex-wrap | initial | inherit ;sse

The meaning of the other 2 values is

initial - represents flex-flow property as (row nowrap)


inherit - inherits this property from its parent element

Flex

The flex property is a shorthand property to combine the flex child properties,
i.e. flex-grow, flex-shrink and flex-basis.

CSS Syntax : flex: flex-grow flex-shrink flex-basis | auto | initial | none |


inherit ;

The meaning of the other 4 values is:

auto - represents flex property as (1 1 auto)


initial - represents flex property as (0 1 auto)
none - represents flex property as (0 0 auto)
inherit - inherits this property from its parent element

You might also like