Basic Design Principle

11 July 2023 19:02

Color Theory
— Different colours expresses different meanings, and they can be used according to the content on
website. There are generally 3 primary colours in nature which are Red, Yellow & Blue. Similarly there are
secondary and tertiary colours in the colour wheel. We can learn more about colours at by looking Canva
Colour Wheel.

— There are many color combination like

1. Monochromatic: It have different shades of same colour.

2. Complementary: Those colours which are exactly opposite to one another on colour wheel.

3. Triadic: They are 3 equally separated colours on the colour wheel.

4. Tetradic: They are 4 equally separated colors on the color wheel.

— There are many more concepts in color theory about warm and cool colors, Shades, tints, tones, Hue,
saturation and luminance.

Typography
— It defines about style and appearance of text. Different font family expresses some meaning. There are
some font families which are given below. It's good to use maximum of 2 fonts in a section on a website.

1. Sans-serif

2. Serif

3. Monospace

4. Cursive

5. Fantasy

— We can use google fonts to get free fonts to use in our projects. There are 1513 fonts available on Google
Fonts. We can also get link to use fonts from google fonts which can be pasted in the head tag of our
html file.

Icons
— There are different icons which are used on different websites. We can use google icons to get free icons
for our project. First we need to include the google icons library which can be included by just copying
the link tag from google icons website and pasting it's CDN link inside the head tag in our html file. We
can also get html code from google icons to use in our html file. It uses a span tag to insert icons to our
webpage.

— We can also use font awesome to get pre designed icons for free. We need to visit cdnjs.com and go to
font-awesome library to get the link tag to include font awesome library.

— Then we need to visit font-awesome official site to get actual code for any particular icon. We use <i> tag
to include icons here.

CSS Page 1
CSS - Bootstrap
15 July 2023 10:17

Introduction
— Bootstrap is a framework for CSS, it have some pre built elements made with the help of vanilla CSS. We
can say it is a template library which provide many pre built CSS elements.

— Bootstrap is a powerful tool that lets you quickly build attractive websites that look great on desktops,
phones, and tablets. It works on the concept of flexbox and it have some pre built CSS files. It comes with
its own font family and text properties. Some of the advantages of Bootstrap are

1. It makes development faster and easier.

2. Good choice of pre-built components.

3. Good Browser Compatibility.

4. All elements of Bootstrap are responsive.

How to use Bootstrap

— We can download and install bootstrap on our system to use it and we can also use it through cdn links.
CDN links can be included via link tag inside head tag of our html file. We can also include normal CSS files
after including bootstrap.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@

5.3.0/dist/css/bootstrap.min.css">

— There is a special JavaScript link for Bootstrap which can be included inside body tag of our html file using
script tag.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@
5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Some Basic Bootstrap components

— Here we have given classes to the buttons which we have created to include button from Bootstrap library.

<button class=" btn btn-danger">Click me</button>

<button class=" btn btn-success">Click me</button>

What will we cover in Bootstrap

— There are majorly two things which we are going to cover in Bootstrap.

1. Components: Pre built and reusable piece of user interface. Example Buttons, forms etc.

2. Layouts: Overall structure and arrangement of the elements. Example Container, Grids

— There is a base class and have different variants of all the layouts and components in Bootstrap.

Layout - Container
— Containers are used to contain, pad and (sometimes) centre the content within them. It is the most basic
layout in Bootstrap.

<div class="container"> </div>

— There are many more types of containers in bootstrap which are like container-sm, container-fluid,

CSS Page 2
 — There are many more types of containers in bootstrap which are like container-sm, container-fluid,
container-lg etc.

Component - Button
— It's created with a button tag which have base class as "btn". Some of the variants are btn-lg, btn-sm, btn-
success, btn-info, btn-danger, btn-outline-primary.

<button type="button" class="btn btn-outline-info btn-sm">btn-info</button>

<a href="#" class="btn btn-dark">Google here !</a>

<input class="btn btn-outline-info" value="Hello" type="button">

Component - Badges
— It is created using a span with base class "badge".

<h1>Example heading <span class="badge bg-secondary">New</span></h1>

<h6>Example heading <span class="badge bg-secondary">New</span></h6>

<button type="button" class="btn btn-primary">

Notifications <span class="badge text-bg-secondary">4</span>

</button>

Component - Alerts
— It is created with the help of a div whose base class is "alert". It also have many variants like alert-
dismissible, alert-primary, alert-secondary, alert-danger, alert-warning.

<div class="alert alert-danger" role="alert">This is alert-danger</div>

<div class="alert alert-success" role="alert">This is alert-success</div>

Components - Button Group

— They are used to create groups in button. It is created by using class btn-group.

<div class="btn-group">

<button type="button" class="btn btn-primary">Left</button>

<button type="button" class="btn btn-primary">Middle</button>

<button type="button" class="btn btn-primary">Right</button>

</div>

— There are many more components like navbar, cards which we can explore using Bootstrap Docs.

Layout - Grid
— It is a flexbox based grid system which makes it responsive according to the screen size. All the rows are
divided into 12 columns. If we create two columns, each of them are taking 50 percent space then each
column will acquire 6 units of space. Few Steps which are necessary to create grid layout.

1. We need a div with container class without this we can't create a grid layout in Bootstrap.

2. Then we need to create a div inside container class with class as row.

3. After that we can create more divs with col class inside the row class which will divide all twelve units

CSS Page 3
 3. After that we can create more divs with col class inside the row class which will divide all twelve units
equally according to the number of col classes.

4. We can use col-6, col-4 and many more class values to specify the number of units out of 12 units.

5. We can use more grid options like col-md, col-xl, col-lg, col-sm, col-xs.

6. We can also use these class values with unit values like col-sm-2, col-xl-6 etc.

Grid - Vertical Alignment

— We can specify the vertical alignment of items using class value algin-items-start, align-items-end, align-
items-centre, align-self-start, justify-content etc.

Forms, Select in Form & Form Layout

— We can use form-label and form-control class values to use forms in Bootstrap. Form-select class is used to
create a dropdown for to create a selection dropdown. We can view documentation for better
understanding of these concepts.

CSS Page 4
CSS - 1
17 June 2023 22:34

Introduction
— CSS stands for Cascading Style Sheet. It is used to add styling to a html file. In CSS we create a document
which is used to add style to html page. Generally CSS is case insensitive, except for parts that are not under
the control of CSS such as URLs, font names, IDs and classes.

— CSS is used to add styling, color, text decoration and many other things. HTML is the basic skeleton structure
of the website, and CSS is used to cover up the skeleton and provide it a good look.

— Any website can run without CSS, but it's used to provide good looks which make any website more
appealing to the user. It is used to stylize text, color, background color, buttons and many other different
properties.

Basic format of CS
h1

color: red;

— To apply CSS to any element we use it as selector which is h1 here. And we create curly braces which have
the property to alter and the value of property

— Here property is color and its value is red. We complete this property value by add a semicolon (;) last to it.

— There are many properties in CSS, but we only have to learn some basic properties. We can look for all CSS
properties at mdn.

How to include CSS styles ?

— There are 3 options to include CSS (style) into HTML file which are given below

1. Inline Styles: Writing style directly inline on each element. We can write style attribute inside the tag
of any particular element to stylize them. This way of implementation is not suitable for implementing
style on large number of elements, that's why it's not a recommended way of implementing styles.

<h1 style="color:red">Apna College </h1>

2. Using <style> tag: We need to create a style tag inside head tag. It is used to add style to a single html
document. This is also not a practical way to add style in any html.

<style>

h1

color:red;

background-color:pink;

</style>

3. Using External Style Sheet: Writing CSS in a separate document (CSS file) & linking it with HTML file.

CSS Page 5
 3. Using External Style Sheet: Writing CSS in a separate document (CSS file) & linking it with HTML file.
We need to create a CSS file and then write CSS according to our website. After that we will open our
html file and write a link tag in the head tag.

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

Color Property in CSS

— It is a CSS property which is used to set the color of the foreground of the element.

color:red;

Background Color Property

— It is a CSS property which is used to set the color of the background of the element.

background-color:blue;

— There is also a CSS property named as background which can also be used to set image at background or any
color at background.

Color Systems
— There are many systems to define color inside CSS, we call them as Color System.

1. Named Colors: Those colors which are directly defined by their name are called Named Colors. Each
browser recognizes around 140 named colors. Example: red, blue, pink, purple, teal etc.

2. RGB Colors: We can crate different colors using different different combination of Red, Blue and Green
Color. We can add RGB colors from a range of 0 to 255 for creating combinations of them.

Red is rgb(255,0, 0)

Black is rgb(0, 0, 0)

Blue is rgb(0, 0, 255)

Yellow is rgb(255, 255, 0)

Green is rgb(0, 255, 0)

3. HEX Code: It is also called hexadecimal code, it starts with a hash tag and then continues with 6
characters of alpha numeric combination. First Two letters shows red color, next 2 letters show green
color and last 2 letters show blue color. Here minimum limit is 00 and maximum limit is ff.

— Hexadecimal is a number system in which we can use letters from 0 to F like

Letters: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F

— Some of the examples are

Red is #ff0000; or #f00;

Green is #00ff00; or #0f0;

Blue is #0000ff; or #00f;

CSS Page 6
 Blue is #0000ff; or #00f;

White is #ffffff; or #fff;

Black is #000000; or #000;

Text Properties
— There are many text properties which are applied on text. Some of them are given below.

1. text-align: This is used to define the placement or alignment of the text according to the parent
element. It has 4 different values which are mentioned below

text-align: left/start

text-align: right/end

text-align: center

text-align: justify

2. font-weight: It is used to define the boldness and lightness of the font. It has value between 100 to
900. Increment are only stepped upto 100. Normal value of font-weight is 400.

font-weight:normal; or 400;

font-weight:500;

font-weight:bold; or 700;

font-weight:bolder;

font-weight:lighter;

3. text-decoration: It is used to set the appearance of decorative lines on text like underline.

text-decoration:underline;

text-decoration:overline;

text-decoration:line-through;

— We can also set underline color like

text-decoration: red underline;

— We can change the type of text-decoration like

text-decoration:wavy underline;

text-decoration:dotted underline;

text-decoration:double underline;

text-decoration:dashed underline;

4. line-height: It is used to alter the height of a line. 2.5 line height means 2.5 times of the normal line
height.

line-height:normal;

line-height:2.5;

5. letter-spacing: It is used to control the horizontal space between two letters. Let's see different value
of letter-spacing.

CSS Page 7
 letter-spacing: 10px;

letter-spacing: normal;

6. font-size: It is used to control the font size of any text.

font-size:50px;

7. font-family: It specifies a priritized list of one or more font family names. We can explore many fonts
at cssfontstack.com.

font-family:arial;

— We write a list of font-families which is called backup families if some font is not supported on
browser.

font-family: avant garde, didot, sans-serif

8. text-transform: It is used to convert lowercase to uppercase or vice versa.

text-transform:lowercase;

text-transform:uppercase;

text-transform:capitalize;

Units in CSS
— There are many units which are used to measure font size in CSS. There are two types of units in CSS are

1. Absolute Unit: Those units which are universally accurate are called absolute unit. Example: px, pt, pc,
cm, mm, in etc.

2. Relative Unit: Those units whose value depends upon the relation to other units are called relative
unit. Example: %, em, rem, ch, vh, vw and many more.

— Pixel: It is most commonly used absolute unit. It’s not suitable for responsive websites.

1 Inch = 96 px = 72 pt = 6 pc

CSS Page 8
CSS - 2
20 June 2023 16:03

CSS Selectors
— They are used to select any individual element or any group of element to apply CSS on them is called
Selectors. There are many types of selectors in CSS which are described below.

1. Universal Selector: This is used to select everything in a document is called Universal Selector.

property:value;

2. Type Selector: This is used to select all elements of same type, thus it is called Type Selector.

h1

property:value;

3. ID Selector: Selects an element based on the value of the element's ID attribute. It is used to select any
particular single element. It is case sensitive also.

#myID

property:value;

4. Class Selector: Selects an element based on their class attribute. It's good to give same class names to
different elements but it's not recommended to give same name or id to different elements.

.myclass

property:value;

5. Descendant Selector: It is used to select any type of element which is under some other tag.

div p

property:value;

.post a

property:value;

CSS Page 9
 property:value;

#id a

property:value;

— Descendant Selector means it will select all descendants even if they have indirect parent child
relation. There must be only 1 white space between different elements in a descendant selector.
No spaces between the elements will not be treated as descendant selector.

div ul li a

property:value;

div a

property:value;

6. Attribute Selector: It is used to select elements based on the presence or value of a given attribute. All
the syntaxes are correct.

input[type="radio"]

property:value;

input[type=radio]

property:value;

input[type]

property:value;

Sibling Combinator
— It is used to select all adjacent elements on same level which comes after another level. Let's understand
with an example.

p + h3

CSS Page 10
 {

property:value;

— This means that the defined property will be applied to all h3 elements which will come adjacently after the
paragraphs. The general sibling combinator (~) selects all elements that follow another element, regardless
of whether they are next to each other or not.

Child Combinator
— It is used to select all button which are direct children of the parent element. It will not apply the property to
indirect descendants of the parent element.

div > input

background-color:darksalmon;

Pseudo Class
— A keyword added to a selector that specifies a special state of the selected element. There are different
types of pseudo class which are described below

1. element:hover

property:value;

2. element:active

property:value;

3. element:checked

property:value;

4. nth of type: It is used to select nth element.

div:nth-of-type(2)

property:value;

— This will change color of second div.

div:nth-of-type(2n)

CSS Page 11
 div:nth-of-type(2n)

property:value;

— This will apply to every second div on which property is applied.

— There is a concept of priority in CSS, which means that which CSS property will be given priority if there is
one or more property has been defined for the same element.

Pseudo Element
— A keyword added to a selector that lets you style a specific part of the selected elements.

1. ::first-letter: This is used to apply properties to the first letter inside an element.

h1::first-letter

property:value;

2. ::first-line: This is used to change the property of the first line.

p::first-line

property:value;

3. ::selection: This is used to change the property of the selected element.

p::selection

background-color:yellow;

Cascading
— The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS
properties. It only comes into when there are multiple properties defined for the same element by using
same selectors.

h2

background-color:red;

h2

background-color:blue;

CSS Page 12
 background-color:blue;

— This means that h2 will have blue background color because it's the most latest property. Cascading also
applies on different CSS files. Properties inside the last CSS file which is included will be given priority.

Specificity
— Specificity is an algorithm that calculates the weight that is applied to a given CSS declaration. It is used to
calculate the value of specificity for CSS properties which is being applied with the help of different selectors
on the same element.

— Specificity is a 3 digit number in mathematical terms. These are the priority level for different selectors in
CSS

ID > Class, Pseudo-class & Attributes > Element & pseudo-element

h2

background-color:yellow;

— The specificity will be 001, because there is 0 id's, 0 class and 1 element as a selector used here.

.myclass:hover

color:blue;

— The specificity will be 020, because there is 0 id's, 1 class and 1 pseudo class and 0 element as a selector
used here. This is 20 times strong than the previous declaration.

— It's good to use more selectors than using less selectors. If there's same specificity then we will see cascading
of the element. Inline Specificity: Inline styles are more specific than id.

Inline Styles > ID > Class, Pseudo-class & Attributes > Element & pseudo-element

!important
— It is used to show the most specific thing in document but it’s not as much used. It gives the highest priority
to any property more than id and inline styles.

h2

background-color:blue !important;

Inheritance
— It means that if we set a property to the parent, then this property will also be applied to their child
elements if there are no specific properties are defined for the child element. This is called Inheritance in
CSS.

— Input boxes does not inherit any property from the parent element, if we want to make them inherit the

CSS Page 13
— Input boxes does not inherit any property from the parent element, if we want to make them inherit the
property from the parent element, then we will have to specify them.

input

background-color:inherit;

— Some property does not inherit automatically like width, height and border etc.

CSS Page 14
CSS - 3
23 June 2023 04:25

Box Model
— All the elements in HTML will be interpreted by browser in the form of box in HTML. These boxes have
different components like

1. Border: It is used to set an element's border. There are different parameters which we can change with
the border.

border-width

border-style

border-color

border-radius

— We can also define all these 3 property in a single line through border shorthand.

div

border: width style color;

— We can also control the individual sides and corner of a border. Controlling border corners help in
setting the radius for specific corners.

border-left

border-right

border-top

border-bottom

border-top-left

border-top-right

border-bottom-left

border-bottom-right

div

border-left-color:red;

2. Height: By default, it sets the height of content area of the element.

h1

height:100px;

CSS Page 15
 }

3. Width: By default, it sets the width of content area of the element.

h1

width:100px;

4. Padding: The space between content and element is called padding.

div

padding:50px;

— We can also control padding for all sides individually by using these properties.

padding-left

padding-right

padding-top

padding-bottom

— We also use shorthand for applying padding on elements.

For all sides: padding:50px;

Top & Bottom | Left & Right: padding: 1px 2px;

Top | Left & Right | Bottom: padding: 1px 2px 3px;

Top | Right | Bottom | Left (Clockwise): padding: 1px 2px 3px 4px;

5. Margin: It is used to set spacing on the outside of the border.

margin-left

margin-right

margin-top

margin-bottom

— It also have shorthand like padding property

For all sides: margin:50px:

Top & Bottom | Left & Right: margin: 10px 20px;

Top | Left & Right | Bottom: margin: 10px 20px 30px;

Top | Right | Bottom | Left: margin: 10px 20px 30px 40px;

Display Property
— It sets whether an element is treated as block or inline element and the layout used for its children. There are
some key differences between Inline and Block elements based on the application of CSS properties on them.

CSS Page 16
 BLOCK INLINE
Always start on a new line. Do not start on a new line.
Takes up as much horizontal space as possible,the full Only use as much horizontal space as required
width of the container or browser windows if there is by the content. Do not accpet width and height
no container. CSS properties
Will respect height and width CSS properties Margins will work horizontally but not vertically.
Horizontal and vertical margins both work. Padding works on all sides, but the top and
bottom may overlap with other elements
— There are different values for display property which are given below

display:inline;

display:block;

display:inline-block;

— Inline-block enables us to apply style according to block elements, but they will behave as inline elements.
Display can also be set to none to hide an element from the page.

Relative Units
— Those units whose value depends upon the relation to other units are called relative unit. Example: %, em,
rem, ch, vh, vw + many more.

1. Percentage (%): It is used to define a size as relative to an element's parent object. Example: width:33%;
margin-left:50%; etc.

2. Em: Font size of the parent, in the case of typographical properties like font-size, and font size of the
document itself, in the case of other properties like width, padding and margin.

font-size:2em;

padding:1em;

— Snowball effect in nested elements means it increases font size from the parent which means it
create a huge font size vice versa with when we decrease font size.

3. Rem: To avoid snowball effect, we need a new relative unit called rem. It is used to set the font size
according to the root element.

font-size:2rem;

CSS Page 17
CSS - 4
25 June 2023 00:31

Alpha Channel
— It is used to set the opacity of the color. It ranges from 0 to 1. This is the way to write alpha values in RGB
form.

rgba(255, 255, 255, 0.3)

— We can also write alpha value of any color in HEX code form. The last 2 characters of 8 digit HEX code will
be the alpha value of the color.

#ff000080

Opacity
— It is a property which is used to set the opacity of the element in CSS. It also ranges from 0 to 1.

opacity:0.6;

CSS Transitions
— It is used to define the transition between two states of an element. We can have different states of an
element by using pseudo class. So there will be 2 stages of an element, one will be initial state and the
second one will be final state.

— So we can add transitions between these two stages using transition property.

div

transition:1s;

— We can also set the duration of transition by using transition-duration property. There are many transition
properties like transition-duration, transition-delay etc. It also have a shorthand.

transition: duration | timing-function | delay

CSS Transform
— This property let you rotate, scale, skew or translate an element.

1. Rotate: It is used to rotate an element.

transform:rotate(45deg);

2. Scale: It is used to change the size of an element.

transform:scale(50%);

— We can also scale each axis individually like this

transform:scale(0.5, 0.2);

transform:scaleX(0.5);

transform:scaleY(0.7);

CSS Page 18
 3. Skew: It is used to skew the element.

transform:skew(45deg)

4. Translate: Translate means moving an element along X and Y axis.

transform:translate(100px, 100px);

transform:translateX(100px);

transform:translateY(100px);l

Box Shadow
— It adds shadow effects around an element's frame.

box-shadow:2px 2px 10px green;

— First X offset is defined, then Y offset is defined, then blur radius and at last color of the shadow.

Background Image
— It is used to set image as a background.

background-image:url(somepath../.png);

— We can also set the size which we use for our background image

background-size:contain;

background-size:cover;

background-size:auto;

Position Property
— The position CSS property sets how an element is positioned in a document. The top, right, bottom and
left properties determine the final location of positioned elements.

position:static/realtive/absolute/fixed;

— Then we will set the the value of top, right, bottom and left attribute.

1. Static: The top, right, bottom and left and z-index properties have no effect. This is the default value.

2. Relative: The offset is relative to itself based on the values of top, right, bottom & left.

3. Absolute: The element is removed from the normal document flow, and no space is created for the
element in the page layout. It is positioned relative to its closest positioned ancestor, if any;
otherwise, it is placed relative to the initial containing block.

4. Fixed: The element is removed from the normal document flow, and no space is created for the
element in the page layout. It is positioned relative to the initial containing block established by the
viewport.

CSS Page 19
CSS - 5
25 June 2023 00:31

Flexbox
— It stands for Flexible Box Layout. It is a one dimensional layout method for arranging items in rows or
columns. It is used in creating responsive websites which adjusts it's layout according to the screen size
available. It is used to design the layout only in one direction or 1D along the main axis

The Flex Model

— It states that when the direction of the object is according to the row, then the X axis will be the main axis
and Y axis will be the cross axis.

— And When the direction of the object is according to the column, then the Y axis will be the main axis and X
axis will be the cross axis.

Display Flex & Flexbox Direction

— To apply flex properties on some element we need to give it a display property with flex value.

display:flex;

— This will enable the flex property on an element. After that we can set flex-direction which means how we
want to arrange our elements row wise (horizontally) or column wise (vertically).

flex-direction:row; (Main axis will be left to right)

flex-direction:column; (Main axis will be top to bottom)

flex-direction:row-reverse; (Main axis will be right to left)

flex-direction:column-reverse; (Main axis will be bottom to top)

— The value of flex-direction sets the main axis and cross axis.

Justify Content
— This property is used to justify the content. It tells the browser how to distribute space between and around
content items along main axis. These property will only apply if there is space remained

— There can be 6 different values for this property.

1. justify-content:start (It is used to set the elements according to the

direction of the main axis)

2. justify-content:end (It is used to set the elements opposite to the

direction of the main axis)

3. justify-content:center (It is used to set the elements at center in the

direction of the main axis)

4. justify-content:space-around (It is used give some space around every

element)

5. justify-content:space-between (It only gives space between two elements)

6. justify-content:space-evenly (It distributes the space evenly around all

elements)

Flex Wrap

CSS Page 20
Flex Wrap
— It is used to set whether flex items are forced onto one line or can wrap onto multiple lines. There are majorly
3 values for the flex-wrap property

flex-wrap:nowrap; (It is the default value of any flex item)

flex-wrap:wrap; (It wraps the elements inside flex container)

flex-wrap:wrap-reverse; (it wraps the element but along cross axis in

reverse direction)

Align Items
— This property is used to distribute our items along the cross axis.

align-items:flex-start;

align-items:flex-end;

align-items:center;

align-items:baseline;

— Baseline gives a same baseline on all the elements according to the content present inside them.

Align Content
— It sets the distribution of space between and around content items along a flexbox's cross axis when
wrapping is applied.

align-content:flex-start;

align-content:flex-end;

align-content:center;

align-content:space-around;

align-content:space-between;

align-content:space-evenly;

align-content:baseline;

Align Self
— It is used to align individual items of a flex container across cross axis.

align-self:flex-start;

align-self:flex-end;

align-self:center;

align-self:baseline;

Flex Sizing
— It means that if there is some extra space inside our container, then we can grow and shrink flex elements
according to the extra space available.

1. Flex Basis: It sets the initial main size of a flex item. Main size here means that if main axis is X axis then
main size means width; if main axis is Y axis, then main size will be height.

CSS Page 21
 main size means width; if main axis is Y axis, then main size will be height.

flex-basis:100px;

2. Flex Grow: It specifies how much of the flex container's remaining space should be assigned to the flex
item's main size.

flex-grow:1;

— We can also set the maximum and minimum width for any flex item by using max-width and min-
width property.

3. Flex Shrink: This property is used when our elements start overflowing.

flex-shrink:2;

Flex Shorthand
— There are basically 4 ways of using shorthand with flex which is used to define flex sizing.

flex: flex-grow | flex-shrink | flex-basis

flex: flex-grow | flex-basis

flex: flex-grow (unitless value)

flex-basis:(unit vale)

CSS Page 22
CSS - 6
05 July 2023 13:44

CSS Grid
— It is very similar to flex box but not that much used in development and it is also used to design the layout of
elements in CSS just like flexbox. Setting a container's property to grid will make all children elements as grid
items. We can design the layout of our grid items in 2D but where as in Flex box we can design it in one
dimension.

— Outer container will be called Grid Container and elements inside it will be called grid items. Whenever we
need to arrange elements in tabular layout or 2D form then grid is used.

display:grid;

Grid Model
— The grid model consists of different terms which we need to know before studying grid model.

1. Grid Lines: A grid model is created in a 2D form, which have same horizontal (row lines) and vertical
lines (column lines) which are called grid lines and they are denoted as L1, L2, L3…. and so on.

2. Grid Cells: A closed block made by intersection of row and column lines is called grid cell. All the grid
items are placed inside these grid cells.

3. Grid Track: The distance between two adjacent grid lines is called a grid track.

Grid Template
— This property is used to define grid lines and grid track.

grid-template-rows:30px 30px 30px 30px;

grid-template-columns: 20px 20px 20px 20px;

— Setting value to auto will automatically create rows and columns of same size according to the height and
width of the container and equally divide the space.

Grid Template Repeat

— Repeat is used to divide all available space to equal parts just like auto but repeat is more often used.

grid-template-rows:repeat(count, 1fr);

grid-template-rows:repeat(3, 1fr);

— We will pass two parameters through repeat value, first value will be the count of number of grid tracks and
1fr means here 1 fraction of the total available space. There is another syntax for using repeat which is given
below.

grid-template-rows: 1fr 1fr 1fr;

Grid Gaps
— They are used to define the gaps between the grid lines

row-gap:10px;

column-gap:20px;

— or we can use this property in another way like

CSS Page 23
 grid-gap: rowGap columnGap;

grid-gap:2px 2px;

Grid Columns
— Defining an item's start and ending position inside the column. Generally one grid item is placed inside a grid
cell but using this property we can use multiple cells for placing a single item.

grid-column-start:1;

grid-column-end:4;

— There is also a shorthand for this property

grid-column:1/4;

— here 1 and 4 defines the number of vertical grid lines.

grid-column:1/ span 3;

— here 1 defines the number of vertical grid line and span 3 means the item will span upto 3 grid cells from the
line 1.

Grid Rows
— Defining an item's start and ending position inside the rows. Generally one grid item is placed inside a grid cell
but using this property we can use multiple cells for placing a single item.

grid-row-start:1;

grid-row-end:4;

— There is also a shorthand for this property

grid-row:1/4;

— here 1 and 4 defines the number of horizontal grid lines

grid-row:1/ span 3;

— here 1 defines the number of horizontal grid line and span 3 means the item will span upto 3 grid cells from
the line 1.

Grid Properties
— We can have start, end, centre or baseline value to these properties.

1. justify-items: It is used to justify all items of the container horizontally.

2. justify-self: It is used to justify a specific item in the container horizontally.

3. align-items: It is used to align items and adjust spacing of all the grid items vertically.

4. align-self: It is used to align a specific item and adjust its spacing vertically.

5. place-items: If we need same values for both horizontal placing (justify-items) and vertical placing (align-
items) of all grid items then we can use this property.

6. place-self: If we need same values for both horizontal placing (justify-self) and vertical placing (align-self)
of specific grid item then we can use this property.

CSS Animations

CSS Page 24
 — First we have to create CSS animations.

@keyframes random_animation_name

from {property:value;}

to {property:value;}

— After creating an animation we need to include it in any element using animation-name property.

animation-name: name_used_after_@keyframes;

— Now we can use different animation properties which are given below.

animation-duration:2s;

animation-timing-function:ease in;

animation-delay:2s;

animation-iteration-count:3;

animation-direction:normal;

— We can use normal, alternate, reverse and alternate-re values for animation-direction property. We also have
shorthand to write all these properties.

animation: name duration timing-function delay iteration-count direction;

— We can mention more states of our element to animate by using % in animation

@keyframes myname

0% {property:value;}

50% {property:value;}

100% {property:value;}

Media Queries
— It helps in creating a responsive website. It is used to define how a website will function when viewed in
different screen sizes.

@media (width:400px)

h1

background-color:red;

— We can also use min-width and max-width with media query.

CSS Page 25
 — We can also use min-width and max-width with media query.

@media (min-width:100px)

h1

background-color:red;

@media (max-width:400px)

h1

background-color:red;

— We can also define a range in media query

@media (min-width:200px) and (max-width:400px)

h1

background-color:pink;

Media Orientation
— It helps in defining how a website will adapt if it's orientation changes.

@media (orientation:landscape)

h1

background-color:red;

z-index
— It is used to decide the stack level of elements. Overlapping elements with a larger z-index cover those with a

CSS Page 26
 — It is used to decide the stack level of elements. Overlapping elements with a larger z-index cover those with a
smaller one. z-index can't be set for those elements which have static or default position. To apply z-index we
should set the position value of element to absolute, fixed or relative.

z-index:auto (0);

z-index: 1/2/3..;

z-index: -1/-2/-3…;

Overflow, Cursor & Appearance

– Overflow: It is used to enable the scrollbar inside a div. It has many values like visible, scroll, auto, hidden. We
can also enable horizontal and vertical scrollbars by using overflow-x and overflow-y properties.

– Cursor: It I used to specify the type of cursor when we hover over an specific element. It has different values
like pointer, grab, none, resize, move etc.

– Appearance: Every element in HTML have some predefined CSS properties, when we don't want to pre-
defined properties of any element we set its value to "none".

Note: Box model, Grid, Flexbox, Media Queries, Media orientation, and relative units are used to make a website
responsive.

CSS Page 27