Unit 1: Introduction To HTML and CSS: Prepared By: Chirag Patel Lecturer Computer Engineering K. D. Polytechnic, Patan

Unit 1 : Introduction to Html and
CSS
Prepared By:
Chirag Patel
Lecturer Computer Engineering
K. D. Polytechnic, Patan
History of Html
• Hypertext
• Hypertext is text that links to other information. By clicking on a link in a
hypertext document, a user can quickly jump to different content. So
hypertext is usually associated with Web pages.
• Hyperlink
• A hyperlink is a text or image that you can click on to jump to a new
document. When you move the cursor over a hyperlink, whether it is text or
an image, the arrow should change to a small hand pointing at the link.
When you click it, a new page or place in the current page will open.
• HTML
• HTML Stands for Hypertext Markup Language. HTML is the language used to
create web pages. "Hypertext" refers to the hyperlinks that an HTML page
may contain.
• "Markup language" refers to the way tags are used to define the page layout
and elements within the page.
• HTML contains elements (tags) that indicate how a web browser should
present the document.
6/8/2018 2
History of Html
• HTML contains elements (tags) that indicate how a web browser
should present the document. An HTML document is simply a text file
that contains information, which is to be published. The collection of
HTML pages makes the World Wide Web.
• HTML pages can be created using simple text editor such as Notepad.
The browser interprets this text file (.htm/.html) and renders on the
client computer.
• In 1989 HTML was originally developed by Tim Berners-Lee. It is
derived from SGML (Standard Generalized Markup Language).
• HTTP
• HTTP Stands for Hypertext Transfer Protocol. HTTP is the protocol
used to transfer data over the web.
• HTTP uses a server-client model. When you access a website, your
browser sends a request to the corresponding web server and it
responds with an HTTP status code. If the URL is valid and the
connection is granted, the server will send your browser the webpage
and related files.
6/8/2018 3
Basic HTML Tags
• <html>
• This tag is used to indicate that this is a HTML document. HTML
documents should start and end with this tag.
• <head>
• This tag is used to indicate the header section of the HTML
document, which typically includes the
• <title> and <meta> tags.
• <title>
• This indicates the title of this HTML page. The title is what is
displayed on the upper left corner of your browser when you view a
web page.
• <body>
• The <body> tag includes the HTML body of the document.
Everything inside the <body> tag is displayed on the browser.
6/8/2018 4
Basic HTML Tags
• <html>
• This tag is used to indicate that this is a HTML document. HTML
documents should start and end with this tag.
• <head>
• This tag is used to indicate the header section of the HTML
document, which typically includes the
• <title> and <meta> tags.
• <title>
• This indicates the title of this HTML page. The title is what is
displayed on the upper left corner of your browser when you view a
web page.
• <body>
• The <body> tag includes the HTML body of the document.
Everything inside the <body> tag is displayed on the browser.
6/8/2018 5
Basic HTML Tags
<html>
<head>
Output:
<title>Title of your web
page</title>
</head>
<body>HTML web page
contents</body>
</html>
6/8/2018 6
Basic HTML Tags
• <hr> <html>
• The <hr> tag is used for creating a <head><title>Title of your web
horizontal line. This is also called page</title></head>
Horizontal Rule in HTML.
<body>
• The HTML <hr> tag also supports
following additional attributes: HTML web page contents
– align - Specifies the alignment of <hr align="left" width="100px">
the horizontal rule. Value for this </body>
attributes is Left, right, center. </html>
– size - Specifies the height of the
horizontal rule.
• width - Specifies the width of the
horizontal rule.
6/8/2018 7
Basic HTML Tags
• <img> <html>
• The <img> tag is used to <head><title>Title of your web
embed an image on the page</title></head>
HTML document. The <body>HTML web page contents
attributes are as follows: <img src="Penguins.jpg"
– src: The file path to the width="80px" height="80px"
image file. alt="text describing the image" />
– width: The width of the </body>
image, in pixels. </html>
– height: The height of the
image, in pixels.
– alt: This attribute is used
to give alternative text
that can be displayed in
place of image.
6/8/2018 8
Basic HTML Tags
• <embed>
• The <embed> tag defines a
container for an external <html>
application or interactive content <head><title>Title of your web
(a plug-in).
page</title></head>
• height
– pixels <body>
– Specifies the height of the <embed src="Networking
embedded content
Basics.mp4" ></embed>
• src
– URL </body>
– Specifies the address of the external </html>
file to embed
• type
– media_type
– Specifies the media type of the
embedded content
• width
– pixels
– Specifies the width of the
embedded content
6/8/2018 9
Basic HTML Tags
• <bgsound>
• The HTML <bgsound> tag is used to play a soundtrack in
the background. This tag is for Internet Explorer only.
• loop
– number
– Lets you replay a background soundtrack a certain number
of times.
• src
– URL
– Specifies the path of the sound file.
<bgsound src="A.mp3">
• <blink>
– The HTML <blink> tag is used to enclose a text to make it
blink. This tag was supported by Netscape.
– <blink>This text will blink in Netscape Version 5.0</blink>
6/8/2018 10
Basic HTML Tags
• <font>
• The <font> tag is used to <html>
change the format of <head><title>Title of your web
the text on the web page</title></head>
page. <body>HTML web page contents
• Attributes of this tag: <font size="4" face="Arial"
– face: The type of font. color="red">Hello</font>
</body>
– size: This indicates the
size of the text. This can </html>
be absolute (0 .. 6).
– color: This indicates the
color of the text. Either
the color name or the
six-character color.
6/8/2018 11
Basic HTML Tags
• <center>
• The <center> tag causes all the text within the tag to be centered. An example is as
follows:
• <center>This is centered text.</center>
• <marquees>
• An HTML marquee is a scrolling piece or block of text displayed either horizontally
across or vertically down your webpage depending on the settings. This is created
by using HTML <marquees> tag.
• Attributes of this tag:
– Width - This specifies the width of the marquee.
– Height - This specifies the height of the marquee.
– Direction - This specifies the direction in which marquee should scroll. This can be a value like
up, down, left or right.
• <marquee direction="up">This text will scroll from bottom to up</marquee>
• <marquee direction="right">This text will scroll from left to right</marquee>
• <a>
• This tag used to create an anchor link and always a preferred way of creating links.
• Attribute of this tag:
– href - Defines URL of the liked page
– <a href="a.html">Next Page</a>
6/8/2018 12
Basic HTML Tags
List Tags <html>
<head><title>Title of your web
• <ul> page</title></head>
• The HTML <ul> tag is <body>
used for creating an <ul type="square">
<li>Cricket</li>
unordered list. Important <li>Football</li>
attribute for this tag: <li>Hockey</li>
– type - Specifies the style of the </ul> </body>
bullet. Value for this attributes </html>
is Disc, circle, square.
6/8/2018 13
Basic HTML Tags
List Tags <html>
• <li> page</title></head>
• The HTML <li> tag is used <body>
for specifying a list item in <ul type="A">
<li>Cricket</li>
ordered, unordered, <li>Football</li>
directory, and menu lists. <li>Hockey</li>
</ul> </body>
</html>
6/8/2018 14
Basic HTML Tags
List Tags <html>
• <ol> page</title></head>
• The HTML <ol> tag is <body>
used for creating an <ol type="1" reversed start=5>
<li>Cricket</li>
ordered list. <li>Football</li>
Attribut Value Description <li>Hockey</li>
e
reversed reversed Specifies the order of the list </ol> </body>
(descending).
</html>
start number Specifies the initial number to start the
list.
type A, a, I, i, Specifies the style of the list.
1
6/8/2018 15
Basic HTML Tags
• <table>
• The <table> tag specifies the table. This is very often used with
the <tr> and the <td> tags. The following attributes are
commonly used to define the properties of this table:
– width: This specifies the width of the table.
– border: This specifies table border. The number indicates the thickness
of the border.
– cellspacing: The amount spacing between the cell wall and the cell
border.
– cellpadding: The amount padding between cells and the each cell wall
in a table.
– bgcolor: This specifies the background color. The color value as color
name or color code.
6/8/2018 16
Basic HTML Tags
• <tr>
• The <tr> tag specifies the presence of a row. The following
attributes are commonly used to define the properties of this row:
– bgcolor: This specifies the background color for this row.
– height: This specifies the height of the row.
– rowspan: This specifies the number of rows this particular row occupies.
• <td>
• The <td> tag specifies the presence of a column. Columns are
specified within each row. The following attributes are commonly
used to define the properties of this column:
– valign: This specifies how the text is vertically aligned inside the column.
Common values include "top", "middle", and "bottom."
– width: This specifies the width of the column.
– colspan: This specifies the number of columns this particular column
occupies.
6/8/2018 17
Basic HTML Tags
<html>
page</title></head>
<body>
<table border=1>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td>Element 3</td></tr>
<tr>
<td colspan=2>Element 4</td>
<td>Element 5</td></tr>
<tr>
<td>Element 1</td>
<td>Element 2</td>
<td rowspan=2>Element 3</td>
</tr>
<tr><td>Element 1</td>
<td>Element 2</td>
</tr>
</table>
</body>
6/8/2018 18
</html>
Basic HTML Tags
• <div> <html>
• The HTML <div> tag <head><title>Title of your web
page</title></head>
is used for defining a <body>
<div style="color:Red">
section of your <h3>This is a heading in a div element</h3>
document. With the <p>This is some text in a div element.</p>
</div> </body>
div tag, you can </html>
group large sections
of HTML elements
together and format
them with CSS.
6/8/2018 19
Basic HTML Tags
• ID
• The id attribute of an HTML tag can be used to uniquely
identify any element within an HTML page.
• If you have two elements of the same name within a Web
page (or style sheet), you can use the id attribute to
distinguish between elements that have the same name.
– <p id="html">This para explains what is
HTML</p>
– <p id="css">This para explains what is
Cascading Style Sheet</p>
6/8/2018 20
Basic HTML Tags
• class <html>
• The class attribute specifies <head><title>Title of your web page</title>
one or more class names for <style>
an element. h1.intro { color: blue; } p.important { color:
• The class attribute is mostly green; }
used to point to a class in a </style>
style sheet. </head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an
important paragraph. </p>
<h3 class="important">Hello World</h3>
</body></html>
6/8/2018 21
Basic HTML Tags
• Special Character or tags
• Special characters and symbols not found on the keyboard can be inserted
using special character entities. These characters are recognized in HTML as
they begin with an ampersand (&) and end with a semi-colon. Following are
some special character:
Sr. No. Result Description Entity Name
1 non-breaking space
2 < less than <
3 > greater than >
4 & ampersand &
5 ¢ cent ¢
6 £ pound £
7 ¥ yen ¥
8 € euro €
9 © copyright ©
10 ® registered trademark ®

6/8/2018 22
Difference between HTML 4.0 & 5.0
HTML 4 HTML 5
HTML 4 uses common structures like HTML5 uses new structures such as drag, drop and
headers, footers. much more.
HTML 4 cannot embed video or audio directly. HTML 5 can contain embedded video and audio
It makes use of flash player for it. without using flash player.
In HTML 4, local storage is not possible and tags In HTML 5, new tags and new features like local
that can handle only one dimension are present. storage are enhanced.
HTML 4 cannot handle inaccurate syntax. HTML 5 is capable of handling inaccurate syntax.
Vector Graphics is possible with the help of
Vector graphics is integral part of HTML5 e.g. SVG
technologies such as VML, Silverlight, Flash
and canvas.
etc.
Application Cache, Web SQL database and Web
Browser cache can be used as temporary storage.
storage is available as client side storage.
Most of modern browser have started

supporting HTML5 specification e.g. Firefox,
Works with all old browsers.
Mozilla, Opera, Chrome, Safari etc.
6/8/2018 23
New Semantic Elements in HTML5
• Many web sites contain HTML code like: <div id="nav"> <div
class="header"> <div id="footer"> to indicate navigation, header,
and footer.
• HTML5 offers new semantic elements to define different parts of a
web page:
– <article>
– <aside>
– <footer>
– <header>
– <nav>
– <section>
– <main>
– <summary>
– <time>
– <figure>
6/8/2018 24
• <section>
• The <section> element defines a section in a document.
• A section is a grouping of content, typically with a heading.
• A Web site's home page could be split into sections for introduction,
content, and contact information.
• <article>
• The <article> element specifies independent, self-contained content.
• It should be possible to read it independently from the rest of the web
site.
• Examples of where an <article> element can be used:
– Forum post
– Blog post
– Newspaper article
• <header>
• The <header> element specifies a header for a document or section.
• The <header> element should be used as a container for introductory
content.
6/8/2018 • You can have several <header> elements in one document. 25
• <footer>
• The <footer> element specifies footer for a document or section.
• Footer typically contains the author of the document, copyright
information, links to terms of use, contact information, etc.
• You can have several <footer> elements in one document.
• <nav>
• The <nav> element defines a set of navigation links.
• The <nav> element is intended for large blocks of navigation links.
However, not all links in a document should be inside a <nav>
element.
• <aside>
• The <aside> element defines some content aside from the content
it is placed in (like a sidebar).
• The aside content should be related to the surrounding content.
6/8/2018 26
Example of New Semantic Elements in HTML5
<header>
<h1>This is page heading</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<article>
<h1>This is article heading</h1>
<p>Hello world! Hello world! Hello world!</p>
</article>
<aside>
<figure><img src="Penguins.jpg"
height="100px" width="100px" /></figure>
</aside>
<section>
<h1>This is a section heading</h1>
<p>Hello world! Hello world! Hello world! </p>
</section>
<footer><hr />Copyright (C) 2013. All rights
reserved. </footer>
6/8/2018 27
HTML5 Form Input Types
Input
Description Example
Type
number It is used for input fields that Quantity (between 1 and 5): <input
should contain a numeric value. type="number" name="quantity" min="1"
max="5">
Date It is used for input fields that Birthday: <input type="date" name="bday">
should contain a date.
color It is used for input fields that Select your favorite color: <input type="color"
should contain a color. name="favcolor">
range It is used for input fields that <input type="range" name="points"
should contain a value within a min="0" max="10">
range.
month It allows the user to select a month Birthday (month and year): <input
and year. type="month" name="bdaymonth">
week It allows the user to select a week Select a week: <input type="week"
and year. name="week_year">
time It allows the user to select a time (no Select a time: <input type="time"
6/8/2018 time zone). name="usr_time"> 28
HTML5 Form Input Types
It allows the user to select a Birthday (date and time): <input
datetim e date and time (with time type="datetime" name="bdaytime">
zone).
It allows the user to select a Birthday (date and time):
datetim e-local date and time (no time <input type="datetime-local"
zone). name="bdaytime">
It is used for input fields E-mail: <input type="email" name="email">

email that should contain an e-
mail address.
It is used for search fields Search Google: <input type="search"
search (a search field behaves name="googlesearch">
like a regular text field).
It is used for input fields Telephone: <input type="tel" name="usrtel">
tel that should contain a
telephone number.
It is used for input fields Add your homepage: <input type="url"
url that should contain a URL name="homepage">
address.
6/8/2018 29
HTML5 Form Elements
• <datalist>
• The <datalist> element specifies <html>
a list of pre-defined options for <head><title>Title of your web page</title>
an <input> element. </head>
• Users will see a drop-down list of <body>
pre-defined options as they
input data. <input list="browsers" name="browser">
• The list attribute of the <input> <datalist id="browsers">
element, must refer to the id <option value="Internet Explorer">
attribute of the <datalist> <option value="Firefox">
element.
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</body></html>
6/8/2018 30
HTML5 Form Elements
• <keygen>
<html>
• The purpose of the <keygen>
<head><title>Title of your web page</title>
element is to provide a secure
way to authenticate users. </head>
<body>
• The <keygen> element
specifies a key-pair generator <form action="demo_keygen.asp"
field in a form. method="get"> Username: <input
• When the form is submitted, type="text" name="usr_name">
two keys are generated, one Encryption: <keygen name="security">
private and one public. <input type="submit">
• The private key is stored </form></body></html>
locally, and the public key is
sent to the server.
• The public key could be used
to generate a client certificate
to authenticate the user in the
future.
6/8/2018 31
HTML5 Form Elements
• <output>
• The <output> element represents the result of a calculation (like one performed by a script).
Attribute Description
for Specifies the relationship between the result of the calculation, and the elements used in the
calculation
form Specifies one or more forms the output element belongs to
name Specifies a name for the output element
<html>
<head><title>Title of your web page</title>
</head><body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input
type="range" id="a" value="50"> 100 +<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form></body></html>
6/8/2018 32
HTML5 Form Elements
• HTML5 Video
<html>
• Before HTML5, there was <head><title>Title of your web page</title>
no standard for showing
videos on a web page. </head>
• Before HTML5, videos could <body>
only be played with a plug- <video width="200px" hight="200px"
in (like flash). controls autoplay>
• The HTML5 <video> <source src="Networking Basics.mp4"
element specifies a type="video/mp4"> Your browser does not
standard way to embed a support HTML5 video.
video in a web page. </video></body></html>
• HTML Video - Media Types:
MP4, WebM, Ogg
• Attribute of video tag:
• Autoplay - To start a video
automatically use the
autoplay attribute.
6/8/2018 33
HTML5 Form Elements
• HTML5 Audio <html>
• Before HTML5, there was <head><title>Title of your web page</title>
no standard for playing </head>
audio files on a web <body>
page. <audio controls>
<source src="A.mp3" type="audio/mp3">
• Before HTML5, audio files Your browser does not support the audio
could only be played with element.
a plug-in (like flash). </audio> </body></html>
• The HTML5 <audio>
element specifies a
standard way to embed
audio in a web page.
• HTML Audio - Media
Types: MP3, Ogg, Wav
6/8/2018 34
CSS
• What is CSS?
• CSS stands for Cascading Style Sheets
• CSS defines how HTML elements are to be displayed
• Styles were added to HTML 4.0 to solve a problem
• CSS saves a lot of work
• External Style Sheets are stored in CSS files
• Uses of CSS
• CSS saves time because with CSS, we only have to specify content
setting details once for any element. CSS automatically apply the
specified styles whenever that element occurs.
• The file size of the CSS is very small hence your website takes
minimal loading time.
• Easy maintenance: To change the style of an element, we only have
to make an edit in one place only.
• CSS has much wider array of attribute than HTML so by creating the
CSS; you can make the web design flexible.
6/8/2018 35
CSS
• Syntax of CSS
– The CSS syntax is made up of three parts: a selector, a property and a
value.
– Syntax: selector {property: value;}
– The selector is normally the HTML element/tag that you want to define.
– The property is the attribute that you want to change and each property
can take a value. The property and value separated by a colon.
– A CSS declaration always ends with a semicolon and declaration groups
are enclosed by curly braces.
– By using the below code, all <p> elements will be center-aligned, with a
green text color.
– Example: p { color: red; text-align: center; }
• Types of CSS
– There are three ways to implement css command into your site:
1. Inline style
2. Embedded/Internal style
3. External/Linked style sheet
6/8/2018 36
CSS: Inline Style
• Inline styles are <html>
<head>
styles that are <title>Inline Style</title>
written directly in </head>
the tag on the <body bgcolor=”#ffffff”>
<p style=”color:blue; font-family:arial;” >
document. Inline This is an example of Inline Style…
styles affect only the </p>
tag they are applied </body>
</html>
to.
• Syntax: <tag
style=”property1:
value; property2:
value;”> </tag>
6/8/2018 37
CSS: Embedded/Internal Style
• When using internal/embedded <html>
CSS, you must add a new tag, <head>
<style>, inside the <head> tag. <title>Embedded Style</title>
• Syntax: <style>
p{color: yellow;}
• <style type=”text/css”> Selector
body{background-color: black;}
{property: value;} Selector
{property: value;} </style>
</head>
• …….
<body>
• </style>
<p>
This is an example of Embedded/ Internal
Style…
</p>
</body>
</html>
6/8/2018 38
CSS: External/Linked Style Sheet
• External styles are styles that are <html>
written in a separate document
and then attached to various <head>
Web documents. External style <title>Linked Style Sheets</title>
sheets can affect any document <link rel="stylesheet" href="style.css"
they are attached to.
type="text/css"/>
• External CSS file that contains </head>
only CSS code and is saved with a
“.css” file extension. This file is <body>
used in you HTML document <h3> A Document Title </h3>
using the <link> tag instead of <p>
<style>. The Color of this p tag is blue. The
• let’s create style.css file having
below code. background color is gray.
</p>
• Body { background-color: </body>
gray; } </html>
• p{ color: blue; }
• H3 { color: white; }
6/8/2018 39
The CSS Box Model
• The CSS box model is a box that wraps around HTML elements, and it
consists of: margins, borders, padding, and the actual content.
• The box model allows us to add a border around elements, and to
define space between elements.
• Content - The content of the box, where
text and images appear.
• Padding - Clears an area
around the content.
• Border - A border that goes
around the padding and content.
• Margin - Clears an area outside the border.
6/8/2018 40
The CSS Box Model
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
</style>
<div>
Cascading Style Sheets (CSS)
is a style sheet language
used for describing the look
and formatting of a
document written in a
markup language.
</div>
6/8/2018 41
CSS Margin
• The CSS margin defines the space around elements. The margin clears an
area around an element (outside the border). The margin does not have a
background color, and is completely transparent
• Example: Applying margins for paragraph tag.
• p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 150px; }
– margin: 25px 50px 75px 100px; //top margin is 25px, right margin is 50px, bottom margin is
75px and left margin is 100px
– margin: 25px 50px 75px; // top margin is 25px, right and left margins are 50px and bottom
margin is 75px
– margin: 25px 50px; // top and bottom margins are 25px and right and left margins are 50px
– margin: 25px; // all four margins are 25px
Value Description
auto The browser calculates a margin
length Specifies a margin in px, pt, cm, etc. Default value is 0px
% Specifies a margin in percent of the width of the
containing element
inherit Specifies that the margin should be inherited from the
6/8/2018 parent element 42
CSS Padding
• The CSS padding properties define the space between the element border
and the element content. The padding clears an area around the content
(inside the border) of an element. The padding is affected by the background
color of the element.
• Example: Applying padding for paragraph tag.
p { padding-top: 100px; padding-bottom: 100px; padding-right: 150px; padding-left: 150px; }
– padding: 25px 50px 75px 100px; //top padding is 25px, right padding is
50px,bottom padding is 75px and left padding is 100px
– padding: 25px 50px 75px; //top padding is 25px, right and left paddings are
50px and bottom padding is 75px
– padding: 25px 50px; //top and bottom paddings are 25px and right and left
paddings are 50px
– padding: 25px; //all four paddings are 25px
Value Description
length Defines a fixed padding (in pixels, pt, em,
etc.)
6/8/2018 % Defines a padding in % of the containing 43
element
CSS Text and its properties
Property Description Example
It is used to set the color of the text. With CSS, a color is body { color: black; } h1 {
specified by: color: #ff00ff;
color a HEX value like “#ff00ff” }
a RGB value like “rgb(255,0,0)” a Color
name like “black”
It is used to specify the horizontal alignment of the text. The p.main { text-align: justify; } h1 {
text-align text can be centered, or aligned to the left or right, or text-align: right; }
justified.
It is used to set or remove decoration from text. It is mostly a{
used to remove underlines from links for design purposes. text-decoration: none;
This property has following values: }
text-decoration (1) none: Defines a normal text. This is default. h1 {
(2) underline: Defines a line below the text. text-decoration: underline;
(3) overline: Defines a line above the text. }
(4) line-through: Defines a line through the text.
It is used to controls the capitalization of text. This property p.uppercase {
specify uppercase and lowercase letters in a text. This text-transform: uppercase;
property has following values: }
(1) none: No capitalization. The text renders as it is. p.lowercase {
(2) capitalize: Transforms the first character of each word to text-transform: lowercase;
text-transform }
uppercase.
(3) uppercase: Transforms all characters to p.capitalize {
uppercase. text-transform: capitalize;
(4) lowercase: Transforms all characters to }
6/8/2018 44
lowercase.
CSS Text and its properties
It is used to specifies the indentation of the first
text-indent p { text-indent: 50px; }
line in a text-block.
This property adds shadow to text. This property
has following values:
(1) h-shadow(Required): The position of the
horizontal shadow. h1 {
(2) v-shadow(Required): The position of the
text-shadow: 2px 2px 8px
text-shadow
vertical shadow. #FF0000;
}
(3) blur-radius(Optional): The blur radius.
Default value is 0.
(4) color(Optional): The color of the shadow.
(5) none: Default value. No shadow.
h1 { letter-spacing: 2px; }
This property increases or decreases the
letter-spacing h2 { letter-spacing: -3px;
space between characters in a text.
}
line-height This property specifies the line height. p.small { line-height: 70%;
}
6/8/2018 45
CSS Font
Sets all the font properties in one p { font: italic bold 12px/30px
font
declaration. Georgia, serif; }
Specifies the font family for text. There are

two types of font family names: p.serif {
(1) family-name like "times", "courier", font-family: "Times New
font-family
"arial", etc. Roman", Times, serif;
(2) generic-family like "serif", "sans-serif", }
etc.
Specifies the font size of text. Different

h1 { font-size:150%; } div
Property values for font- size are medium,
{
font-size xx-small, x-small small, large, x-large, xx-
font-size:larger;
large, smaller, larger, length, initial and
}
inherit;
Specifies the font style for text. This propery has

three values:
p.normal {
(1) normal: The text is shown normally
font-style font-style: normal;
(2) italic: The text is shown in italics
}
(3) oblique: This text is very similar to italic
but less supported.
6/8/2018 46
CSS Font
Specifies whether or not a text p.normal {

should be displayed in a small- font-variant: normal;
caps font. It has four property }
values: p.small {
(1)normal: Displays a normal font. font-variant: small-caps;
font-variant (2)small-caps: Displays a small-caps}
font
(3)initial: Sets this property to its
default value
(4)inherit: Inherits this property from
its parent element.
The font-weight property sets p.normal {
font-weight: normal;
how thick or thin characters in
}
text should be displayed. It has
p.thick {
following property values: normal,
font-weight font-weight: bold; }
bold, bolder, lighter, 100, 200,
300, 400,
500, 600, 700, 800, 900, initial and
6/8/2018 47
inherit.
CSS Link
• Links can be styled with any CSS property (e.g.
color, font-family, background, etc.).
• It has four links states:
– a:link: an unvisited link.
– a:visited: a link the user has visited.
– a:hover: a link when the user mouse over it.
– a:active: a link the moment it is clicked.
Example:
/* visited link */
/* unvisited link */ /* mouse over link */ /* selected link */
a:link { a:visited {
a:hover { color: a:active { color:
color: #FF0000; color:
#FF00FF; #0000FF;
} #00FF00; } }
}
6/8/2018 48
CSS Background
Sets all the background background: #00ff00

background
properties in one declaration url("smiley.gif")
Sets whether a background

background- background- attachment:
image is fixed or scrolls with the
attachment fixed;
rest of the page
Sets the background color of an
background-color background-color: yellow;
element
background- Sets the background image for background-image:
image an element url("paper.gif");
background- Sets the starting position of a

background-position: center;
position background image
background- Sets how a background image

background-repeat: no- repeat;
repeat will be repeated
6/8/2018 49
CSS Border Properties
• Border Style
• The border-style property specifies what kind of border to
display. border-style values:
6/8/2018 50
• Border Width
• The border-width property is used to set the width of the
border.
• The width is set in pixels, or by using one of the three pre-
defined values: thin, medium, or thick.
• Example: border-width: medium;
• Border Color
• The border-color property is used to set the color of the
border. The color can be set by:
– name - specify a color name, like "red"
– RGB - specify a RGB value, like "rgb(255,0,0)"
– Hex - specify a hex value, like "#ff0000"
• Example: border-color: red;
6/8/2018 51
• Border Width
• The border-width property is used to set the width of the
border.
• The width is set in pixels, or by using one of the three pre-
defined values: thin, medium, or thick.
• Example: border-width: medium;
• Border Color
• The border-color property is used to set the color of the
border. The color can be set by:
– name - specify a color name, like "red"
– RGB - specify a RGB value, like "rgb(255,0,0)"
– Hex - specify a hex value, like "#ff0000"
• Example: border-color: red;
6/8/2018 52
The position Property
• The position property specifies the type of positioning method used for an
element.
• There are four different position values: static, relative, fixed, absolute
• Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set first.
• Position: static
• HTML elements are positioned static by default.
• Static positioned elements are not affected by the top, bottom, left,
and right properties.
• An element with position: static; is not positioned in any special way;
it is always positioned according to the normal flow of the page.
• Position: fixed
• An element with position: fixed; is positioned relative to the viewport,
which means it always stays in the same place even if the page is
scrolled. The top, right, bottom, and left properties are used to
position the element.
• A fixed element does not leave a gap in the page where it would
normally have been located.
6/8/2018 53
<html>
page</title></head>
<style> div.static {
position: static;
border: 3px solid #8AC007;
}
div.fixed { position: fixed; bottom: 0;
right: 0; width: 300px;
}
</style>
</head><body>
<div class="static">
This div element has position: static;
</div>
<div class="fixed">
This div element has position: fixed;
</div>
</body></html>
6/8/2018 54
• Position: relative
• An element with position: relative; is positioned relative to
its normal position.
• Setting the top, right, bottom, and left properties of a
relatively-positioned element will cause it to be adjusted
away from its normal position. Other content will not be
adjusted to fit into any gap left by the element.
• Position: absolute
• An element with position: absolute; is positioned relative to
the nearest positioned ancestor (instead of positioned
relative to the viewport, like fixed).
• However; if an absolute positioned element has no
positioned ancestors, it uses the document body, and moves
along with page scrolling.
6/8/2018 55
<html>
<head>
<style> div.relative {
position: relative; width: 400px; height:
200px;
}
div.absolute { position: absolute; top:
80px;
right: 0; width: 200px; height: 100px;
}
</style>
</head>
<body>
<div class="relative">This <div> element
has position: relative;</div>
<div class="absolute">This <div> element
has position: absolute;</div>
</body></html>
6/8/2018 56
Overlapping Elements
<html>
• When elements are <head>
positioned, they can <title>Linked Style Sheets</title>
overlap other elements. <style>
img { position: absolute; left: 0px; top: 0px;
• The z-index property z-index: -1; }
specifies the stack order of </style>
an element (which element <img src="Penguins.jpg" width="100"
should be placed in front of, height="140">
<p>Because the image has a z-index of -1, it
or behind, the others). will be placed behind the text. </p></body>
• An element can have a </html>
positive or negative stack
order.
6/8/2018 57
Float Properties
• Float property can be used to wrap text around images.
• All CSS Float Properties
Property Description Values
Specifies on which sides of an element where floating left, right, both,

clear
elements are not allowed to float none, inherit
float Specifies whether or not an element should float left, right, none, inherit
<html>
<head>
<title>Linked Style Sheets</title>
<style> img { float: left; } </style>
<p><img src="Penguins.jpg"
alt="W3Schools.com" width="100"
height="140">
Cascading Style Sheets (CSS) is a style sheet
language used for describing the look and
formatting of a document written in a
markup language. </p>></body>
6/8/2018 58
</html>
Difference between CSS2 and CSS3
• CSS3 is divided into many different documents called
Modules. Every module adds new capability or extends
features defined in CSS2. Work on CSS3 started around the
time of publication of the original CSS2 recommendation.
• Because of the modularization in CSS3, every modules has
different stability and is in different status.
• The CSS3 version supports many more browsers than CSS2.
• CSS3 has other added features such as new combinator, new
CSS selectors, new pseudo-elements and new style properties
6/8/2018 59
Opacity (Transparency)
<html>
• The opacity property sets the <head>
opacity level for an element. <style>
The CSS3 property for img { opacity: 0.4; }
transparency is opacity. </style></head>
• IE9, Firefox, Chrome, Opera, <body>
and Safari use the property <img src="klematis.jpg" width="150"
opacity for transparency. The height="150">
opacity property can take a </body></html>
value from 0.0 - 1.0. A lower
value makes the element
more transparent.
• The opacity-level describes
the transparency-level, where
1 is not transparent at all, 0.5
is 50% see- through, and 0 is
completely transparent
6/8/2018 60
Box-shadow (Shadows)
• The box-shadow property
div {
allows designers to easily
width: 300px; height: 100px; padding: 15px;
implement multiple drop
background-color: yellow;
shadows (outer or inner) on
box-shadow: 10px 10px 5px grey;
box elements, text, etc by
}
specifying values for color,
size, blur and offset. The <div>This is a div element with a box-
property of box- shadow is a shadow</div>
comma-separated list of
shadows, each specified by 2-
4 length values, an optional
color, and an optional inset
keyword. Omitted lengths are
0.
• Syntax: box-shadow: none|h-
shadow v-shadow blur spread
color |inset|initial|inherit;
6/8/2018 61
Border-radius (Rounded Corners)
• The border-radius property <style>
is a shorthand property for div {
setting the four border -*-*- border: 2px solid #000000; padding: 10px
radius properties. This 40px; background: #ababab; width: 300px;
border-radius: 10px;
property allows you to add
}</style>
rounded borders to <div id="BorderRadiusDemo">This is the
elements. demo example of the css property border-
• Syntax: border-radius: 1-4 radius. </div>
length|% / 1-4
length|%|initial|inherit;
6/8/2018 62
Gradients
• A gradient is a sequence of colors. Simple gradients flow from a
foreground to a background color, but gradients can contain many
other colors. CSS3 gradients let you display smooth transitions
between two or more specified colors.
• By using CSS3 gradients you can reduce download time and
bandwidth usage. In addition, elements with gradients look better
when zoomed, because the gradient is generated by the browser.
• CSS3 defines two types of gradients: (1). Linear Gradient and (2).
Radial Gradient.
• Linear Gradients
• Linear Gradient which flows in a straight line from one color to
another.
• To create a linear gradient you must define at least two color stops.
Color stops are the colors you want to render smooth transitions
among. You can also set a starting point and a direction (or an angle)
along with the gradient effect.
• Syntax: background: linear-gradient(direction, color-stop1, color-
stop2, ...);
6/8/2018 63
Linear Gradients
<html>
<head>
<style> div{
height: 200px; width:200px;
background: linear-gradient(to
right, red , blue);
}</style>
</head>
<body>
<div id="ligrad">Linear
Gradient - Left to Right</div>
</body>
</html>
6/8/2018 64
Radial Gradients
• Radial Gradient where one <html>
color is concentrated at a <head>
specific point, and the <style>
other colors are visible div{ height: 150px;
farther from that point. By width: 200px;
default, shape is ellipse, background: radial-gradient(circle, pink,
size is farthest-corner, and yellow, green);
position is center. To create }</style></head>
a radial gradient you must <body>
also define at least two <div id="Radgrad">Radial Gradient - Circle
color stops. Shape</div>
</body>
• Syntax: background: radial- </html>
gradient(shape size at
position, start-color, ..., last-
color);
6/8/2018 65
Transition Animation
• CSS3 transitions allows you to
change property values <html><head>
smoothly (from one value to <style>
another), over a given div { width: 100px;
duration. height: 100px; background: red; transition-
–transition-property: The type of property: width; transition-duration: 2s;
animation defined by this tag. The transition-delay: 2s;
default value is all, but other types
are expected to work, including transition-timing-function: linear} div:hover
color, length, width, percentage, { width: 300px; }
opacity, and number. </style>
–transition-duration: The length of </head>
the animation in seconds.
–transition-timing-function: If you <body>
want the animation to occur at a <div>
constant speed, use linear. </div>
–transition-delay: If you include a </body>
second time value, this will be
considered a delay. The animation </html>
will not begin until after the delay.
6/8/2018 66
Transformations
• A Transformation is an effect that lets an element change
shape, size and position.
• The transform property applies a 2D or 3D transformation to
an element. This property allows you to rotate, scale, move,
skewX, skewY and skew, etc., elements.
• Syntax : transform: none|transform-functions|initial|inherit;
• When you apply transform to an element, you need to apply
one or more of the following parameters to describe the type
of transformation:
– translate: The translate() method moves an element from its current
position (according to the parameters given for the X-axis and the Y-axis).
– rotate: The rotate() method rotates an element clockwise or counter-
clockwise according to a given degree. Using negative values will rotate
the element counter-clockwise.
– scale: The scale() method increases or decreases the size of an element
(according to the parameters given for the width and height).
6/8/2018 67
Transformations
– skew: The skew() method skews an element along the X and Y-
axis by the given angles.
– skewX: The skewX() method skews an element along the X-axis
by the given angle.
– skewY: The skewY() method skews an element along the Y-axis
by the given angle.
– matrix: The matrix() method combines all the 2D transform
methods into one. The matrix() method take six parameters,
containing mathematic functions, which allows you to rotate,
scale, move (translate), and skew elements.
6/8/2018 68
Transformations
#box1, #box2, #box3, #box4, #box5,
#box6{ width: 75px;
height: 40px;
border: 3px solid black; background-
color: yellow; }
#box2 { transform: translate(100px,15px);
}
#box3 { transform: rotate(80deg); }
#box4 { transform: scale(2)
translate(100px,15px); }
#box5 { transform: skew(20deg,10deg); }
#box6 { transform: matrix(1, -0.3, 0, 1, 0,
0); }
In Body Tag:
<div id="box1">Original Box</div>
<div id="box2">Translate</div>
<div id="box3">Rotate</div>
<div id="box4">Scale</div>
<div id="box5">Skew</div>
<div id="box6">Matrix</div>
6/8/2018 69
Animations
• An animation lets an element gradually change from one style to
another.
• You can change as many CSS properties you want, as many times
you want.
• To use CSS3 animation, you must first specify some keyframes for
the animation.
• Keyframes hold what styles the element will have at certain
times.
6/8/2018 70
Key Frames
•The @keyframes rule specifies the animation code. The
animation is created by gradually changing from one set of CSS
styles to another.
•During the animation, you can change the set of CSS styles many
times.
•Specify when the style change will happen in percent, or with the
keywords "from" and "to", which is the same as 0% and 100%. 0%
is the beginning of the animation, 100% is when the animation is
complete.
•For best browser support, you should always define both the 0%
and the 100% selectors.
•Syntax: @keyframes animationname {keyframes-selector {css-
styles;}}
6/8/2018 71
Key Frames
<html>
<head>
<style> div {
width: 100px; height: 100px;
background-color: red; animation-
name: example; animation-
duration: 4s;
}
@keyframes example {
from {background-color: red;} to
{background-color: green;}
}</style>
</head>
<body>
<div>Red to green</div>
</body>
</html>
6/8/2018 72

Unit 1: Introduction To HTML and CSS: Prepared By: Chirag Patel Lecturer Computer Engineering K. D. Polytechnic, Patan

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 1: Introduction To HTML and CSS: Prepared By: Chirag Patel Lecturer Computer Engineering K. D. Polytechnic, Patan

Uploaded by

Copyright:

Available Formats

Unit 1 : Introduction to Html and

1 non-breaking space

2 < less than <

3 > greater than >

4 & ampersand &

10 ® registered trademark ®

Most of modern browser have started

It is used for input fields E-mail: <input type="email" name="email">

Specifies the font family for text. There are

Specifies the font size of text. Different

Specifies the font style for text. This propery has

Specifies whether or not a text p.normal {

Sets all the background background: #00ff00

Sets whether a background

background- Sets the starting position of a

background- Sets how a background image

Specifies on which sides of an element where floating left, right, both,

You might also like

Unit 1: Introduction To HTML and CSS: Prepared By: Chirag Patel Lecturer Computer Engineering K. D. Polytechnic, Patan

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 1: Introduction To HTML and CSS: Prepared By: Chirag Patel Lecturer Computer Engineering K. D. Polytechnic, Patan

Uploaded by

Copyright:

Available Formats

Unit 1 : Introduction to Html and

1 non-breaking space &nbsp;

2 < less than &lt;

3 > greater than &gt;

4 & ampersand &amp;

10 ® registered trademark &reg;

Most of modern browser have started

It is used for input fields E-mail: <input type="email" name="email">

Specifies the font family for text. There are

Specifies the font size of text. Different

Specifies the font style for text. This propery has

Specifies whether or not a text p.normal {

Sets all the background background: #00ff00

Sets whether a background

background- Sets the starting position of a

background- Sets how a background image

Specifies on which sides of an element where floating left, right, both,

You might also like

1 non-breaking space

2 < less than <

3 > greater than >

4 & ampersand &

10 ® registered trademark ®