Unit - 2 - Hypertext Markup Language & Cascading Style Sheets
DhavalChandarana
672 views
127 slides
Aug 22, 2024
Slide 1 of 127
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
About This Presentation
HTML: HTML page structure, Basic HTML tags like heading, formatting tags paragraph, formatting text, organizing text, list, anchor, images, HTML tables, HTML forms, meta tags, multimedia tags, links, frames, HTML5 tags in relation to validations.
CSS: Introduction to CSS, Basic Syntax and structure ...
Slide Content
Web Development
UNIT - 2
HTML & CSS
UNIT - 2
HTML & CSS
Outline...
>HTML
+ HTML page structure
+ Formatting tags in HTML
* Tables
* Links
+ Images
+ Meta tags
* Frames
* Html form tags
» Media
+ HTMLS tag in relation to validations
>HTML
+ HTML page structure
+ Formatting tags in HTML
* Tables
* Links
+ Images
+ Meta tags
* Frames
* Html form tags
» Media
+ HTMLS tag in relation to validations
Outline...
>CSS
* Need for CSS
* Basic syntax and structure
+ Backgrounds
* Colors and properties
+ Manipulating texts, Fonts
+ Borders and boxes
+ Margins, Padding Lists
*CS52, CSS3
* Animations
+ Tool-Tips
>CSS
* Need for CSS
* Basic syntax and structure
+ Backgrounds
* Colors and properties
+ Manipulating texts, Fonts
+ Borders and boxes
+ Margins, Padding Lists
*CS52, CSS3
* Animations
+ Tool-Tips
Outline...
>CSS
* Style images
+ Variables
* Flex Box
+ Media Queries
* Wildcard Selectors (*, * and $) in CSS
* Working with Gradients
* Pseudo Class, Pseudo elements
* CSS variables
>CSS
* Style images
+ Variables
* Flex Box
+ Media Queries
* Wildcard Selectors (*, * and $) in CSS
* Working with Gradients
* Pseudo Class, Pseudo elements
* CSS variables
HTML page structure
+ HTML is the standard markup language for creating Web pages.
* What is HTML?
+ HTML stands for Hyper Text Markup Language
* HTMLis the standard markup language for creating Web pages
+ HTML describes the structure of a Web page
+ HTML consists of a series of elements
+ HTML elements tell the browser how to display the content
+ HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.
+ HTML is the standard markup language for creating Web pages.
* What is HTML?
+ HTML stands for Hyper Text Markup Language
* HTMLis the standard markup language for creating Web pages
+ HTML describes the structure of a Web page
+ HTML consists of a series of elements
+ HTML elements tell the browser how to display the content
+ HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.
HTML page structure
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML page structure
* The <!DOCTYPE html> declaration defines that this document is an
HTMLS document
* The <html> element is the root element of an HTML page
* The <head> element contains meta information about the HTML page
* The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
* The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
* The <h1> element defines a large heading
* The <p1> element defines a paragraph
* The <!DOCTYPE html> declaration defines that this document is an
HTMLS document
* The <html> element is the root element of an HTML page
* The <head> element contains meta information about the HTML page
* The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
* The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
* The <h1> element defines a large heading
* The <p1> element defines a paragraph
HTML page structure
+ What is an HTML Element?
+ An HTML element is defined by a start tag, some content, and an end
tag:
<tagname> Content goes here... </tagname>
* The HTML element is everything from the start tag to the end tag:
+ Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an
end tag!
+ What is an HTML Element?
+ An HTML element is defined by a start tag, some content, and an end
tag:
<tagname> Content goes here... </tagname>
* The HTML element is everything from the start tag to the end tag:
+ Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an
end tag!
HTML page structure
‘<html>
<head>
<title>Page title</title>
</head>
<body>
<hi>This is a heading</hi>
<p> This is a paragraph.</p>
<p> This is another paragraph.</p>
</body>
</html>
‘<html>
<head>
<title>Page title</title>
</head>
<body>
<hi>This is a heading</hi>
<p> This is a paragraph.</p>
<p> This is another paragraph.</p>
</body>
</html>
Element Name | Desc:
<b>
<strong>
<i>
<em>
<mark>
<u>
<tb>
<strike>
<sup>
<sub>
<del>
<ins>
<big>
<small>
Formatting Tags in HTML
ion
This is a physical tag, which is used to bold the text written between it.
This is a logical tag, which tells the browser that the text is important.
This is a physical tag which is used to make text italic.
This is a logical tag which is used to display content in italic.
This tag is used to highlight text.
This tag is used to underline text written between it.
This tag is used to appear a text in teletype. (not supported in HTML5)
This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)
It displays the content slightly above the normal line.
It displays the content slightly below the normal line.
This tag is used to display the deleted content.
This tag displays the content which is added
This tag is used to increase the font size by one conventional unit.
This tag is used to decrease the font size by one unit from base font size.
<b>
<strong>
<i>
<em>
<mark>
<u>
<tb>
<strike>
<sup>
<sub>
<del>
<ins>
<big>
<small>
Formatting Tags in HTML
ion
This is a physical tag, which is used to bold the text written between it.
This is a logical tag, which tells the browser that the text is important.
This is a physical tag which is used to make text italic.
This is a logical tag which is used to display content in italic.
This tag is used to highlight text.
This tag is used to underline text written between it.
This tag is used to appear a text in teletype. (not supported in HTML5)
This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5)
It displays the content slightly above the normal line.
It displays the content slightly below the normal line.
This tag is used to display the deleted content.
This tag displays the content which is added
This tag is used to increase the font size by one conventional unit.
This tag is used to decrease the font size by one unit from base font size.
Fonts
= The <font> tag specifies the font face, font size, and color of text.
= The <font> tag is not supported in HTMLS.
<font color="red" size="2" face="Times Roman">
de ; EY oo ma. $
This is the text of line one </font> [A ı vu
© | © file //C/Users/admin/Desktop/Demo.html
Line two contains this text </font>
<font color="#FF9933" size="6" face="Courier“>
The third line has this additional text </font>
= The <font> tag specifies the font face, font size, and color of text.
= The <font> tag is not supported in HTMLS.
<font color="red" size="2" face="Times Roman">
de ; EY oo ma. $
This is the text of line one </font> [A ı vu
© | © file //C/Users/admin/Desktop/Demo.html
Line two contains this text </font>
<font color="#FF9933" size="6" face="Courier“>
The third line has this additional text </font>
List
* HTML offers web authors three ways for specifying lists of
information. All lists must contain one or more list elements.
* <ul> - An unordered list. This will list items using plain bullets.
+ <ol> - An ordered list. This will use different schemes of numbers to
list your items.
+ <dl> - A definition list. This arranges your items in the same way as
they are arranged in a dictionary.
* HTML offers web authors three ways for specifying lists of
information. All lists must contain one or more list elements.
* <ul> - An unordered list. This will list items using plain bullets.
+ <ol> - An ordered list. This will use different schemes of numbers to
list your items.
+ <dl> - A definition list. This arranges your items in the same way as
they are arranged in a dictionary.
Unordered Lists
* An unordered list is a collection of related items that have no special order
or sequence. This list is created by using HTML <ul> tag. Each item in the
list is marked with a bullet.
<ul>
Types:
<li> One </li> yp
<li> Two </li>
Type = disc (default)
<ul type="circle"> Type = circle
<li> Three </li> Type = square
<li> Four </li>
<ultype="square"> Output
<li> Five </li> | Fone 7
<li> Six </li> lia |
</ul> | ae Five |
|
= Six
</ul>
¡Pr A
</ul>
* An unordered list is a collection of related items that have no special order
or sequence. This list is created by using HTML <ul> tag. Each item in the
list is marked with a bullet.
<ul>
Types:
<li> One </li> yp
<li> Two </li>
Type = disc (default)
<ul type="circle"> Type = circle
<li> Three </li> Type = square
<li> Four </li>
<ultype="square"> Output
<li> Five </li> | Fone 7
<li> Six </li> lia |
</ul> | ae Five |
|
= Six
</ul>
¡Pr A
</ul>
Ordered List
* If you are required to put your items in a numbered list instead of bulleted,
then HTML ordered list will be used. This list is created by using <ol> tag.
The numbering starts at one and is incremented by one for each successive
ordered list element tagged with <li>.
<ol>
<li> Item one </li>
<li> Item two </li>
<ol type="I" >
<li> Sublist item one </li>
<li> Sublist item two </li>
<ol type="i">
<li> Sub-sub list item one </li>
<li> Sub-sub list item two </li>
</ol>
</ol>
</ol>
Types:
Type = 1 (default)
Type=a
Type=A
Type =!
Type =i
Output
1. Item one |
| "ae
L Sublist item one |
| IL Sublist item two
i. Sub-sub list item one |
LL i. Sub-sub list tem two y
* If you are required to put your items in a numbered list instead of bulleted,
then HTML ordered list will be used. This list is created by using <ol> tag.
The numbering starts at one and is incremented by one for each successive
ordered list element tagged with <li>.
<ol>
<li> Item one </li>
<li> Item two </li>
<ol type="I" >
<li> Sublist item one </li>
<li> Sublist item two </li>
<ol type="i">
<li> Sub-sub list item one </li>
<li> Sub-sub list item two </li>
</ol>
</ol>
</ol>
Types:
Type = 1 (default)
Type=a
Type=A
Type =!
Type =i
Output
1. Item one |
| "ae
L Sublist item one |
| IL Sublist item two
i. Sub-sub list item one |
LL i. Sub-sub list tem two y
Definition Lists
+ HTML and XHTML supports a list style which is called definition lists
where entries are listed like in a dictionary or encyclopedia. The
definition list is the ideal way to present a glossary, list of terms, or
other name/value list.
* Definition List makes use of following three tags.
* <dl> - Defines the start of the list
+ <dt> — A term
+ <dd> - Term definition
+ </dl> - Defines the end of the list
+ HTML and XHTML supports a list style which is called definition lists
where entries are listed like in a dictionary or encyclopedia. The
definition list is the ideal way to present a glossary, list of terms, or
other name/value list.
* Definition List makes use of following three tags.
* <dl> - Defines the start of the list
+ <dt> — A term
+ <dd> - Term definition
+ </dl> - Defines the end of the list
Definition Lists
<!DOCTYPE html>
<html>
<head>
HM,
“This sands for Hyper Tex Mashup Language
rTP
<title>HTML Definition List</title> |,
Shea “This wand foc Hyper Test Transfer Protocol
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
HM,
“This sands for Hyper Tex Mashup Language
rTP
<title>HTML Definition List</title> |,
Shea “This wand foc Hyper Test Transfer Protocol
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>
Tables
* The HTML tables allow web authors to arrange data like text, images,
links, other tables, etc. into rows and columns of cells.
* The HTML tables are created using the <table> tag in which the <tr>
tag is used to create table rows and <td> tag is used to create data
cells.
* The elements under <td> are regular and left aligned by default.
* Table Heading
* Table heading can be defined using <th> tag. This tag will be put to
replace <td> tag, which is used to represent actual data cell.
+ Headings, which are defined in <th> tag are centered and bold by
default.
* The HTML tables allow web authors to arrange data like text, images,
links, other tables, etc. into rows and columns of cells.
* The HTML tables are created using the <table> tag in which the <tr>
tag is used to create table rows and <td> tag is used to create data
cells.
* The elements under <td> are regular and left aligned by default.
* Table Heading
* Table heading can be defined using <th> tag. This tag will be put to
replace <td> tag, which is used to represent actual data cell.
+ Headings, which are defined in <th> tag are centered and bold by
default.
Tables
* Cellpadding and Cellspacing Attributes
* There are two attributes called cellpadding and cellspacing which you
will use to adjust the white space in your table cells.
* The cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the
content within a cell.
* Colspan and Rowspan Attributes
+ You will use colspan attribute if you want to merge two or more
columns into a single column.
« Similar way you will use rowspan if you want to merge two or more
rows.
* Cellpadding and Cellspacing Attributes
* There are two attributes called cellpadding and cellspacing which you
will use to adjust the white space in your table cells.
* The cellspacing attribute defines space between table cells, while
cellpadding represents the distance between cell borders and the
content within a cell.
* Colspan and Rowspan Attributes
+ You will use colspan attribute if you want to merge two or more
columns into a single column.
« Similar way you will use rowspan if you want to merge two or more
rows.
Tables
* Tables Backgrounds
* bgcolor attribute - You can set background color for whole table or
just for one cell.
* background attribute - You can set background image for whole table
or just for one cell.
* bordercolor attribute - You can also set border color.
* Table Height and Width
*You can set a table width and height using width and height
attributes.
* You can specify table width or height in terms of pixels or in terms of
percentage of available screen area.
* Tables Backgrounds
* bgcolor attribute - You can set background color for whole table or
just for one cell.
* background attribute - You can set background image for whole table
or just for one cell.
* bordercolor attribute - You can also set border color.
* Table Height and Width
*You can set a table width and height using width and height
attributes.
* You can specify table width or height in terms of pixels or in terms of
percentage of available screen area.
Tables
* Table Caption
* The caption tag will serve as a title or explanation for the table and it
shows up at the top of the table.
* Table Header, Body, and Footer
* Tables can be divided into three portions - a header, a body, and a
foot.
+ <thead> - to create a separate table header.
* <tbody> - to indicate the main body of the table.
* <tfoot> - to create a separate table footer.
» A table may contain several <tbody> elements to indicate different
pages or groups of data. But it is notable that <thead> and <tfoot>
tags should appear before <tbody>
* Table Caption
* The caption tag will serve as a title or explanation for the table and it
shows up at the top of the table.
* Table Header, Body, and Footer
* Tables can be divided into three portions - a header, a body, and a
foot.
+ <thead> - to create a separate table header.
* <tbody> - to indicate the main body of the table.
* <tfoot> - to create a separate table footer.
» A table may contain several <tbody> elements to indicate different
pages or groups of data. But it is notable that <thead> and <tfoot>
tags should appear before <tbody>
Tables
+ Valid for the table row:
+ align -- left, center, right
+ valign -- top, middle, bottom
+ bgcolor -- background color
center" width="300" height='
="left" valign="top" bgcolor=
<td> One</td>
<td> Two</td>
</tr>
<tr align="center" valign="middle" bgcolor="lightblue">
<td> Three</td>
<td> Four</td>
</tr>
<tr align="right" valign="bottom" bgcolor="yellow">
<td> Five</td>
<td> Six</td>
</tr>
</table>
200">
red">
+ Valid for the table row:
+ align -- left, center, right
+ valign -- top, middle, bottom
+ bgcolor -- background color
center" width="300" height='
="left" valign="top" bgcolor=
<td> One</td>
<td> Two</td>
</tr>
<tr align="center" valign="middle" bgcolor="lightblue">
<td> Three</td>
<td> Four</td>
</tr>
<tr align="right" valign="bottom" bgcolor="yellow">
<td> Five</td>
<td> Six</td>
</tr>
</table>
200">
red">
Link
* A webpage can contain various links that take you directly to other
pages and even specific parts of a given page. These links are known
as hyperlinks.
* Hyperlinks allow visitors to navigate between Web sites by clicking on
words, phrases, and images.
« A link is specified using HTML tag <a>. This tag is called anchor
tag and anything between the opening <a> tag and the closing </a>
tag becomes part of the link and a user can click that part to reach to
the linked document.
* When you move the mouse over a link, the mouse arrow will turn
into a little hand.
<a href = "Document URL" ... attributes-list>Link Text</a>
* A webpage can contain various links that take you directly to other
pages and even specific parts of a given page. These links are known
as hyperlinks.
* Hyperlinks allow visitors to navigate between Web sites by clicking on
words, phrases, and images.
« A link is specified using HTML tag <a>. This tag is called anchor
tag and anything between the opening <a> tag and the closing </a>
tag becomes part of the link and a user can click that part to reach to
the linked document.
* When you move the mouse over a link, the mouse arrow will turn
into a little hand.
<a href = "Document URL" ... attributes-list>Link Text</a>
Link
* The target Attribute
* This attribute is used to specify the location where linked document is
opened.
Sr.No Option & Description
1 _blank Opens the linked document in a new window or tab.
2 _self Opens the linked document in the same frame.
3 _parent Opens the linked document in the parent frame.
4 _top Opens the linked document in the full body of the window.
5 Targetframe Opens the linked document in a named targetframe.
* The target Attribute
* This attribute is used to specify the location where linked document is
opened.
Sr.No Option & Description
1 _blank Opens the linked document in a new window or tab.
2 _self Opens the linked document in the same frame.
3 _parent Opens the linked document in the parent frame.
4 _top Opens the linked document in the full body of the window.
5 Targetframe Opens the linked document in a named targetframe.
Link
* Linking to a Page Section
* You can create a link to a particular section of a given webpage by
using name/id/title attribute. This is a two-step process.
« First create a link to the place where you want to reach with-in a
webpage and name it using <a...> tag as follows
<h1>HTML Text Links <a name = "top"></a></h1>
* Second step is to create a hyperlink to link the document and place
where you want to reach -
<a href ="/html/html_text_links.htm#top">Go to the Top</a>
* Linking to a Page Section
* You can create a link to a particular section of a given webpage by
using name/id/title attribute. This is a two-step process.
« First create a link to the place where you want to reach with-in a
webpage and name it using <a...> tag as follows
<h1>HTML Text Links <a name = "top"></a></h1>
* Second step is to create a hyperlink to link the document and place
where you want to reach -
<a href ="/html/html_text_links.htm#top">Go to the Top</a>
Link
* Setting Link Colors
+ You can set colors of your links, active links and visited links using link, alink
and vlink attributes of <body> tag.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body alink = "#544250" link = "#040404" vlink = "#F40633">
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>
</html>
* Setting Link Colors
+ You can set colors of your links, active links and visited links using link, alink
and vlink attributes of <body> tag.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body alink = "#544250" link = "#040404" vlink = "#F40633">
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>
</html>
Link
* A webpage can contain various links that take you directly to other
pages and even specific parts of a given page. These links are known
as hyperlinks.
* Hyperlinks allow visitors to navigate between Web sites by clicking on
words, phrases, and images.
« A link is specified using HTML tag <a>. This tag is called anchor
tag and anything between the opening <a> tag and the closing </a>
tag becomes part of the link and a user can click that part to reach to
the linked document.
* When you move the mouse over a link, the mouse arrow will turn
into a little hand.
<a href = "Document URL" ... attributes-list>Link Text</a>
* A webpage can contain various links that take you directly to other
pages and even specific parts of a given page. These links are known
as hyperlinks.
* Hyperlinks allow visitors to navigate between Web sites by clicking on
words, phrases, and images.
« A link is specified using HTML tag <a>. This tag is called anchor
tag and anything between the opening <a> tag and the closing </a>
tag becomes part of the link and a user can click that part to reach to
the linked document.
* When you move the mouse over a link, the mouse arrow will turn
into a little hand.
<a href = "Document URL" ... attributes-list>Link Text</a>
Images
+ Images are very important to beautify as well as to depict many
complex concepts in simple way on your web page.
* Insert Image
* You can insert any image in your web page by using <img> tag.
<img src = "Image URL" alt=" " ... attributes-list/>
* The <img> tag is an empty tag, which means that, it can contain only
list of attributes and it has no closing tag.
* You can use PNG, JPEG or GIF image file based on your comfort but
make sure you specify correct image file name in src attribute. Image
name is always case sensitive.
+ The alt attribute is a mandatory attribute which specifies an alternate
text for an image, if the image cannot be displayed.
+ Images are very important to beautify as well as to depict many
complex concepts in simple way on your web page.
* Insert Image
* You can insert any image in your web page by using <img> tag.
<img src = "Image URL" alt=" " ... attributes-list/>
* The <img> tag is an empty tag, which means that, it can contain only
list of attributes and it has no closing tag.
* You can use PNG, JPEG or GIF image file based on your comfort but
make sure you specify correct image file name in src attribute. Image
name is always case sensitive.
+ The alt attribute is a mandatory attribute which specifies an alternate
text for an image, if the image cannot be displayed.
Images
* Set Image Width/Height
+ You can set image width and height based on your requirement
using width and height attributes.
* You can specify width and height of the image in terms of either pixels
or percentage of its actual size.
<img src = "test.png" alt = "Test Image" width = "150" height = "100"/>
* Set Image Border
* By default, image will have a border around it, you can specify border
thickness in terms of pixels using border attribute. A thickness of O
means, no border around the picture.
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
* Set Image Width/Height
+ You can set image width and height based on your requirement
using width and height attributes.
* You can specify width and height of the image in terms of either pixels
or percentage of its actual size.
<img src = "test.png" alt = "Test Image" width = "150" height = "100"/>
* Set Image Border
* By default, image will have a border around it, you can specify border
thickness in terms of pixels using border attribute. A thickness of O
means, no border around the picture.
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
Images
* Set Image Alignment
« By default, image will align at the left side of the page, but you can
use align attribute to set it in the center or right.
<img src = "test.png" alt = "Test Image" border = "3" align = "right"/>
* Set Image Alignment
« By default, image will align at the left side of the page, but you can
use align attribute to set it in the center or right.
<img src = "test.png" alt = "Test Image" border = "3" align = "right"/>
Meta Tags
+ The META elements can be used to include name/value pairs
describing properties of the HTML document, such as author, expiry
date, a list of keywords, document author etc.
* The <meta> tag is used to provide such additional information. This
tag is an empty element and so does not have a closing tag but it
carries information within its attributes.
* You can include one or more meta tags in your document based on
what information you want to keep in your document but in general,
meta tags do not impact physical appearance of the document so
from appearance point of view, it does not matter if you include them
or not.
+ The META elements can be used to include name/value pairs
describing properties of the HTML document, such as author, expiry
date, a list of keywords, document author etc.
* The <meta> tag is used to provide such additional information. This
tag is an empty element and so does not have a closing tag but it
carries information within its attributes.
* You can include one or more meta tags in your document based on
what information you want to keep in your document but in general,
meta tags do not impact physical appearance of the document so
from appearance point of view, it does not matter if you include them
or not.
Meta Tags
* Specifying Keywords
* You can use <meta> tag to specify important keywords related to the
document and later these keywords are used by the search engines
while indexing your webpage for searching purpose.
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
* Document Description
» You can use <meta> tag to give a short description about the
document. This again can be used by various search engines while
indexing your webpage for searching purpose.
<meta name = "description" content = "Learning about Meta Tags." />
* Specifying Keywords
* You can use <meta> tag to specify important keywords related to the
document and later these keywords are used by the search engines
while indexing your webpage for searching purpose.
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
* Document Description
» You can use <meta> tag to give a short description about the
document. This again can be used by various search engines while
indexing your webpage for searching purpose.
<meta name = "description" content = "Learning about Meta Tags." />
Meta Tags
* Document Revision Date
* You can use <meta> tag to give information about when last time the
document was updated. This information can be used by various web
browsers while refreshing your webpage.
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
* Document Refreshing
+ A <meta> tag can be used to specify a duration after which your web
page will keep refreshing automatically.
<meta http-equiv = "refresh" content = "5" />
* Document Revision Date
* You can use <meta> tag to give information about when last time the
document was updated. This information can be used by various web
browsers while refreshing your webpage.
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
* Document Refreshing
+ A <meta> tag can be used to specify a duration after which your web
page will keep refreshing automatically.
<meta http-equiv = "refresh" content = "5" />
Meta Tags
* Page Redirection
* You can use <meta> tag to redirect your page to any other webpage.
You can also specify a duration if you want to redirect the page after a
certain number of seconds.
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
* Setting Cookies
* Cookies are data, stored in small text files on your computer and it is
exchanged between web browser and web server to keep track of
various information based on your web application need.
* You can use <meta> tag to store cookies on client side and later this
information can be used by the Web Server to track a site visitor.
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 15-Aug-
23 23:59:59 GMT;" />
* Page Redirection
* You can use <meta> tag to redirect your page to any other webpage.
You can also specify a duration if you want to redirect the page after a
certain number of seconds.
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
* Setting Cookies
* Cookies are data, stored in small text files on your computer and it is
exchanged between web browser and web server to keep track of
various information based on your web application need.
* You can use <meta> tag to store cookies on client side and later this
information can be used by the Web Server to track a site visitor.
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 15-Aug-
23 23:59:59 GMT;" />
Meta Tags
* Setting Author Name
* You can set an author name in a web page using meta tag.
<meta name = "author" content = “abc" />
* Specify Character Set
+ You can use <meta> tag to specify character set used within the
webpage.
« By default, Web servers and Web browsers use ISO-8859-1 (Latin1)
encoding to process Web pages. Following is an example to set UTF-8
encoding -
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
* Setting Author Name
* You can set an author name in a web page using meta tag.
<meta name = "author" content = “abc" />
* Specify Character Set
+ You can use <meta> tag to specify character set used within the
webpage.
« By default, Web servers and Web browsers use ISO-8859-1 (Latin1)
encoding to process Web pages. Following is an example to set UTF-8
encoding -
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
Frames
* HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document.
* A collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are
organized: into rows and columns.
* To use frames on a page we use <frameset> tag instead of <body>
tag. The <frameset> tag defines, how to divide the window into
frames.
* The rows attribute of <frameset> tag defines horizontal frames and
cols attribute defines vertical frames.
* HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document.
* A collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are
organized: into rows and columns.
* To use frames on a page we use <frameset> tag instead of <body>
tag. The <frameset> tag defines, how to divide the window into
frames.
* The rows attribute of <frameset> tag defines horizontal frames and
cols attribute defines vertical frames.
Frames
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%"> | <frameset cols ="25%,50%,25%">
<frame name = "top" src ="/html/top_frame.htm" />
<frame name = "main" sre = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%"> | <frameset cols ="25%,50%,25%">
<frame name = "top" src ="/html/top_frame.htm" />
<frame name = "main" sre = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>
Frames
* border This attribute specifies the width of the border of each frame
in pixels. For example, border = "5". A value of zero means no border.
* frameborder This attribute specifies whether a three-dimensional
border should be displayed between frames. This attribute takes
value either 1 (yes) or O (no). For example frameborder = "0" specifies
no border.
* framespacing This attribute specifies the amount of space between
frames in a frameset. This can take any integer value. For example
framespacing = "10" means there should be 10 pixels spacing
between each frames.
* border This attribute specifies the width of the border of each frame
in pixels. For example, border = "5". A value of zero means no border.
* frameborder This attribute specifies whether a three-dimensional
border should be displayed between frames. This attribute takes
value either 1 (yes) or O (no). For example frameborder = "0" specifies
no border.
* framespacing This attribute specifies the amount of space between
frames in a frameset. This can take any integer value. For example
framespacing = "10" means there should be 10 pixels spacing
between each frames.
Frames
* src This attribute is used to give the file name that should be loaded
in the frame. Its value can be any URL. For example, src =
"/html/top_frame.htm" will load an HTML file available in html
directory.
* name This attribute allows you to give a name to a frame. It is used to
indicate which frame a document should be loaded into.
* frameborder This attribute specifies whether or not the borders of
that frame are shown; it overrides the value given in the frameborder
attribute on the <frameset> tag if one is given, and this can take
values either 1 (yes) or 0 (no).
* marginwidth This attribute allows you to specify the width of the
space between the left and right of the frame's borders and the
frame's content. The value is given in pixels. For example marginwidth
= "19"
* src This attribute is used to give the file name that should be loaded
in the frame. Its value can be any URL. For example, src =
"/html/top_frame.htm" will load an HTML file available in html
directory.
* name This attribute allows you to give a name to a frame. It is used to
indicate which frame a document should be loaded into.
* frameborder This attribute specifies whether or not the borders of
that frame are shown; it overrides the value given in the frameborder
attribute on the <frameset> tag if one is given, and this can take
values either 1 (yes) or 0 (no).
* marginwidth This attribute allows you to specify the width of the
space between the left and right of the frame's borders and the
frame's content. The value is given in pixels. For example marginwidth
= "19"
Frames
» marginheight This attribute allows you to specify the height of the
space between the top and bottom of the frame's borders and its
contents. The value is given in pixels. For example marginheight =
"10",
noresize By default, you can resize any frame by clicking and dragging
on the borders of a frame. The noresize attribute prevents a user
from being able to resize the frame. For example noresize =
"noresize".
scrolling This attribute controls the appearance of the scrollbars that
on
appear on the frame. This takes values either "yes", "no" or "auto".
For example scrolling = "no" means it should not have scroll bars.
* longdesc This attribute allows you to provide a link to another page
containing a long description of the contents of the frame. For
example longdesc = "framedescription.htm"
» marginheight This attribute allows you to specify the height of the
space between the top and bottom of the frame's borders and its
contents. The value is given in pixels. For example marginheight =
"10",
noresize By default, you can resize any frame by clicking and dragging
on the borders of a frame. The noresize attribute prevents a user
from being able to resize the frame. For example noresize =
"noresize".
scrolling This attribute controls the appearance of the scrollbars that
on
appear on the frame. This takes values either "yes", "no" or "auto".
For example scrolling = "no" means it should not have scroll bars.
* longdesc This attribute allows you to provide a link to another page
containing a long description of the contents of the frame. For
example longdesc = "framedescription.htm"
Form
* The HTML <form> tag is used for creating a form for user input. A
form can contain textfields, checkboxes, radio-buttons and more.
Forms are used to pass user-data to a specified URL.
Value
accept MIME_type Specifies a comma-separated list of content types that the server accepts.
accept-charset charset list Specifies a list of character encodings that the server accepts. The default
value is "unknown".
action URL Specifies a URI/URL of the back-end script that will process the form
autocomplete on/off Specifies whether form should have autocomplete on or off
enctype mimetypes The mime type used to encode the content of the form.
method get/post/request Specifies the HTTP method to use when the form is submitted.
name form name Defines a unique name for the form.
target _blank/_self Target to open the given URL.
_parent/_top
* The HTML <form> tag is used for creating a form for user input. A
form can contain textfields, checkboxes, radio-buttons and more.
Forms are used to pass user-data to a specified URL.
Value
accept MIME_type Specifies a comma-separated list of content types that the server accepts.
accept-charset charset list Specifies a list of character encodings that the server accepts. The default
value is "unknown".
action URL Specifies a URI/URL of the back-end script that will process the form
autocomplete on/off Specifies whether form should have autocomplete on or off
enctype mimetypes The mime type used to encode the content of the form.
method get/post/request Specifies the HTTP method to use when the form is submitted.
name form name Defines a unique name for the form.
target _blank/_self Target to open the given URL.
_parent/_top
HTML input Tag
* In HTML, the input field can be specified using where a user can enter
data. The input tag is used within <form> element to declare input
controls that allow users to input data.
+ An input field can be of various types depending upon the attribute
type. The Input tag is an empty element which only contains
attributes.
+ Text field
+ Example: <input type=“text” name=“inputname”/> éhaval ]
* Password field
* In HTML, the input field can be specified using where a user can enter
data. The input tag is used within <form> element to declare input
controls that allow users to input data.
+ An input field can be of various types depending upon the attribute
type. The Input tag is an empty element which only contains
attributes.
+ Text field
+ Example: <input type=“text” name=“inputname”/> éhaval ]
* Password field
HTML input Tag
* Radio buttons
+ Example:
<input type="radio" name="gender"> Male ® Male © Female
<input type="radio" name="gender"> Female
* Check boxes
+ Example:
<input type="checkbox" name="Roll1"> Roll No 1 <br/> ee
<input type="checkbox" name="Roll2"> Roll No 2 <br/> Roll No2
Roll No 3
<input type="checkbox" name="Roll3"> Roll No 3 <br/>
* Radio buttons
+ Example:
<input type="radio" name="gender"> Male ® Male © Female
<input type="radio" name="gender"> Female
* Check boxes
+ Example:
<input type="checkbox" name="Roll1"> Roll No 1 <br/> ee
<input type="checkbox" name="Roll2"> Roll No 2 <br/> Roll No2
Roll No 3
<input type="checkbox" name="Roll3"> Roll No 3 <br/>
HTML input Tag
* Dropdown list
+ <select> tag is used to create a drop-down list in HTML.
* <option> tags inside the <select> tag define the available options in the list.
+ Example:
<select>
<option value=“1”>Rajkot</option> ES
<option value="2">Ahemdabad</option> Ahemdabad
Qn, gi Surat
<option value="3">Surat</option>
</select>
+ Example (multiple select):
<select multiple="multiple"> =
<option value="1”>Rajkot</option> ‘Ahemdabad
<option value="2">Ahemdabad</option> Sure ll
<option value="3”>Surat</option>
</select>
* Dropdown list
+ <select> tag is used to create a drop-down list in HTML.
* <option> tags inside the <select> tag define the available options in the list.
+ Example:
<select>
<option value=“1”>Rajkot</option> ES
<option value="2">Ahemdabad</option> Ahemdabad
Qn, gi Surat
<option value="3">Surat</option>
</select>
+ Example (multiple select):
<select multiple="multiple"> =
<option value="1”>Rajkot</option> ‘Ahemdabad
<option value="2">Ahemdabad</option> Sure ll
<option value="3”>Surat</option>
</select>
HTML input Tag
* Text area
7 AT GMIT Institute of -
+ <textarea> tag defines a multi-line text Engineering & Technology is a
A leading institute offering
input control. lundergraduate, graduate and
|postgraduate programs in
+ Example: engineering. GMIT is
ah a Located in peaceful and E
<textarea rows="8” cols="30”> sylvan surroundings, about 19 /
GMIT Institute of Engineering & Technology is a leading institute ....
</textarea>
+ Submit Button
* Submit button is used to submit the data
to the form action url.
Add City
+ Example:
<input type=“submit” value=“Add City”>
* Text area
7 AT GMIT Institute of -
+ <textarea> tag defines a multi-line text Engineering & Technology is a
A leading institute offering
input control. lundergraduate, graduate and
|postgraduate programs in
+ Example: engineering. GMIT is
ah a Located in peaceful and E
<textarea rows="8” cols="30”> sylvan surroundings, about 19 /
GMIT Institute of Engineering & Technology is a leading institute ....
</textarea>
+ Submit Button
* Submit button is used to submit the data
to the form action url.
Add City
+ Example:
<input type=“submit” value=“Add City”>
Media
+ HTMLS introduced 5 most popular media element tags i.e. <audio>,
<video>, <source>, <embed>, <track>. This media element tags changed
the entire development using HTML.
* An input field can be of various types depending upon the attribute type.
The Input tag is an empty element which only contains attributes.
* <audio>: It is an inline element that is used to embed sound files into a
web page.
+ <video>: It is used to embed video files into a web page.
+ <source>: It is used to attach multimedia files like audio, video, and
pictures.
+ <embed>: It is used for embedding external applications which are
generally multimedia content like audio or video into an HTML document.
+ <track>: It specifies text tracks for media components audio and video.
+ HTMLS introduced 5 most popular media element tags i.e. <audio>,
<video>, <source>, <embed>, <track>. This media element tags changed
the entire development using HTML.
* An input field can be of various types depending upon the attribute type.
The Input tag is an empty element which only contains attributes.
* <audio>: It is an inline element that is used to embed sound files into a
web page.
+ <video>: It is used to embed video files into a web page.
+ <source>: It is used to attach multimedia files like audio, video, and
pictures.
+ <embed>: It is used for embedding external applications which are
generally multimedia content like audio or video into an HTML document.
+ <track>: It specifies text tracks for media components audio and video.
HTMLS - Input Validation
* HTML input validation is done automatically by the browser based on
special attributes on the input element. It could partially or
completely replace JavaScript input validation.
* The validation only occurs when attempting to submit the form, so all
restricted inputs must be inside a form in order for validation to
occur.
* Required
+ Use the required attribute to indicate that a field must be completed
in order to pass validation.
<input required>
* HTML input validation is done automatically by the browser based on
special attributes on the input element. It could partially or
completely replace JavaScript input validation.
* The validation only occurs when attempting to submit the form, so all
restricted inputs must be inside a form in order for validation to
occur.
* Required
+ Use the required attribute to indicate that a field must be completed
in order to pass validation.
<input required>
HTMLS - Input Validation
* Minimum / Maximum Length
+ Use the minimum and maximum Length attributes to indicate length
requirements. Most browsers will prevent the user from typing more
than max characters into the box, preventing them from making their
entry invalid even before they attempt submission.
<input minlength="3" maxlength="15">
* Accept File Type
* For input fields of type file it is possible to accept only certain types of
files, such as videos, images, audios, specific file extensions, or certain
media types.
<input type="file" accept="image/*,.rar,application/zip">
* Minimum / Maximum Length
+ Use the minimum and maximum Length attributes to indicate length
requirements. Most browsers will prevent the user from typing more
than max characters into the box, preventing them from making their
entry invalid even before they attempt submission.
<input minlength="3" maxlength="15">
* Accept File Type
* For input fields of type file it is possible to accept only certain types of
files, such as videos, images, audios, specific file extensions, or certain
media types.
<input type="file" accept="image/*,.rar,application/zip">
HTMLS - Input Validation
* Match a Pattern
* For more control, use the pattern attribute to specify any regular
expression that must be matched in order to pass validation. You can
also specify a title which is included in the validation message if the
field doesn't pass.
<input pattern="\d*" title="Numbers only, please.">
al
EB Please match the format
requested.
Numbers only, please
* Match a Pattern
* For more control, use the pattern attribute to specify any regular
expression that must be matched in order to pass validation. You can
also specify a title which is included in the validation message if the
field doesn't pass.
<input pattern="\d*" title="Numbers only, please.">
al
EB Please match the format
requested.
Numbers only, please
HTMLS - SEO
* A semantic element clearly describe its meaning to both the browser
and the developer. Various elements that HTML5 offers are
represented by following figure.
Html Structure HtmI5 Structure
div id = “header” header
E” Es
= Me)
* A semantic element clearly describe its meaning to both the browser
and the developer. Various elements that HTML5 offers are
represented by following figure.
Html Structure HtmI5 Structure
div id = “header” header
E” Es
= Me)
HTML5 — Header
+ The <header> tag in HTML is used to define the header for a
document or a section as it contains the information related to the
title and heading of the related content.
* There can be several <header> elements in one document. This tag
cannot be placed within a <footer>, <address> or another <header>
element.
<!DOCTYPE html>
<html>
<body>
<header>
<h3>Head-3...</h3>
<p>paragraph....</p>
</header>
</body>
</html>
+ The <header> tag in HTML is used to define the header for a
document or a section as it contains the information related to the
title and heading of the related content.
* There can be several <header> elements in one document. This tag
cannot be placed within a <footer>, <address> or another <header>
element.
<!DOCTYPE html>
<html>
<body>
<header>
<h3>Head-3...</h3>
<p>paragraph....</p>
</header>
</body>
</html>
HTML5 — Footer
* The <footer> tag in HTML is used to define a footer of HTML
document. This section contains the footer information (author
information, copyright information, carriers, etc).
* The footer tag is used within the body tag.
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Some rights reserved</p>
</footer>
</body>
</html>
* The <footer> tag in HTML is used to define a footer of HTML
document. This section contains the footer information (author
information, copyright information, carriers, etc).
* The footer tag is used within the body tag.
<!DOCTYPE html>
<html>
<body>
<footer>
<p>Some rights reserved</p>
</footer>
</body>
</html>
HTML5 — Heading Groups
+ The <hgroup> tag defines the heading of an HTML document. It is used to
group the <h1>-<h6> headings.
* Sometimes multiple headers need to be specified. For that purpose the
heading groups can be used.
<IDOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<hgroup>
<h1>Demo Heading One</h1>
</hgroup>
<p>This is demo text.</p>
</body>
</html>
+ The <hgroup> tag defines the heading of an HTML document. It is used to
group the <h1>-<h6> headings.
* Sometimes multiple headers need to be specified. For that purpose the
heading groups can be used.
<IDOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<hgroup>
<h1>Demo Heading One</h1>
</hgroup>
<p>This is demo text.</p>
</body>
</html>
HTML5 — Navigation
+ The HTML <nav> tag is used for declaring a navigation section of the HTML
document.
+ Wed sites typically have sections dedicated to navigational links — links that
enable the user to navigate the site.
<IDOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<nav>
<a href=
<a href="
</nav>
</body>
</html>
+ The HTML <nav> tag is used for declaring a navigation section of the HTML
document.
+ Wed sites typically have sections dedicated to navigational links — links that
enable the user to navigate the site.
<IDOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<nav>
<a href=
<a href="
</nav>
</body>
</html>
HTML5 - Articles and Section
+ article - This tag represents an independent piece of content of a document, such
as a blog entry or newspaper article.
+ section - This tag represents a generic document or application section. It can be
used together with h1-h6 to indicate the document structure.
<!DOCTYPE htm!>
<html>
<head>
<title>...</title>
</head>
<body>
<article>
<section>
<p>Once article can have multiple sections</p>
</section>
</article>
</body>
</html>
+ article - This tag represents an independent piece of content of a document, such
as a blog entry or newspaper article.
+ section - This tag represents a generic document or application section. It can be
used together with h1-h6 to indicate the document structure.
<!DOCTYPE htm!>
<html>
<head>
<title>...</title>
</head>
<body>
<article>
<section>
<p>Once article can have multiple sections</p>
</section>
</article>
</body>
</html>
HTMLS - Figure and Figures Caption
* The <figure> element can be used to group the image and figure caption.
The figure caption gives the information about the image.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
<figure>
<img src="/macaque.jpg" alt="Macaque in the trees">
<figcaption>Caption <a href=“#Richard Clark</a> </figcaption>
</figure>
</body>
</html>
* The <figure> element can be used to group the image and figure caption.
The figure caption gives the information about the image.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
<figure>
<img src="/macaque.jpg" alt="Macaque in the trees">
<figcaption>Caption <a href=“#Richard Clark</a> </figcaption>
</figure>
</body>
</html>
HTML5 — Aside
* The <aside> element can be used to identify content that is related to the
primary content of the webpage, but does not constitute the primary
content of the page.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
<aside>
<h1>This is heading text in aside Tag</h1>
<p>This is paragraph text in aside Tag</p>
</aside>
</body>
</html>
* The <aside> element can be used to identify content that is related to the
primary content of the webpage, but does not constitute the primary
content of the page.
<!DOCTYPE html>
<html>
<head>
<title>...</title>
</head>
<body>
<aside>
<h1>This is heading text in aside Tag</h1>
<p>This is paragraph text in aside Tag</p>
</aside>
</body>
</html>
Introduction of CSS
* CSS is used to control the style of a web document in a simple and
easy way.
* CSS is the acronym for "Cascading Style Sheet". This tutorial covers
both the versions CSS1,CSS2 and CSS3, and gives a complete
understanding of CSS, starting from its basics to advanced concepts.
* Why to Learn CSS?
* Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.
* CSS is a MUST for students and working professionals to become a
great Software Engineer specially when they are working in Web
Development Domain.
* CSS is used to control the style of a web document in a simple and
easy way.
* CSS is the acronym for "Cascading Style Sheet". This tutorial covers
both the versions CSS1,CSS2 and CSS3, and gives a complete
understanding of CSS, starting from its basics to advanced concepts.
* Why to Learn CSS?
* Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.
* CSS is a MUST for students and working professionals to become a
great Software Engineer specially when they are working in Web
Development Domain.
Introduction of CSS
* Create Stunning Web site - 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 sized and
laid out, what background images or colors are used, layout designs,
variations in display for different devices and screen sizes as well as a
variety of other effects.
* Become a web designer - If you want to start a carrer as a
professional web designer, HTML and CSS designing is a must skill.
+ Control web - CSS is easy to learn and understand but it provides
powerful control over the presentation of an HTML document. Most
commonly, CSS is combined with the markup languages HTML or
XHTML.
* Create Stunning Web site - 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 sized and
laid out, what background images or colors are used, layout designs,
variations in display for different devices and screen sizes as well as a
variety of other effects.
* Become a web designer - If you want to start a carrer as a
professional web designer, HTML and CSS designing is a must skill.
+ Control web - CSS is easy to learn and understand but it provides
powerful control over the presentation of an HTML document. Most
commonly, CSS is combined with the markup languages HTML or
XHTML.
Introduction of CSS
* CSS defines HOW HTML elements are to be displayed.
* Styles are normally saved in external .css files.
* External style sheets enable you to change the appearance and layout
of all the pages in a Web site, just by editing one single file.
* Advantages :
+ Improves Website Presentation
+ External CSS makes Updates Easier and Smoother
+ External CSS helps Web Pages Load Faster
* Disadvantages :
* Browser Dependent
« Difficult to retrofit in old websites
* CSS defines HOW HTML elements are to be displayed.
* Styles are normally saved in external .css files.
* External style sheets enable you to change the appearance and layout
of all the pages in a Web site, just by editing one single file.
* Advantages :
+ Improves Website Presentation
+ External CSS makes Updates Easier and Smoother
+ External CSS helps Web Pages Load Faster
* Disadvantages :
* Browser Dependent
« Difficult to retrofit in old websites
Basic Syntax of CSS
+A CSS rule has two main parts: a selector, and one or more
declarations
Selector Declaration 1 Declaration 2
© {color: red; font-size: 10px;}
property value property value
* The selector can be HTML element, id or class.
» Each declaration consists of a property and a value.
* The property is the style attribute you want to change. Each property
has a value.
+A CSS rule has two main parts: a selector, and one or more
declarations
Selector Declaration 1 Declaration 2
© {color: red; font-size: 10px;}
property value property value
* The selector can be HTML element, id or class.
» Each declaration consists of a property and a value.
* The property is the style attribute you want to change. Each property
has a value.
Different Types CSS
* There are three ways of writing a style sheet:
+ Inline Style
+ Internal/Document/Embedded Style sheet
+ External Style Sheet
* There are three ways of writing a style sheet:
+ Inline Style
+ Internal/Document/Embedded Style sheet
+ External Style Sheet
Inline Style Sheet
* It is possible to place CSS right in your HTML code, and this method of
CSS usage is referred to as inline css.
* Inline CSS has the highest priority out of external, internal, and inline
CSS.
* This means that you can override styles that are defined in external or
internal by using inline CSS.
* If you want to add a style inside an HTML element all you have to do
is specify the desired CSS properties with the style HTML attribute.
+ Example:
HTML
<p style="background: blue; color: white;"> My Inline CSS </p>
* It is possible to place CSS right in your HTML code, and this method of
CSS usage is referred to as inline css.
* Inline CSS has the highest priority out of external, internal, and inline
CSS.
* This means that you can override styles that are defined in external or
internal by using inline CSS.
* If you want to add a style inside an HTML element all you have to do
is specify the desired CSS properties with the style HTML attribute.
+ Example:
HTML
<p style="background: blue; color: white;"> My Inline CSS </p>
Internal Style Sheet
* This type of CSS is only for Single Web Page.
* When using internal CSS, we must add a new tag, <style>, inside the
<head> tag.
* Example:
HTML
<html>
<head>
<style type="text/css">
p{ color: red;}
</style>
</head>
<body>
<p>Your page's content!</p>
</body>
</html>
* This type of CSS is only for Single Web Page.
* When using internal CSS, we must add a new tag, <style>, inside the
<head> tag.
* Example:
HTML
<html>
<head>
<style type="text/css">
p{ color: red;}
</style>
</head>
<body>
<p>Your page's content!</p>
</body>
</html>
External Style Sheet
* When using CSS it is preferable to keep the CSS separate from your
HTML.
* Placing CSS in a separate file allows the web designer to completely
differentiate between content (HTML) and design (CSS).
* External CSS is a file that contains only CSS code and is saved with a
".css" file extension.
* This CSS file is then referenced in your HTML using the <link> instead
of <style>.
* When using CSS it is preferable to keep the CSS separate from your
HTML.
* Placing CSS in a separate file allows the web designer to completely
differentiate between content (HTML) and design (CSS).
* External CSS is a file that contains only CSS code and is saved with a
".css" file extension.
* This CSS file is then referenced in your HTML using the <link> instead
of <style>.
External Style Sheet
« Example :
Demo.html test.css
<html> Hparal{
<head> text-align: center;
<link rel=“stylesheet” type="text/css” }
href="test.css”> Pp
</head> {
<body> color : red;
}
<p> Hello Friends </p>
<p id="para1”> How are you? </p>
</body>
</html>
Hello Friends
Output
How are you?
« Example :
Demo.html test.css
<html> Hparal{
<head> text-align: center;
<link rel=“stylesheet” type="text/css” }
href="test.css”> Pp
</head> {
<body> color : red;
}
<p> Hello Friends </p>
<p id="para1”> How are you? </p>
</body>
</html>
Hello Friends
Output
How are you?
External Style Sheet
* Advantages:
* It keeps your website design and content separate.
+ It's much easier to reuse your CSS code if you have it in a separate
file. Instead of typing the same CSS code on every web page you
have, simply have many pages refer to a single CSS file with the
"link" tag.
* You can make drastic changes to your web pages with just a few
changes in a single CSS file.
* Advantages:
* It keeps your website design and content separate.
+ It's much easier to reuse your CSS code if you have it in a separate
file. Instead of typing the same CSS code on every web page you
have, simply have many pages refer to a single CSS file with the
"link" tag.
* You can make drastic changes to your web pages with just a few
changes in a single CSS file.
CSS - Simple selector
* The simple selector form is a single element to which the property
and value is applied.
* We can also apply property and value to group of elements.
HTML css
<h1> h1,h2{
Hello Friends color: red;
</h1> }
<h2> Output
How are you Hello Friends
</h2> How are you
* The simple selector form is a single element to which the property
and value is applied.
* We can also apply property and value to group of elements.
HTML css
<h1> h1,h2{
Hello Friends color: red;
</h1> }
<h2> Output
How are you Hello Friends
</h2> How are you
CSS - “class” selector
* The class selector is used to specify a style for a group of elements.
+ The class selector uses the HTML class attribute, and is defined with a
an
in css.
HTML css
<h1 class="myClass”> h1. myclass{
Hello Friends color: red;
</h1> }
<h1>
How are you
</h1> Y Output
<h1 class="myClass”> Hello Friends
How are you How are you
</h1> How are you
* The class selector is used to specify a style for a group of elements.
+ The class selector uses the HTML class attribute, and is defined with a
an
in css.
HTML css
<h1 class="myClass”> h1. myclass{
Hello Friends color: red;
</h1> }
<h1>
How are you
</h1> Y Output
<h1 class="myClass”> Hello Friends
How are you How are you
</h1> How are you
CSS - “id” selector
* The id selector is used to specify a style for a single, unique element.
* The id selector uses the id attribute of the HTML element, and is
defined with a "#“ in css.
* The style rule below will be applied to the element with id=“para1”.
HTML css
<h1 id="para1”> #paral{
Hello Friends color: red;
</h1> }
<h1> Output
How are you Hello Friends
</h1> How are you
* The id selector is used to specify a style for a single, unique element.
* The id selector uses the id attribute of the HTML element, and is
defined with a "#“ in css.
* The style rule below will be applied to the element with id=“para1”.
HTML css
<h1 id="para1”> #paral{
Hello Friends color: red;
</h1> }
<h1> Output
How are you Hello Friends
</h1> How are you
CSS - “Universal” selector
* This selector is denoted by * (asterisk).
* This selector can be applied to all the elements in the document.
* The style rule below will be applied to the element with id=“para1”.
HTML css
<h1> et
Hello Friends color: red;
</h1> }
<h2> Output
Höwiare you Hello Friends
</h2> How are you
* This selector is denoted by * (asterisk).
* This selector can be applied to all the elements in the document.
* The style rule below will be applied to the element with id=“para1”.
HTML css
<h1> et
Hello Friends color: red;
</h1> }
<h2> Output
Höwiare you Hello Friends
</h2> How are you
Assign Multiple Classes
« We can apply different class to same html element by giving space
separated class names in the class attribute:
Demo.html
<html>
<head>
<link rel=“stylesheet”
type="text/css” href=“test.css”>
</head>
<body>
<h1 class="class1 class2”>
How are you?
</h1>
</body>
</html>
+ Class1
{
}
. Class2
{
}
test.css
color : red;
text-align : right;
Output
How are you?
« We can apply different class to same html element by giving space
separated class names in the class attribute:
Demo.html
<html>
<head>
<link rel=“stylesheet”
type="text/css” href=“test.css”>
</head>
<body>
<h1 class="class1 class2”>
How are you?
</h1>
</body>
</html>
+ Class1
{
}
. Class2
{
}
test.css
color : red;
text-align : right;
Output
How are you?
Background Property
* Background Color
» Background Image
+ Background Image Repeat
« Fixed Background Image
* Background Image Positioning
Property Name
(background-color)
(background-image)
(background-repeat)
(background-attachment)
(background-position)
* Background Color
» Background Image
+ Background Image Repeat
« Fixed Background Image
* Background Image Positioning
Property Name
(background-color)
(background-image)
(background-repeat)
(background-attachment)
(background-position)
Background Color
* The background-color property specifies the background color of an
element.
* The background color of a page is defined in the body selector:
* Below is example of CSS backgrounds.
test.css
body
background-color : red;
background-color : #FF0000;
background-color : rgb(255,0,0);
* The background-color property specifies the background color of an
element.
* The background color of a page is defined in the body selector:
* Below is example of CSS backgrounds.
test.css
body
background-color : red;
background-color : #FF0000;
background-color : rgb(255,0,0);
Background Image
* The background-image property specifies an image to use as the
background of an element.
* Example
test.css
body
{
background-image : url(‘pathTolmage.jpg’);
}
* The background-image property specifies an image to use as the
background of an element.
* Example
test.css
body
{
background-image : url(‘pathTolmage.jpg’);
}
Background Image Repeat
«You can have a background
image repeat vertically (y-axis),
horizontally (x-axis), in both directions, or in neither direction.
* Example
body
{
background-image :
background-repeat :
background-repeat :
background-repeat :
background-repeat :
test.css
url(‘pathTolmage.jpg’);
repeat;
repeat-x;
repeat-y;
no-repeat;
repeat-y no-repeat
«You can have a background
image repeat vertically (y-axis),
horizontally (x-axis), in both directions, or in neither direction.
* Example
body
{
background-image :
background-repeat :
background-repeat :
background-repeat :
background-repeat :
test.css
url(‘pathTolmage.jpg’);
repeat;
repeat-x;
repeat-y;
no-repeat;
repeat-y no-repeat
Fixed Background Image
* The background-attachment property sets whether a background
image is fixed or scrolls with the rest of the page.
« Example
test.css
body
{
background-image : url(‘pathTolmage.jpg’);
background-repeat : no-repeat;
background-attachment : fixed;
* The background-attachment property sets whether a background
image is fixed or scrolls with the rest of the page.
« Example
test.css
body
{
background-image : url(‘pathTolmage.jpg’);
background-repeat : no-repeat;
background-attachment : fixed;
Background Image Positioning
* The background-position property sets the starting position of a
background image.
« Example
test.css
body
{ : si
background-image : url(‘pathTolmage.jpg’); : S
background-repeat : no-repeat; : a
background-position: 20px 10px; 8
background-position: 30%30%;
background-position: top center;
* The background-position property sets the starting position of a
background image.
« Example
test.css
body
{ : si
background-image : url(‘pathTolmage.jpg’); : S
background-repeat : no-repeat; : a
background-position: 20px 10px; 8
background-position: 30%30%;
background-position: top center;
Font Property
* CSS font properties define the font family, boldness, size, and the
style of a text.
Property Name
* Font Color (color)
* Font Family (font-family)
* Font Size (font-size)
* Font Style (font-style)
+ Font Weight (font-weight)
* Font Variant (font-variant)
* CSS font properties define the font family, boldness, size, and the
style of a text.
Property Name
* Font Color (color)
* Font Family (font-family)
* Font Size (font-size)
* Font Style (font-style)
+ Font Weight (font-weight)
* Font Variant (font-variant)
Font Property
* Font Color
* Set the text-color for different elements.
« Font Family
+ The font family of a text is set with the
font-family property.
» Font Size
* The font-size property sets the size of the text.
+ font-size : 120%
+ font-size : 10px;
+ font-size : x-large;
nat
color : red;
}
hat
font-family : sans-serif:
}
nat
font-size:
font-size :
font-size
font-size
font-size :
font-size
font-size :
font-size :
font-size
font-size
font-size
120%;
10px;
:small;
: smaller;
x-small;
ocsmall;
large;
larger;
ix-large;
oclarge;
: medium;
* Font Color
* Set the text-color for different elements.
« Font Family
+ The font family of a text is set with the
font-family property.
» Font Size
* The font-size property sets the size of the text.
+ font-size : 120%
+ font-size : 10px;
+ font-size : x-large;
nat
color : red;
}
hat
font-family : sans-serif:
}
nat
font-size:
font-size :
font-size
font-size
font-size :
font-size
font-size :
font-size :
font-size
font-size
font-size
120%;
10px;
:small;
: smaller;
x-small;
ocsmall;
large;
larger;
ix-large;
oclarge;
: medium;
Font Property
* Font Style
* The font-style property is mostly
used to specify italic text.
* Font Weight
+ The font-weight property sets how
thick or thin characters in text should
be displayed.
* Font Variant
+ The font-variant property specifies
whether or not a text should be displayed
in a small-caps font.
hat
font-style: italic ;
}
hat
font-weight : 300;
font-weight : bolder;
font-weight : lighter;
}
hat
font-variant: small-caps;
* Font Style
* The font-style property is mostly
used to specify italic text.
* Font Weight
+ The font-weight property sets how
thick or thin characters in text should
be displayed.
* Font Variant
+ The font-variant property specifies
whether or not a text should be displayed
in a small-caps font.
hat
font-style: italic ;
}
hat
font-weight : 300;
font-weight : bolder;
font-weight : lighter;
}
hat
font-variant: small-caps;
Text Property
+ While CSS Font covers most of the traditional ways to format your
text, CSS Text allows you to control the spacing, decoration, and
alignment of your text.
Property Name
* Text Decoration (text-decoration)
* Text Indent (text-indent)
+ Text Align (text-align)
* Text Transform (text-transform)
* White Space (white-space)
* Word Spacing (word-spacing)
* Letter Spacing (letter-spacing)
* Line Height (line-height)
+ While CSS Font covers most of the traditional ways to format your
text, CSS Text allows you to control the spacing, decoration, and
alignment of your text.
Property Name
* Text Decoration (text-decoration)
* Text Indent (text-indent)
+ Text Align (text-align)
* Text Transform (text-transform)
* White Space (white-space)
* Word Spacing (word-spacing)
* Letter Spacing (letter-spacing)
* Line Height (line-height)
Text Property
* Text Decoration
* The text-decoration property is used to
set or remove decorations from text.
* The text-decoration property is mostly
used to remove underlines from links for
design purposes.
+ Text Indent
* The text-indentation property is used to
specify the indentation of the first line of a text.
* Text Align
+ The text-align property is used to set the
horizontal alignment of a text.
text-decoration :
: overline;
text-decoration :
text-decoration :
text-decoration
line-through;
underline;
none;
text-indent : 20px;
text-indent : 30%;
text-align
text-align
text-align
text-align
right;
justify;
cleft;
: center;
* Text Decoration
* The text-decoration property is used to
set or remove decorations from text.
* The text-decoration property is mostly
used to remove underlines from links for
design purposes.
+ Text Indent
* The text-indentation property is used to
specify the indentation of the first line of a text.
* Text Align
+ The text-align property is used to set the
horizontal alignment of a text.
text-decoration :
: overline;
text-decoration :
text-decoration :
text-decoration
line-through;
underline;
none;
text-indent : 20px;
text-indent : 30%;
text-align
text-align
text-align
text-align
right;
justify;
cleft;
: center;
Text Property
* Text Transform
+ The text-transform property is used to
specify uppercase and lowercase letters
in a text.
* White Space
* The white-space attribute allows you to
prevent text from wrapping until you place
a break <br /> into your text.
+ Word Spacing
* With the CSS attribute word-spacing
you are able to specify the exact value
of the spacing between your words.
Word-spacing should be defined with exact values.
hat
text-transform : capitalize;
text-transform : uppercase;
text-transform : lowercase;
hat
white-space : nowrap;
white-space: pre;
}
hat
word-spacing : 10px;
* Text Transform
+ The text-transform property is used to
specify uppercase and lowercase letters
in a text.
* White Space
* The white-space attribute allows you to
prevent text from wrapping until you place
a break <br /> into your text.
+ Word Spacing
* With the CSS attribute word-spacing
you are able to specify the exact value
of the spacing between your words.
Word-spacing should be defined with exact values.
hat
text-transform : capitalize;
text-transform : uppercase;
text-transform : lowercase;
hat
white-space : nowrap;
white-space: pre;
}
hat
word-spacing : 10px;
Text Property
* Letter Spacing
« With the CSS attribute letter-spacing you
are able to specify the exact value of the
spacing between your letters. Letter-spacing
should be defined with exact values.
* Line Height
* The line-height attribute will set the
height of the line in the page.
hat
letter-spacing : 3px;
hat
line-height : 10px;
* Letter Spacing
« With the CSS attribute letter-spacing you
are able to specify the exact value of the
spacing between your letters. Letter-spacing
should be defined with exact values.
* Line Height
* The line-height attribute will set the
height of the line in the page.
hat
letter-spacing : 3px;
hat
line-height : 10px;
The Box Model
+ All HTML elements can be considered as boxes. In CSS, the term "box
model" is used when talking about design and layout.
* The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the
actual content.
* The box model allows us to place a border around elements and
space elements in relation to other elements.
+ All HTML elements can be considered as boxes. In CSS, the term "box
model" is used when talking about design and layout.
* The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the
actual content.
* The box model allows us to place a border around elements and
space elements in relation to other elements.
The Box Model
* The image below illustrates the box model:
Margin
Padding
Content
* The image below illustrates the box model:
Margin
Padding
Content
The Box Model
margin-left
padding-left
margin-top
padding-top
padding-bottom
margin-bottom
au8u-Buipped
qysu-ulBew
margin-left
padding-left
margin-top
padding-top
padding-bottom
margin-bottom
au8u-Buipped
qysu-ulBew
Border Property
The CSS border properties allow you to specify
the style and color of an element's border.
Border Style Types
+ The border-style property specifies what
kind of border to display.
Border Width
* The border-width property is used to set
the width of the border.
Border Color
* The border-color property is used to set the
color of the border.
+ Border colors can be any color defined by RGB,
hexadecimal, or key terms. Below is an example of
each of these types.
The top, right, bottom, and left border can be
changed independently using separate properties.
border : 1px solid red;
border-style : solid;
border-style : dotted;
border-style : double;
border-width : 7px;
border-color : red;
border-top : 1px solid red;
The CSS border properties allow you to specify
the style and color of an element's border.
Border Style Types
+ The border-style property specifies what
kind of border to display.
Border Width
* The border-width property is used to set
the width of the border.
Border Color
* The border-color property is used to set the
color of the border.
+ Border colors can be any color defined by RGB,
hexadecimal, or key terms. Below is an example of
each of these types.
The top, right, bottom, and left border can be
changed independently using separate properties.
border : 1px solid red;
border-style : solid;
border-style : dotted;
border-style : double;
border-width : 7px;
border-color : red;
border-top : 1px solid red;
Padding Property
+ The CSS padding properties define the space
hat
between the element border and the element ' padding : 10px;
content.
+ The top, right, bottom, and left padding hat
can be changed independently using separate padding-top : 10px;
| padding-right : 20px;
properties.
padding-bottom : 30 px;
+ Ashorthand padding property can also be used padding-left : 40 px;
to change all padding at once.
hat
padding : 10px 20px 30px 40px;
+ The CSS padding properties define the space
hat
between the element border and the element ' padding : 10px;
content.
+ The top, right, bottom, and left padding hat
can be changed independently using separate padding-top : 10px;
| padding-right : 20px;
properties.
padding-bottom : 30 px;
+ Ashorthand padding property can also be used padding-left : 40 px;
to change all padding at once.
hat
padding : 10px 20px 30px 40px;
Margin Property
* The CSS margin properties define the space hat
around elements. i margin’: 10px;
+ The top, right, bottom, and left margin
can be changed independently using separate
hat
properties. lc 100%
+ Ashorthand margin property can also be used margin-bottom : 30 px;
to change all padding at once. ; margin-left : 40 px;
hat
margin : 10px 20px 30px 40px;
* The CSS margin properties define the space hat
around elements. i margin’: 10px;
+ The top, right, bottom, and left margin
can be changed independently using separate
hat
properties. lc 100%
+ Ashorthand margin property can also be used margin-bottom : 30 px;
to change all padding at once. ; margin-left : 40 px;
hat
margin : 10px 20px 30px 40px;
List Property
The CSS list properties allow you to:
+ Set different list item markers for
ordered & unordered lists.
* Set an image as the list item marker.
* Set the position of the marker.
CSS List Style Type
CSS List with Image
CSS List Position
ulf
list-style-type:
list-style-type:
list-style-type:
list-style-type:
list-style-type:
style-type:
list-style-type:
list-style-type:
circle;
disc;
square;
decimal-leading-zero;
lower-greek;
: decimal;
upper-alpha;
lower-alpha;
upper-roman;
list-style-type: lower-roman;
}
olf
list-style-image : urlf‘imgPath’);
}
olf
list-style-position : outside;
list-style-position : inside;
ij
The CSS list properties allow you to:
+ Set different list item markers for
ordered & unordered lists.
* Set an image as the list item marker.
* Set the position of the marker.
CSS List Style Type
CSS List with Image
CSS List Position
ulf
list-style-type:
list-style-type:
list-style-type:
list-style-type:
list-style-type:
style-type:
list-style-type:
list-style-type:
circle;
disc;
square;
decimal-leading-zero;
lower-greek;
: decimal;
upper-alpha;
lower-alpha;
upper-roman;
list-style-type: lower-roman;
}
olf
list-style-image : urlf‘imgPath’);
}
olf
list-style-position : outside;
list-style-position : inside;
ij
Styling Links Property
+ Anchor/Link States
. it a aclinkf
The four links states are: SH O0:
1. a:link - a normal, unvisited link /*unvisited link*/
2. a:visited - a link the user has visited po
3. a:hover - a link when the user mouse over it | *“#itedl a
text-decoration : none;
4. a:active - a link the moment it is clicked /*visited link*/
}
a:hover{
color:#00FF00;
/*mouse over link*/
}
azactive(
color:#OODOFF;
selected link*/
+ Anchor/Link States
. it a aclinkf
The four links states are: SH O0:
1. a:link - a normal, unvisited link /*unvisited link*/
2. a:visited - a link the user has visited po
3. a:hover - a link when the user mouse over it | *“#itedl a
text-decoration : none;
4. a:active - a link the moment it is clicked /*visited link*/
}
a:hover{
color:#00FF00;
/*mouse over link*/
}
azactive(
color:#OODOFF;
selected link*/
Positioning Property
+ Absolute Positioning
* With absolute positioning, you define the hat .
exact pixel value where the specified HTML position :jabsolute;
element will appear. left : SOpx;
top : 100px;
* The point of origin is the top-left of the } SP TOP
browser's viewable area, so be sure you are
measuring from that point.
+ Relative Positioning bat 7 .
E pa = position : relative;
* Relative positioning changes the position of left : 50px;
the HTML element relative to where it top : 100px;
normally appears. }
+ Fixed Positioning hit
* The element is positioned relative to the position : fixed;
browser window, in fixed position, element top : SOpx;
will be in the same place even we scroll the left : 100px;
screen. }
+ Absolute Positioning
* With absolute positioning, you define the hat .
exact pixel value where the specified HTML position :jabsolute;
element will appear. left : SOpx;
top : 100px;
* The point of origin is the top-left of the } SP TOP
browser's viewable area, so be sure you are
measuring from that point.
+ Relative Positioning bat 7 .
E pa = position : relative;
* Relative positioning changes the position of left : 50px;
the HTML element relative to where it top : 100px;
normally appears. }
+ Fixed Positioning hit
* The element is positioned relative to the position : fixed;
browser window, in fixed position, element top : SOpx;
will be in the same place even we scroll the left : 100px;
screen. }
Float Property
*The CSS float property defines that an
element should be taken out of the normal
flow of the document and placed along the
left or right side of its containing block.
* Text and inline elements will then wrap
around this element.
[© ne/CrumnsemeneeeDemenmi @ sre
<div ion1">
ABC Content
</div>
<div id="division2">
XYZ Content
</div>
Adivision1{
background-color : red;
float : left;
width: 40%;
}
Hidivision2(
background-color : blue;
float : right;
width: 40%;
*The CSS float property defines that an
element should be taken out of the normal
flow of the document and placed along the
left or right side of its containing block.
* Text and inline elements will then wrap
around this element.
[© ne/CrumnsemeneeeDemenmi @ sre
<div ion1">
ABC Content
</div>
<div id="division2">
XYZ Content
</div>
Adivision1{
background-color : red;
float : left;
width: 40%;
}
Hidivision2(
background-color : blue;
float : right;
width: 40%;
CSS2
* Cascading e Sheet Level 2 (CSS2) is the second version of cascading
style sheets
eveloped by W3C.
+ It's a declarative language used to enhance the hyper-extensive text
markup language.
* CSS2 is a subset of Cascading Style Sheet Level 1 and has enhanced
capabilities like:
1
2,
3.
4.
5:
6.
d
8.
9,
1
o.
Media types concept
Aural style sheets
Features for internationalization
Extended font selection
Automatic numbering and generated content
Cursor
Dynamic outline
Capabilities to control content overflow, clipping
Absolute, fixed and relative positioning
Extended selectors mechanism
* Cascading e Sheet Level 2 (CSS2) is the second version of cascading
style sheets
eveloped by W3C.
+ It's a declarative language used to enhance the hyper-extensive text
markup language.
* CSS2 is a subset of Cascading Style Sheet Level 1 and has enhanced
capabilities like:
1
2,
3.
4.
5:
6.
d
8.
9,
1
o.
Media types concept
Aural style sheets
Features for internationalization
Extended font selection
Automatic numbering and generated content
Cursor
Dynamic outline
Capabilities to control content overflow, clipping
Absolute, fixed and relative positioning
Extended selectors mechanism
CSS3
* CSS3 is the latest standard for CSS.
* CSS3 is completely backwards-compatible with earlier versions of CSS.
+ CSS3 has been split into "modules". It contains the "old CSS
specification" (which has been split into smaller pieces). In addition,
new modules are added.
* CSS3 Transitions are a presentational effect which allow property
changes in CSS values, such as those that may be defined to occur on
:hover or :focus, to occur smoothly over a specified duration — rather
than happening instantaneously as is the normal behavior.
* Transition effects can be applied to a wide variety of CSS properties,
including background-color, width, height, opacity, and many more.
* CSS3 is the latest standard for CSS.
* CSS3 is completely backwards-compatible with earlier versions of CSS.
+ CSS3 has been split into "modules". It contains the "old CSS
specification" (which has been split into smaller pieces). In addition,
new modules are added.
* CSS3 Transitions are a presentational effect which allow property
changes in CSS values, such as those that may be defined to occur on
:hover or :focus, to occur smoothly over a specified duration — rather
than happening instantaneously as is the normal behavior.
* Transition effects can be applied to a wide variety of CSS properties,
including background-color, width, height, opacity, and many more.
CSS2 v/s CSS3
Many features of CSS2 are not compatible CSS3 provide backward compatibility with
with CSS3 CSS2°
Media queries are not supported in CSS2 CSS3 supports Media queries for responsive
designs.
Not all the browser can support CSS2 code Allthe modern browser support CSS3.
CSS2 node can not be split into various CSS3 code can be split into various modules.
modules
CSS2 supports standard old colors (RGB) CSS3 supports RGB, HSL and gradient colors.
only.
In CSS2 animation is possible vis JQuery and In CSS3 animation is supported by
Javascript translation, scaling, rotation and
transformation.
Many features of CSS2 are not compatible CSS3 provide backward compatibility with
with CSS3 CSS2°
Media queries are not supported in CSS2 CSS3 supports Media queries for responsive
designs.
Not all the browser can support CSS2 code Allthe modern browser support CSS3.
CSS2 node can not be split into various CSS3 code can be split into various modules.
modules
CSS2 supports standard old colors (RGB) CSS3 supports RGB, HSL and gradient colors.
only.
In CSS2 animation is possible vis JQuery and In CSS3 animation is supported by
Javascript translation, scaling, rotation and
transformation.
CSS3
* Some of the most important CSS3 modules are:
CSS Animations and Transitions
Advanced Selectors
Generated Content and Counters
Gradients
Webfonts
Box Sizing
Style Images
Media Queries
Multiple Backgrounds
CSS Columns
Pseudo Class , Pseudo elements
Flex Box
* Some of the most important CSS3 modules are:
CSS Animations and Transitions
Advanced Selectors
Generated Content and Counters
Gradients
Webfonts
Box Sizing
Style Images
Media Queries
Multiple Backgrounds
CSS Columns
Pseudo Class , Pseudo elements
Flex Box
Animations
* CSS allows animation of HTML elements without using JavaScript or
Flash.
* you will learn about the following properties:
LAS KES RA“
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
* CSS allows animation of HTML elements without using JavaScript or
Flash.
* you will learn about the following properties:
LAS KES RA“
@keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
Animations - Example
<head>
<style>
div{
width: 100px;
height: 100px;
background: red;
lative;
yfirst Ss 2;
animation- “direction: alternate;
}
@keyframes myfirst {
0% (background: red; left: Opx; top: Opx;}
25% {background: yellow; left: 200px; top: Opx;}
50% {background: blue; left: 200px; top: 200px;}
75% (background: green; left: Opx; top: 200px;)
100% (background: red; left: Opx; top: Opx;}
}
</style>
</head>
<body>
<h1>animation-direction: alternate</h1>
<div></div>
</body>
<head>
<style>
div{
width: 100px;
height: 100px;
background: red;
lative;
yfirst Ss 2;
animation- “direction: alternate;
}
@keyframes myfirst {
0% (background: red; left: Opx; top: Opx;}
25% {background: yellow; left: 200px; top: Opx;}
50% {background: blue; left: 200px; top: 200px;}
75% (background: green; left: Opx; top: 200px;)
100% (background: red; left: Opx; top: Opx;}
}
</style>
</head>
<body>
<h1>animation-direction: alternate</h1>
<div></div>
</body>
Tool-Tips
* Tool tip is a piece of small information about something when the
mouse moves over the element.
* The first step is making an HTML tooltip by assigning a class to the
element that will have the tooltips.
* Then use the stylish properties of CSS such as position, color, display
and so on.
* Tool tip is a piece of small information about something when the
mouse moves over the element.
* The first step is making an HTML tooltip by assigning a class to the
element that will have the tooltips.
* Then use the stylish properties of CSS such as position, color, display
and so on.
Tool-Tips - Example
de <body style="text-align:center;">
<style> ; 2
tooltip { <div class="tooltip">Hover over me
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
tooltip tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color:
text-align: center;
border-radius: 6px;
padding: Spx 0;
J* Position the tooltip */
position: absolute;
z-index: 10;
3
tookip:hover tooltiptext {
visibility: visible;
J
</style>
</head>
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
Hover over me TRS
de <body style="text-align:center;">
<style> ; 2
tooltip { <div class="tooltip">Hover over me
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
tooltip tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color:
text-align: center;
border-radius: 6px;
padding: Spx 0;
J* Position the tooltip */
position: absolute;
z-index: 10;
3
tookip:hover tooltiptext {
visibility: visible;
J
</style>
</head>
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
Hover over me TRS
Styling Images
Rounded Image Circled Image:
img { img {
border-radius: 8px; border-radius: 50%;
} }
Rounded Image Circled Image:
img { img {
border-radius: 8px; border-radius: 50%;
} }
Styling Images
Transparent Image
img {
opacity: 0.2;
}
Flip an Image:
img:hover {
transform: scaleX(-1);
}
Transparent Image
img {
opacity: 0.2;
}
Flip an Image:
img:hover {
transform: scaleX(-1);
}
CSS Variables
<head> <body>
<title>Page Title</title> <div id="div1">My First Heading</div>
<style> </body>
:root { --clr:red; }
Hdiv1 {
background-color: var(--clr);
padding: 10px;
}
</style>
</head>
<head> <body>
<title>Page Title</title> <div id="div1">My First Heading</div>
<style> </body>
:root { --clr:red; }
Hdiv1 {
background-color: var(--clr);
padding: 10px;
}
</style>
</head>
Flex Box
* Flex box contains flex item and flex container. In CSS, the concept of
Flex box is as follows :
* The flex items are placed in the flex container. The FlexBox is a single
direction layout concept.
* The flex items layout is either in horizontal and vertical columns.
* Flex box contains flex item and flex container. In CSS, the concept of
Flex box is as follows :
* The flex items are placed in the flex container. The FlexBox is a single
direction layout concept.
* The flex items layout is either in horizontal and vertical columns.
Flex Box
‚container {
flex-direction: row | row-reverse | column | column-reverse;
}
Where —
i. row (default): left to right in Itr; right to left in rtl
li.row-reverse: right to left in Itr; left to right in rtl
iii.column: same as row but top to bottom
iv.column-reverse: same as row-reverse but bottom to top
‚container {
flex-direction: row | row-reverse | column | column-reverse;
}
Where —
i. row (default): left to right in Itr; right to left in rtl
li.row-reverse: right to left in Itr; left to right in rtl
iii.column: same as row but top to bottom
iv.column-reverse: same as row-reverse but bottom to top
Flex Box - Example
<head>
<style>
‚flex-container {
display: flex;
background-color: DodgerBlue;
}
flex-item {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
list-style-type:none;
}
</style>
</head>
<body>
<ul class="flex-container">
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
</ul>
</body>
<head>
<style>
‚flex-container {
display: flex;
background-color: DodgerBlue;
}
flex-item {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
list-style-type:none;
}
</style>
</head>
<body>
<ul class="flex-container">
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
</ul>
</body>
Media Queries
* Media queries allow you to customize the presentation of your web
pages for a specific range of device like mobile phone, tablets,
desktop etc. without any change in markup.
1. Height and width of devices
2. Height and width of viewports
3. Mode of operation (landscape or portrait mode)
4. Resolution
+ Syntax:
@media not|only mediatype and (expression) {
CSS — code;
* Media queries allow you to customize the presentation of your web
pages for a specific range of device like mobile phone, tablets,
desktop etc. without any change in markup.
1. Height and width of devices
2. Height and width of viewports
3. Mode of operation (landscape or portrait mode)
4. Resolution
+ Syntax:
@media not|only mediatype and (expression) {
CSS — code;
Media Queries
* The result of the query is true if the specified media type matches the
type of device the document is being display on and all expression in
the media query are true.
+ When a media query is true, the corresponding style sheet or style
rules are applied.
Value Description
all Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud
* The result of the query is true if the specified media type matches the
type of device the document is being display on and all expression in
the media query are true.
+ When a media query is true, the corresponding style sheet or style
rules are applied.
Value Description
all Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud
Media Queries - Examples
* The following example changes the background-color to lightgreen if the
viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels,
the background-color will be pink):
@media screen and (min-width: 480px ) {
body {
background-color: lightgreen; }
+ The following example shows a menu that will float to the left of the page
if the viewport is 480 pixels wide or wider (if the viewport is less than 480
pixels, the menu will be on top of the content):
@media screen and ( min-width: 480px )
{
#leftsidebar { width: 200px; float: left; }
#main{ margin-left: 216px; }
}
* The following example changes the background-color to lightgreen if the
viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels,
the background-color will be pink):
@media screen and (min-width: 480px ) {
body {
background-color: lightgreen; }
+ The following example shows a menu that will float to the left of the page
if the viewport is 480 pixels wide or wider (if the viewport is less than 480
pixels, the menu will be on top of the content):
@media screen and ( min-width: 480px )
{
#leftsidebar { width: 200px; float: left; }
#main{ margin-left: 216px; }
}
Wildcard Selector (*,* and $) in CSS
* The wild card selector are represented by various symbols such as *,4 or $.
* These selector are used to select multiple elements simultaneously for
applying styles.
1. The attribute * selector : The [attribute*="val”] selector is used to select
the elements whose attribute value contains the string “val”.
2. The attribute * selector : The [attribute*=“val”] selector is used to select
the elements whose attribute value begin with a specific value val.
3. The attribute $ selector : The [attributeS=“val”] selector is used to select
the elements whose attribute value end with a specific value val.
Syntax:
[attribute*/4/$ = “value”]{
// CSS property
* The wild card selector are represented by various symbols such as *,4 or $.
* These selector are used to select multiple elements simultaneously for
applying styles.
1. The attribute * selector : The [attribute*="val”] selector is used to select
the elements whose attribute value contains the string “val”.
2. The attribute * selector : The [attribute*=“val”] selector is used to select
the elements whose attribute value begin with a specific value val.
3. The attribute $ selector : The [attributeS=“val”] selector is used to select
the elements whose attribute value end with a specific value val.
Syntax:
[attribute*/4/$ = “value”]{
// CSS property
Wildcard Selector — Example
<head> <body>
<title>Page Title</title> <h1>Hello</h1>
<style> <div class="firstcolor”> 1* line </div>
[class*="color”] <div class=“second”> 2" line </div>
{ fiscigroundoreds <div class="thirdcolor”> 3" line </div>
color: white; <div class=“val_string”> 4' line </div>
} <div class=“val_next”> 5' line </div>
[classa="al"] <div class=“nextstr”> 6 line </div>
{ <div class=“anotherstr”> 7% line </div>
background: blue; </body>
color: white;
[class$="str”]
{
background: green;
color: white;
}
</style>
</head>
<head> <body>
<title>Page Title</title> <h1>Hello</h1>
<style> <div class="firstcolor”> 1* line </div>
[class*="color”] <div class=“second”> 2" line </div>
{ fiscigroundoreds <div class="thirdcolor”> 3" line </div>
color: white; <div class=“val_string”> 4' line </div>
} <div class=“val_next”> 5' line </div>
[classa="al"] <div class=“nextstr”> 6 line </div>
{ <div class=“anotherstr”> 7% line </div>
background: blue; </body>
color: white;
[class$="str”]
{
background: green;
color: white;
}
</style>
</head>
Gradients
* By the CSS3 gradient effect allows the developer to display the
transition between two or more colors.
* There are two way by the gradient effect can be specified in CSS3
1. Linear Gradients (goes down/up/left/right/diagonally)
2. Radial Gradients (defined by their center)
- To create a linear gradient you must define at least two color stops.
* You can also set a starting point and a direction (or an angle) along
with the gradient effect.
+ Syntax :
* By the CSS3 gradient effect allows the developer to display the
transition between two or more colors.
* There are two way by the gradient effect can be specified in CSS3
1. Linear Gradients (goes down/up/left/right/diagonally)
2. Radial Gradients (defined by their center)
- To create a linear gradient you must define at least two color stops.
* You can also set a starting point and a direction (or an angle) along
with the gradient effect.
+ Syntax :
Linear Gradient - Top to Bottom (this is default)
#grad1 {
height: 200px;
background-color: red;
/* For browsers that do not support
gradients */
background-image: linear-
gradient(red, yellow);
/* Standard syntax (must be last) */
}
#grad1 {
height: 200px;
background-color: red;
/* For browsers that do not support
gradients */
background-image: linear-
gradient(red, yellow);
/* Standard syntax (must be last) */
}
Linear Gradient - Left to Right
#grad {
background-image: linear-
gradient(to right, green, blue);
#grad {
background-image: linear-
gradient(to right, green, blue);
Linear Gradient - Multiple Color Stops
#grad {
background-image: linear-
gradient(green,blue, orange,violet);
}
#grad {
background-image: linear-
gradient(green,blue, orange,violet);
}
Radial Gradient - Multiple Color Stops
#grad1 {
height: 150px;
width: 200px;
background-image: radial-
gradient(red, green, blue);
}
#grad1 {
height: 150px;
width: 200px;
background-image: radial-
gradient(red, green, blue);
}
Pseudo-Class
* Using the pseudo classes we can give special effects on the selectors.
There some pseudo classes which are more commonly used and
other are -
* Focus (Style an element when it gets focus)
+ Hover (Style an element when a user mouses over it)
* Hyperlink (Style visited and unvisited links differently)
+ Syntax :
Selector : pseudo-class
{
property: value;
}
* Using the pseudo classes we can give special effects on the selectors.
There some pseudo classes which are more commonly used and
other are -
* Focus (Style an element when it gets focus)
+ Hover (Style an element when a user mouses over it)
* Hyperlink (Style visited and unvisited links differently)
+ Syntax :
Selector : pseudo-class
{
property: value;
}
Anchor Pseudo-classes
/* unvisited link */
a:lin
color: #FF0000;
/* visited link */
a:visited {
pe lor: HOOFFOO;
/* mouse over link */
a:hover {
color: #FFOOFF;
/* selected link */
a:active {
color: #0000FF;
/* unvisited link */
a:lin
color: #FF0000;
/* visited link */
a:visited {
pe lor: HOOFFOO;
/* mouse over link */
a:hover {
color: #FFOOFF;
/* selected link */
a:active {
color: #0000FF;
Pseudo-elements
* A CSS pseudo-element is a keyword added to a selector that lets you
style a specific part of the selected element. For example, ::first-line
can be change the font of the first line of a paragraph.
+ Syntax :
Selector :: pseudo-element
{
property: value;
}
* A CSS pseudo-element is a keyword added to a selector that lets you
style a specific part of the selected element. For example, ::first-line
can be change the font of the first line of a paragraph.
+ Syntax :
Selector :: pseudo-element
{
property: value;
}
Pseudo-elements - Example
* The following example formats the first line of the text in all <p>
elements:
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}
* Pseudo-elements can be combined with CSS classes:
p.Intro :: first-letter
1
color: #ff0000;
font-size: 200%;
}
* The following example formats the first line of the text in all <p>
elements:
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}
* Pseudo-elements can be combined with CSS classes:
p.Intro :: first-letter
1
color: #ff0000;
font-size: 200%;
}
Pseudo-elements - Example
* The ::before pseudo-element can be used to insert some content
before the content of an element.
* The following example inserts an image before the content of each
<h1> element:
h1 :: before
{ @ This is a heading
content: url(smiley.gif);
}
* The ::before pseudo-element can be used to insert some content
before the content of an element.
* The following example inserts an image before the content of each
<h1> element:
h1 :: before
{ @ This is a heading
content: url(smiley.gif);
}
Pseudo-elements
* All CSS Pseudo Elements
Selector | Example Example description
Insert something after the content of each <p>
after p::after Aka
Insert something before the content of each <p>
before p::before element
ufirst-letter p:first-letter Selects the first letter of each <p> element
ufirst-line p::first-line Selects the first line of each <p> element
Selects the portion of an element that is selected
29 i ::selection
selection p: by a user
* All CSS Pseudo Elements
Selector | Example Example description
Insert something after the content of each <p>
after p::after Aka
Insert something before the content of each <p>
before p::before element
ufirst-letter p:first-letter Selects the first letter of each <p> element
ufirst-line p::first-line Selects the first line of each <p> element
Selects the portion of an element that is selected
29 i ::selection
selection p: by a user
Media Queries
* Another key component of responsive web design is media queries. Media
ueries is for different style rules for different size device such as mobile,
lesktop and so on.
* It uses the @media rule to include a block of CSS properties only if a
certain condition is true.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
@media only screen and (min-width: 481px) and (max-width: 768px)
body {
background-color: lightblue;
}
}
</style>
* Another key component of responsive web design is media queries. Media
ueries is for different style rules for different size device such as mobile,
lesktop and so on.
* It uses the @media rule to include a block of CSS properties only if a
certain condition is true.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
@media only screen and (min-width: 481px) and (max-width: 768px)
body {
background-color: lightblue;
}
}
</style>
Tags
Download
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 672
- Slides 127
- Age 465 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
26 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
30 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
24 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
27 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
23 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
24 views