Scribd
Upload
10 views

training file

Uploaded by

Kavita Rani
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views

training file

Uploaded by

Kavita Rani
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 31

Varun kumar/CSE-B

1
Varun kumar/CSE-B

HTML – OVERVIEW

 HTML stands for Hypertext Markup Language, and it is the most widely
used language to Write Web Pages. HTML is the building block for web
pages. Originally, HTML was developed with the intent of defining the
structure of documents like Headings, paragraphs, lists, and so forth to
facilitate the sharing of scientific information Between researchers.

HTML BASIC DOCUMENT STRUCTURE :

o The first tag in your html


document is <html>. This
tag tells your browser that
this is the start of an html
document. The tast tag in
your document is </html>.
This tag tells your browser
that this is the end of the himi
document.

o The text between the


<head> rag and the
</head> tag is header
information. Header
information is not displayed in
the browser window.

o The text between the <title> tage is the title of your document. The
<title> tag is used to uniquely Identify each document and is also
displayed in the title bar of the browser window.

o The text between the <body> tags is the text that will be displayed in
your browser.

2
Varun kumar/CSE-B

HTML TAGS
As told earlier, HTML is a markup language and makes use of
various tags to format the content. These tags are enclosed within
angle braces <Tag Name>. Except few tags, most of the tags
have their corresponding closing tags. For example, <html> has
its closing tag</html> and <body> tag has its closing tag
</body> tag etc.

1. HEADINGS:
Any document starts with a heading. You can use different sizes for your
headings. HTML also Has six levels of headings, which use the elements <h1>,
<h2>, <h3>, <h4>, <h5>, and <h6>.

2. PARAGRAPHS:
Paragraphs are defined with the tag. Think of a paragraph as a block of text.
You can use the align attribute with a paragraph tag as well.
<p align="left">This is a paragraph</p>
<p align="center">this is another paragraph</p>

3
Varun kumar/CSE-B

3. LINE BREAKS:
The <br> tag is used when you want to start a new line, but don't want to
start a new paragraph. The<br> tag forces a line break wherever you place
it. It is similar to single spacing in a document .
This Code Would display
<p>This <br> is a para <br> graph This
with is a para
line breaks</p> graph with line breaks

The <br> tag has no closing tag.

4. HORIZONTAL RULE:
The <hr> element is used for horizontal rules that act as dividers between sections, like
this:

The horizontal rule does not have a closing tag. It takes attributes such as align and
width. For instance:

This code Would display


<hr width="50%"
align="center">

5. COMMENTS IN HTML:
The comment tag is used to insert a comment in the HTML source code. A comment can
be placed anywhere in the document and the browser will ignore everything inside the
brackets. You can use comments to write notes to yourself, or write a helpful message to
someone looking at your source code.

This code Would display


<p> This html comment would This HTML comment would be
<!—This is a comment --> displayed like
be displayed like this.</p> this.

Note: You need an exclamation point after the opening bracket <!-- but not
before the closing bracket -->.

4
Varun kumar/CSE-B

HTML automatically adds an extra blank line before and after some elements, like before
and after a paragraph, and before and after a heading. If you want to insert blank lines
into your document, use the tag.

OTHER HTML TAGS:

TAG Description TAG Description


<abbr> Defines the <b> Defines Bold
abbreviations text
<acrony Defines an acroym <big> Defines Big text
m> <i> Defines Italic
<address Defines the address text
> element <small Defines Small
<cite> Defines a citation > text
<code> Defines computer code <sup> Defines Superscripted
text text
<blockqu Defines a long <sub> Defines subscripted
ote> quotation text
<del> Defines a text <tt> Defines
<dfn> Defines a definition teletype text
term <u> Deprecated .us
<em> Defines emphasized e styles instead
text
<ins> Defines inserted text
<kbd> Defines keyboard text
<pre> Defines performatted
text
<strong> Defines strong text
<div> Used as container
<a> Used for links
<img> Used for images
<font> Used for writing a text

5
Varun kumar/CSE-B

NON-BREAKING SPACES
The most common character entity in HTML is the non-breaking space &nbsp; .
Normally HTML will truncate spaces in your text. If you add 10 spaces in your text, HTML
will remove 9 of them. To add spaces to your text, use the character entity.

This code Would display


<p>This code would appear This code would appear as this.
as this.</p>

Other important tags will be discussed below:

6
Varun kumar/CSE-B

HTML-ELEMENTS

An HTML element is defined by a starting tag. If the element contains other


content, it ends with a closing tag, where the element name is preceded by a
forward slash as shown below with few tags.

Start Tag Content End Tag

<p> This is paragraph </p> These are


content called
HTML
<h1> This is a heading </h1> ELEMENTs
content

<div> This is a division </div>


content

</br>

So here <p>....</p> is an HTML element, <h1>...</h1> is another HTML


element. There are some HTML elements which don't need to be closed, such
as </img>, </hr> and </br > elements. These are known as void
elements.
HTML documents consists of a tree of these elements and they specify how
HTML documents should be built, and what kind of content should be placed in
what part of an HTML document.

HTML Tags vs. Element


An HTML element is defined by a starting tag. If the element contains other
content, it ends with a closing tag.
For example, <p> is starting tag of a paragraph and </p> is closing tag of the
same
paragraph but <p>This is paragraph</p> is a paragraph element.
7
Varun kumar/CSE-B

HTML-ATTRIBUTES
An attribute is used to define the characteristics of an HTML element and is
placed inside the element's opening tag. All attributes are made up of two
parts: a name and a value:
 The name is the property you want to set. For example, the paragraph
<p> element in the example carries an attribute whose name is align,
which you can use to indicate the alignment of paragraph on the
page.
 The value is what you want the value of the property to be set and
always put within quotations. The below example shows three possible
values of align attribute: left, center and right.
Attribute names and attribute values are case-insensitive. However, the
World Wide Web Consortium (W3C) recommends lowercase
attributes/attribute values in their HTML 4 recommendation .
Example:

This code Would display


<p align=”left”>This is left This is left aligned
aligned</p>
<p align=”right”>This is right This is right aligned
aligned</p>
<p align=”center”>This is center This is center aligned
aligned</p>

Core Attributes:
The four core attributes that can be used on the majority of HTML elements
(although not all) are:

 Id <p id="html">This para explains what


is HTML</p>

8
Varun kumar/CSE-B

 Title <h3 title="Hello HTML!">Titled Heading


Tag </h3>

 Class <div class=”navbar”>used as


container</div>

 Style <p style=" color:#FF0000;">Some </p>

There are many attributes which are used in html for multiple purposes will
be discussed below:

HTML – BACKGROUNDS:

The <body> tag has two attributes where you can specify backgrounds. The
background can be a color an image.for background color bgcolor is used
and for background image background is used as below:
This code Would Display
1. <body bgcolor=”red”>
</body>
2. <body background=”/img1”>
</body>

HTML – COLORS:
Colors are defined using a hexadecimal notation for the combination of red,
green, and blue color values (RGB). The lowest value that can be given to
one light source is 0 (hex #00). The highest value is 255 (hex #FF). This
table shows the result of combining red, green, and blue:
Color Color HEX Color RGB
#000000 rgb(0,0,255)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
9
Varun kumar/CSE-B

#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)

10
Varun kumar/CSE-B

HTML-LISTS
HTML provides a simple way to show unordered lists (bullet lists) or ordered
lists (numbered lists).
Unordered lists:
An unordered list is a list of items marked with bullets (typically small black
circles). An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.

This code Would display


<ul>  Coffee
<li>coffee</li>  Water
<li>water</li>
</ul>
ordered lists:
An ordered list is a list of items marked with bullets (typically small black
circles). An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.

This code Would display


<ol> 1. Coffee
<li>coffee</li> 2. Water
<li>water</li>
</ol>
Definition lists:
Definition lists consist of two parts: a term and a description. To mark up a
definition list, you need three HTML elements; a containner <dl>, a
definition term <dt> , and a definition description <dd> .

This code Would display


<dl>
<dt>Cascading Style Sheets</dt> Cascading Style Sheets
<dd>Style sheets are used to Style sheets are used to
provide provide
presentational suggestions for presentational suggestions for
documents marked up in HTML. documents marked up in HTML.
</dd>
11
Varun kumar/CSE-B

</dl>

HTML-LINKS
HTML uses the <a> anchor tag to create a link to another document or web
page.

The Anchor tag and the Href attribute:


An anchor can point to any resource on the Web: an HTML page, an image,
a sound file, a movie, etc.The syntax of creating an anchor:
<a href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link from, the href attribute is
used to tell the address of the document or page we are linking to, and the
words between the open and close of the anchor tag will be displayed as a
hyperlink.
This code Would display
<a href="http://www.google.com">MY lINK!</a> MY lINK !

The Target Attribute


With the target attribute, you can define where the linked document will be opened. By
default, the link will open in the current window. The code below will open the document
in a new browser window:

<a href="http://www.google.com" target=”_blank”>MY lINK!</a>

Email links:
To create an email link, you will use your email address.

<a href="[email protected]">Send messages </a>

12
Varun kumar/CSE-B

HTML-IMAGES
The Image Tag and the Src Attribute:
The <img> tag is empty, which means that it contains attributes only and it
has no closing tag. To display an image on a page, you need to use the src
attribute. Src stands for "source". The value of the src attribute is the URL of
the image you want to display on your page. The syntax of defining an
image:
This code Would display

<img src="graphics/chef.gif">

The Alt Attribute:


The alt attribute is used to define an alternate text for an image. The value
of the alt attribute is author-defined text:
<img src="graphics/chef.gif" alt="Sun with trees ">
The alt attribute tells the reader what he or she is missing on a page if the
browser can't load images. The browser will then display the alternate text
instead of the image. It is a good practice to include the alt attribute for
each image on a page, to improve the display and usefulness of your
document for people who have text-only browsers or use screen readers .

The Image Dimensions:


When you have an image, the browser usually figures out how big the
image is all by itself. If you put in the image dimensions in pixels however,
the browser simply reserves a space for the image, then loads the rest of
the page. Once the entire page is loads it can go back and fill in the images.
13
Varun kumar/CSE-B

Without dimensions, when it runs into an image, the browser has to pause
loading the page, load the image, then continue loading the page. The chef
image would then be:
<img src="graphics/chef.gif" width="130px" height="101px" alt="Sun
with trees">

HTML-TABLE
Tables are defined with the <table> tag. A table is divided into rows
(with the <tr> tag), and each row is divided into data cells (with the
<td> tag). The letters td stands for table data, which is the content of
a data cell. A data cell can contain text, images, lists, paragraphs,
forms, horizontal rules, tables, etc.

Table Tags:
Tag Description
<table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<caption> Defines a table caption
<colgroup> Defines groups of table colums
<col> Defines the attribute values for one or more columns
in a table

Example:
This code Would display
<table> row 1, cell 1 row 1, cell 2
<tr> row 2, cell 1 row 2, cell 2
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>

14
Varun kumar/CSE-B

</tr>
</table>

TABLE ATTRIBUTES :
This code Would display
1. Border attribute Border=”0”
row 1, cell 1 row 1, cell 2
<table border=”0”> row 2, cell 1 row 2, cell 2
<tr>
<td>row 1, cell 1</td> Border=”1”
<td>row 1, cell 2</td> row 1, cell 1 row 1, cell 2
</tr> row 2, cell 1 row 2, cell 2
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
2. Cell spacing Attribute

<table border="1" cellspacing="5">


<tr>
<td>some text</td>
<td>some text</td>
</tr><tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>

15
Varun kumar/CSE-B

3. Cellpadding Attribute

<table border="1"
cellpadding="10">
<tr>
<td>some text</td>
<td>some text</td>
</tr><tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>

4. Colspan attribute

<table border="1">
<tr>
<th>Category</th>
<th colspan="3">Examples</th>
</tr> Category Examples
<tr> Fruits Apples Oranges Grapes
<td>Fruits</td>
<td>Apples</td>
<td>Oranges</td>
<td>Grapes</td>
</tr>
</table>
5. Rowspan attribute Department: Accounting
Freya Olsen
Contact Person:
<table border="1"> Maita Cot
<tr>
<th>Department:</th>
<td>Accounting</td>
</tr>
<tr>
<th>rowspan="2">ContactPerso
n:</th>
<td>Freya Olsen</td>
</tr>
16
Varun kumar/CSE-B

<tr>
<td>Maita Cot</td>
</tr>
</table>

Cellspacing is the width between the individual data cells


in the table.
Cellpadding is the space between the cell contents and the
cell border.

HTML-FORMS
HTML forms provide a great way to capture data from your web site. A form
in an HTML page can be used to submit data to a server for further
processing. Each HTML form is introduced by the <form> tag, and is made
up of different input elements. The <form> tag has several attributes that
would tell the browser what to do with the information that is entered in the
different fields. These attributes are:
● action
● method
The action attribute tells your browser the location of the cgi script that you
are going to use to process the form. On the other hand, the method
attribute has two possible values, method=get or method=post, both of
which specify a method of submitting data to the script you have specified
in the action attribute.

FORM FIELDS :
Any HTML form can contain the following fields. First you have the input
elements:
17
Varun kumar/CSE-B

 Text
 Password
 Checkbox
 Radio
 Submit
 Reset
 File
 Hidden
 Image
 Button
There are also other input methods that may be used in an HTML form,
including dropdown lists, radio buttons, check boxes, text areas and others.
Let us see how each of these text elements is used in an HTML form.

EXAMPLES :
This code Would display

Text input:
<form>
<input type="text" id="name"
Click here to enter text
name="name" placeholder="Click
here to enter text">
</form>

Checkbox input: INTERESTS:


<form> INTERESTS: Music
<input type="checkbox" id="music" Sports
name="interest" Reading
value="music">Music
<input type="checkbox" id="sports"
name="interest" value="sports">
Sports
<input type="checkbox"
18
Varun kumar/CSE-B

id="reading" name="interest"
value="reading"> Reading
</form>

Radio Buttons:
<form>
<label>Choose Your Preferred
Payment Method:</label>
<input type="radio" id="creditCard"
name="paymentMethod"
Choose Your Preferred Payment
value="creditCard"> CreditCard Method:
<br> CreditCard
<input type="radio" id="paypal"
paypal
Music name="paymentMethod"
value="paypal"> Paypal <br> bitcoin
<input type="radio" id="bitcoin"
name="paymentMethod"
value="bitcoin"> bitcoin <br>
</form>

Submit Buttons:
<form>
<button
type="submit">Submit</button> Submit Reset
<button type="Reset ">Reset
</button>
</form>
Example of Forms with Html Table : Program 1
<body >
<div style="display:flex; justify-content:center;">

<table id="A" width="60%" border="0" height="100%" cellpadding="5px"


cellspacing="3px">
<!--1st row-->
<tr cellpadding="0px">
<td style="text-align: center; width:25%;"><img src="IMAGES\logo.jpg" >
</td>
<td style="font-size: 20px; font-weight:1000; text-align: center; width: 40%;"
>DAV INSTITUTE OF ENGINEERING & TECHNOLOGY<BR>
kabir Nagar ,Jalandhar-144008<br>
Registration form<br>
19
Varun kumar/CSE-B

</td>
</tr>
<!--2nd row-->
<tr>
<td></td> <!--for extra space-->
<td style="text-align: center; font-weight:550; text-decoration:
underline;">B.TECH 1<sup>st</sup> Year</td>
<th rowspan="5"> <!--for display a picture over 5 rows-->
<input style="border: 1px solid black; display: flex; " class="image"
type="file" onchange="readURL(this)" accept="image/*" >
<div style="display: flex; font-size: small;">Student's Photograph</div>
</th>
</tr>
<!--3rd row-->
<tr height="10px">
<!--for extra space-->
</tr>
<!--4th row-->
<tr>
<td >1. Name:</td>
<td id="A"><input type="text" placeholder="NAME" ></td>
</tr>
<!--5th row-->
<tr>
<td>2. Father's Name:</td>
<td id="A"><input type="text" placeholder="NAME" ></td>
</tr>
<!--6th row-->
<tr>
<td>3.Mother's Name:</td>
<td id="A"><input type="text" placeholder="NAME" ></td>
</tr>
<!--7th row-->
<tr>
<td>4.Date of Birth:</td>
<td id="A"><input type="date" ></td>
</tr>
<!--8th row-->
<tr>
<td>5.Gender:</td>
<td id="A">
<input type="radio" id="male" name="gender" value="Male" >
<label for="male">Male</label>
<input type="radio" id="Female" name="gender" value="FeMale" >
<label for="Female">Female</label>
</td>
</tr>
<!--9th row-->
<tr>
<td>6.Nationality:</td>

20
Varun kumar/CSE-B

<td id="A"><input type="text" placeholder="INDIAN" >


</td>
</tr>
<!--10th row-->
<tr>
<td>7.Corresponding Address:</td>
<td id="A"><input type="text" placeholder="Enter Address(district,state)" ></td>

</tr>
<!--11th row-->
<tr>
<td >8.Mobile No.</td>
<td id="A" ><input type="number" placeholder="91+ 0000000000" ></td>
</tr>
<!--12th row-->
<tr>
<td ><label for="field">9.Branch</label></td>
<td id="A" ><select id="branch" name="field" placeholder="branch" >
<option>CSE</option>
<option>CSE AIML</option>
<option>ECE</option>
<option>EE</option>
<option>ME</option>
<option>CE</option>

</select>
</td>
</tr>
<!--13th row-->
<tr>
<td>8.Qualification</td>
<td style=" display: flex; justify-content: center; width:100%; padding:px;
margin: 0px;">
<input type="file" style="overflow: hidden; color: transparent; width: 100%;"
> <input type="file" style="overflow: hidden; color: transparent; width: 100%;" >
</td>
</tr>
<!--15th row-->
<tr height="px">
<td ></td>
<td id="A" style=" position: relative; bottom: 20px;"><pre>10th Certificate
12th Certificate</pre></td>
</tr>

</table>
</div>
<button type="button" style=" border-radius: 5px; width: 11%; height: 4.5vh;
background-color:#002ead ; position: relative; left: 35%; color: aliceblue; box-
shadow: 1px 1px 1px 1px black;">Submit</button>

21
Varun kumar/CSE-B

<button type="button" style=" border-radius: 5px; width: 11%; height: 4.5vh;


background-color:#002ead ; position: relative; left: 35%; color: aliceblue; box-
shadow: 1px 1px 1px 1px black; ">Reset</button>
</body>
</html>

OUTPUT_SCREEN

22
Varun kumar/CSE-B

CSS – OVERVIEW

Cascading Style Sheets, fondly referred to as CSS, is a simple design language


intended to simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control
the color of the text, the style of fonts, the spacing between paragraphs, how
columns are size and laid out, what background images or colors are used, as
well as a variety of other effects.
CSS is easy to learn and understand but it provides a powerful control over the
presentation of an HTML document. Most commonly, CSS is combined with the
markup languages HTML or XHTML

Advantages of CSS:
 CSS saves time
 Pages load faster
23
Varun kumar/CSE-B

 Easy maintenance
 Superior styles to HTML
 Global web standards

CSS Comments:
Many times, you may need to put additional comments in your style sheet
blocks. So, it is very easy to comment any part in style sheet. You can
simple put your comments inside /*.....this is a comment in style sheet.....*/.
You can use /* ....*/ to comment multi-line blocks in similar way you do in C
and C++ programming languages.

CSS-INCLUSION
1.The Inline CSS: <style> Attribute:
You can use style attribute of any HTML element to define style rules. These
rules will be applied to that element only.

<element style = "...style rules....">

This code Would display


<body> This is inline CSS
<h1 style = "color:blue;"> This is
inline CSS </h1>
This is inline CSS
<h1 style = "color:blue;
align:center;"> This is inline CSS
</h1>
</body>

24
Varun kumar/CSE-B

2.The <style> Tag inside <head>:


You can put your CSS rules into an HTML document using the <style>
element. This tag is placed inside <head>...</head> tags.

This code Would display


<head> This is inline CSS
<style>
h1{
This is inline CSS
color:blue;
align:center;
}
</style>
</head>
<body>
<h1 > This is inline CSS </h1>
<h1 > This is inline CSS </h1>
</body>

3.External CSS –The <link> Element:


The <link> element can be used to include an external stylesheet file in
your HTML document. An external style sheet is a separate text file with
.css extension. You define all the Style rules within this text file and then
you can include this file in any HTML document using <link> element.
<head>
<link rel=”stylesheet” href=”link”>
</head>
Example:

Html file Mystyle.css File Output screen


<html> h1{ im in center
<head> align:center;
<link color:red;
im in right
25
Varun kumar/CSE-B

rel=”stylesheet” }
href=”Mystyle.css” h2{
> align:right;
</head> color:blue;
<body> }
<h1>im in center
</h1>
<h2>im in right </h2>
</body>

CSS-SYNTAX
A CSS comprises of style rules that are interpreted by the browser and then
applied to the corresponding elements in your document. A style rule is
made of three parts:
 Selector: A selector is an HTML tag at which a style will be applied.
This could be any tag like <h1> or <table> etc.
 Property: A property is a type of attribute of HTML tag. Put simply, all
the HTML attributes are converted into CSS properties. They could be
color, border, etc.
 Value: Values are assigned to properties. For example, color property
can have the value either red or #FF0000etc.

Basic syntax: Example:


Selector { div{
Property1 : value ; color : yellow;
Property2 : value ; font-size : 50px;
} }
26
Varun kumar/CSE-B

Selectors:

CSS SELECTOR HTML File CSS file Output


1. Tag name <h1> h1 { Tag selector
Tag selector color: red;
}
</h1>
2. Class <h1 .hello{ Tag selector
attribute class=”hello”> color: red;
Tag selector }
</h1>
3. ID Attribute <h1 id=”hello”> #hello{ Tag selector
Tag selector color: red;
</h1> }
4. The Universal <h1> *{ Universal selector
Selector (*) Universal selector color :red; Universal selector
:That applies on </h1> align :center;
every tag <h2> }
Universal selector
</h2>

CSS-Measurement Units
CSS supports a number of measurements including absolute units such as
inches, centimeters, points, and so on, as well as relative measures such
as percentages and em,px units. You need these values while specifying

27
Varun kumar/CSE-B

various measurements in your Style rules e.g. border="1px solid red".

CSS-Properties
COLOR-Property:
CSS uses color values to specify a color. Typically, these are used to set a
color either for the foreground of an element (i.e., its text) or for the
28
Varun kumar/CSE-B

background of the element. They can also be used to affect the color of
borders and other decorative effects. You can specify your color
values in various formats.
Following table lists all the possible formats:
Format Syntax Example
1. Hex code(RGB) #FFFFFF p
{color:#FFFFFF;
}
2. keyword Red,blue,green p{
color: red;
}
3. rgb (0-255) rgb(255,255,255) p{
color:rgb(255,255,255);
}

BACKGROUND-Properties:
Property This code Would display
1. background- <p style="background- This text has a yellow background
color: color:yellow;"> color.
property used to set the This text has a yellow
backround color. background color.
</p>
2. background- <body background-
image: image:url(“graphics/chef
property used to set .gif”)>
background image. </body>

3. background- <body background-


repeat: image:url(“graphics/chef
Used to repeat a image .gif”) background-
along any axis. By repeat:no-repeat; >
default </body>
it sets to no-repeat.

FONT-properties:
Property This code Would display
1. font-family: <p style="font-family:arial;"> This text has font
property is used to change This text has font family arial. family arial.
29
Varun kumar/CSE-B

the face of a font. </p>


2. Font-size:
property is used to
<p style="font-size:20px;"> This text has
This text has font size 20px.
increase or decrease the </p> font size
size of a font.
20px.
3. Font-style: <p style=”font- This text has italic
property is used to make a style:italic;”>This text has italic style.
font italic or style.</p>.
oblique.possible values
normal,italic,oblique.
4. Font-weight: <p style=”font- This text is
property is used to weight:bold;”>This text is bolder.
increase or decrease how bolder.</p>
bold or light a font
appears.
Its value can be
100,200,300,400,500,600,
700,800,900,normal,bold,l
arger,
lighter.
5. Font: <p style=”font: italic bold we apply all
We can use the font 15px arial; ”>we apply all properties at
property to set all the font properties at once.</p>
properties at once.
once.

NOTE: In above and below Examples we use style attribute to Add CSS in
our html document .
TEXT-properties:
Property This code Would display
1. text-align: <p style="text-align:center;"> This text aligned to
property is used to align the This text is aligned to center. center.
text of a document. </p>
2. text-decoration: <p style=”text- This text is underlined.
property is used to decoration:underline;”>
underline, overline, and This text is underlined</p>
strikethrough text.
3. text-transform: <p style=”text- THIS TEXT IS
property is used to capitalize transform:uppercase”> UPPERCASE.
text or convert text to This text is uppercase</p>
uppercase or lowercase
letters

4. Text-shadow: <p style=”text-shadow:2px 4px b l u e s h a d o w


Property used for 8px blue;”>blue shadow</p>

30
Varun kumar/CSE-B

shadow .

NOTE: before doing margin, padding ,width and border properties


lets understand the box model of CSS.

CSS-BOX MODEL

NOTE: Total element width = width + left padding + right padding + left border
+ right border + left margin + right margin.
SIZE-properties:

31

You might also like