Delhi Public School, Birgunj

Chainpur, Bara

PROJECT WORK OF COMPUTER-2023

TOPIC: HTML and CSS

Submitted by:
Submitted to:

Name: Bridhi Agarwal

Mr. Deepak Sarraf

Class: 10 Section: Theta

Computer Teacher, DPS

Roll no:8
Subject Teacher’s Signature
Principal’s Signature

Acknowledgment
I want to express my sincere thanks to everyone who helped
make the “HTML and CSS” project happen. Firstly, a big shoutout
to our teacher, Mr. Deepak Sarraf, for guiding us and sharing
valuable insights throughout the project. A heartfelt appreciation
goes out to online communities, forums, and web development
resources that provided a ton of information and inspiration,
creating a fantastic learning environment.

A special acknowledgment goes to Grammarly for their help in

proofreading and editing. Their attention to detail and
commitment to clarity significantly enhanced the tutorial’s
readability and professionalism. I’m grateful to everyone, whether
directly or indirectly involved, for their part in bringing this project
to life.

Big thanks to all!

Sincerely,

Bridhi Agarwal

Class: 10 “Theta”
 Certificate

This is to certify that

Sumedha
Khandelwal
Of Class 10 ‘Theta’ has Successfully
completed her
Computer Applications project on
“HTML and CSS”.
 Mr. Deepak Sarraf

CONTENTS
1. Introduction to HTML with features
 What is HTML?
 Features of HTML
2. Pre-Requisites
 Text Editor and Web Browser
3. Tags
 Types of Tags
 Container Tags
 Empty Tags
4. Elements and Attributes
*Structure of an HTML document
5. Comments
6. Creating Lists
 Ordered List and Unordered List
 Definition List
 Nested List
7. Insertion of Image
 <img> tag and its Attributes
8. Cell Padding and Cell Spacing
 Table tag and its attributes
9. Linking
 Internal and External Linking
 <a> tag
10. Mailto
11. Embedding Multimedia Object
12. Selector, Property and Value
13. Link Style Sheets
 Internal, External and Inline Style Sheets
14. CSS Border
15. CSS Margins
16. CSS Outline
17. CSS Font

1. Introduction to HTML with Features

 What is HTML?’
HTML is a markup language which is used to mark the contents
that helps in designing web pages.

HTML : Hyper Text Markup Language

o Hypertext is the text displayed on a computer display or

other electronic devices with references to other text that
the reader can immediately access. Hypertext documents
are interconnected by hyperlinks, which are typically
activated by a mouse click, keypress set, or screen touch.
o Markup means set of tags used to structure content on a
web page. HTML stands for HyperText Markup Language,
where “markup” denotes the elements and tags used to
define the structure and presentation of content within a
document.
 o Language signifies the syntax and rules for writing or
making the text.

 History of HTML:
HTML, born in 1991, was crafted by Tim Berners-Lee for the
nascent World Wide Web. Evolving from basic tags in HTML 1.0
to the richer features of HTML5 in 2014, it has been a
cornerstone for structuring web content. HTML5, with its
multimedia support and enhanced semantics, revolutionized web
development, shaping the dynamic online experiences we enjoy
today.

Conceived by Tim Berners-Lee in 1991, HTML began as a simple

markup language for the early web. Its journey from HTML 1.0 to
the transformative HTML5 in 2014 marked a progression,
introducing features like multimedia support and improved
semantics. HTML5 has since become the backbone of modern
web development, enabling dynamic and interactive online
experiences.

 Features of Html:

1. Semantic Structure:
- HTML provides a semantic structure through tags like
`<header>`, `<nav>`, `<section>`, and `<footer>`,
enhancing document readability and accessibility.

2. Forms and Input Elements:

- HTML includes robust form elements such as `<form>`,
`<input>`, and `<textarea>`, facilitating user input and
interaction.

3. Multimedia Integration:
- With tags like `<img>`, `<audio>`, and `<video>`,
HTML enables seamless integration of multimedia content,
enhancing the richness of web pages.

4. Hyperlinking and Navigation:

 - HTML’s `<a>` tag allows the creation of hyperlinks,
supporting effortless navigation within a document or
across the web.

Brief Note:
HTML’s strength lies in its ability to structure content
semantically, handle user input through forms, seamlessly
integrate multimedia elements, and facilitate effective
navigation through hyperlinks. These features collectively
contribute to creating dynamic and interactive web pages.

2. Pre-Requisites:

To work in HTML, the user needs:

 Text  Web
Editor Browser

 Text Editor:
A text editor is a software tool for creating and editing plain text files.
It provides a simple interface for manipulating text without formatting.
Popular text editors include Notepad, Sublime Text, and Visual Studio
Code. They are essential for coding, scripting, and basic document
editing.

Some commonly used Text editors are:

 Notepad
 WordPad
 WordPerfect
 KWrite, etc.
 The typed code is saved with the extension .HTM or .HTML in the file
name.

 Web Browser:
A web browser is a software application
for accessing information on the
internet. It interprets HTML documents
to display web pages, enabling users to
navigate the web. Popular examples
include Chrome, Firefox, Safari, and
Edge. Browsers also support additional
features like bookmarks, extensions, and private browsing..

Terms related to HTML.

3. Tags:

HTML tags are elements that define the structure of a web page. They
consist of an opening tag, content, and a closing tag, enclosed in angle
brackets (e.g., `<p>content</p>`). Tags provide instructions for
rendering elements like paragraphs, headings, and links on a webpage.

Tags are surrounded by special delimiter characters. A tag is enclosed

with angular brackets ‘<’ and ‘>’.
Such as-> <html>, <body>, etc.

There are two types of tags:

i. Container Tags:
 Tags utilized in pairs are termed ‘container tags,’ featuring both an
opening and a closing tag. The closing tag mirrors the opening tag but
includes a slash (/) before it. These tags delineate a text section and
dictate the formatting for all content within. They are alternatively
known as Paired tags.

Some container tags are:

 <HTML>
 <HEAD>
 <B>
 <CENTER>

Syntax for container tags:

<opening tag>……………</closing tag>

Example:

<i>Hello </i> This line uses italics tag.

Output: Hello

ii. Empty Tags:

Standalone tags without pairs are called Empty tags. They lack an
ending tag and represent ‘one-time’ instructions, used for tasks like
line breaks or inserting images. Empty tags have only an ON tag (start
tag) and perform their task at the point of insertion. These tags are
also referred to as Singular tags.

Some empty tags are:

 <HR>
It is used to add a horizontal rule or line across the webpage.
 <BR>
It is used add a line break in between sentences.

Example:
 Hlo
<br>
hi

Output:

Hello
Hi

4. Elements and Attributes:

 Elements:
HTML elements are fundamental units in web development,
composed of start tags, content, and end tags enclosed in angle
brackets (e.g., `<p>paragraph</p>`). These elements define
the structure and content of a webpage, ranging from headings
and paragraphs to links and images.

Elements can be nested, creating a hierarchical structure that

organizes information on the webpage. This nesting allows for
the formation of complex layouts and ensures a logical flow of
content. Each element serves a distinct purpose, contributing to
the overall presentation and functionality of the webpage.

HTML provides a versatile set of elements, enabling developers

to create diverse and interactive web pages. Whether it’s
formatting text, embedding multimedia, or creating hyperlinks,
understanding HTML elements is crucial for building well-
structured and engaging online content.

HTML contains of-

I. A start tag
II. An end tag
III. The content between start and end tags
 So, the syntax of an element is:
<Opening tag> content </closing tag>

For example:
<h1>Hello </h1>

Here, <h1> is the start tag and </h1> is the end tag. “Hello” is
the content between the two tags.
This is an example of the Heading element.

 Attributes:

HTML attributes provide additional information about HTML

elements. They are always included in the opening tag and come
in name/value pairs. Common attributes include “class” for
styling and “src” for specifying the source of embedded content.

Attributes consist of two parts:

i. A name
ii. A value
The name specifies the property to be set, whereas the value
specifies what you
want for the property. Value is always enclosed within quotation
marks.
 Syntax:
<tag name=”value”>

For example:
<body bgcolor=”pink”>
The “bgcolor” is the name for the attribute of the <body> tag
and “pink” is its value.

An HTML attribute serves as a tool to tweak the characteristics

of an HTML element. These typically consist of specific terms
placed within the opening tag, dictating how the associated
element behaves or appears. Essentially, attributes wield
influence over the subsequent element’s behavior.

●Structure of an HTML document:

An HTML document consists of several basic tags that are
important as they define the main structural and function worm
of the document , which are -

 <HTML> tag: It marks the document as an HTML document. It is

a container tag.
Syntax-> <HTML>…………..</HTML>
 <HEAD> tag: It specifies information about the document. It
contains <TITLE> tag inside it.
Syntax: <HEAD>…………. </HEAD>
  <TITLE> tag : It displays the title of the webpage on the title bar
of the web browser. It is inside the HEAD
Syntax: <TITLE>...........</TITLE>
 <BODY> tag : All the content to be displayed on the webpage is
written in it.
Syntax: <BODY>…………. </BODY>

Structure of an HTML document is:

5. Comments:

HTML comments provide a way to insert notes within the code, aiding
developers in understanding and documenting specific sections.
Comments are not visible to users on the webpage but serve as helpful
annotations for those working on the codebase.

To create a comment in HTML, you enclose the comment text between

<!—and . This syntax marks the beginning and end of the comment.
Comments can span multiple lines and are often used to explain
complex code, make notes for future reference, or temporarily disable
code during testing.

Including comments in HTML promotes code readability, collaboration

among developers, and the maintenance of well-documented projects.
 They offer a concise means to communicate insights about the code,
fostering effective teamwork and codebase management.

6. Creating Lists:

HTML lists are essential for organizing content on webpages. They

allow you to create structured sets of items without the need for
complex formatting. Using `<ul>` and `<li>` tags produces unordered
lists, displaying items with bullets. On the other hand, `<ol>` and
`<li>` tags create ordered lists, presenting items in a numbered
sequence. Lists enhance the readability and organization of
information, contributing to a more user-friendly web experience.:
 Ordered or Numbered List
 Unordered or Bulleted List

1. Ordered List:
An ordered list is a list in which the items are numbered and presented
in an orderly manner.
In HTML, an ordered list is created using the <ol> (ordered list) and
<li> (list item) tags. The <ol> tag is used to define the start of the
ordered list, and each list item is marked with the <li> tag. The
ordered list renders items with sequential numbers, automatically
incrementing for each list item. This structured approach is beneficial
when presenting information that follows a specific order or sequence
on a webpage.

Basic Syntax of the <ol> tag

The <ol> tag defines ordered lists in HTML. And the list items are
defined by the <li> tag.

The <ol> tag is not an empty element, so it has a closing tag in </ol>
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>

In browsers, ordered lists appear as numbered lists, like this:

<ol>
<li>HTML</li>
<li>CSS</li>
</ol>

Output:
1.HTML
2.CSS

2. Unordered List:
HTML Unordered List or Bulleted List displays elements in
bulleted format. We can use unordered list where we do not
need to display items in any particular order. The HTML ul tag is
used for the unordered list. There can be 4 types of bulleted list:

 Disc
 Circle
 Square
 Syntax to use <ul> tag:
<ul type=”value”>
<li>…</li>
<li>…</li>
<li>…</li>
</ul>

Example:
<ul type=”circle”>
<li>HTML</li>
<li>CSS</li>
</ul>

Output:
• HTML
• CSS

Fig-Representing Ul list

 Definition List:
In HTML, a definition list is created using the <dl> tag, and it
consists of a series of terms and their associated descriptions.
 The terms are defined using the <dt> tag (definition term), and
the corresponding descriptions are enclosed in <dd> tags
(definition description).

The tags used to create a definition list are:

DL
Begins a definition list. The required end tag ends the list.
DT
Identifies the term being defined. The definition term is
formatted in the left column of the list. It does not require an end
tag.
DD
Identifies the term description. Each definition description is
formatted in the right column of the list, immediately opposite or
below its associated term. It does not require an end tag.
Here’s an example:

<dl>
<dt>Term 1</dt>
<dd>Description of Term 1.</dd>

<dt>Term 2</dt>
<dd>Description of Term 2.</dd>

<!-- Add more terms and descriptions as needed -->

</dl>

Output-

●Term 1
•Description of Term 1.

●Term 2
•Description of Term 2.

7. Insertion of images:

1.Definition:
In HTML, images enhance the visual appeal and content
presentation of webpages. They play a crucial role in conveying
information, creating engaging interfaces, and making websites
more visually attractive.

2.HTML Image Tag:

The primary HTML tag for embedding images is `<img>`. It’s an
empty tag, meaning it doesn’t have a closing tag.

3. Attributes:

1. src (Source):
- Syntax:*`<img src=”image.jpg” alt=”Description”>`
- Note: Specifies the path or URL of the image. The `alt`
attribute provides alternative text for accessibility and displays if
the image fails to load.

2. width:
- Syntax: `<img src=”image.jpg” alt=”Description”
width=”300”>`
- Note: Sets the width of the image in pixels. Maintains the
aspect ratio if height is not explicitly specified.

3. height:
- Syntax: `<img src=”image.jpg” alt=”Description”
height=”200”>`
- Note: Specifies the height of the image in pixels. Maintains
aspect ratio if width is not specified.

4. alt (Alternative Text):

- Syntax: `<img src=”image.jpg” alt=”Description”>`
- Note: Provides a text description of the image for accessibility
and SEO purposes.

5. title:
- Syntax: `<img src=”image.jpg” alt=”Description”
title=”Additional info”>`
- Note: Displays additional information when the user hovers
over the image.
 Inserting an Image:

<img src=”image.jpg” alt=”Description” width=”300”

height=”200” title=”Additional info”>

Feel free to adjust the values of attributes based on your specific

image and design requirements. This syntax provides a basic
structure for embedding images in HTML.

Output:

8. Cell Spacing And cell Padding

To know about the above topic, its firstly important to know about
html table , In HTML, a table is created using the `<table>` tag. It
consists of rows and columns, with specific tags for defining headers,
data cells, and other elements. Here's a breakdown of key table-
related tags and their attributes:
1. <table>:
- Definition: Defines the beginning of a table.
- Attributes:
- `border`: Specifies the width of the border around the table.

- Syntax: `<table border="1">`

2. <tr>:
- Definition: Represents a table row.
- Syntax: `<tr>`

3. <th>:
- Definition: Defines a header cell in a table.
- Attributes:
- `colspan`: Specifies the number of columns a header cell should
span.
- `rowspan`: Specifies the number of rows a header cell should
span.
- Syntax: `<th colspan="2" rowspan="1">Header</th>`

4. <td>:
- Definition: Represents a data cell in a table.
- Attributes:
- `colspan`: Specifies the number of columns a data cell should
span.
- `rowspan`: Specifies the number of rows a data cell should span.
- Syntax: `<td colspan="2" rowspan="1">Data</td>`

5. <caption>:
- Definition: Defines a table caption (a title for the table).
- Syntax: `<caption>Caption Text</caption>`

Here's a basic example of a table with two rows and two columns:

<table border="1">
<caption>Sample Table</caption>
<tr>
<th>Header 1</th>
 <th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>

Output:

Sample Table

Header 1 Header 2
Data 1 Data 2

### Table Spacing Attributes in HTML ( going to cell

spacing and cell padding)

In HTML tables, you can enhance layout control with the

following attributes:

1. Cellspacing:
- Description: Adjusts the space between adjacent cells within
the table.
- Usage:`<table cellspacing=”value”>`

2. Cellpadding:
- Description: Defines the space between the content and the
borders inside each table cell.
- Usage: <table cellpadding=”value”>`

These attributes contribute to fine-tuning the presentation and

structure of tables in HTML documents.

An Example Of Table-
Syntax-

<table>

<tr>
<th>Name</th>
<th>Job Title</th>
<th>Email address</th>
</tr>
<tr>
<td>Anna Fitzgerald</td>
<td>Staff Writer</td>
<td>[email protected]</td>
</tr>
<tr>
<td>John Smith</td>
<td>Marketing Manager</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Zendaya Grace</td>
<td>CEO</td>
<td>[email protected]</td>
</tr>
</table>

Output:
9. Linking:
A hyperlink, often called a link, is a reference linking one resource to
another. It includes a clickable element like a word, phrase, image, or
icon.

Clicking a hyperlink initiates an action. Like taking users to a different

webpage. Or launching a phone call.

And coding your own hyperlinks is easy. As long as you understand the
syntax of an anchor element (also known as an <a> tag).

Anchor Element Syntax

Anchor elements have four components:

An opening tag: This is the start of the anchor element and

signifies the beginning of the link element
Tag attributes + attribute values: Within the opening tag, you
can include different attributes. Attributes provide extra
information, like how the link should behave or where it should take
users. (We’ll dive into different attributes later on.)
Anchor text or other content: This is the content users click
A closing tag: This signifies the end of the link element
Let’s tie all four points together with a simple example. The below
example uses an href attribute. It specifies the destination of the
link—in this case, Semrush’s homepage.
 The destination can also be a specific place on a webpage or a
downloadable document. Note: You can use one or more attributes in
your anchor elements.:

How to Code a Link in HTML

1.First, start with your anchor tag:

<a>………..</a>
2.Next, add your homepage’s URL using the href attribute:
<a href=”https/www.yourpage.com”></a>
3.Now, add the anchor text people will click to go to your link:
<a href=”https/www.yourpage.com”> Click Here to Go </a>

Your anchor text should be descriptive. So users will know where

they’ll end up when they click your link.

Search engines also use anchor text to understand the page you’re
linking to. So good anchor text can improve your SEO.

Take the below anchor text of “newsletter best practice” from

ConvertKit. Readers and search engines know that if they visit the link,
they’ll end up on a page about newsletter best practices.

Linking with Images and Media

You can make media like images or GIFs clickable by adding a

source to your anchor tag:
 Here, you include a link to the media (an image in this case)
instead of anchor text.

In the above code:

Src stands for “source” and specifies the location/URL of

your media

Alt contains the alt text—descriptive text used by screen readers

and displayed when an image doesn’t load—if using an image as
a link (below)

Linking to Specific Page Sections (Anchor Links)

Anchor links—also called jump links—take users to a specific place

on the page with this code:

10.Linking to Email Addresses

Just make sure your anchor text indicates an email application will open from
clicking the link. Something like “Email us” or “Send an email” conveys the
message clearly.This way, users won’t be caught off guard when an
unexpected application opens.
Linking to Phone Numbers

Initiate a Call. Linking a phone number initiates a call. You can

link to a phone number using the tel value:

Linking with Title Attributes

The title attribute shows text when users hover over a link:

Use it to give additional context to your links.

For example, tell users where they’ll end up if they click the link.
In this example, the title text could say something like, “click this
link for an in-depth guide on this topic at www.example.com.”
11. Embedding Multimedia Objects:
You can add audio and video in your web page by using the <AUDIO>
and <VIDEO> tags. Let us learn about them:

 Inserting Sound using <AUDIO> Tag:

The <AUDIO> element enables to embed audio in web pages.
Syntax to use the <AUDIO> tag is:

<AUDIO CONTROLS>
<SOURCE SRC=”Name of the Audio File” TYPE=”AUDIO/WAV”>
</AUDIO>

Example:

 Inserting Video with <Video> Tag:

The <VIDEO> element enables to attach video in the web page.
Syntax to use the <VIDEO> tag is as follows:

<VIDEO WIDTH=”VALUE” HEIGHT=”VALUE” CONTROLS>

<SOURCE SRC=”Link of video” TYPE=”video/mp4”>
</VIDEO>

The <video> tag is used to embed video content in a document,

such as a movie clip or other video streams.
 The <video> tag contains one or more <source> tags with
different video sources. The browser will choose the first source
it supports.

The text between the <video> and </video> tags will only be
displayed in browsers that do not support the <video> element.

There are three supported video formats in HTML: MP4, WebM,

and OGG.

Example:

12. Selector, Property, Value:

When you style your HTML page, you need to tell CSS where and how
to apply those styles. After all, just because you want headers to be
blue doesn’t mean you also want paragraphs to be blue. You can select
which elements you want styled a certain way using selectors. There
are many different types of selectors. Let’s go over each one.

Tag selectors are used to select elements by their tag name. For
example, to select all <p> elements, you would use the following
selector:
Class selectors are
used to select elements
by their class. For example, to select all elements with the
class=”planet” class, you would use the following selector:

Class selectors start with a . and can be used in the same way as tag
selectors.

ID selectors are used to select elements by their ID. For example, to

select an element with the ID planet, you would use the following
selector:

Syntax:
Selector {Property: Value}

 Selector:
Selector signifies the HTML tag to which style will be applied.
Selector can be any tag like <H1>, <TABLE>, <P>, etc.
 CSS provides a way to target those elements too. All you need to
do is append the attribute inside square brackets. For example,
to select all a elements with the href attribute, you would use the
following selector:

 Property And Values

It is the type of attribute of the HTML tag. For example: text
color, font style, paragraph spacing, etc.

A single line of CSS consists of two things, a property and a

value. Properties are the things that you want to style, and
values are the things that you want to apply to those properties.
An example of a CSS declaration would be:

Lengths: For so many CSS properties like font-size, line-height, margin,

padding, just to name a few, you will have the option to give a value which
represents a length.A length can be expressed with a number followed by a
unit, and you have the option of using absolute or relative units.

13. Link Style Sheet

There are three ways of inserting or linking a style sheet:
 External Style Sheet
 Internal Style Sheet
 Inline Style

External Style Sheet:

With an external style sheet, you can change the look of an entire
website by changing just one file!Each HTML page must include a
reference to the external style sheet file inside the <link> element,
inside the head section.
Syntax to use the <LINK> tag:
 <HEAD>
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”name of style
sheet”>
</HEAD>

Steps to create a web page using external style sheet:

Step 1: Type the code and save file with .css extension.

Step 2: When the web page is opened, the following output is obtained:

Internal Style Sheet:

An internal style sheet may be used if one single HTML page has a
unique style.The internal style is defined inside the <style> element,
inside the head section.
CSS Code

Output:

Inline Style:

An inline style may be used to apply a unique style for a single

element.

To use inline styles, add the style attribute to the relevant

element. The style attribute can contain any CSS property.

Syntax to use inline style is:

<element style=”…..style rules….”>

Example:
14. CSS Border:

The CSS border properties enable to specify the style, width and color
of a border.

Border Style
The border-style shorthand CSS property sets the line style for all four
sides of an element’s border. The ‘border-style’ property specifies the
outline style of the border. Some of the outline styles are:
Syntax to use Border-style:
<p style=”border-style: Name of the style”>
Text
</p>

Border Color

The `border-color` property in CSS is used to set the color of the

borders of an element. Its syntax allows you to specify one to four
color values for the top, right, bottom, and left borders, respectively.

Example syntax:
Border-color: red green blue yellow;

In this example, the top border will be red, the right border will be
green, the bottom border will be blue, and the left border will be
yellow. If fewer than four values are provided, the missing values will
be taken from the opposite side in a clockwise order.

Border width
The `border-width` property in CSS is used to set the width of the
borders of an element. It can be applied to all four sides (top, right,
bottom, left) individually or in a shorthand notation for all sides.

● Individual Sides:
You can set the width of each border independently using the syntax:

Border-width: top right bottom left;

Example:
Border-width: 2px 1px 3px 4px;

This sets the top border to 2 pixels, right border to 1 pixel, bottom
border to 3 pixels, and left border to 4 pixels.

●Shorthand Notation:
You can use a single value to set the same width for all borders or two,
three, or four values for a specific order (top, right, bottom, left).

Border-width: 2px; /* All borders 2 pixels */

Border-width: 2px 1px; /* Top and bottom 2 pixels, right and left 1 pixel
*/
Border-width: 2px 1px 3px; /* Top 2 pixels, right and left 1 pixel,
bottom 3 pixels */
Border-width: 2px 1px 3px 4px; /* Top 2 pixels, right 1 pixel, bottom 3
pixels, left 4 pixels */

●Long Description:
The `border-width` property provides flexibility in defining the
thickness of borders, allowing for customization at the individual side
level or using a shorthand notation for succinct declarations. This
versatility aids in creating visually appealing and structured layouts by
specifying precise border widths for different sides or applying uniform
thickness across all borders. The property’s syntax accommodates a
 range of values, enabling developers to tailor the appearance of
borders with precision and efficiency in Cascading Style Sheets (CSS).

15. CSS Margins:

The margin CSS shorthand property sets the margin area on all four
sides of an element.

● Constituent properties

This property is a shorthand for the following CSS properties:

Margin-top
Margin-right
Margin-bottom
Margin-left

Syntax to use the property:

/Apply to all four sides /

Margin: 1em;
Margin: -3px;

/top and bottom | left and right /

Margin: 5% auto;

/top | left and right | bottom /

Margin: 1em auto 2em;

/ top | right | bottom | left /

Margin: 2px 1em 0 auto;

/*Global values /
Margin: inherit;
Margin: initial;
Margin: revert;
Margin: revert-layer;
Margin: unset;

The margin property may be specified using one, two, three, or four
values. Each value is a <length>, a <percentage>, or the keyword
auto. Negative values draw the element closer to its neighbors than it
would be by default.
• When one value is specified, it applies the same margin to all four
sides.
•When two values are specified, the first margin applies to the top and
bottom, the second to the left and right.
•When three values are specified, the first margin applies to the top,
the second to the right and left, the third to the bottom.
•When four values are specified, the margins apply to the top, right,
bottom, and left in that order (clockwise).
 ●Values
The size of the margin as a fixed value: length
The size of the margin as a percentage, relative to the inline size
(width in a horizontal language, defined by writing-mode) of the
containing block: percentage
The browser selects a suitable margin to use. For example, in certain
cases this value can be used to center an element: auto

●Description
This property can be used to set a margin on all four sides of an
element. Margins create extra space around an element, unlike
padding, which creates extra space within an element.

16. CSS Outline:

An outline is a line that is drawn around elements, OUTSIDE the

borders, to make the element “stand out”.

CSS has the following outline properties:

 outline-style
 outline-color
 outline-width
 outline-offset
 outline

Outline differs from borders! Unlike border, the outline is drawn outside
the element’s border, and may overlap other content. Also, the outline
is NOT a part of the element’s dimensions; the element’s total width
and height is not affected by the width of the outline.The outline-style
property specifies the style of the outline, and can have one of the
following values:

Dotted – Defines a dotted outline

Dashed – Defines a dashed outline
Solid – Defines a solid outline
Double – Defines a double outline
Groove – Defines a 3D grooved outline
Ridge – Defines a 3D ridged outline
Inset – Defines a 3D inset outline
Outset – Defines a 3D outset outline
None – Defines no outline
Hidden – Defines a hidden outline
The following example shows the different outline-style values

Syntax:

<p style=”outline-width: Value of width; outline-style: Value of style;

outline-color: Value of color; outline-offset: Value;”>
 Text

</p>

17. CSS Font:

CSS font properties are used to adjust the appearance of the text in an
HTML document. Using the CSS fonts properties, we can customize the
font family, size, weight, style, and color of text.

Font Family:
CSS font-family property is used to set the font face of the text on the
webpage. For example,

Syntax:
H1 {
Font-family: Courier, monospace;
}
Font Style:

The font-style property is mostly used to make the text ‘italic’. Other
types of font styles are normal and oblique.

Syntax:
h1.normal {
font-style: normal;
}

h1.italic {
font-style: italic;
}

h1.oblique {
font-style: oblique;
}

Output:
Font Size:

The font-size property is used to increase or decrease the size of a

font.

Syntax:

h1 {
/sets the font size of h1 element to 36px /
font-size: 42px;
}

p{
/*sets the font size to p element to 24px /
font-size: 24px;
}

Output:
THANK YOU