Scribd
Upload
402 views116 pages

Unit 1 Introduction To HTML and Css

This document provides an introduction and syllabus for a course on Dynamic Web Page Development using HTML and CSS. The syllabus covers basic HTML tags, advanced HTML5 tags, designing static and dynamic webpages with HTML5, CSS styles, and more. Key topics include the history of HTML, common tags like <html>, <head>, <title>, <body>, basic and advanced forms, working with images, hyperlinks, and lists. CSS topics include style sheets, properties for text, font, background, border, position and layout.

Uploaded by

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

Unit 1 Introduction To HTML and Css

This document provides an introduction and syllabus for a course on Dynamic Web Page Development using HTML and CSS. The syllabus covers basic HTML tags, advanced HTML5 tags, designing static and dynamic webpages with HTML5, CSS styles, and more. Key topics include the history of HTML, common tags like <html>, <head>, <title>, <body>, basic and advanced forms, working with images, hyperlinks, and lists. CSS topics include style sheets, properties for text, font, background, border, position and layout.

Uploaded by

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

DYNAMIC WEB PAGE

DEVELOPMENT(DWPD)

UNIT 1
Introduction to HTML & CSS

(COURSE CODE: 3350702 )

1
SYLLABUS
1a. Design and develop web pages using basic HTML tags.
1.1 History of Html
1.2 Basic Html Tags
(<html>,<head>,<title>,<body>,<hr>,<img>,<embed>,<bgsound>,<blink>,
<font>,<center>,<marquee>,
<a>)
1.3 Coding style ,syntax, Working with Image, Linking a webpage ,
Defination list (<ul>, <li>, <ol>)
1.4 Working with Table ( <th>, <td>, <tr>)
1.5 Division Tags, IDs & Classes
1.6 Special Character or tags
1b. Use of advance HTML 5 Tags.
1c. Design Static Webpage using Html5 tags
1.7 Difference between Html 4.0 & 5.0
1.8 Brief Discuss Html 5 tags with Ex. ( <header>, <aside>, <section>,
<footer>, <article>,<nav>)
2
1.9 Introduction to Html5 Form Input Type ,Elements & Attributes.
1.10 Form Input Type (color, Date, Datetime, Datetime-local, email,
month number, range, search, tel, time, url, Week)
1.11 Form Input Type Elements( Datalist, Keygen, output)
1.12 Html5 video & audio( <Audio>, <Video>)
1.13 Static Webpage Design using Html5 tags
1d. Design and develop web pages using CSS/ CSS 3 styles,
internal and/or external style sheets.
1.14 Introduction to Css/dhtml
1.15 Briefly Discuss to stylesheet ( What is Css? ,Use of Css, Type’s of
Css, Syntax)
1.16 Css margin, padding , Text, Font Properties
1.17 Css and links
1.18 Css Background, Border Properties, Height, width, Css
Positioning, Layout creating
1.19 Css and backgrounds, Css and borders, Float Properties, Css
video, audio Tag, Map Creating
1.20 Diff. between Css2 & Css3
1.21 Css3- Opacity, Box-Shadow, Border- radius, Gradient, Transition, 3
Transform , Animation , Keyframes
1.DESIGN AND DEVELOP WEB
 1.1 History of HTML

 HTML stands for Hypertext Markup Language, and it


is used to build Static Website.

 In 1989,Tim Berners-Lee developed a system which


allow to share documents with each other using
electronic networking methods. This idea is known as
World Wide Web.

4
 In 1992,Berners-Lee & team released the First Version
of HTML known as HTML 1.0 which was finalized in

 In 1994, the second version of HTML was released,


which is known as HTML 2.0.It same as HTML 1.0
specification but added a few new features.
 Dave Raggett introduced a new HTML version known
as HTML 3.0
 The W3C released the HTML 4.0 at the end of 1997.

5
1.2. BASIC HTML TAGS
1. <html> Tag
 It used to give instructs Browser that this is
HTML document.
 Example

<html>
</html>

2. <head> Tag
 It works as a container for<title>,<link>,<style>,
& <script> tags.
6
 Generally <head> tag are used for following
 1. To specify Title of Document that is displayed I the
title bar of Web Page.
 To specify Style sheet for HTML.

 To specify script such as JavaScript in HTML page.

 Example

<html>
<head>This is a heading</head>
</html>

7
3. <title> Tag
 It is used to specify title for web page.
 Example

<html>
<head>
<title>This is document title.</title>
</head>
</html>
4 . <body> Tag
 It is used to Defines the document's body.
 It works as a container for text, hyperlink,
image, font, list etc.
8
Example : <html>
<head>
<title>My First HTML Page.</title>
</head>
<body>
Welcome To My Website
</body>
</html>

9
5. <hr> Tage
 It used to display Horizontal Line on web page.
 Same Attribute of <hr> tage

Attribute purpose
Size It used to give Height of horizontal line.<hr
size=“20”>
Width It used to give Width of horizontal line.<hr
width=“40”>
align It used to give specify alignment of
horizontal line.<hr align=“center”>

10
6. <img> Tag

 It is used to display an image on web page.


 In this tag must have to use src attribute to
display the image.
 Example

<img src=“logo.jpg” alt=“VPMP” width=“100”


height=“200” border=“1”>

11
7. <embed> Tag
 It is used to embed various multimedia objects or
external application.
 In this tag must have to use src attribute to
display the file.
 Example

<embed src=“bgsound.mp3” autostart=“true”


hidden=“true”>

12
8. <bgsound> Tag
 It is used to embed background sound file in web
page.
 In this tag must have to use src attribute to be
embedded within web page.
 Example

<bgsound src=“bgsound.wav” loop=“2”>

13
9. <blink> Tag
 It is used to blink the Text ON & OFF on a web page.
 Example

<blink> New Update </blink>

10. <font> Tag


 It is used to format text.
 Using this tag we can specify font color, size, &
font face for the text.
 Example

<font color=“red” size=“24” face=“Times New


Roman”>
VPMP POLYTECHNIC
14
</font>
11. <center> Tag
 It is used to display center align text on a web
page.
 Example

<center> Weicome To My Website </center>

12.<marquee> Tag
 It is used to display scrolling text on a web page.
 It is scrolled either horizontally or vertically using
<marquee> tag. By default it scroll Horizontally left
to right.
 Example

 <marquee> New Update Available </marquee>


15
13. <a> Anchor Tag
 The <a> Tag is also known as Anchor Tag.
 It is used to create hyperlink in a web page.
Hyperlink is used to redirect user from one
page to another page.
 This Tag uses to href attribute.

 Example
< a href=“vpmp.html”> VPMP polytechnic </a>

16
1.3. Coding Style, Syntax, Working
with Image, Linking a Webpage.

1.3.1 Coding Style


 Following same Coding Style in HTML.
 1. Write all HTML tags in lowercase.

 2 Indent tags & text as per requirements..

 3. Give meaning full name of each HTML element.

 4. Limit length of line up to 120 characters. If the


line contain more than 120 character then wrap
them.

17
1.3.2. Syntax of Coding
 Every programming language having their own syntax
rules. These syntax rules must be followed by developer
for successful execution of code.
 The following have same Syntax Rules of HTML

 1. In each HTML Tag must contain between < and >


symbol to separate them from text.
 2. In HTML closing tag is similar to starting tag but
you have to place / after < symbol.
 3. In HTML tag names are case insensitive

 4. An element may contain other nested elements.

18
 5. In same HTML tags have no need to closing tag.
 6. The comment must include between <!---and --
- > symbol.

 7.The value of attributes may contain between


single or double quotation marks.

 8.
There must be space between tag name & an
attribute name.

19
1.3.3. Working with Image
 HTML provides the facility of working with images.
In HTML the <img> tag is used to display an
image on a web page.
 In src attribute are used to display the image of web
page.
 The general form of <img> tag is

 <img src=“Book.jpg”>

 There no need to close <img> tag.

 Set Width & height of Image:

 By default the <img> tag display the image in its


actual size.
 It is possible to user set height & width of image using
20
height & width attribute.
 For Example
 <img src=“book.jpg” height=“50” width=“60”>

 Set alternate text for Image:

 <img> tag have to use alt attribute.

For Example
<img src=“book.jpg” alt=“Book Image”
height=“50” width=“60” >

 Set Border of Image:


 <img> tag use the border attribute.
21
 For Example
 <img src=“book.jpg” height=“50” width=“60”
border=“2”>

 Set alignment of Image:


 The <img> Tag provide align attribute to specify

alignment of the image on a web page.


 For Example

 <img src=“book.jpg” height=“50” width=“60”


border=“2” align =“center”>

22
 Mark Image to work as a hyperlink
 The <img> tag can be contained between <a> &
</a> tag to work as a hyperlink.

 For Example
<a href=“displaybook.html”>
<img src=“book.jpg” height=“50” width=“60”
border=“2” align =“center”>
</a>

23
1.3.4. Linking a web page

 Hyperlink is used to link one page with other


page.

 In Hyperlink can be created in HTML using <a>


tag. It is also called Anchor Tag.

 The anchor tag <a> provides href attribute to specify


URL or path of a web page.

 For Example
 <a href =“contact.html”> Contact Us</a>
24
1.3.5. List
 List is useful to represent information in
structured way.
 So that user can easily read the information.

 In HTML there are three type of List

 1. Ordered List(ol)

 2. Unordered List(ul)

 3. Definition List(dl)

 1. Create Ordered List(ol)


 Ordered List is used to represent information
in numerical Or alphabetic form.
 The<ol> tag in association with the <li> tag is
25
used to crate ordered list in HTML.
 For Example
 <ol>

 <li> DWPD </li>

 <li> JAVA </li>

 <li> CMTS </li>

 <li> CNS </li>

 </ol>

Output:
1.DWPD
2.JAVA
3.CMTS
4.CNS 26
2. Create Unordered List
 Unordered List is used to represent
information in a bullet form.
 The <ul> Tag in association with the <li> tag is
used to create unordered list in HTML.
 For Example

<ul>
<li> DWPD </li>
<li> JAVA </li>
<li> CMTS </li>
<li> CNS </li>
</ul>
27
Output:
 DWPD

 JAVA

 CMTS

 CNS

28
3. Create Definition List(dl)
 Definition list is useful for representing in
two levels format.
 In two levels format first level contain topic &
second level description of topic.
 In HTML definition list can be used creating
using <dl>, <dt>, & <dd> tag.
 The <dl> tag is used to represent definition
list.
 The <dt> tag is used to represent definition
team.
 The <dd> tag is used to represent definition.

 The<dt> & <dd> tag are contained between


<dl> & </dl> tag. 29
 For Example
<dl>
<dt>HTML
<dd>Hyper Text Markup Language
<dt> PHP
<dd> Hypertext Preprocessor
</dl>
 Output

HTML
Hyper Text Markup Language
PHP
Hypertext Preprocessor
30
1.4. Working with Table (<table>, <th>,
<tr>, <td>)
 The <table> tag is used to create table in
HTML.
 Only <table> tag is not enough to create table.
we have to use <tr>, <th> ,<td> tag in a <table>
tag.

Tag Purpose
<table> Used to define table.
<tr> Used to define row within table
<th> Used to define Table Header
<td> Used to define table cell.
31
For Example
<table border=“1”>
<tr>
<th>Enroll. No. </th>
<th> Name of Student </th>
</tr>
<tr>
<td> 156540307001 </td>
<td> Aakruti </td>
</tr>
</table> Output

Enroll. No. Name of Student


156540307001 Aakruti 32
1.5. Division <div> Tag, IDs & Classes
 1. <div> Tag
 The <div> tag defines a division or a section in
an HTML document.
 The <div> tag is used to group block-elements
to format them with CSS styles.

 For Example

<div style="color:blue">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
33
 Example-1
<div style=“border:2px solid;”>
<h1> section 1</h1>
<p> welcome to our web site. </p>
</div>

34
 Some Attribute of <div> tag
Attribute Purpose
align It Used to specify horizontal alignment for the
contents of <div> tag.

style It used to specify formatting style for the contents


of <div> tag.

id It is used to uniquely identify the division or


section on a web pages.

35
title Title attribute is used to specify
title for the <div> tag.

class The class attribute assign a class


name or a list of class names
separated by spaces to the section
or division on a web page.

36
1.6 SPECIAL CHARACTER
 In HTML some character can not be directly typed
or displayed using keyboard. This character is
known as Special Character.
 HTML entity always begins with & (ampersand)
symbol and ends with ; (semicolon).
 We can directly place HTML entity in source code
where we want to display special character.
 For Example
<p>
&copy; Copyright Reserved
</p>

Output
© Copyright Reserved 37
Special Character Entity Name

© (copyright sign) &copy;


® (registered sign) &reg;
< (less than), &lt;
> (greater than) &gt;
& &amp;

space &nbsp;

 (left arrow) &larr;

38
1.7 DIFFERENCE BETWEEN
HTML 5.0 & 4.0
HTML 5.0 HTML 4.0

1.HTML 5 there are 1.HTML 4 there are no


content specific content specific
elements such as elements such as
header, footer, aside,
header, footer, aside,
article, section etc..
article, section etc..
2.HTML 5specifications 2.HTML 4 specifications
support audio & video does not support audio
Tag. & video tag.
3.HTML 5 is capable of 3. HTML 4 cannot handle
39
handling inaccurate inaccurate syntax.
syntax.
HTML 5 HTML 4

4. HTML 5 does not 4. HTML 4 works with all


work with older version of Browsers.
version of Browser.
5. HTML 5 support date,
datetime, range, 5. HTML 4 does not
number, email,url, support date, datetime,
color, week input range,number,email,url
type tag. ,color, week input type
tag.
6. HTML 5 application
cache, WebSQL 6. HTML 4 Browser cache
database as available can be used as
in client side storage. temporary storage.
40
1.8 HTML 5.0 TAG WITH EXAMPLE
 HTML 5.0 allows the facility of define various
section of web page using built in following tags.
 Structure of HTML 5

1. <header>
2. <nav>
3. <section>
4. <article>
5. <aside>
6. <footer>
41
1. <header> Tag
 The <header> Tag element allows user to define
a section which define header of web page.

 This tag are generally use banner ,logo, title & sub
title of the web site.

 We can use multiple header within a single web


site.
 For Example

<header>
<h1> VPMP POLYTECHNIC</h1>
42
</header>
2. <nav> Tag
 The <nav> element allows user to define a
section that contain set of navigation link.
 The <nav> element is a section containing links to
other documents or to pars within the current
documents.
 For Example

<nav>
<a href=“index.html”> Home </a>
<a href=“loginpage.html”> Log In </a>
<a href=“ registration.html”> Registration </a>
</nav>

43
3. <section> Tag
 The <section> Tag allows user to define
various type of section in a web page.
 It can be header, footer, chapter etc…

 For Example

<section>
<h1>Welcome To My Website. </h1>
</section>

44
4. <article> Tag
 The <article> Tag allows user to define a
section which is independent from the
remaining layout of web page.

Example
<article>
<header> <h1> Programming in PHP </h1>
</header>
<p> Hypertext Preprocessor </p>
<footer> sem 5th C.E. Department </footer>
</article>
45
5. <aside> Tag
 This Tag used to navigation link, latest news ,user login
etc.. Can be placed inside <aside> Tag.
 Example

<aside>
<h3> Latest News </h3>
<marquee direction=“up”> New Programs
Added</marquee>
</aside>

46
6. <footer> Tag
 The <footer> element allows user to define a
section which define footer of web page.

 Example
<footer>
<p align=“center”> copyright &cpy;2016. All
Right Reserved </p>
</footer>

47
1.9 INTRODUCTION TO HTML 5.O FORM
INPUT TYPE ,ELEMENTS & ATTRIBUTES.
 HTML Forms are required when you want to collect
some data from the site visitor.
 The HTML <form> tag is used to create an HTML form
and it has
 following syntax:

<form action="Script URL" method="GET|POST">

</form>

48
1.10. HTML 5.0 FORM INPUT TYPE
1. Color
 The input color type allows user to select color. It
returns Hex value of the selected color.
 Example

 <input type=“color” name=“hexff”>

2. Date
 The date input type allows user to enter or select
date.
 Example

 <input type=“date” name=“BDate”>


49
3. Datetime
 The Datetime input type allows user to enter or select
date & time with time zone.
 For Example

 <input type=“datetime” name=“bdaytime”>

 4. Datetime-Local
 The Datetime input type allows user to enter or select
date & time without time zone.
 For Example

 <input type=“datetime-local” name=“bdaytime”>

50
5. email
 The email input type allows user to enter valid Email
address.
 Example

<input type=“email” name=“email”>

6. month
 The month input type allows user to enter or select a
month of the year.
 Example

 <input type=“month” name=“Month”>

51
7. number
 The number input type allows user to enter a numeric
value.
 Example 1

 <input type=“number” name=“number” />

52
8. range
 The range input type allows user to select numeric
value between specify range.
 Example

<input type=“range” name=“range” min=1 mix=5 />

 9. search
 The search input type allows user to create a text field
using which users can search for various contents of
the web site.
 Example

 <input type=“search” name=“search” />

53
10. tel
 The tel input type allows user to enter a telephone
number.
 Example

 <input type=“tel” name=“M.no.”>

 11. time
 The time input type allows user to enter valid time.
 Example

 <input type=“time” name=“STime”>

54
12. url
 The url input type allows user to enter valid url.
 It does not allow user to submit invalid URL. Valid
URL must starts with http:// .
 Example

 <input type=“url” name=“url”>

13. week
 The week input type allows user to enter or select
week number of the year.
 Example

 <input type=“week” name=“week” >

55
1.11 FORM INPUT TYPE ELEMENTS
 HTML 5 introduces several new form
elements.
 The new form elements introduced By HTML 5 as
given below.

1. <datalist> Element
The <datalist> element allows user to define a list
of options which can be associated with the input
element.
We create a list then the use <option> tag.

56
Example
<html>
<body>
<form action="action_page.php">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
</datalist>
<input type="submit">
</form>
</body>
57
</html>
2. <keygen> Element

 The <keygen> element allows user to define


key generator in the web page.

 he <keygen> tag specifies a key-pair generator


field used for forms.

 When the form is submitted, the private key is


stored locally, and the public key is sent to the
server.

58
Example
<html>
<body>
<form action="action_page.php" method="get">

Username: <input type="text" name="usr_name">

Encryption: <keygen name="security"><br>

<input type="submit“ name=“submit”


value=“submit”>
</form>
</body>
</html>
59
3. <output> Element
 The <output> tag represents the result of a
calculation. (like one performed by a script).
 Example
<html>
<body>
<form oninput="x.value = parseInt(a.value) +
parseInt (b.value) “ >
A: <input type="number" id="a" min="1" max="100“
value="1">
B: <input type="number" id="b" min="1" max="100“
value="1">
C: <output name="x" for="a b"></output>
</form>
</body>
60
</html>
1.12 HTML 5.0 NEW ATTRIBUTE

 New Attribute of Form Type


1 autocomplete
 When autocomplete is on, the browser automatically
complete values based on value that the user has
entered before.
 Example
< form action=“home.html” autocomplete=“on”>

2. novalidate
 The novalidate attribute is used to specify that the data
entered in inpute elements are not validated at the time
of submitting form.
61
 It represent the Boolean value.
Example
<form action=“home.html” novalidate=“false”>
</form>

3.formaction
 The form action attribute is used to specify the filename
or url to which the contents of input element will be
send for processing when user submit form.
 Example

<form action=“home.html” >

62
4. formmethod
 The formmethod attribute is used to specify
HTTP method for sending form data to the file
specified in action attribute of the form element
or formaction attribute of the input element.

 HTTP use 2 method first is GET method & second


is POST method.

 Example
<form method=“POST” action=“home.html” >

63
 New Attribute of Input Type
 1.autocomplete
 When autocomplete is on,the browser automatically
complete values based on value that the user has
entered before.
 Example

<input type=“text” name=“username”


autocomplete=“on”>

2. autofocus
 The autofocus attribute is used to set focus
automatically on input element when web page.
64
Example
 < form action=“home.html” autocomplete=“on”>
User Name: <input type=“text” name=”uname”
autofocus=“true”>
</form>

3. formtarget
 The formtarget attribute is used to specify target
window for the file is open & that is specified in action
attribute of form element or formaction attribute of
input element.

65
 The formtarget attribute can be used only with
submit & input type.

 Example
 < form action=“display.html” autocomplete=“on”>

<input type=“submit” name=“submit”


value=“submit” formaction=“save.html”
formtarget=“_blink”/>
</form>

66
4. Height & width
 The height & width attribute are used to specify
the height & width of an input element whose
type is set of image.
 Example

 <inpute type=“image” src=“book.jpg”


width=“100” height=“100”>

5. List
 The list attribute is used to associate a list of
option with a particular input element.
 The<datalist> tag allows user to create list of
option.
67
Example

<form action=“display.html”>
Select Branch: <input list=“Branch” name=“banch”>
<datalist id=“Branch”>
<option value=“Computer”>
<option value=“Civil”>
<option value=“Mechanical”>
<option value=“Electrical”>
</datalist>
</form>

68
6.Min & Max
 The min & max attribute are used to specify the
minimum & maximum limit for the value to be
entered in an input element.
 Example

 <form action=“display.html”>

<input type=“number” name=“mark” min=“0”


max=“70”>
</form>

7. multiple
 It is used to user insert the multiple value of the
web page.
69
 Its represent the Boolean value.
1.12 HTML 5.0 VIDEO & AUDIO TAG
 HTML 5.0 <video> Tag
 It is used to play a video file in HTML 5.0.

 The video file is support the MP4,ogg,WebM etc...

 The src attribute is compulsory used to this tag.

 Example

<video width="320" height="240" autoplay>


<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

70
 HTML 5.0 <Audio> Tag
 It is used to play a audio file in HTML 5.0.

 The audio file is support the MP3,ogg,wav etc...

 The src attribute is compulsory used to this tag.

 Example

<audio autoplay=“true”>
<source src=“song.mp3" type=“audio/mpeg">
<source src=“theame.ogg" type=“audio/ogg">

</audio>

71
 1.14 Introduction to DHTML/CSS
 DHTML stands for Dynamic Hypertext Markup
language.
 DHTML allows the facility of combining HTML &
CSS(Cascading Style Sheet) & Scripting
Languages.(javascript , vbscript etc..)
 DHTML USE to

 HTML use to Specify actual content of a website


using various tags such as paragraph, table, list,
hyperlink etc…

72
 CSS(Cascading Style Sheet)
 CSS stands for Cascading Style Sheets.
 CSS describes how HTML elements are to be
displayed on screen, paper, or in other media

 Use of CSS
 1. it allows designer to separate HTML content from
their design.
 2. CSS provide Efficiency in Design & Updates.

 3. CSS provides Faster page Downloads.

 4. CSS provides consistency & uniformity.

73
 Syntax of CSS
 Css consist of three part:
 1. selector
 2. Property Name

 3. Value

General Syntax of CSS is


selector
{
property-name: value;
}

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

75
 Type of CSS
 Based on the location of css style there are three
type of CSS available.

 1. Internal CSS/ Embedded CSS


 2. External CSS

 3. Inline CSS

76
1. Internal CSS /Embedded CSS
 An internal style sheet may be used if one single page
has a unique style.
 Internal styles are defined within the <style> element,
inside the <head> section of an HTML page
Example
<html>
<head>
<title>HTML Internal CSS</title>
<style type="text/css">
.red{
color: red;
}
p{
color:green;
}
77
</style>
</head>
<body>
<p class="red">This is red</p>
<p>This is green</p>
</body>
</html>

78
2. External CSS

 With an external style sheet, you can change the look of


an entire website by changing just one file!
 Each page must include a reference to the external style
sheet file inside the <link> element. The <link> element
goes inside the <head> section.

79
Example
 Consider we define a style sheet file style.css which
has following
.red{
color: red;
}
p{
color:green;
}
 These file name is stylesheet1.css

80
<html>
<head>
<title>HTML External CSS</title>
<link href="stylesheet1.css rel="stylesheet"
type="text/css“ >
</head>
<body>
<p class="red">This is red</p>
<p>This is green</p>
</body>
</html>

81
3. Inline CSS
 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.
Example
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">This is red</p>
<p style="color:green;">This is green</p>
82
</body>
</html>
1.16 CSS margin, Padding, Text, Font
Property
1. CSS Margin Property
 The margin property defines the space around an HTML
element.
 he margin specifies a shorthand property for setting the
margin properties in one declaration.
1. The margin-bottom
2. The margin-top
3. The margin-left
4. The margin-right

83
Example
P
{
Margin-top:10px;
Margin-bottom:10px;
Margin-right:10px;
Margin-left:10px;
}
Or
<p style=“margin: 10px, 10px, 10px, 10px”>

84
2. CSS Padding Property
 The padding property allows you to specify how
much space should appear between the content
of an element and its border .
 The Property ofbox using the following
properties −

1. The padding-bottom
2. The padding-top
3. The padding-left

85
4. The padding-right
5. The padding
Example
P
{
Padding-top:10px;
Padding-bottom:10px;
Padding-right:10px;
Padding-left:10px;
}

Or <p style=“padding: 10px, 10px, 10px, 10px”>


86
3. CSS Text Property
 Thischapter teaches you how to manipulate text
using CSS properties. You can set following text
properties of an element −

1. The color
2. The direction
3. The letter-spacing
4. he word-spacing
5. The text-indent
6. The text-align

87
Example
P
{
color:red;
text-align:center;
vertical-align:middle;
letter-spacing: 10px;
}

88
4.CSS Font Property
 This chapter teaches you how to set fonts of a content,
available in an HTML element. You can set following
font properties of an element −

1. The font-family
2. The font-style
3. The font-variant
4. The font-weight
5. The font-size
6. The font

89
Example
p
{
font-style:italic;
font-size:24px;
font-weight:500;
font-variant: small-caps;
}

90
5. CSS Background Property
 This chapter teaches you how to set backgrounds of
various HTML elements. You can set the following
background properties of an element −

1. The background-color
2. The background-image
3. The background-repeat
4. The background-position
5. The background-attachment
6. The background

91
Example
h1
{
Background-color:red;
}

6. CSS Border Property


 The border properties allow you to specify how the
border of the box representing an element should look.
There are three properties of a border you can change:

1. The border-color
2. The border-style
92
3. The border-width
 border using the properties −
1. border-bottom-color
2. border-top-color
3. border-left-color
4. border-right-color
Example
p
{
border:4px solid red;
}

93
7. CSS Height Property
 The height property sets the height of an element.
 The min-height and max-height properties override
height.

1. The max-height property is used to set the


maximum height of an element.
 2. The min-height property is used to set the
minimum height of an element.

94
Example
p{

min-height: 100px;
max-height:500px;
}

8. CSS Width Property


 The width property sets the width of an element.

 The width property does not include padding, borders, or


margins; it sets the width of the area inside the padding,
border, and margin of the element.

95
1. The max-width property is used to set the maximum
width of an element.
2. The min-width property is used to set the minimum
width of an element.
 Example

p{
max-width: 500px;
min-width: 150px;
}

96
8. CSS Float Property
 The float property specifies whether or not a box (an
element) should float.

Value Description

none The element is not floated, and will be


displayed just where it occurs in the text.
This is default
left The element floats to the left

right The element floats the right

97
Example
img
{
float: right;
}

98
CSS Link
 This chapter teaches you how to set different properties
of a hyper link using CSS. You can set following five
state of hyper link
1.Link
2. Visited
3. Hover
4.Active
5.Focus

99
Example
a : link
{
color:red;
}
a : visited
{
color:green;
}
a : hover
{
color:maroon;
} 100
a : active
{
color:blue;
}
a : focus
{
color:yellow;
}

101
1.17 CSS3
 CSS3 is the latest standard for CSS.
 CSS3 is completely backwards-compatible with earlier
versions of CSS.
 CSS3 is collaboration of CSS2 specifications and new
specifications, we can called this collaboration is module.
 Some of the modules are shown below

1. New Selectors
2. New Background & Border Property
3. Gradient Property
4. Box Shadow & Text Shadow Property
5. Transformation
6. Transition 102
7. Animation
1.17.1 Opacity
 The opacity-level describes the transparency-
level, where 1 is not transparent at all, 0.5 is 50%
see-through, and 0 is completely transparent.
 Setting opacity property to 0 indicates that the
element is fully transparent & Setting opacity
property to 1 indicates that the element is fully
opaque.
 Its default value is 1 means fully opaque.

Example-1
h1
{
Opacity : 0.9;
} 103
1.17.2. Box-Shadow
 Box-shadow property is used to apply shadow
effects to the Box.
 Using this property multiple shadow effect can be
applied.
 The general syntax is

box-shadow : insert h-offset v-offset blur spared


color;
Example
h1
{
border : double;
box-shadow : 5px 5px 2 px #88888;
104
}
1.17.3. Border-radius
 The border-radius property is used to add rounded
corners to an element.
 User can specify radius for top left,top right,bottom
right & bottom left corners.
Example
h1
{
border: double;
border-top-left-radius: 12px;
border-top-right-radius: 2px;
border-bottom-right-radius: 12px;
border-bottom-left-radius: 2px;
} 105
1.17.4 Gradient
 Gradients displays the combination of two or
more colors.
 CSS3 supports two type of gradients

1. Linear Gradient
2. Radial Gradient

1. Linear gradients
 Linear gradients are used to arrange two or more
colors in linear formats like top to bottom.
Syntax
background: linear-gradient(direction, color-
stop1, color-stop2, ...);
106
Example
h1
{
Background : linear-gradient(to left, red , blue);
}

107
 Linear Gradient have following Property
 1. Direction
 It indicate the direction of color.
value Perpose
To left Transition takes place from right to left(Horizontally)
To right Transition takes place from left to right(Horizontally)
To top Transition takes place from bottom to top(Vertically)
To bottom Transition takes place from top to bottom(Vertically)

108
2. Angle
 It indicate direction in a terms of degree.
 It represents an angle between a horizontal line & the
gradient line ,going counter – clockwise.

 3. Color-stop
 It represent name of colors between which you
want smooth transition.
 It must use at lease two color.

109
2. Radial Gradient
 A radial gradient is defined by its center.
 To create a radial gradient you must also define at
least two color stops.
 Syntax

 background: radial-gradient(shape
size at position, start-color, ..., last-color);
Example-1
h1
{
Background: radial-gradient(red, yellow, green);
}
110
Example-2
h1
{
Background: radial-gradient(circle closest-side,red,
yellow, green);
}

111
1.17.5 Transform
 This property allows you to rotate, scale, move, skew,
etc., elements.
 The transform property applies a 2D or 3D
transformation to an element.
 CSS support following method for transformation

 1. Translate

 This method is used to move an element horizontally as


well as vertically from its current position.
 Syntax

-webkit-transform : translate(+ or - X-pos,Y-pos)


Translate X: move element Horizontal direction.
Translate Y: move element Vertical direction.
112
2. rotate
 This is used to rotate an element by specify degree either
clock wise or counter clock wise.
 Syntax

-webkit-transform : rotate (+ or --Degree)

+ (positive) value rotate element clock wise


- (negative) value rotate element counter clock wise

113
3. Scale
 This is used to scale an element horizontally as well as
vertically by specific scale factor.
 Syntax

-webkit-transform : scale (X-scale,Y-scale)


 X-scale is used horizontally scale factor.

 Y-scale is used Vertically scale factor.

114
4. Skew
 This is used to turn an element horizontally as well as
vertically by specific angle passed as a parameter.
 Syntax

-webkit-ransform : skew (X-Turn,Y-Turn)


 X-Turn is used element turn X-axis.

 Y-scale used element turn Y-axis.

115
1.17.6 Animation & Keyframe
1.Animation
 CSS3 animations allows animation of most
HTML elements without using JavaScript
,Flash!,GIF images.
 To use CSS3 animation, you must first specify
some keyframes for the animation.
 Syntax
@keyframe animation_name
{
Keyframe_selector
{
CSS style;
} 116

You might also like