Scribd
Upload
13 views28 pages

2 Understand Various HTML Tags and Usage of Style Sheets

This document provides an overview of various HTML tags and their attributes, including link and image tags, form elements, and multimedia embedding. It also discusses CSS, explaining inline, internal, and external stylesheets, and their application in web design. Additionally, it covers the usage of frames and iframes in HTML for displaying multiple documents within a single window.

Uploaded by

23022cm050
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
13 views28 pages

2 Understand Various HTML Tags and Usage of Style Sheets

This document provides an overview of various HTML tags and their attributes, including link and image tags, form elements, and multimedia embedding. It also discusses CSS, explaining inline, internal, and external stylesheets, and their application in web design. Additionally, it covers the usage of frames and iframes in HTML for displaying multiple documents within a single window.

Uploaded by

23022cm050
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 28

COURSE HANDOUT

UNIT -2
Understand various HTML tags and usage of style sheets

2.1 Explain the link and imaging tags <a>, <img> with attributes.

<a> tag is used for creating a hyperlink.


Ex: <a href=”http://www.google.com” target=”_blank”>Google<a>
Attributes:
Attribu
Value Description
te
href URL specifies the destination address of the link
specifies where to open the linked document
 _blank - Opens the linked document in a new window or tab
_blank  _self - Opens the linked document in the same window/tab
_self as it was clicked (this is default)
_parent
target  _parent - Opens the linked document in the parent frame
_top
framena  _top - Opens the linked document in the full body of the
me window
 framename - Opens the linked document in a named frame

Image tags
<img> tag embeds an image in an HTML page
Ex: <img src=”photo.jpg” width:”200px” height:”200px” />
Attribute Value Description
alt Text Specifies an alternate text for an image
src URL Specifies the URL of an image
%
Height Specifies the height of an image
pixels
%
width Specifies the width of an image
pixels
2.2 Explain<object> tag with attributes
<object> tag: The HTML <object> tag is used for embedding an object
within an HTML document. Use this tag to embed multimedia (like audio,
video, Java applets, ActiveX, PDF, and Flash) in your web pages.

You can use the <param> tag to pass parameters to plugins that have
been embedded with the <object> tag.

Attribute Value Description


Data URL Specifies the location of data to be used by the objectL.
Specifies the object type as specified in the data
Type media_type
attribute.
Name name Specifies the name of the object.
% Specifies the width
Width
pixels
% Specifies the height
Height
pixels

Ex:
<object width="400" height="400" data="helloworld.swf"></objec
t>

2.2.1 Explain the tags, <form>, <input>, <button>, <label>, <select>, <options>,
<textarea>, <legend> with attributes.
<input> Defines a text input control
<form> used to pass data to a server
<textarea> Defines multiline text input control

<select> Defines a selection list or drop down list of items

<option> Defines an item/option in a selection list


<optgroup> Defines a group of related options in a selection list
<label> Defines a label for an input control
<fieldset> Defines a border around elements in form
<legend> Defines a caption for a fieldset element
<button> Defines a push button.

<input>:
Defines a text input control
Syntax: <input type=”element type” name=”name of text box” value=”value”/>

Attributes
Attribute Value Description

checked checked Specifies that an <input> element should be pre-


selected when the page loads (for type="checkbox" or
type="radio")
height pixels Specifies the height of an <input> element (only for
type="image")
maxlength number Specifies the maximum number of characters allowed in
an <input> element
type button Specifies the type <input> element to display
checkbox
file
hidden
password
radio
reset
submit
text

value text Specifies the value of an <input> element

width pixels Specifies the width of an <input> element (only for


type="image")

Attributes of <input>
Type: type of element. Possible values are
1. text : textfield
2. password : password field
3. radio : radio button
4. checkbox : checkbox item
5. submit : submit button
6. reset : reset button
Ex:
To display a textbox
<input type=”Text” />
To Display a password box, HTML code is
<input type=”password”/>

To Display a Radio button, HTML code is


<input type=”radio” name=”gender” value=”male”/>Male
<input type=”radio” name=”gender” value=”Female”/>Female

Example Program
<html><body>
<form>
Username: <input type=”text” name=”uname”/> <br/>
Password:<input type=”password” name=”pwd”/><br/>
Gender: <input type=”radio” name=”gender” value=”Male”>Male
<input type=”radio” name=”gender” value=”Female”>Female<br/>
Hobbies
<Input type=”Checkbox” name=”chess” value=”chess”> <br/>
<Input type=”Checkbox” name=”Cricket” value=”Cricket”> <br/>
<input type=”submit” value=”submit form”/>
</form>
</body></html>

Form tag

HTML Forms: HTML forms are used to pass data to a server.


A form can contain input elements like text fields, checkboxes, radio-buttons,
submit buttons and more. A form can also contain select lists, textarea, fieldset,
legend and label elements.
The <form>tag is used to create HTML form:
<form method=”get/post” action=”name of action”>
Input elements
</form>

Attributes
Attribute Value Description
action URL Specifies where to send the form-data when a form is
submitted
enctype application/x-www-form- Specifies how the form-data should be encoded when
urlencoded submitting it to the server (only for method="post")
multipart/form-data
text/plain
method get Specifies the HTTP method to use when sending form-data
post
name text Specifies the name of a form
target _blank Specifies where to display the response that is received
_self after submitting the form
_parent
_top

Ex:

<form action="/action_page.php" method="post">


</form>
On submit, send form data to "action_page.php"
This example uses the POST method when submitting the form data

<label>
Defines a label for an input control
Syntax: <label for=”value”>content</label>
Attribute Value Description
Specifies the id of the form element the label should
for element_id
be bound to
Ex:
<label for=”name”>Name</label>
<input type=”text” id=”name” name=”name” />

<textarea>
Defines multi-line text input control
Syntax: <textarea rows = “No.of rows” cols=”No.of cols”> </textarea>

Attributes
Attribute Value Description
cols number Specifies the visible width of a text area
rows number Specifies the visible number of lines in a text area
maxlength number Specifies the maximum number of characters allowed
in the text area
name text Specifies a name for a text area

Example
<textarea name=”Resume” rows=100 cols=30>
Web Designing
</textarea>

<button>
Defines a push button.

<button type="button">Click Me!</button>

<html><body>
<form>
Username : <input type=”text”/> </br>
<button type=”button” onclick=”function()”>Verify</button>
</form>
</body></html>

<select>
Defines a selection list or drop down list of items
The <option> tags inside the <select> element define the available options in the drop-down
list
Attributes
Attribute Value Description
multiple multiple Specifies that multiple options can be selected at once
name name Defines a name for the drop-down list
size number Defines the number of visible options in a drop-down list

<option>
Defines an item or option in a selection list
Ex:
<option>Chrome</option>

Attributes
Attribute Value Description
selected selected Specifies that an option should be pre-selected when
the page loads
value text Specifies the value to be sent to a server
Ex:

<Select id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</Select>

Example Program on Select tag


<html>
<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>

<fieldset>
Defines a border around elements in form

<legend>
Defines a caption for a fieldset element
Ex:
<html><body>
<form>
<fieldset>
<legend>contact details</legend>
Name: <input type=”text”/> <br/>
Email: <input type=”text”/>
</fieldset>
<form>
</body>
</html>

2.3 Explain the tags, <frame>, <frameset>, <noframe>, <iframe> with attributes.

<frameset>
This tag is used to divide the window into various frames either horizontally or vertically.

Specifies how many columns are contained in the frameset and the size of each
column. You can specify the width of each column in pixels or percentage
Ex: cols = "100, 500, 100". It creates three vertical frames with a width of 100 pixels,
1 cols 500 pixels and 100 pixels
To Specify in percentage use cols = "10%, 80%, 10%".
To specify remainder of the window use *. Ex: cols=”10%,80%,*”

2
rows Specifies how many rows are contained in the frameset and the size of each row.
You can specify the width of each row in pixels or percentage
Ex: rows = "100, 500, 100". It creates three vertical frames with a width of 100
pixels, 500 pixels and 100 pixels
To Specify in percentage use rows = "10%, 80%, 10%".
To specify remainder of the window use *. Ex: rows=”10%,80%,*”

This attribute specifies the width of the border of each frame in pixels.
3 border
For example, border = "5". A value of zero means no border.

This attribute specifies whether a three-dimensional border should be displayed


4 frameborder between frames. This attribute takes value either 1 (yes) or 0 (no). For example
frameborder = "0" specifies no border.

5 framespacing This attribute specifies the amount of space between frames in a frameset.

<frame>
This tag is used to display a web page in each frame
Attribut
Description
e
This attribute is used to give the file name that should be loaded in the
src
frame.

name This attribute allows you to give a name to a frame.

<noframes>
This tag is used to display a message in the browser that do not support the frames

Ex: <html>
<frameset rows="50%,50%">
<frame src="frame_a.html" >
<frameset cols="25%,75%">
<frame src="frame_b.html" >
<frame src="frame_c.html" >
</frameset>
</frameset>
</html>

frame_a.html
<html>
<body>
<h1>frame A</frame>
</body>
</html>

frame_b.html
<html>
<body>
<h1>frame B</frame>
</body>
</html>
frame_c.html
<html>
<body>
<h1>frame C</frame>
</body>
</html>

Output

Iframe

The <iframe> tag specifies an inline frame.

The <iframe> tag is used to embed another document within the current HTML document.

Attributes
Attribute Value Description
Specifies the height of an <iframe>. Default height is
height pixels
150 pixels
name text Specifies the name of an <iframe>
Specifies the address of the document to embed in
src URL
the <iframe>
Specifies the width of an <iframe>. Default width is
width pixels
300 pixels

<html>
<body>

<h1>The iframe element </h1>

<iframe src="/default.asp" width="100%" height="300">


</iframe>

</body>
</html>

2.4 Illustrate about cascading style sheets


2.4.1 Understand the level of styles inline, internal and embedded style sheets

CSS stands for Cascading Style Sheets. It is a web language-like HTML- which
you can be used to style your web pages. You can think of CSS as the instructions
that tell a web browser how to display your web page whereas HTML is intended
to provide instructions on what to display on your web page.
It is not necessary to use CSS as you can style your web page using entirely
HTML coding but it is immensely more convenient to use CSS. This is not to
mention the fact that CSS can do a lot more with regards to what kinds of bells
and whistles you can add to dress up your pages.
How to that are linked to it using the link element in the <head>.../head> tags.
This is the most powerful form of CSS as a single .css file can control the
formatting of many web pages at once.
Anyone or all three of the above methods can be applied to the same web
page at the same time. The order of precedence when all the three styles applied
to a single web page is
Inline Styles:
This applies CSS directly to each individual HTML element on your web page using
the style attribute.
Create Inline Styles:
The syntax used to create an inline style is
<element-name style="property: value; property: value; property: value;">
Where
element-name refers to the targeted HTML element
property refers to a CSS property
value refers to an associated CSS value
Points to remember about inline CSS syntax
 The property and its associated value are separated by a colon (:)
 Each property/value pair ends with a semi-colon (;)
Example:
<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

Internal Style Sheets: This applies CSS to the current page. It primarily consists of
a list of CSS rule sets placed between a set of <style>...</style> tags which
themselves are inserted in between the <head>...head> tags of your web page.
Used to apply the same styles to multiple HTML elements at once on the current
page.

: Syntax
<html>
<head>
<title></title>
<style type="text/css">
<!..
…CSS rule sets go here...
-->
</style>
</head>
<body>
...web page content...
</body>
</html>
CSS Rule Sets: Now all we have to do is define some CSS rule sets. These will
associate a list of CSS properties with certain HTML elements on our web page.
Here’s the syntax you use to create a CSS rule set:
SELECTOR {property: value; property: value; property: value;}
where
SELECTOR refers to the HTML element you want to style..
property refers to a CSS property.
value refers to an associated CSS value.
Points to remember about CSS syntax in Internal style sheets:
 The list of property/value pairs are enclosed in a set of curly braces
 The property and its associated value are separated by a colon ()
 Each property/value pair ends with a semi-colon (G)
Example:
<html>
<head>
<title>/title>
<style type="text/css">
P {color: green; font-size: 20px;}
<style>
</head>
<body>
<p>...This is para lin green...p>
<p>...This is para 2 in green...<p>
<p>...This is para 3 in green...clp>
<p>...This is para 4 in green...p>
<body>
<html>
Note: Style is defined only once to <p> but it is applied to all paragraphs
automatically in current webpage.
.
External style sheets

Using external style sheets allows you to apply formatting to many different web
pages at once with a single .css file.

Steps to be followed to use external style sheets are


Step1. Create an External Style Sheet with .css extension.

An external style sheet is simply a text file containing a list of CSS


rules sets, The file is saved with a .css extension and saved to any directory
that can be accessed by the web pages using it.

Step2. Use it in web page with Link tag.

The link element can be used among other things, to specify that a
web page should use an external style sheet. The link element only requires
a start tag <link> and is inserted in between the <head>...c/head> tags of
your web.
The link element employs three important attributes: rel, type and href.
For CSS. the value of the rel attribute is always stylesheet and the value of
the type attribute is always text/css. The only part of the code you really
have to concern with is the value of the href attribute which will change
according to which .css file you're referring to.
This value can be any relative or absolute path.

Example: Create an external style sheet and use it in web page(s)


Step1. Create mystyle .css file
H1 {
font-family: "Times New Roman';
font-size: 56px;
background: #ffffff
color: maroon;
}
H2{
font-family: arial,verdana,sans-serif;
font-size: 40px;
background: #ffffff;
color: black;
}
P{
font-family: arial,verdana,sans-serif;
font-size: 26px;
background: #ffffff;
color: navy;
}
Step2: Use The link Element
<html>
<head>
<title>/title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<head>
<body>
<p>.. This is para<p>
<hl>...This is heading 1 </hl>
<hl>...This is heading 1</h1>
<h2>...This is heading2 <h2>>
</body>
</html>
 Inline styles are the boss: When more than one method applies to the same
HTML element, the inline style wins and its style rules are applied to the HTML
element.
 Embedded style sheets are second in command: When no inline style exists
for any particular HTML element then embedded style sheets are applied.
 External style sheets come up the rear: In the absence of any inline styles or
embedded style sheets for any particular HTML element then external style
sheets are applied.

Style Conflicts
When there is more than one style specified for an HTML element, Rules are applied with
following priority order.

1. Inline style (inside an HTML element)


2. External and internal style sheets (in the head section)
3. Browser default

So, an inline style has the highest priority, and will override external and internal styles and
browser defaults.

2.4.2 Explain element, ID and Class selectors in CSS

A CSS selector selects the HTML element(s) you want to style.

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example
Here, all <p> elements on the page will be center-aligned, with a red text color:

p {
text-align: center;
color: red;
}

The CSS #id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique
element!

To select an element with a specific id, write a hash (#) character, followed by the id of the
element.

Example
The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
text-align: center;
color: red;
}

The CSS .class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

Example
In this example all HTML elements with class="center" will be red and center-aligned:

.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be affected by a class.

Example
In this example only <p> elements with class="center" will be red and center-aligned:

p.center {
text-align: center;
color: red;
}

HTML elements can also refer to more than one class.


Example
In this example the <p> element will be styled according to class="center" and to class="large":

<p class="center large">This paragraph refers to two classes.</p>

2.4.3 Explain about Color and background properties

Color property

The color property specifies the color of text.

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values

Examples

Set the text color with a HEX value:


body {color: #92a8d1;}

Set the text color with an RGB value:

body {color: rgb(201, 76, 76);}

Set the text color with an RGBA value:

body {color: rgba(201, 76, 76, 0.6);}

Set the text color with a HSL value:

body {color: hsl(89, 43%, 51%);}

Set the text color with a HSLA value:

body {color: hsla(89, 43%, 51%, 0.6);}

background.
This poroperty is used to set background –color and background-image
CSS Syntax
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-
attachment

Ex:
body {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}

The background property is a shorthand property for:

 background-color
 background-image
 background-position
 background-size
 background-repeat
 background-origin
 background-clip
 background-attachment

In CSS background properties are used to define the background effects


for elements. CSS background properties include
1. The background-color property is used to set the background color of
an element.
Syntax: background-color: value
Value may be: blue, yellow, red etc.
Example: background-color:blue:
2. The background-image property is used to set the background image
of an element.
Syntax: background-image: value;
Where value is the path of the image file.
Example: background-image: "c:/ess.jpg":
1. The background-repeat property is used to control the repetition of an
image in the background.
Syntax: background-repeat: value;
Where value may be repeat to repeat the image, no-repeat > to
display once, repeat-x t o repeathorizontally, repeat-y> to repeat
horizontally;
Example: background-repeat: repeat-x;
2. The background-attachment property is used to control the scrolling
of an image in the background.
Syntax: background-attachment: value;
Where value may be fixed --> not to scroll the image, scroll> to scroll
the image
Example: background-attachment: scroll;
3. The background property is used as a shorthand to specify a number
of other background properties. i.e. To shorten the code, it is also
possible to specify all the background properties in one single
property. This is called a shorthand property.
<p style="background:url(c:/css.jpg) repeat fixed;">
This paragraph has fixed repeated background image.
</p>
4. The background-position property is used to control the position of
an image in the background.
Syntax: background-position: value1 value2;
Where value may be specified in three ways as given below.
Case 1: value = one of the left, right, bottom, top and center
value2 is always center
Example: background-position: left center;
background-position: center;
Case 2: value 1 is x% and value2 is y%. Here x% is the horizontal and
the y% is the vertical. The top left corner is 0% 0%. The right bottom
corner is 100% 100%. If you only specify one value, the other value
will be 50%. Default value is 0%0%
Example: background-position:20% 30%

Case 3: value1 is xpos and value2 is ypos: The xpos is the horizontal
position and the ypos is the vertical. The top left corner is 0. Units can
be pixels (0px 0px) or any other CsS units. If you only specify one
value, the other value will be 50%. You can mix % and positions
Example: background-position:200 300
Example program 1:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('c:/css.jpg')
background-repeat:no-repeat;
background-attachment:fixed;
/style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
sp>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to seroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>

Output when you scroll the image will be fixed but the text will be
scrolled.
The background-image is fixed. Try to scroll down the page.
*****
The background-image is fixed. Try to scroll down the page
The background-image is fixed. Try to scroll down the page
The background-image is fixed. Try to scroll down the page
The background-image is fixed. Try to scroll down the page
The background-image is fixed. Try to scroll down the page

Example Program 2: HTML code to set the background-attachment:


scroll and background-position to right top for the image c:ess.jpg
with horizontal repeat.
<!DOCTYPE html>
<html>
<head>
<style>
body
background-image:url('c:/css.jpg')
background-repeat: repeat-x;,
background-position: right top;
background-attachment: scroll;
</style>
<head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</dp>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>

The output will be


The background-image is fixed. Try to scroll down the page
The background-image is fixed. Try to scroll down the page
The background-image is fixed. Try to scroll down the page
The background-image is fixed. Try to scroll down the page
The background-image is fixed. Try to scroll down the page
2.4.4 Explain about position property in CSS
In CSS you can position your HTML element. i.e. You can put any
HTML at whatever location you like.
You can specify whether you want the element positioned relative to
its natural position in the page or absolute based on its parent element.
a. Relative Positioning: An element with position: relative positions the
HlML element relative to where it normally appears. So "left:20" adds 20
pixels to the element's LEFT position.
Example: <div style="position: relative; left:80px;top: 50px; background-
color:blue;">
b. Absolute Positioning: An element with position: absolute is positioned at
the specified coordinates relative to your screen top-left corner.
Example: <div style="position:absolute;left:80px;top:150px;background-
color:blue;">
C. Fixed Positioning: An elementwith position : fixed allows you to fix the
position of an element to a particular spot on the page, regardless of
scrolling. Specified coordinates will be relative to the browser window
Example:<divstyle="position:fixed;left:80px;top:150px;background-
color:blue;">
You can use two values top and left along with the position property
to move an HTML element anywhere in the HTML document.
 Move Left - Use a negative value for left.
 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down Use apositive value fortop.
NOTE" You can use bottom or rightvalues as well in the same way as top
and left.
Examplel: For relative Positioning:
<html>
<head>
</head>
<body>
<div style="position:relative;left:80px;top:150px;background-
color:blue;">
This is an example for relative positioning.
</div>
</body>
</html>
The Output is
This is an example for relative positioning
Example 2: For Absolute Positioning
<html>
<head>
</head>
<body>
<div style="position:fixed;left:80px;top:150px;background-
color:blue;">
This is an example for Absolute positioning.
</div>
</body>
</html>
Output:
This is an example for relative positioning
Example 3: For fixed Positioning
<html>
<head>
</head>
<body>
<div style="position:fixed;left:80px;top:150px;background-
color:blue;">
This is an example for Fixed positioning.
<div>
</body
</html>
Output is:
This is an example for fixed positioning
2.4.4 Explain about Box properties like Border, margin, padding of elements
CSS Borders
The CSS border properties allow you to specify the style, width, and color of an element's
border.

The border property is a shorthand property for the following individual border properties:

 border-width
 border-style
 border-color

Example
p {
border: 5px solid red;
}

Individual Properties

 The border-width property specifies the width of the four borders in in px, pt, cm, em
p.one {
border-width: 5px;
}
 The border-style property specifies what kind of border to display. Value can be dotted, dashed,
solid, double, etc.
p.one {
border-style: solid;
}
 The border-color property is used to set the color of the four borders. Color can be
name, Hex, RGB, etc.

p.one {
border-color: red;
}

CSS Margins
The CSS margin properties are used to generate space around elements i.e. sets
the size of the white space outside the border. CSS have full control over the
margins and sets the margin for each side of an element (top, right, bottom, and
left). The margin property defines the space around an HTML element. It is
possible to use negative values to overlap content.
Margin-Individual Sides
CSS has properties for specifying the margin for each side of an
element:
 Margin: sets 4 margins to the same size.
 margin-top: sets only top margin to the specified size.
 margin-right: sets only right margin to the specified size.
 margin-bottom: sets only bottom margin to the specified size.
 margin-left: sets only left margin to the specified size.
All the margin properties can have the following values:
 auto - the browser calculates the margin
 length - specifies a margin in px, pt, cm, etc.
 %-specifies a margin in % of the width of the containing
element.
 inherit specifies that the margin should be inherited from the
parent element.
Example: The following example sets different margins for all four
sides element:
P
{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Example: for first Para set all margins to 25px and second paragraph
with left 150px, top:150px, bottom 2% of width and right as 130px
with blue solid boarder of 5px.
<html>
<head>
</head>
<body>
<p style="margin: 25px; border:1px solid black;">
all four margins will be 25px
</p>
<p style="margin-top: 150px margin-left: 150px margin-bottom:2%
margin- right:130px;border:5px solid blue;">
Margins: top 150px left 150px bottom 2% right 130px
<p>
</body>
html>
Output is
All four margins wiil be 25px

Margins: top 150px left150px bottom2% right130px

CSS Padding
The CSS padding properties are used to generate space around content. The
padding clears an area around the content (inside the border) of an element.
With CSS, you have full control over the padding. There are CSS properties for
setting the padding for each side of an element (top, right, bottom, and left).
Padding Individual Sides: CSS has properties for specifying the padding for each
side of an element:
• The padding-bottom specifies the bottom padding of an element.
• The padding-top specifies the top padding of an element.
• The padding-left specifies the left padding of an element.
• The padding-right specifies the right padding of an element.
• The padding serves as shorthand for the preceding properties
All the padding properties can have the following values:
Length - specifies a padding in px, pt, cm, etc.
%- specifies a padding in % of the width of the containing element
Inherit - specifies that the padding should be inherited from the parent
element.

The following example sets different padding for all four sides of a <p> element.
Example
P{
padding-top: 50px:
padding-right: 30px
padding-bottom: 50px;
padding-left: 80px:
}
Example 2: For first Para set all paddings to 25px and second paragraph
with puddings left 150px. top:150px. bottom 2% of width and right as 130px
with blue solid boarder of 5px.
Output:
all for paddings will be 25px
Paddings top 150px left 150px bottom2% right:130px

You might also like