Scribd
Upload
12 views

HTML CSS Cheat Sheet

The document provides a comprehensive overview of HTML and CSS basics, including the structure of HTML documents, various HTML elements like headings, paragraphs, buttons, and lists, as well as CSS properties for styling text, backgrounds, and box models. It explains the usage of attributes such as 'id', 'onclick', 'src', and 'href', along with examples of styling techniques for both unordered and ordered lists. Additionally, it covers viewport units and the importance of CSS properties in defining layout and design elements.

Uploaded by

Mokalla Raghavendar reddy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

HTML CSS Cheat Sheet

The document provides a comprehensive overview of HTML and CSS basics, including the structure of HTML documents, various HTML elements like headings, paragraphs, buttons, and lists, as well as CSS properties for styling text, backgrounds, and box models. It explains the usage of attributes such as 'id', 'onclick', 'src', and 'href', along with examples of styling techniques for both unordered and ordered lists. Additionally, it covers viewport units and the importance of CSS properties in defining layout and design elements.

Uploaded by

Mokalla Raghavendar reddy
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

Static Summary Cheat Sheet

https://www.ccbp.in/
HTML Basic Structure
The basic structure of any HTML document is as follows:
<!DOCTYPE html>
<html>
<head></head>
<body>
Your code goes here
</body>
</html>

HTML Elements
1. Heading Element
The HTML "h1" element defines a main heading.
<h1>Tourism</h1>

2. Paragraph Element
The HTML "p" element defines a paragraph.
<p>Plan your trip wherever you want to go</p>

3. Button Element
The HTML "button" element defines a button.
<button>Get Started</button>

4. Container Element
The HTML "div" element defines a container.
<div>
<h1>Tourism</h1>
<p>Plan your trip wherever you want to go</p>
<button>Get Started</button>
</div>

5. Image Element
The HTML "img" element defines an Image.
Syntax:
<img src="IMAGE_URL"/>

5.1. The "src" Attribute


The HTML Attribute "src" specifies the path (URL) of the Image.
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-
website/tajmahal-img.png"
/>

6. Anchor Element
The HTML "a" element defines a Hyperlink.
We use Hyperlinks to navigate to other web resources or a specific
element within the HTML document. They are also called links.
Syntax:
<a href="URL">Content</a>

6.1. HTML "href" Attribute


The HTML "href" Attribute specifies the URL/ path of the page where the
link goes to.
<a href="https://www.ccbp.in/">Explore CCBP 4.0 Certification
Programs</a>

6.2. Different ways to use the "Anchor" Element


6.2.1. Navigate within the same HTML document
• The HTML anchor "a" element can also be used to navigate to different
sections within the same HTML document.
• Add an HTML "id" attribute to the section that you want to navigate to.
Provide the hash symbol "#", and the value of the "id" attribute of that
section as a value to the link's HTML "href" attribute.
Note:
While navigating to a particular section within the same HTML
document, the content of that section doesn't start from the
starting of a page when

1. It has less content to fill the Viewport height and there are no
sections after it.

2. The content of that section and the content of the sections after
it has less content to fill the Viewport height.

6.2.2. HTML Image Element as Link


<a href="https://www.ccbp.in/">
<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-
website/learn-technologies-img.png" />
</a>

7. Void Elements
The HTML elements that only have a start tag and do not contain content
or end tag are called as Void Elements.
Syntax:
<tag />

For example, the HTML "img" element.


<img src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-
website/tajmahal-img.png"/>

8. Line Break Element


The HTML "br" element helps to break the text and continue it in the next
line.
<p>
Twinkle, twinkle, little star, <br />
How I wonder what you are!
</p>

9. Horizontal Rule Element


The HTML "hr" element inserts a horizontal line and helps to separate the
content.
<h1 class="heading">
Twinkle Twinkle Little Star
</h1>
<hr />
<p>
Twinkle, twinkle, little star.
</p>
<hr />

10. HTML Lists


The List is a way to group related pieces of information so that they are
easy to read and understand.
For example, Shopping list, Todo list, etc.
There are mainly two types of Lists available in HTML.
• Unordered List • Ordered List
11. Unordered List
It is a collection of related items that have no special order or sequence.
For example, List of Hobbies
• Painting • Reading Books • Playing the Guitar
The Unordered List starts with "<ul>" tag. It wraps around all the list items
and each list item starts with the "<li>" tag.
<ul>
<li>Painting</li>
<li>Reading Books</li>
</ul>

By default, list items in the Unordered List are marked with bullets.
11.1. Styling Unordered List
The CSS "list-style-type" property is used to style the List.
.unordered-square-list {
list-style-type: square;
}

You can use one of the below values of the CSS "list-style-type" property to
style the Unordered List.
Values: square, circle, disc, none
12. Ordered List
It is a collection of related items that follow some order or have a sequence.
For example, Web Technologies

1. HTML
2. CSS
3. JavaScript

The Ordered List starts with "<ol>" tag. It wraps around all the list items
and each list item starts with the "<li>" tag.
<ol>
<li>Go through the HTML elements and CSS properties</li>
<li>Complete the Todolist Coding Practice</li>
<li>Go through the Bootstrap Concepts</li>
</ol>

By default, list items in the Ordered List are marked with numbers.
12.1. Styling Ordered List
The CSS "list-style-type" property is used to style the List.
.ordered-lower-roman-list {
list-style-type: lower-roman;
}

You can use one of the below values of the CSS "list-style-type" property to
style the Ordered List.
Values: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal, none
HTML Attributes
1. HTML "id" Attribute
The HTML "id" attribute specifies a unique id for an HTML element. The
value of the "id" attribute must be unique within the HTML document.
<div id="section1">Section 1</div>

Warning:
1. The CCBP UI kit works only if the value of the HTML `id`
attribute of the container section has the prefix as `section`.
2. So, the id which we specify for any section should always contain
its prefix as `section` if you are using CCBP UI Kit.
2. HTML "onclick" Attribute
The "onclick" event occurs when the user clicks on an HTML Element.
<button class="btn btn-primary" onclick="display('section3')">
Go to Section 3
</button>

The value of an HTML "onclick" attribute should be enclosed in double-


quotes and the value inside the brackets of "display()" should be enclosed
in single quotes.
3. The "src" Attribute
The HTML Attribute "src" specifies the path (URL) of the Image.
<img
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-
website/tajmahal-img.png"
/>

4. HTML "href" Attribute


The HTML "href" Attribute specifies the URL/ path of the page where the
link goes to.
<a href="https://www.ccbp.in/">Explore CCBP 4.0 Certification
Programs</a>

5. HTML "target" Attribute


The HTML "target" Attribute specifies where to open the linked web
resource.
<a href="https://www.ccbp.in/" target="_blank">Explore CCBP 4.0
Certification Programs</a>

CSS Syntax
selector {
property1: value1;
property2: value2;
}

CSS Text Properties


1. Text Align
The CSS "text-align" property specifies the horizontal alignment of the text
in an HTML element.
.h-center {
text-align: center;
}
Value Description
center Aligns the text to the center
left Aligns the text to the left
right Aligns the text to the right

2. Color
The CSS "color" property specifies the color of the text.
.main-heading {
color: blue;
}
.paragraph {
color: grey;
}

2.1. Sample Colors


Values: blue, grey, lightblue, orange, red, green
2.2. Hex Code
CSS Colors can be represented in multiple ways:
• Color names • Hex Code • HSL • RGB and many more...
Since few colors have the Color names, Hex Codes make a good alternative
to pick a wide variety of colors.
Some of the Color names and their Hex Codes are:
Color Name Hex Code
orange #ffa500
red #ff0000
blue #0000ff
green #008000
- #012d36
- #432711
- #25b1cc

.button {
background-color: #25b1cc;
}

2.2.1 How to pick a color using Hex Code


The color picker lets you pick a color among the approximately 16,777,216
colors available.
One of the simplest ways to access a color picker is:
• Type color picker in the Google Search bar and search it.

3. Font Family
The CSS "font-family" property specifies the font for an element.
@import
url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Cave
at:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,
wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,
400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&
family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+P
ro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,70
0;1,700&display=swap");
.main-heading {
font-family: "Roboto";
}
.paragraph {
font-family: "Roboto";
}

You can use one of the below values of the "font-family" property,
Value

Note:
1. To use font families, you need to import their style sheets into
your CSS file.
2. There shouldn't be any spelling mistakes in the values of the
`font-family` property.
3. There must be quotations around the value of the `font-family`
property.

4. Font Size
The CSS "font-size" property specifies the size of the font.
.main-heading {
font-size: 36px;
}
.paragraph {
font-size: 28px;
}

Note:
1. You must add `px` after the number in the value of the `font-
size` property.
2. There shouldn't be any space between the number and `px`.
3. There shouldn't be any quotations around the value of the `font-
size` property.

5. Font Style
The CSS "font-style" property specifies the font style for a text.
You can use one of the below values of the "font-style" property,
Value: normal,italic,oblique
.main-heading {
font-style: italic;
}
.paragraph {
font-style: normal;
}

Note:
1. There shouldn't be any spelling mistakes in the values of the
`font-style` property.
2. There shouldn't be any quotations around the value of the `font-
style` property.

6. Font Weight
The CSS "font-weight" property specifies how thick or thin characters in text
should be displayed.
.main-heading {
font-weight: bold;
}
.paragraph {
font-weight: 200;
}

You can use one of the below values of the "font-weight" property,
Values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
Note:
1. There shouldn't be any spelling mistakes in the values of the
`font-weight` property.
2. There shouldn't be any quotations around the value of the `font-
weight` property.
3. The numerical values given to the `font-weight` property must be
in the range from `100` to `900` and should be the multiples of
`100`.

7. Text Decoration
The CSS "text-decoration" property specifies the decoration added to the
text.
.main-heading {
text-decoration: underline;
}
.paragraph {
text-decoration: overline;
}

You can use one of the below values of the "text-decoration" property,
Value Description
underline Underline the text
line-through Strike through the text
overline Overline the text

Note:
1. There shouldn't be any spelling mistakes in the values of the
`text-decoration` property.
2. There shouldn't be any quotations around the value of the `text-
decoration` property.
3. Ensure that `text-decoration` and `line-through` are hyphenated.

CSS Background Properties


1. Background Color
The CSS "background-color" property specifies the background color of an
HTML element.
.card {
background-color: lightblue;
}

2. Background Image
The CSS "background-image" property specifies the background image of
an HTML element.
.card {
background-image: url("https://d1tgh8fmlzexmh.cloudfront.net/ccbp-
static-website/ocean.jpg");
}
Value Description
url (URL) The URL to the image.

Warning:
1. The background image takes the height of the content of an HTML
element if you don't specify the height to it.
2. The URL given to the `background-image` must be a valid URL to
display the image.

3. Background Size
The CSS "background-size" property specifies the size of the background
image of an HTML element.
.card {
background-size: cover;
}
Value Description
cover Scales the image to the smallest size while maintaining the same aspect ratio
(width/height) and covers the entire width and height even if the image is cropped.

Note:
Aspect Ratio is the ratio of the width and height (width/height) of
an image.

CSS Box Properties


1. Height
The CSS "height" property specifies the height of an HTML element.
.card {
height: 200px;
}

2. Width
The CSS "width" property specifies the width of an HTML element.
.card {
width: 250px;
}

3. Border Width
The CSS "border-width" property specifies the width of the border for all
four sides of an HTML element.
.button {
border-width: 2px;
}

The CSS Property and value pair "border-width: 0px;" removes the border
of an HTML element.
Warning:
Specifying the CSS `border-style` property for an HTML element is
mandatory. Otherwise, the CSS properties like `border-color`,
`border-width` will not appear in the browser. The HTML `button`
element is an exception as it appears with a border in the browser
by default.

4. Border Radius
The CSS "border-radius" property specifies the roundness of the corners of
an HTML element.
.button {
border-radius: 20px;
}

You can use the below CSS properties to round a specific corner of an
HTML element.
Properties: border-top-left-radius, border-top-right-radius, border-bottom-left-radius,
border-bottom-right-radius
Quick Tip:
Specifying the background color for an HTML element makes the border
radius more visible.

5. Border Color
The CSS "border-color" property specifies the color of the border for all
four sides of an HTML element.
.button {
border-color: orange;
}

Warning:
Specifying the CSS `border-style` property for an HTML element is
mandatory. Otherwise, the CSS properties like `border-color`,
`border-width` will not appear in the browser. The HTML `button`
element is an exception as it appears with a border in the browser
by default.

6. Border Style
The CSS "border-style" property specifies the style of the border for all four
sides of an HTML element.
.button {
border-style: dashed;
}

You can use one of the below values of the CSS "border-style" property.
Value: dotted, dashed, solid, none (default)
7. Padding
The CSS "padding" property specifies the space around the content of an
HTML element.
.card {
padding: 10px;
}

8. Margin
The CSS "margin" property specifies the space around the four sides of an
HTML element.
.card-container {
margin: 10px;
}

You can use the below CSS properties to apply a margin on the specific
side of an HTML element,
Properties: margin-top, margin-right, margin-bottom, margin-left
Viewport
The browser's viewport is the area of the window in which web content
can be seen.
1. Viewport Height
The CSS Viewport Height "vh" Unit equals to 1% of the height of the
Viewport (browser window size).
.card {
height: 50vh;
}
Note:
The height `100vh` sets an HTML element to the entire height of the
Viewport (browser window size).

2. Viewport Width
The CSS Viewport Width "vw" Unit equals to 1% of the width of the
Viewport (browser window size).
.card {
width: 100vw;
}

Note:
The width `100vw` sets an HTML element to the entire width of the
Viewport (browser window size).

Reusability
1. Reusability of CSS Rulesets
If we want the same style for multiple HTML elements, we can write the CSS
Ruleset once and use it for different HTML elements.
.button {
width: 138px;
height: 36px;
border-width: 0px;
border-radius: 10px;
}
<button class="button">Get Started</button>
<button class="button">Visit Now</button>

2. Multiple class names as an HTML attribute value


We can provide multiple class names separated by space as a value to the
HTML class attribute.
Syntax:
<tag class = "name1 name2 name3 name4 ...">Content</tag>

HTML attribute value: name1 name2 name3 name4 ...


class names: name1, name2, name3, and name4
.button {
width: 138px;
height: 36px;
border-width: 0px;
border-radius: 10px;
}
.button-green {
background-color: #8cc63f;
}
<button class="button button-green">Get Started</button>

Bootstrap
Bootstrap is a large collection of predefined reusable Code Snippets written
in HTML, CSS, and Javascript. The Code Snippets include Buttons, Cards,
Carousels, etc.
How to use Bootstrap?
To use the Code Snippets provided by Bootstrap, we need to add the below
piece of code within the HTML head element. We call it BootstrapCDN.
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstr
ap.min.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
crossorigin="anonymous"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.m
in.js" integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap
.min.js" integrity="sha384-
B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>

Flexbox Properties
1. Flexbox Container
The Bootstrap class name d-flex defines a Flexbox Container. The direct
HTML elements in the Flexbox Container are called flex items.
<div class="d-flex">
<div>
<h1>Tourism</h1>
<p>Plan your trip.</p>
<button>Get Started</button>
</div>
</div>

• The HTML container element with the class="d-flex" is a Flexbox


Container.
• The HTML container element div in Flexbox Container is a flex item.
Because it is directly inside the Flexbox Container.
• The HTML main heading, paragraph, and button elements are not flex
items. Because these elements are not directly inside the Flexbox
Container.

Note:
Wrapping HTML elements in the Flexbox Container is mandatory to
apply other flex properties.</MultiLineNote>

2. Flex Direction
The Flex Direction specifies the direction of the flex items in the Flexbox
Container.
Class Name Direction of the flex items in a Flexbox Container
flex-row Horizontal
flex-column Vertical

2.1. flex-row
The Bootstrap class name "flex-row" is used to move the flex items
horizontally in the Flexbox Container.
<div class="d-flex flex-row">
<div>
<h1>Tourism</h1>
<p>Plan your trip.</p>
<button>Get Started</button>
</div>
</div>
2.2. flex-column
The Bootstrap class name "flex-column" is used to move the flex items
vertically in the Flexbox Container.
<div class="d-flex flex-column">
<div>
<h1>Tourism</h1>
<p>Plan your trip.</p>
<button>Get Started</button>
</div>
</div>

Note:
The Bootstrap class name `flex-row` is the default Flex Direction
for the Flexbox Container. So, once `d-flex` is specified, all the
flex items in the Flexbox Container display horizontally.

3. Justify Content
The Justify Content specifies the alignment of flex items along the Flex
Direction in a Flexbox Container.
3.1. justify-content-start
The Bootstrap class name "justify-content-start" is used to align the flex
items at the start of the Flexbox Container either horizontally or vertically
based on the Flex Direction.
Flex Direction Alignment of flex items in a Flexbox Container
flex-row Align flex items horizontally to the left
flex-column Align flex items vertically to the top

<div class="d-flex flex-column justify-content-start">


<div>
<h1>Tourism</h1>
<p>Plan your trip.</p>
<button>Get Started</button>
</div>
</div>

3.2. justify-content-center
The Bootstrap class name "justify-content-center** is used to align the flex
items at the center of the Flexbox Container either horizontally or vertically
based on the Flex Direction.
Flex Direction Alignment of flex items in a Flexbox Container
flex-row Align flex items horizontally to the center
flex-column Align flex items vertically to the center

<div class="d-flex flex-column justify-content-center">


<div>
<h1>Tourism</h1>
<p>Plan your trip.</p>
<button>Get Started</button>
</div>
</div>

3.3. justify-content-end
The Bootstrap class name "justify-content-end" is used to align the flex
items at the end of the Flexbox Container either horizontally or vertically
based on the Flex Direction.
Flex Direction Alignment of flex items in a Flexbox Container
flex-row Align flex items horizontally to the right
flex-column Align flex items vertically to the bottom

<div class="d-flex flex-column justify-content-end">


<div>
<h1>Tourism</h1>
<p>Plan your trip.</p>
<button>Get Started</button>
</div>
</div>

3.4. justify-content-between
The Bootstrap class name "justify-content-between" is used to get equal
space between the HTML elements.
<div class="d-flex flex-column justify-content-between">
<div>
<h1>Tourism</h1>
<p>Plan your trip.</p>
<button>Get Started</button>
</div>
</div>

Predefined Styles in Bootstrap


1. Button
The Bootstrap class "btn" is used to style the HTML "button" element.
<button class="btn">Submit</button>

To apply different background colors to the HTML "button" element, you


can use the below bootstrap classes.
class names: btn-primary, btn-secondary, btn-success, btn-danger, btn-info, btn-dark,
btn-warning, btn-light
Bootstrap provides us different types of buttons. One of them is Outline
buttons, that don't have a background color.
To add the outline buttons in our HTML document, just replace "btn" in the
above classes with the "btn-outline".
for example,
button Class name outline button class name
btn-primary btn-outline-primary
btn-secondary btn-outline-secondary
btn-success btn-outline-success
btn-danger btn-outline-danger

<button class="btn btn-primary">Get Started</button>


<button class="btn btn-outline-primary">Get Started</button>

Note:
By default, Bootstrap class name `btn` has no background color.

2. Text colors
To apply different colors to the text, you can use the below bootstrap
classes.
class names: text-primary, text-warning, text-secondary, text-success, text-danger, text-
dark, text-white
<h1 class="text-primary">Tourism</h1>

3. Text transform
To apply different cases like upper case, lower case etc to the text, you can
use the below bootstrap classes.
class names: text-lowercase, text-uppercase, text-capitalize
<p class="text-lowercase">PLAN your TRIP wherever YoU wAnT to
GO.</p>

4. Background colors
To apply different background colors to an HTML element, you can use the
below bootstrap classes.
class names: bg-primary, bg-warning, bg-secondary, bg-success, bg-danger, bg-info, bg-
dark, bg-white
<div class="bg-warning"><h1>Tourism</h1></div>

Bootstrap provides us with many predefined class names. Some of them


are:
class names: card, carousel, alert, alert-success, alert-link, bg-danger, card-body and
many more...
You can find the list of class names provided by the bootstrap here
Warning:
Using predefined bootstrap class names as a selector in our CSS
Ruleset may give unexpected results.

Bootstrap Components
Carousel
The Carousel is a slideshow for cycling through images, text, etc. Slides will
change every few seconds.
To add the Carousel to our Favourite Place Detailed View Section Page, we
used Bootstrap Carousel Component with the Indicators.
You can add the different images in the Carousel by changing the image
URL in the value of the HTML src attribute.
<img
class="d-block w-100"
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-
website/tajmahal-c1-img.png"
alt="...">
/>

You can find the Bootstrap Carousel code here


Note:
1. To use multiple Carousels in the same HTML document, we have to
provide a unique id to each Carousel.
2. So while adding a new Carousel, you need to change the id of the
Carousel. Else, the Carousel controls don’t work.

Bootstrap Utilities
Embed
The given code snippet is the Youtube embed code provided by Bootstrap.
You can add the different Youtube Videos by changing the Video ID in the
value of the HTML "src" attribute.
The Video ID is in between the "https://www.youtube.com/embed/" and
"?rel=0".
<div class="embed-responsive embed-responsive-16by9">
<iframe
class="embed-responsive-item"
src="https://www.youtube.com/embed/49HTIoCccDY?rel=0"
allowfullscreen
></iframe>
</div>

Note:
1. Be careful while pasting the video ID. The video ID must be in
between the `https://www.youtube.com/embed/` and `?rel=0`. You won't
get the video if any character is missed in the value of the HTML
`src` attribute.

2. To embed the Youtube Videos in a smaller size, replace the class


name embed-responsive-16by9 with embed-responsive-1by1 in the
Bootstrap Video Embed Code. You can find the reference
[here](https://getbootstrap.com/docs/4.5/utilities/embed/#aspect-
ratios)

CCBP UI Kit
It is a collection of reusable code snippets similar to Bootstrap. It is specially
designed for CCBP training.
1. Adding CCBP UI Kit to the Web Page
<!DOCTYPE html>
<html>
<head>
...
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
...
</head>
<body>
<script type="text/javascript"
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-
website/js/ccbp-ui-kit.js"></script>
</body>
</html>

The CCBP UI Kit Script Code should be placed just before the HTML "body"
end tag.
2. Display Utility
It is a reusable code snippet to display or hide Section Containers based on
user actions.
You can find the Display Utility code here
More Details
1. Getting URLs for Your Images
You can get the URLs to your images using Cloudinary. Cloudinary lets you
easily upload the images and provide the image URLs.
Cloudinary Website URL: https://cloudinary.com/
Note:
To Sign up, copy the Cloudinary Website URL and open in new tab.

2. Install Visual Studio Code

• Windows Operating System


• Ubuntu/Linux Operating System (Watch only for 2 minutes)
• Mac Operating System (Watch only for 2 minutes 30 seconds)

3. Linking HTML and CSS Files


We use the HTML link element to link the HTML and CSS files. It is a void
element.
Syntax:
<link rel="stylesheet" href="tourism.css">

Note
You need to add the HTML `link` element in the HTML `head` element.

4. HTML Image vs CSS Background Image


Ways to add Images in Website:

• HTML Image
• CSS Background Image

When to use HTML Image:

• When there are no content or HTML elements over the Image.


• When Image is a part of the content on a page.

When to use CSS Background Image:

• When Image is not a part of the content on a page.


• When there are content or HTML elements over the Image.

5. CSS Margin vs CSS Padding

When to use CSS Padding:

• To specify the space around the four sides of the content of an HTML
element.
• To add the space between the content and border of an HTML
element.
When to use CSS Margin:

• To specify the space around the four sides of an HTML element.


• To add the space between HTML elements.

For example, let's take an HTML button element.


<button class="button">View More</button>
.button {
padding: 20px;
margin: 15px;
}

Responsive Summary Cheat Sheet


https://www.ccbp.in/
Bootstrap Grid System
Bootstrap Grid System is a collection of reusable code snippets to create
responsive layouts. It is made up of containers, rows, and columns.
It uses a 12 column system for layouting. We can create up to 12 columns
across the page.
1. Container
The purpose of a container is to hold rows and columns.
<div class="container"></div>
Here, the container is a "div" element with the Bootstrap class name
"container".
2. Row
The purpose of a row is to wrap all the columns.
<div class="container">
<div class="row"></div>
</div>

Here, the row is a "div" element with the Bootstrap class name "row".
3. Column
We should place the columns inside a row and the content inside a column.
We can specify the number of columns our content should occupy in any
device. The number of columns we specify should be a number in the range
of "1" to "12".
<div class="container">
<div class="row">
<div class="col-12">
I'm your content inside the grid!
</div>
</div>
</div>

Here, the column is a "div" element with the Bootstrap class name "col-12".
Note:
If Bootstrap class name is "col-12", it occupies the entire width
available inside the row.

The Bootstrap class names "col-*" indicates the number of columns you
would like to use out of the possible 12 columns per row. For example,
"col-1", "col-5", etc.
4. Column Wrapping
When we place more than 12 grid columns in a single row, the extra grid
columns will wrap in a new line.
Responsive Breakpoints
1. The Layout at different Breakpoints
Bootstrap provides different Bootstrap Grid Column class name prefixes
for Five Responsive Tiers (Responsive Breakpoints).
Device Device Size (Width) Class Name Prefix
Extra small devices <576px col-
Small devices >=576px col-sm-
Medium devices >=768px col-md-
Large devices >=992px col-lg-
Extra large devices >=1200px col-xl-

If we define the behaviour of the Bootstrap Grid Column in a particular


device, similar behaviour is guaranteed in all devices with larger sizes.
<div class="container">
<div class="row">
<div class="col-6">
<h1 class="heading">Taj Mahal</h1>
<p>The Taj Mahal is on the southern bank of the river
Yamuna.</p>
</div>
</div>
</div>

1.1 Class names in combination


We can use a combination of different Bootstrap class names for each
Bootstrap Grid Column.
Note:
Bootstrap follows **Mobile First Approach**.

First, design the Layout of a mobile version, and this will be


adopted by devices with larger sizes.

CSS Box Properties


1. Margin
We can get spacing between the two HTML elements with the CSS Box
property "margin".
To get space only on one particular side, we use Margin Variants.
• margin-top • margin-right • margin-bottom • margin-left
We can align HTML Block-level elements horizontally using CSS "margin"
property.
Apart from values that are specified in pixels, it also accepts "auto" keyword
as a value.
Note
If we specify the CSS "text-align" property to the HTML Block-level
element, it aligns the text or HTML Inline elements inside it.

1.1 Auto Value


The child element will be horizontally centred inside the HTML container
element.
<div class="navbar-nav nav-items-center">
<a class="nav-link active" href="#">
Home
<span class="sr-only">(current)</span>
</a>
<a class="nav-link" href="#">About Me</a>
<a class="nav-link" href="#">Projects</a>
<a class="nav-link" href="#">Testimonials</a>
</div>
@import
url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Cave
at:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,
wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,
400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&
family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+P
ro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,70
0;1,700&display=swap");

.nav-items-center {
margin: auto;
}

1.2 Auto Value with Margin Variants


• Using "auto" as a value for the CSS "margin-right" property takes up all
the available space, and the element gets aligned to the left. • Using "auto"
as a value for the CSS "margin-left" property takes up all the available
space, and the element gets aligned to the right.
<div class="navbar-nav nav-items-right">
<a class="nav-link active" href="#">
Home <span class="sr-only">(current)</span>
</a>
<a class="nav-link" href="#">About Me</a>
<a class="nav-link" href="#">Projects</a>
<a class="nav-link" href="#">Testimonials</a>
</div>
@import
url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Cave
at:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,
wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,
400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&
family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+P
ro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,70
0;1,700&display=swap");

.nav-items-right {
margin-left: auto;
}

Bootstrap Utilities
1. Bootstrap Spacing Utilities
1.1 Margin
CSS Margin property Bootstrap class name
margin m-*
margin-top mt-*
margin-right mr-*
margin-bottom mb-*
margin-left ml-*

The asterisk ("*") symbol can be any number in the range of 0 to 5. For
example, "m-5", "mr-2", "mb-3", etc.
1.1.1 Margin Values
Size Value
0 0
1 0.25 * spacer
2 0.5 * spacer
3 1 * spacer
4 1.5 * spacer
Size Value
5 3 * spacer

The spacer is a variable and has a value of 16 pixels by default.


For example,
• "mb-3" = 1 * 16px = 16px • "m-5" = 3 * 16px = 48px
Note
Avoid using CSS "margin-left" and "margin-right" properties for
**Bootstrap Grid Columns**. It disturbs the Bootstrap Grid System
and gives unexpected results.

Apart from the numbers 0-5, the margin also has the below Bootstrap class
names.
• "m-auto" • "ml-auto" • "mr-auto"
1.2 Padding
CSS Padding property Bootstrap class name
padding p-*
padding-top pt-*
padding-right pr-*
padding-bottom pb-*
padding-left pl-*

The asterisk ("*") symbol can be any number in the range of 0 to 5. For
example, "p-3", "pr-1", "pb-5", etc.
1.2.1 Padding Values
Size Value
0 0
1 0.25 * spacer
2 0.5 * spacer
3 1 * spacer
4 1.5 * spacer
5 3 * spacer

The spacer is a variable and has a value of 16 pixels by default.


For example,
• "p-1" = 0.25 * 16px = 4px • "pt-4" = 1.5 * 16px = 24px
2. Bootstrap Background Color Utilities
Values: bg-primary, bg-secondary, bg-success, bg-info, bg-warning, bg-light, bg-dark,
bg-white, bg-danger
3 Bootstrap Sizing Utilities
3.1 Percentage
You can use the below Bootstrap class names to specify the width of an
HTML element in percentage.
CSS property and value Bootstrap class name
width: 25% w-25
width: 50% w-50
width: 75% w-75
width: 100% w-100

<img
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-
website/em-ginger-fried-img.png"
class="menu-item-image w-100"
/>

Note
By default, the height of the image automatically adjusts when we
alter the width.

4. Bootstrap Shadow
To apply shadows to HTML elements, you can use the below Bootstrap
class names.
Bootstrap class names: shadow-none, shadow-sm, shadow, shadow-lg
<div class="shadow menu-item-card p-3 mb-3">
<img
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-responsive-
website/em-ginger-fried-img.png"
class="menu-item-image w-100"
/>
<h1 class="menu-card-title">Non-Veg Starters</h1>
<a href="" class="menu-item-link">
View All
<svg width="16px" height="16px" viewBox="0 0 16 16" class="bi
bi-arrow-right-short" fill="#d0b200"
xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-
.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293
8.5H4.5A.5.5 0 0 1 4 8z"
/>
</svg>
</a>
</div>

5. Bootstrap Flex Utilities


5.1 Order
The Bootstrap Order class names are used to change the visual order of the
flex items that appear inside the Flex Container.
For example, "order-1", "order-2", "order-3", etc.
We can use any number in the range of "0" to "12" for a bootstrap "order"
class name.
These class names are responsive. So, you can set the order by breakpoint.
For example, "order-1", "order-md-2", "order-lg-3", etc.
6. Bootstrap Display Utilities
We can hide and show HTML elements responsively for each screen size
with the Display utilities.
We can hide HTML Elements using "d--none" class names, where ""
represents breakpoints ("sm", "md", "lg", "xl")
For example, "d-none", "d-sm-none", "d-md-none", etc.
<div class="my-container">
<p class="box">Box 1</p>
<p class="box d-none">Box 2</p>
<a href="" class="d-md-none">wikipedia</a>
</div>

Based on the type of HTML element, we can use "d--inline" and "d--block"
class names to show HTML element.
For example, "d-block", "d-md-inline", "d-lg-block", etc.
7. Bootstrap Position Utilities
7.1 Fixed Top
The bootstrap class name "fixed-top" positions an HTML element at the top
of the viewport irrespective of the scrolling.
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-
top">...</nav>
7.2 Fixed Bottom
The bootstrap class name "fixed-bottom" positions an HTML element at the
bottom of the viewport irrespective of the scrolling.
<nav class="navbar navbar-expand-lg navbar-light bg-white fixed-
bottom">...</nav>

Bootstrap Components
1. Bootstrap Navbar
A Navbar is a navigation header that is placed at the top of the page. With
Bootstrap, a Navbar can extend or collapse, depending on the device size.
1.1. HTML Nav element
The HTML "nav" element is a container element similar to the HTML "div"
element. We use the HTML "nav" element to add a Navbar to our website.
<nav class="navbar navbar-expand-lg navbar-light bg-light"></nav>

1.2. Nav Items inside Navbar


<a class="nav-link active" href="#">
Home
<span class="sr-only">(current)</span>
</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">
Disabled
</a>

1.3. Nav link


<a class="nav-link" href="#">Features</a>

1.4 Adding Links to the Sections


• Adding id to the section to which we want to navigate.
<div class="wcu-section pt-5 pb-5" id="wcuSection">...</div>

• Providing id as "href" Attribute value to the Nav Item.


<a class="nav-link active" id="navItem1" href="#wcuSection">
Why Choose Us?
<span class="sr-only">(current)</span>
</a>

2. Modal
Example:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal
title</h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</div>

Bootstrap Containers
1. Container
The Bootstrap class name "container" provides us default left and right
spacings starting from smaller devices for a better user experience. It has
one fixed width for each breakpoint in Bootstrap (extra small, small,
medium, large, and extra large).
Device Device Size (Width) Container Max Width
Extra small devices < 576px 100%
Device Device Size (Width) Container Max Width
Small devices >= 576px 540px
Medium devices >= 768px 720px
Large devices >= 992px 960px
Extra large devices >= 1200px 1140px

<div class="container">
<div class="row">
<div class="col-12">
<h1>Taj Mahal</h1>
<p>
The Taj Mahal is an ivory-white marble mausoleum on the
southern
bank of the river Yamuna in the Indian city of Agra.
</p>
</div>
</div>
</div>

2. Fluid Container
The Bootstrap class name "container-fluid" is a full width container,
spanning the entire width of the viewport.
If we don’t need left and right spacings, we can use the Bootstrap class
name "container-fluid" instead of "container".
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1>Taj Mahal</h1>
<p>
The Taj Mahal is an ivory-white marble mausoleum on the
southern
bank of the river Yamuna in the Indian city of Agra.
</p>
</div>
</div>
</div>
HTML Elements
In general, HTML elements can be divided into two categories.
• Block-level Elements • Inline Elements
1. Block-level Elements
These elements always start in a new line and take up the full width
available. So, an HTML Block-level element occupies the entire horizontal
space of its parent element.
For example, the HTML "h1" element, "p" element, "div" element, etc.
<h1 class="heading">The seven wonders of the world</h1>
<p class="paragraph">The Taj Mahal is one of the seven wonders of
the world</p>

2. Inline Elements
These elements do not start in a new line and only take up as much width
as necessary.
For example, the HTML "button" element, "img" element, "a" element, etc.
<img
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-
website/mysore-palace2-img.png"
class="image"
/>
<img
src="https://d1tgh8fmlzexmh.cloudfront.net/ccbp-static-
website/varanasi1-img.png"
class="image"
/>
<p class="paragraph">
The <a class="link-text"
href="https://en.wikipedia.org/wiki/Taj_Mahal">Taj Mahal</a>
is one of the seven wonders of the world.
</p>

3. HTML Span Element


The HTML "span" element is a generic inline container element which is
mainly used for styling text in HTML Elements.
<p class="wcu-card-description">
Food Coupons & Offers upto
<span class="offers">50% OFF</span>
and Exclusive Promo Codes on All Online Food Orders.
</p>
.offers {
color: #323f4b;
font-style: italic;
font-weight: 600;
}

CSS Selectors
The CSS Selectors are used to select the HTML Elements that we want to
style.
The different types of CSS Selectors are:
•Simple Selectors
◦ Class Selector
◦ ID Selector
◦ Type (tag name) Selector
◦ Attribute Selector
◦ Universal Selector
◦ Pseudo-class

• Compound Selectors • Complex Selectors and many more.


1. Class Selector
The CSS Class Selector selects all the HTML elements that have a given CSS
class selector as their class attribute value. It consists of a dot ("."), followed
by the class name of the HTML element.
<p class="paragraph">The population of India is around 138
crores.</p>
.paragraph {
color: blue;
}

Here, the CSS class selector is ".paragraph". So, it selects all the HTML
elements that have an HTML attribute name "class", and it's value
"paragraph".
Note
There can be **more than one** HTML element with the same class name
in the HTML document.

2. ID Selector
The CSS ID selector selects an HTML element based on its ID attribute
value. It consists of a hash ("#"), followed by the ID of the HTML element.
<p id="populationParagraph">The population of India is around 138
crores.</p>
#populationParagraph {
color: blue;
}

Here, the CSS ID selector is "#populationParagraph". So, it selects the HTML


element that has an HTML attribute name "id" and it's value
"populationParagraph".
Note
There should be only **one** HTML element with a given ID in the
entire HTML document. The HTML "id" attribute value doesn't need to
have the prefix "section" as CCBP UI Kit is not used.

3. Type (tag name) Selector


The CSS Type Selector selects all the HTML elements based on their tag
names ("h1", "p", "div", etc.)
<p>The population of India is around 138 crores.</p>
p {
color: blue;
}

Here, the CSS Type selector is "p". So, it selects all the HTML elements that
have a tag name "p".
CSS Building Blocks
In CSS, the styles that are applied to HTML elements depend on three
fundamental concepts.
• Inheritance • Specificity • Cascade
1. CSS Inheritance
The mechanism through which the value of certain CSS properties is passed
on from parent elements to child elements is called Inheritance.
1.1 Parent Element
If the HTML elements are placed inside the other HTML element, then the
outer HTML element is called the parent element of the HTML elements
inside it.
<div>
<h1>The seven wonders of the world</h1>
<p>
The <a href="https://en.wikipedia.org/wiki/Taj_Mahal">Taj
Mahal</a>
is one of the seven wonders of the world.
</p>
</div>

From the above Code Snippet, we can say:

1. The HTML "div" element is the parent element of the HTML "h1" and
"p" elements.
2. The HTML "p" element is the parent element of the HTML "a"
element.

1.2 Child Element


An HTML element that is directly inside the parent element is called the
child element of that parent element.
<div>
<h1>The seven wonders of the world</h1>
<p>
The <a href="https://en.wikipedia.org/wiki/Taj_Mahal">Taj
Mahal</a>
is one of the seven wonders of the world.
</p>
</div>

From the above Code Snippet, we can say:

1. The HTML "h1" and "p" elements are the child elements of the HTML
"div" element.
2. The HTML "a" element is the child element of the HTML "p" element.
CSS properties can be categorized into two types:

• Inherited properties
• Non-inherited properties

1.3 Inherited Properties


If the CSS properties applied to the parent element are inherited by the
child elements, then they are called Inherited properties.
Some of the CSS Inherited Properties are:-
• Text related Properties
◦ "font-family"
◦ "font-style"
◦ "font-weight"
◦ "text-align"

• List related Properties


◦ "list-style-type"

• "color" property and many more.


1.4 Non-inherited Properties
If the CSS properties applied to the parent element** are not inherited** by
the child elements, then they are called Non-inherited properties.
Some of the CSS Non-inherited properties are:
• CSS Box Properties
◦ "width"
◦ "height"
◦ "margin"
◦ "padding"
◦ "border-style"
◦ "border-width"
◦ "border-color"
◦ "border-radius"

• CSS Background Properties


◦ "background-image"
◦ "background-color"
◦ "background-size"

• "text-decoration" and many more.


2. CSS Specificity
Specificity is how browsers decide which CSS property values are the most
relevant to an HTML element and, therefore, will be applied.
The following list of CSS Selectors is in the lowest to highest order by
specificity.

1. Type (tag name) Selector


2. Class Selector
3. ID Selector

2.1 Type Selector & Class Selector


A Class Selector is more specific compared to Type (tag name) Selector as
it selects only the HTML elements that have a specific class attribute
value in the HTML document.
Note
It doesn't overwrite the entire CSS Ruleset but only overwrites the
CSS properties that are the same.

2.2 Class Selector & ID Selector


An ID Selector is more specific when compared to a Class Selector as we
provide a unique ID within the HTML document and it selects only a single
HTML Element.
2.3 Inline Styles
Inline Styles have the highest specificity. They overwrite any other styles
specified using CSS Selectors.
3. CSS Cascade
The source order of CSS Rulesets matters. When two CSS Rulesets have
equal specificity, the one that comes last in the CSS is applied.
Note
The styles that apply to the HTML Elements are not determined by the
**order the classes** defined in the HTML "class" attribute, but
instead the order in which they appear in the CSS.

3.1 The !important exception


It is a special piece of CSS used to make a particular CSS property and value
the most specific thing, irrespective of source order and specificity.
<h1 class="style-1">About India</h1>
.style-1 {
color: green;
}
h1 {
color: orange !important;
}

The only way to override a "!important" property value is to include another


"!important" property value. The added property value should either come
later in the order or should be of higher specificity.
Note
Always look for a way to use specificity before even considering
"!important".

Only use "!important" when you want to override foreign CSS (from
external libraries, like Bootstrap).

Style Attribute
Inline Styles
The Inline styles are applied directly to an HTML element. They use the
HTML "style" attribute, with CSS property values defined within it.
Syntax:
<tag style = "property1: value1; property2: value2;
...">Content</tag>
A HTML "style" attribute value can consist of one or more CSS property
values.
Note

Inline Styles have the highest specificity. They overwrite any other
styles specified using CSS Selectors.

Using Inline Styles is not recommended because

• Inline Styles are not reusable.


• Writing HTML and CSS separately increases code readability.

Icons
1. Adding Icons
There are a limited number of Icon choices in Bootstrap icons. Since we
don’t have the desired icons in Bootstrap Icons, we use Font Awesome
Icons.
1.1. Font Awesome Icons
To use the Font Awesome Icons, you need to add the below Font Awesome
Icons Kit Code in the HTML "head" element.
<script src="https://kit.fontawesome.com/ac42c3b1f7.js"
crossorigin="anonymous"></script>

Note
The CSS Property "border-radius" allows you to add circular corners
to an HTML element. We need to provide the same height and width to
get circular corners else we will get elliptical corners.

2. Bootstrap Icons
2.1. How to add the Bootstrap Icons
• Go to https://icons.getbootstrap.com in your Web browser. You will find
many icons. • Click on the icon you need. For the icon used in this section,
click on "arrow-right-short". • Copy the HTML code and paste it. • Change
the HTML attributes "width", "height", and "fill" of the HTML "svg" element
as you need.
Note
The HTML "svg" element is an HTML inline element. We can use it to
add icons to our website.

CSS Colors
Transparent
The CSS "transparent" keyword represents a fully transparent color. This
makes the background behind the colored HTML element completely
visible.
For example, to set a transparent background color,
.custom-outline-button {
background-color: transparent;
}

This allows you to set the background color of the HTML element to
transparent so that any background HTML element will show through.
Bootstrap also provides you with a class name "bg-transparent" to set the
background color to transparent.
CSS Gradients
A special type of Background Image formed by the transition between two
or more colors.
There are mainly two types of gradients:
• Linear Gradient • Radial Gradient
1. Linear Gradient
To create the most basic type of gradient, all you need is to specify two
colors. You must have at least two colors, but you can have as many as you
want.
<div class="linear-gradient-background"></div>
.linear-gradient-background {
height: 100vh;
background-image: linear-gradient(#2196f3, #f44336);
}

1.1 Changing Direction


By default, linear gradients run from top to bottom. You can change their
transition by specifying a direction.
Direction Description
to top Colors transition (change) from bottom to top
to bottom It is a default direction. Colors transition (change) from top to bottom
to left Colors transition (change) from right to left
to right Colors transition (change) from left to right

.linear-gradient-background {
background-image: linear-gradient(to right, #2196f3, #f44336);
}

1.2 Using more than two colors


You don't have to limit yourself to two colors. You may use as many as you
like! By default, colors are evenly spaced along the gradient.
.linear-gradient-background-with-more-colors {
height: 100vh;
background-image: linear-gradient(red, blue, yellow, orange);
}

2. Radial Gradient
<div class="radial-gradient-background"></div>
.radial-gradient-background {
height: 100vh;
background-image: radial-gradient(#2196f3, #f44336);
}

2.1 Using more than two colors


You don't have to limit yourself to two colors. You may use as many as you
like! By default, colors are evenly spaced along the gradient.
.radial-gradient-background-with-more-colors {
height: 100vh;
background-image: radial-gradient(red, blue, yellow, orange);
}

CSS Units
Percentage
To define the size of a Child Element relative to its Parent Element, we can
use Percentages.

You might also like