Visit : https://hemanthrajhemu.github.

io

Join Telegram to get Instant Updates: https://bit.ly/VTU_TELEGRAM

Contact: MAIL: futurevisionbie@gmail.com

INSTAGRAM: www.instagram.com/hemanthraj_hemu/

INSTAGRAM: www.instagram.com/futurevisionbie/

WHATSAPP SHARE: https://bit.ly/FVBIESHARE

 BMS INSTITUTE OF TECHNOLOGY AND
MANAGEMENT
Avalahalli, Doddaballapur Main Road, Bengaluru – 560064

DEPARTMENT OF CSE

17CS71 – Web WEB TECHNOLOGY AND ITS

APPLICATIONS
[As per Choice Based Credit System (CBCS) scheme]
(Effective from the academic year 2017 - 2018)
SEMESTER – VII

By,
Prof.Muneshwara M S Prof. Shankar R

Dept. of CSE, BMSIT&M

https://hemanthrajhemu.github.io
HTML 1: Overview

https://hemanthrajhemu.github.io 014
om
 Objectives
1 HTMLDefinedandits
History 2 HTMLSyntax

3 Semantic Markup
4 StructureofHTML

5 QuickTour of HTML
6 HTML
SemanticElements

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Brief History ofHTML
Did we mention that this will be brief?

• ARPANET of the late 1960s

• jump quickly to the first public specification of
the HTML by Tim Berners-Lee in 1991
• HTML’s codification by the World-Wide Web
Consortium (better known as the W3C) in
1997.

https://hemanthrajhemu.github.io
 HTML Syntax
What is a markup language?

HTML is defined as a markup language.

• A markup language is simply a way of
annotating a document in such a way to make
the annotations distinct from the text being
annotated.
• The term comes from the days of print,
when editors would write instructions on
manuscript pages that might be revision
instructions to the author or copy editor.
https://hemanthrajhemu.github.io
Sample ad hoc markup

https://hemanthrajhemu.github.io
Markup
What is itagain?

At its simplest, markup is a way to indicate

information about the content
• This “information about content” inHTML is
implemented via tags (aka elements).
• The markup in the previous slide consists of the red
text and the various circles and arrows on the one
page, and the little yellow sticky notes on the other.
• HTML does the same thing but uses textual tags.

https://hemanthrajhemu.github.io
What is the W 3 C ?
Standards

The W3C is the main standards organization for the

World Wide Web.
To promotes compatibility the W3Cproduces
recommendations (also called specifications).
In 1998, the W3C turned its attention to a new
specification called XHTML 1.0, which was a version of
HTML that used stricter XML (Extensible Markup
Language) syntax rules.

https://hemanthrajhemu.github.io
XHTML
Partying like it’s1999

The goal of XHTML with its strict rules was to make

page rendering more predictable by forcing web
authors to create web pages without syntax errors.

https://hemanthrajhemu.github.io
XHTML
You too can be strict

The XML-based syntax rules for XHTML are pretty easy

to follow.
The main rules are:
• lowercase tag names,
• attributes always within quotes,
• and all elements must have a closing element (or be
self-closing).

https://hemanthrajhemu.github.io
XHTML
Two versions

To help web authors, two versions of XHTMLwere

created:
XHTML 1.0 Strict and XHTML 1.0 Transitional.
• The strict version was meant to be rendered bya
browser using the strict syntax rules and tag
support described by the W3C XHTML 1.0 Strict
specification.
• The transitional recommendation is a more
forgiving flavor of XHTML, and was meant to actas
a temporary transition to the eventual global
adoption of XHTMLStrict.

https://hemanthrajhemu.github.io
Standards Movement
Following a standard is a good thing

During much of the 2000s, the focus in the

professional web development community wason
standards: that is, on limiting oneself to the W3C
specification for XHTML.

https://hemanthrajhemu.github.io
Validators
How to ensure your pages follow a standard

A key part of the standards movement in the web

development community of the 2000s was theuse of
HTML Validators as a means of verifying that a web
page’s markup followed the rules for XHTML
transitional or strict.

https://hemanthrajhemu.github.io
How about an example
Only if you have an internet connection

Open a web browser to the W3C

validator and find a few websites to
test.

Type the URL into the bar, and you

can check if the home page is valid
against various standards (or auto-
detect)

https://hemanthrajhemu.github.io
 XHTML 2.0 and WHATWG
Where did it go?

In the mid 2000s, XHTML 2.0 proposed a revolutionary and

substantial change to HTML.
• backwards compatibility with HTML and XHTML 1.0 was
dropped.
• Browsers would become significantly less forgiving of
invalid markup.
At around the same time, a group of developers atOpera
and Mozilla formed the WHATWG (Web Hypertext
Application Technology Working Group) group within the
W3C.
This group was not convinced that the W3C’s embrace of
XML and its abandonment of backwards-compatibility was
the best way forward for theweb.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 HTML5
The new hotness

By 2009, the W3C stopped work on XHTML 2.0 and

instead adopted the work done by WHATWG and
named it HTML5.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 HTML5
Three main aims

There are three main aims to HTML5:

• Specify unambiguously how browsers should deal
with invalid markup.
• Provide an open, non-proprietary programming
framework (via Javascript) for creating rich web
applications.
• Be backwards compatible with the existingweb.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 HTML5
It evolves

While parts of the HTML5 are still being finalized, all of

the major browser manufacturers have at least
partially embraced HTML5.
Certainly not all browsers and allversions support
every feature of HTML5.
This is in fact by design. HTML in HTML5 is now aliving
language: that is, it is a language that evolves and
develops over time.
As such, every browser will support agradually
increasing subset of HTML5 capabilities

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 HTML5 Support in Browsers
NoHTML5
Support

Partial HTML5Support

Full HTML5 Support

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Section2of6

H T M L SYNTAX
https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Elements and Attributes
More syntax

HTML documents are composed of textual content

and HTML elements.
An HTML element can contain text, other elements, or
be empty. It is identified in the HTML document by
tags.
HTML elements can also contain attributes. An HTML
attribute is a name=value pair that provides more
information about the HTMLelement.
In XHTML, attribute values had to be enclosedin
quotes; in HTML5, the quotes areoptional.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 What HTML lets you do

 Insert images using the <img> tag

 Create links with the <a>tag
 Create lists with the <ul>, <ol>and
<li> tags
 Create headings with <H1>, <H2>,
…,<H6>
 Define metatdata with <meta>tag
 And much more…
https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Elements and Attributes
Opening Tag ClosingTag

<a href="http://www.centralpark.com">Central Park</a>

Element Name Attribute Content

May be text or other HTML elements

Trailing Slash

Example empty element <br / >

Element Name

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Nesting HTML elements

Often an HTML element will contain otherHTML

elements.
In such a case, the container element is said to bea
parent of the contained, or child, element.
Any elements contained within the child are said to be
descendents of the parent element; likewise, any
given child element, may have a variety of ancestors.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Hierarchy of elements
ancestor

<body> parent
child
<p>
This i s some <strong>text</strong>
</p>
<h1>Title goes here</h1>
sibling
<di v>descendants
<p>
This i s <span>important</span>
</p>
</ di v>
</body>

<body>
descendants children

<p> <h1> <di v>

siblings

<st r ong> <p>

ancestors

<span>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Nesting HTML elements

In order toproperly construct a hierarchy of elements,

your browser expects each HTML nested element to
be properly nested.
That is, a child’s ending tag must occur before its
parent’s ending tag.
Correct Nesting

<h1>Share Your <strong>Travels</strong></h1>

<h1>Share Your <strong>Travels</h1></strong>

Incorrect Nesting
https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Section3of6

SEMANTIC MARKUP
https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Semantic Markup
What does itmean?

Over the past decade, a strong and broad consensus

has grown around the belief that HTML documents
should only focus on the structure of the document.
Information about how the content should look when
it is displayed in the browser is best left to CSS
(Cascading Style Sheets).

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Semantic Markup

As a consequence, beginning HTML authors are often

counseled to create semantic HTMLdocuments.
That is, an HTML document should not describehow
to visually present content, but only describe its
content’s structural semantics or meaning.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Structure

Structure is a vital way of communicatinginformation

in paper and electronic documents.
All of the tags that we will examine in this
presentation are used to describe the basic structural
information in a document, such as articles, headings,
lists, paragraphs, links, images, navigation, footers, and
so on.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Semantic Markup
Its advantages

Eliminating presentation-oriented markup and writing

semantic HTML markup has a variety of important
advantages:
Maintainability. Semantic markup is easier to update and
change than web pages that contain a great deal of
presentation markup.
Faster. Semantic web pages are typically quicker to author
and faster to download.
Accessibility. Visiting a web page using voice reading
software can be a very frustrating experience if the site
does not use semantic markup.
Search engine optimization. Semantic markup provides
better instructions for search engines: it tells them what
things are important content on thesite.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Section4of6

STRUCTURE O F H T M L
https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Simplest HTML document
1 <!DOCTYPE html>
< t i t l e > A Very Small Document</title>
<p>This i s a simple document with not much content</p>

The <title> element (Item ) is used to provide a broad description of the

content. The title is not displayed within the browser window. Instead, the
title is typically displayed by the browser in its window and/or tab.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 A more complete document

1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta c hars et="utf - 8" > 5
3 <title>Share Your Travels - - New York - Central P a r k < / t i t l e >
< l i n k r e l = " s t y l e s h e e t " href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
1 DOCTYPE
(short for Document Type Definition)

Tells the browser (or any other client software that is

reading this HTML document) what type of document
it is about to process.
Notice that it does not indicate what version of HTML
is contained within the document: it only specifies that
it containsHTML. 1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf -8"> 5
3 <title>Share Your Travels - - NewYork - Central P a r k < / t i t l e >
< l i n k r e l = " s t y l e s h e e t " href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4
...
</body>
</html>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 HTML, Head, and Body

HTML5 does not require the use of the<html>,

<head>, and <body>.
However, in XHTML they were required, and most web
authors continue to usethem.

2 The <html> element is sometimes called the root

element as it contains all the otherHTML elements in
the document. 1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta c hars et = " ut f -8" > 5
3 < t i t l e> S hare Your Travels - - New York - Central P a r k < / t i t l e >
< l i n k r e l = " s t y l e s h e e t " href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4
...
</body>
</html>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Head and Body
HTML pages are divided into two sections: thehead
and the body, which correspond tothe <head> and
<body> elements.
3 The head contains descriptive elements about the
document

4 The body contains content that willbe displayed by

the browser.
1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta c h a r s e t = " u t f - 8 " > 5
3 < t i t l e > S h a r e Your Travels - - New York - C e n t ra l P a r k < / t i t l e >
< l i n k r e l = " s t y l e s h e e t " href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Inside the head
There are no brains

You will notice that the <head> element containsa

variety of additional elements.
5 The first of these is the <meta> element. Our example
declares that the character encoding for the document
is UTF-8.
1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta c hars et="utf - 8"> 5
3 <title> Sha re Your Travels - - New York - Central P a r k < / t i t l e >
< l i n k r e l = " s t y l e s h e e t " href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Inside the head
No brains but metas, styles and javascripts

6
Our example specifies an external CSSstyle sheet file
that is used with thisdocument.
7 It also references an external Javascriptfile.

1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta c h a r s e t = " u t f - 8 " > 5
3 < t i t l e > S h a re Your Travels - - New York - Ce n t ra l P a r k < / t i t l e >
< l i n k r e l = " s t y l e s h e e t " href ="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Section5of6

Q U I C K TOUR O F H T M L
https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Why a quick tour?

HTML5 contains many structural and presentation

elements – too many to completely cover in this
presentation.
Rather than comprehensively cover all theseelements,
this presentation will provide a quick overview of the
most common elements.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Sample Document
<body>
<h1>Share Your Travels</h1>
1
<h2>New York - Cent r al Park</h2>
2 <p>Photo by Randy Connolly</p>
<p>This photo o f Conservatory Pond i n
<a hr ef =" ht t p: / / www. c ent r al par k . c om/ " >C ent r al Park</a> 3
New York C i t y was taken on October 22, 2011 w i t h a
<strong>Canon EOS30D</strong> camera.
</ p> 4
5 <img s r c = " i m a g e s / c e n t r a l - p a r k . j p g " a l t = " C e n t r a l Park" / >

<h3>Reviews</h3>
6 <div> 7
<p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on t he HDRbuddy.</p>
</div>

<div>
<p>By Susan on <time>October 1 , 2012</time></p>
<p>I l ove Cent r al Park.</p>
</ di v>
8

<p><small>Copyright &copy; 2012 Share Your Travels</small></p>

</ body> 9

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
1 Headings
<h1>, <h2>, <h3>, etc

HTML provides six levels of

heading (h1, h2, h3, …), with
the higher heading number
indicating a heading of less
importance.
Headings are an essential way
for document authors use to
show their readers the
structure of the document.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Headings

The browser has its

own default stylingfor
each heading level.
However, these are
easily modified and
customized via CSS.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Headings
Be semantically accurate

In practice, specify a heading level that issemantically

accurate.
Do not choose a heading level because of its default
presentation
• e.g., choosing <h3> because you want your text to
be bold and 16pt

Rather, choose the heading level because it is

appropriate
• e.g., choosing <h3> because it is a third level
heading and not a primary or secondaryheading

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
2 Paragraphs
<p>

Paragraphs are the most basic unit of text in an HTML

document.
Notice that the <p> tag is a container and cancontain
HTML and other inline HTMLelements
inline HTML elements refers to HTML elements that
do not cause a paragraph break but are part of the
regular “flow” ofthe text.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 6
Divisions
<div>

This <div> tag is also a container element and is used

to create a logical grouping of content
• The <div> element has no intrinsic presentation.
• It is frequently used incontemporary CSS-based
layouts to mark out sections.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Using div elements
Can you say “div-tastic”

HTML5 has a variety of new semantic elements (which

we will examine later) that can be used to reduce
somewhat the confusing mass of div withindivs within
divs that is so typical of contemporary webdesign.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 3 Links
<a>

Links are created using the <a> element (the “a”

stands for anchor).
A link has two main parts: thedestination and the
label.

<a href="http://www.centralpark.com">Central Park</a>

Destination Label(text)

<a href="index.html"><img s r c = " l o g o . g i f " /></a>

Label (image)

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Types of Links

You can use the anchor element to create a wide range of

links:
• Links to external sites (or to individual resourcessuch
as images or movies on an external site).
• Links to other pages or resources within thecurrent
site.
• Links to other places within the currentpage.
• Links to particular locations on anotherpage.
• Links that are instructions to the browser to start the
user’s email program.
• Links that are instructions to the browser to execute a
Javascript function.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Different link destinations
Link toexternal site

<a href="http://www.centr alpark .com "> Central Park</a>

Link toresource on external site

<a href ="http://ww w.c ent ra lpa rk .c om /logo. g if " >C entr a l Park</a>

Link to another page on same site as thispage

<a href="index.html">Home</a>

Link to another place on thesame page

<a href="#top">Go t o Top o f Document</a>

Link to specific place on another page

<a href="productX.html#reviews ">Reviews f o r product X</a>

Link to email

<a href="mailto://person@somewhere.com">Someone</a>

Link to javascript function

<a href="javascript://OpenAnnoyingPopup(); ">See This</a>

Link to telephone (automatically dials the number

when user clicks on it using a smartphone browser)

<a href="tel:+18009220579">Call t o l l f r e e (800) 922-0579</a>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Link Text
Some guidance … or … don’t “Click Here”

Links with the label “Click Here” were once a stapleof

the web.
Today, such links are frowned upon, since:
• they do not tell users where the link will take them
• as a verb “click” is becoming increasingly inaccurate
when one takes into account the growth of mobile
browsers.
Instead, textual link labels should bedescriptive.
“Click here to see the raceresults”
“Race Results” or “See Race Results”.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 URL Absolute Referencing
For external resources

When referencing a page or resource on anexternal

site, a full absolute reference is required: that is,

• the protocol (typically,http://),

• the domain name,
• any paths, and then finally
• the file name of thedesired resource.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 URL Relative Referencing
An essential skill

We also need to be able to successfully referencefiles

within our site.
This requires learning the syntax for so-calledrelative
referencing.
When referencing a resource that is on the same
server as your HTML document, then you can use
briefer relative referencing. If the URLdoes not include
the “http://” then the browser will request the current
server for the file.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 URL Relative Referencing

If all the resources for the site reside within the same
directory (also referred to as a folder), then you can
reference those other resources simply via their
filename.
However, most real-world sites contain too manyfiles
to put them all within a single directory.
For these situations, a relative pathname is required
along with the filename.
The pathname tells the browser where tolocate the
file on the server.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Pathnames

Pathnames on the web follow Unixconventions.

• Forward slashes (“/”) are used toseparate directory
names from each other and from filenames.
• Double-periods (“..”) are used to referencea
directory “above” the current one in the directory
tree.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 URL Relative Referencing
Share-Your-Travels
Relative Link Type Example
/ (root folder)
1 Same Directory To link to example.html from
about.html (in Figure 2.18),use:
i ndex. ht ml
To link to a file within the same
<a href="example.html">
about.html folder, simply use the file name.
1 7
2 Child Directory To link to logo.gif from about.html,
example.html
use:
To link toa file within a subdirectory,
images/ <a h r e f =" images/ logo. gif" >
use the name of the subdirectory
2
logo.gif and a slash before the file name.
Grandchild/Descendant To link to background.gif from
cent r al - par k. j pg 3 Directory about.html, use:
css/ <a
To link to a file that is multiple
href="css/images/background.gif"
mai n. css subdirectories below the current
>
one, construct the full path by
images/
including each subdirectory name
3
background.gif (separated by slashes) before thefile
name.
members/
4 Parent/Ancestor Directory To link to about.html from
4 5
i ndex. ht ml
index.html in members, use:
Use “../” to reference a folder
<a h r e f = " . . / a b o u t . h t m l " >
randyc/ above the current one. If trying to
6
reference a file several levels above To link to about.html from
bio.html
the current one, simplystring bio.html, use:
together multiple “../”.
<a h r e f = " . . / . . / a b o u t . h t m l " >

17CS71-WEB TECHNOLOGY https://hemanthrajhemu.github.io

Fundamentals of Web Development
 URL Relative Referencing
5 Sibling Directory To link to logo.gif from index.html in
Share-Your-Travels
members, use:
/ (rootfolder) Use “../”to move up to the appropriate
<a href="../images/about.html">
level, and then use the same technique as
index.html
for child or grandchilddirectories. To link to background.gif from bio.html,
about . ht ml use:
1 7
example.html <a
href = " . . /. ./ css/images /background. gi f" >
images/
6 Root Reference To link to about.html from bio.html, use:
2
logo.gif <a href="/about.htm l">
An alternative approach for ancestor and
central-park.jpg sibling references is to use the so-called To link to background.gif from bio.html,
root reference approach. In this approach, use:
css/
begin the reference with the root reference
<a href="/images/background.gif">
mai n. css
(the “/”) and then use the same technique
as for child or grandchild directories. Note
images/ that these will only work on the server!
3
That is, they will not work when you test it
background.gif
out on your local machine.
members/
7 Default Document To link to index.html in members from
4 5
index.html
about.html, useeither:
Web servers allow references to directory
<a href="members">
randyc/ names without file names. In such a case,
6
the web server will serve the default Or
bi o. ht ml
document, which is usually a file called
<a href="/members">
index.html (apache) or default.html
(IIS). Again, this will only generally work on
the web server.

17CS71-WEB TECHNOLOGY https://hemanthrajhemu.github.io

Fundamentals of Web Development
 Inline Text Elements
Do not disrupt the flow

Inline elements do not disrupt the flow of text (i.e.,

cause a line break).
HTML5 defines over 30 of these elements.

e.g., <a>, <br>, <em>, <strong>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Images

While the <img> tag is the oldest methodfor

displaying an image, it is not the only way.
For purely decorative images, such as background
gradients and patterns, logos, border art, and so on,it
makes semantic sense to keep such images out of the
markup and in CSSwhere they more rightlybelong.
But when the images are content, such as in the
images in a gallery or the image of a product in a
product details page, then the <img> tag is the
semantically appropriate approach.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Images
Specifies the URL of the image to display Text in title attribute will be displayed in apopup
(note: uses standard relative referencing) tool tipwhen user moves mouse over image.

<img s r c = " i m a g e s / c e n t r a l - p a r k . j p g " a l t = " C e n t r a l Park " t i t l e = " C e n t r a l Park " width="80" height="40" / >

Text in alt attribute provides a brief Specifies the width and height of
description of image’s content for users who image in pixels.
are unable to seeit.

17CS71-WEB TECHNOLOGY https://hemanthrajhemu.github.io

Fundamentals of Web Development
 Lists
HTML provides three types of lists

Unordered lists. Collections of items in no particular

order; these are by default rendered by the browser as
a bulleted list.
Ordered lists. Collections of items that have a set
order; these are by default rendered by thebrowser as
a numbered list.
Definition lists. Collection of name and definition
pairs. These tend to be used infrequently. Perhapsthe
most common example would be a FAQlist.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Lists
<ol>
<li>Introduction</li>
<li>Back ground</li>
Notice that the list item element <li>My S o l u t i o n < / l i >
can contain other HTML <li>
elements <ol>
<li>Methodology</li>
<ul> <li>Results</li>
<li><a href="index.html">Home</a></li> <li>Discussion</li>
<li>About Us </li > </ol>
<li>Products</li> </li>
<li>Contact Us </li> <li>C onc lus ion < / l i >
</ul> </ol>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Character Entities

These are special characters for symbols for which

there is either no way easy way to type in via a
keyboard (such as the copyright symbol or accented
characters) or which have a reserved meaning in HTML
(for instance the “<” or “>” symbols).
They can be used in an HTML document by using the
entity name or the entitynumber.
e.g., &nbsp; and &copy;

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Section6of6

HTML SEMANTIC ELEMENTS

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 HTML5 Semantic Elements
Why are theyneeded?

One substantial problem with modern, pre-HTML5

semantic markup:
most complex web sites are absolutely packedsolid
with <div> elements.
Unfortunately, all these <div> elements can makethe
resulting markup confusing and hard to modify.
Developers typically try to bringsome sense and order
to the <div> chaos by using id or class names that
provide some clue as to their meaning.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 XHTML versus HTML5
<body>
< di v id="header">
<body>
1 <header>
< di v i d= " l ogo -headi ngs " >
<header> 2
1 <hgr oup>
<hgroup>
...
... 2
</div>
</hgroup>
...
...
< di v i d = " t o p - n a v i g a t i o n " > <nav>
... ...
</div> </nav>
</ di v>
3 <nav> 3
4 < di v id="main"> </header>
<div id="main">
< di v i d = " l e f t - n a v i g a t i o n " >
<nav>
...
...
</div>
</nav>
< di v c l as s = " c ontent" > <section>
5 < di v c l a s s = " s t o r y" >
<section>
5 <article>
...
6 <article> ... 6
</div> </article>
< di v c l a s s = " s t o r y" >
<article>
... <figure>
< di v c l as s = " s tor y -p ho t o" >
<img . . . c l as s = " bl og -p ho t o" />
7 <img . . . / > 7
<f i gcapt i on>. . .
<p c l a s s s = " p h o t o - c a p t i o n " > . . . <figure>
</figure>
</div>
8 <figcaption> ...
</div>
</ ar t i cl e> 8
< di v c l a s s = " r e l a t e d - s t u f f - o n - r i g h t " > <asi de>
... 9 <aside> ... 9
</ di v> </ asi de>
</div> </ sect i on>
< di v c l as s = " c ontent" > <section>
... ...
</ di v> </section>
</div> </ di v>
10 < di v i d = " f o o t e r " > <footer>
...
10
...
<f oot er > </ di v> </ f oot er >
</ body> </ body>

17CS71-WEB TECHNOLOGY https://hemanthrajhemu.github.io

Fundamentals of Web Development
1 10
Header and Footer
<header> <footer>

Most web site pages have a recognizable header and

footer section.
Typically the header contains
• the site logo
• title (and perhaps additional subtitles ortaglines)
• horizontal navigation links, and
• perhaps one or two horizontalbanners.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
1 10
Header and Footer
<header> <footer>

The typical footer contains less important material,

such as
• smaller text versions of the navigation,
• copyright notices,
• information about the site’s privacy policy,and
• perhaps twitter feeds or links to other social sites.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Header and Footer

Both the HTML5 <header> and <footer> element can

be used not only for page headers and footers, they
can also be used for header and footer elements
within other HTML5 containers, such as <article> or
<section>.

<header>
<img s r c = " l o g o . g i f " a l t = " l o g o " / >
<h1>Fundamentals o f WebDevelopment</h1>
...
</header>
<article>
<header>
<h2>HTML5 Semantic Str uc ture Elements </h2>
<p>By <em>Randy Connolly</em></p>
<p><time>September 30, 2012</time></p>
</header>
...
</article>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 2
Heading Groups
<hgroup>

The <hgroup> element can be used to group related

headings together within onecontainer.

<header>
<hgroup>
<h1>Chapter Two: HTML1</h1>
<h2>An Introduction</h2>
</hgroup>
</header>
<article>
<hgroup>
<h2>HTML5 Semantic Str uc tur e Elements </h2>
<h3>Overview</h3>
</hgroup>
</article>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 3 Navigation
<nav>

The <nav> element represents a section of a page that

contains links to other pages or to other parts within
the same page.
Like the other new HTML5 semantic elements, the
browser does not apply any special presentation to
the <nav> element.
The <nav> element was intended to be used for major
navigation blocks, presumably the global and
secondary navigation systems.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Navigation
<header>
<img s r c = " l o g o . g i f " a l t = " l o g o " / >
<h1>Fundamentals o f WebDevelopment</h1>
<nav role="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="browse.html">Browse</a></li>
</ul>
</nav>
</header>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
5 6
Articles and Sections
<article> <section>

The <article> element represents a section of content

that forms an independent part of a document or site;
for example, a magazine or newspaper article, or a
blog entry.
The <section> element represents a section of a
document, typically with a title orheading.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Articles and Sections

According to the W3C, <section> is a much broader

element, while the <article> element is to be used for
blocks of content that could potentially be read or
consumed independently of the other content on the
page.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Sections versus Divs
How to decide which to use

The WHATWG specification warns readers thatthe

<section> element is not a generic container element.
HTML already has the <div> element for suchuses.
When an element is needed only for styling purposes
or as a convenience for scripting, it makes sense to use
the <div> element instead.
Another way to help you decide whether or not to use
the <section> element is to ask yourself if it is
appropriate for the element's contents to be listed
explicitly in the document'soutline.
If so, then use a <section>; otherwise use a<div>.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
7 8
Figure and Figure Captions
<figure> <figcaption>

The W3C Recommendation indicates that the <figure>

element can be used not just for images but for any
type of essential content that could be moved to a
different location in the page or document and the
rest of the document would still make sense.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Figure and Figure Captions
Note however …

The <figure> element should not be used to wrap

every image.
For instance, it makes no sense to wrap the site logo
or non-essential images such as banner ads and
graphical embellishments within <figure>elements.
Instead, only use the <figure> element for
circumstances where the image (or other content)has
a caption and where the figure is essential to the
content but its position on the page is relatively
unimportant.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Figure and Figure Captions
<p>This photo was taken on October 22, 2011 with a Canon EOS30D camera.</p>
<figure>
<img s rc ="im ages /c entral -park .j pg" a l t = " C e n t r a l Park" /><br/>
Figure could be <figcaption>Conservatory Pond i n Central Park </figcaption>
moved to a </figure>
different <p>
location in I t was a wonderfully b e a u t i f u l autumn Sunday, with strong s u n l i g h t and
document expressive c louds . I was very f o r t u n a t e t h a t myone day i n New York was
…
blessed with such weather!
But it has to
</p>
exist in the
document
(i.e., the
figure isn’t
optional)

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 9
Aside
<aside>

The <aside> element is similar to the <figure>element

in that it is used for marking up content that is
separate from the main content on the page.
But while the <figure> element was used to indicate
important information whose location on the page is
somewhat unimportant, the <aside>element
“represents a section of a page that consistsof
content that is tangentially related to the content
around the asideelement.”
The <aside> element could thus be used for sidebars,
pull quotes, groups of advertising images, or any other
grouping of non-essentialelements.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 WhatYou’ve Learned
1 HTMLDefinedandits
History 2 HTMLSyntax

3 Semantic Markup
4 StructureofHTML

5 QuickTour of HTML
6 HTML
SemanticElements

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 CSS 1: Introduction

Chapter 3

17CS71-WEB TECHNOLOGY Fundamentals of Web Development

https://hemanthrajhemu.github.io
Textbook to be published by Pearson©Ed2015
RandRandyy ConConnonollllyy andand RicaRicarrdodo HHoaroar
FundamenFundamentatalsls ofof WWe
eb
in early
b
http://www.funwebdev.com
http://www.funwebdev
2014
Pearson
.com
 Objectives
1 Whatis CSS?
2 CSS Syntax

3 LocationofStyles
4 Selectors

5 TheCascade:How
Styles Interact 6 The BoxModel

7 CSSTextStyling

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Section1of7

WHAT IS CSS?
https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 What is CSS?
You be styling soon

CSSis a W3C standard for describing the presentation

(or appearance) of HTMLelements.
With CSS,we canassign
• font properties,
• colors,
• sizes,
• borders,
• background images,
• even the position of elements.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 What is CSS?
You be styling soon

CSSis a language in that it has its own syntax rules.

CSScan be added directly to any HTML element (via
the style attribute), within the <head> element, or,
most commonly, in a separate text file thatcontains
only CSS.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Benefits of CSS
Why using CSS is a better way of describing presentation than HTML

• The degree of formatting control in CSSissignificantly

better than that provided inHTML.

• Web sites become significantly more maintainable

because all formatting can be centralized into one, or a
small handful, of CSSfiles.

• CSS-driven sites are more accessible.

• A site built using a centralized set of CSSfiles for all

presentation will also be quicker to downloadbecause
each individual HTML file will contain less markup.

• CSScan be used to adopt a page for different output

mediums.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 CSS Versions
Let’s just say there’s more than 1

• W3C published the CSSLevel 1 Recommendation in

1996.

• A year later, the CSSLevel 2 Recommendation (also

more succinctly labeled simply as CSS2)was published.

• Even though work began over a decade ago, an updated

version of the Level 2 Recommendation, CSS2.1, did not
become an official W3C Recommendation until June
2011.

• And to complicate matters even more, all through the

last decade (and to the present day as well), during the
same time the CSS2.1 standard was being worked on, a
different group at the W3C was working on a CSS3draft.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Browser Adoption
Insert obligatory snide comment about Internet Explorer 6 here

While Microsoft’s Internet Explorer was an early

champion of CSS,its later versions (especially IE5,IE6,
and IE7) for Windows had uneven support for certain
parts of CSS2.
In fact, all browsers have left certain parts of the CSS2
Recommendation unimplemented.
CSShas a reputation for being a somewhat frustrating
language.
• this reputation is well deserved!

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Section2of7

CSS SYNTAX
https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 CSS Syntax
Rules, properties, values, declarations

A CSSdocument consists of one or more stylerules.

A rule consists of a selector that identifies the HTML
element or elements that will be affected, followed by
a series of property and value pairs (each pair is also
called a declaration). declaration

syntax
s e l e c t o r { p r o p e r t y: va l u e ; property2: value2; } rule

declarationblock

selector

em{ c o l o r : r e d ; }

property value examples

p{
margin: 5px 0 10px 0 ;
font-weight: bold;
f o n t - f a m i l y : A r i a l , H e l ve t i c a , s a n s - s e r i f ;
}

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Declaration Blocks

The series of declarations is also calledthe

declaration block.
• A declaration block can be together on a
single line, or spread across multiple lines.
• The browser declaration

ignores white space s e l e c t o r { p r o p e r t y: va l u e ; property2: value2; } rule

syntax

• Each declaration is
declarationblock
terminated with a
semicolon. selector

em{ c o l o r : r e d ; }

property value examples

p{
margin: 5px 0 10px 0 ;
font-weight: bold;
f o n t - f a m i l y : A r i a l , H e l ve t i c a , s a n s - s e r i f ;
}

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Selectors
Which elements

Every CSSrule begins with aselector.

The selector identifies which element or elementsin
the HTML document will be affected by the
declarations in the rule.

Another way of declaration

syntax
thinking of selectorsis s e l e c t o r { p r o p e r t y: va l u e ; property2: value2; } rule

that they are a declarationblock

pattern which is used selector

declaration

by the browser to em{ c o l o r : r e d ; }

s e l e c t or { p r o p e r t y: va lu e ; p ro p erty2: value2; } rule

select the HTML property value

declaration block
examples
selector

elements that will p{

margin: 5px 0 10px 0 ; em { c o l o r : r e d ; }
font-weight: bold;
receive the style. }
property value
f o n t - f a m i l y : A r i a l , H e l ve t i c a , s a n s - s e r i f ;
p {
m a r g i n : 5px 0 10px 0 ;
font-weight: bold;
f o nt -f amily: A r i a l , Helvetica, sa ns -serif ;
}

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Properties
Which style properties of the selected elements

Each individual CSSdeclaration must contain a

property.
These property names are predefined by the CSS
standard.

The CSS2.1Recommendation declaration

syntax
defines over ahundred sel ect or { pr oper t y: val ue; pr oper t y2: val ue2; } rule

different property names. declarationblock

selector

em{ c o l o r : r e d ; }

property value examples

p{
margin: 5px 0 10px 0 ;
font-weight: bold;
f o n t - f a m i l y : A r i a l , H e l ve t i c a , s a n s - s e r i f ;
}

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Properties
Common CSS properties
Property Type Property
Fonts font
font-family
font-size
font-style
font-
weight
@font-face
Text letter-spacing
line-height
text-align
text-decoration
text-indent
Color and background background
background-color
background-image
background-position
background-repeat
color
Borders border
border-color
border-width
border-style
border-top
border-top-color
border-top-
width etc

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Properties
Common CSS properties continued.
Property Type Property
Spacing padding
padding-bottom, padding-left, padding-right, padding-top
margin
margin-bottom, margin-left, margin-right, margin-top
Sizing height
max-
height
max-width
min-height
min-width
width
Layout bottom, left, right, top
clear
display
float
overflo
w
position
visibility
z-index
Lists list-style
list-style-
image list-
style-type

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Values
What style value for the properties

Each CSSdeclaration also contains a value for a

property.
•The unit of any given value is dependentupon
the property.
•Some property values are from a predefined list
of keywords.
•Others are values such as length measurements,
percentages, numbers without units, color values,
and URLs.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Color Values
CSSsupports a variety of different ways of describingcolor
Method Description Example
Name Use one of 17 standard color names.CSS3 color: red;
has 140 standard names. color: hotpink; /* CSS3only */
RGB Uses three different numbers between 0 color: rgb(255,0,0);
and 255 to describe the Red, Green, and color: rgb(255,105,180);
Blue values for the color.
Hexadecimal Uses a six-digit hexadecimal number to color: #FF0000;
describe the red, green, and blue valueof color: #FF69B4;
the color; each of the three RGBvalues is
between 0 and FF(which is 255 in
decimal). Notice that the hexadecimal
number is preceded by a hash or pound
symbol (#).
RGBa Allows you to add an alpha,or color: rgb(255,0,0, 0.5);
transparency, value. This allows a
background color or image to “show
through” the color. Transparency is avalue
between 0.0 (fully transparent) and 1.0
(fully opaque).
HSL Allows you to specify a color usingHue color: hsl(0,100%,100%);
Saturation and Light values. This is color: hsl(330,59%,100%);
available only in CSS3. HSLA is also
available as well.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Units of Measurement
There are multiple ways of specifying a unit of measurement in CSS

Some of these are relative units, in that they are

based on the value of something else, such as the size
of a parent element.
Others are absolute units, in that they have areal-
world size.
Unless you are defining a style sheet for printing, it is
recommended to avoid using absolute units.

Pixels are perhaps the one popular exception (though

as we shall see later there are also good reasons for
avoiding the pixel unit).

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Relative Units
Unit Description Type
px Pixel. In CSS2this is a relative measure, while in CSS3it is Relative (CSS2)
absolute (1/96 of aninch).
Absolute (CSS3)
em Equal to the computed value of the font-size propertyof Relative
the element on which it is used. When used for font sizes,
the em unit is in relation to the font size of the parent.
% A measure that is always relative to another value. The Relative
precise meaning of %varies depending upon which
property it is beingused.
ex A rarely used relative measure that expresses size in Relative
relation to the x-height of an element’sfont.
ch Another rarely used relative measure; this one expresses Relative
size in relation to the width of the zero ("0") character of
an element’s font. (CSS3only)
rem Stands for root em, which is the font size of the root Relative
element. Unlike em, which may be different for each
element, the rem is constant throughout thedocument. (CSS3only)
vw, vh Stands for viewport width and viewport height. Bothare Relative
percentage values (between 0 and 100) of the viewport
(browser window). This allows an item to change size (CSS3only)
when the viewport isresized.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Absolute Units
Unit Description Type
in Inches Absolute
cm Centimeters Absolute
mm Millimeters Absolute
pt Points (equal to 1/72 of aninch) Absolute
pc Pica (equal to 1/6 of aninch) Absolute

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Comments in CSS

It is often helpful to add comments to your style

sheets. Comments take the form:

/* comment goes here */

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Section3of7

LOCATION OF STYLES
https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Actually there are three…
Different types of style sheet

Author-created style sheets (what we are learning in

this presentation).
User style sheets allow the individual user to tell the
browser to display pages using that individual’s own
custom style sheet. This option is available in a
browser usually in its accessibility optionsarea.
The browser style sheet defines the default styles the
browser uses for each HTMLelement.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Style Locations
Author Created CSS style rules can be located in three different locations

CSSstyle rules can be located in three different

locations.
• Inline
• Embedded
• External
You can combine all 3!

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Inline Styles
Style rules placed within an HTML element via the style attribute

An inline style only affects the element it is defined

within and will override any other style definitions for
the properties used in the inline style.
Using inline styles is generally discouraged sincethey
increase bandwidth and decrease maintainability.
Inline styles can however be handy for quicklytesting
out a style change.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Embedded Style Sheet
Style rules placed within the <style> element inside the <head> element

While better than inline styles, using embedded styles

is also by and large discouraged.
Since each HTML document has its own <style>
element, it is more difficult to consistently style
multiple documents when using embeddedstyles.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 External Style Sheet
Style rules placed within a external text file with the .css extension

This is by far the most common place tolocate style

rules because it provides thebest maintainability.
•When you make a change to an external style
sheet, all HTML documents that reference that style
sheet will automatically use the updatedversion.
•The browser is able to cache the external style
sheet which can improve the performance ofthe site

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Section4of7

SELECTORS
https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Selectors
Things that make your life easier

When defining CSSrules, you will need to first need to

use a selector to tell the browser which elements will
be affected.
CSSselectors allow you to select
• individual elemenets
• multiple HTMLelements,
• elements that belong together insome way, or
•elements that are positioned in specificways in
the document hierarchy.
There are a number of different selectortypes.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Element Selectors
Selects all instances of a given HTML element

Uses the HTML element name.

You can select all elements by using the universal
element selector, which is the * (asterisk) character.

declaration

s e l e c t o r { p r o p e r t y: va l u e ; property2: value2; } rule

declarationblock
selector

em{ c o l o r : r e d ; }

property value

p{
margin: 5px 0 10px 0 ;
font-weight: bold;
f o n t - f a m i l y : A r i a l , H e l ve t i c a , s a n s - s e r i f ;
}

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Grouped Selectors
Selecting multiple things

You can select a group of elements by separating the different

element names with commas.
This is a sensible way to reduce the size and complexity ofyour
CSSfiles, by combining multiple identical rules into a single
rule.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Reset

Grouped selectors are often used as a way to quickly reset

or remove browser defaults.

The goal of doing so is to reduce browserinconsistencies

with things such as margins, line heights, and font sizes.

These reset styles can be placed in their own css file

(perhaps called reset.css) and linked to the page before any
other external styles sheets.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Class Selectors
Simultaneously target different HTML elements

A class selector allows you to simultaneously target

different HTML elements regardless of their positionin
the document tree.
If a series of HTML element have been labeled with
the same class attribute value, then you can
target them for styling by using a class selector,
which takes the form: period (.) followed by the
class name.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Class Selectors
<head>
<title>Share Your Travels < / t i t l e >
<style>
.first {
f o n t - s t yl e : i t a l i c ;
color: brown;
}
< / s t yl e >
</head>
<body>
<h1 class="first">Reviews</h1>
<div>
<p class="first">By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDRbuddy.</p>
</div>
<hr/>

<div>
<p class="first">By Susan on <time>October 1 , 2012</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</body>

.first {
font-style: i t a l i c ;
c o l o r : brown;
}

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Id Selectors
Target a specific element by its id attribute

An id selector allows you to target a specific element

by its id attribute regardless of its type or position.
If an HTML element has been labeled with an id
attribute, then you can target it for styling by using an
id selector, which takes the form: pound/hash (#)
followed by the id name.

Note: You should only be using an id once per page

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Id Selectors
<head lang="en">
<meta c hars et="utf - 8">
<title>Share Your Travels - - New York - Central P a r k < / t i t l e >
<style>
#latestComment {
f o n t - s t yl e : i t a l i c ;
color: brown;
}
< / s t yl e >
</head>
<body>
<h1>Reviews</h1>
<div id="latestComment">
<p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDRbuddy.</p>
</div>
<hr/>

<div>
<p>By Susan on <time>October 1 , 2012</time></p>
<p>I love Central Park.</p>
</div>
<hr/>
</body>

#latestComment {
font-style: i t a l i c ;
c o l o r : brown;
}

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Id versus Class Selectors
How to decide

Id selectors should only be used when referencing a

single HTML element since an id attribute can only be
assigned to a single HTMLelement.
Class selectors should be used when (potentially)
referencing several related elements.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Attribute Selectors
Selecting via presence of element attribute or by the value of an attribute

An attribute selector provides a way to select HTML

elements by either the presence of an element
attribute or by the value ofan attribute.
This can be a very powerful technique, but because of
uneven support by some of the browsers, not all web
authors have used them.
Attribute selectors can be a very helpful technique in
the styling of hyperlinks andimages.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Attribute Selectors
[title] {
cursor: help;
padding-bottom: 3px;
border-bottom: 2px dotted blue;
<head lang="en">
text-decoration: none;
<meta c h a r s e t = " ut f - 8" >
}
< t i t le> Shar e Your T r a v e l s < / t i t l e >
<style>
[title] {
cursor: help;
padding-bottom: 3px;
border-bottom: 2px dotted blue;
text-decoration: none;
}
< / s t yl e >
</head>
<body>
<div>
<img src="images/flags/CA.png" title="Canada Flag" / >
<h2><a href="countries.php?id=CA" t i t l e = " s e e posts from Canada">
Canada</a>
</h2>
<p>Canada i s a North American country c o n s i s t in g o f … </p>
<div>
<img src="images/square/6114907897.jpg" t i t l e = " A t top of Sulpher Mountain">
<img src="images/square/6592317633.jpg" title="Grace Presbyterian Church">
<img src="images/square/6592914823.jpg" title="Calgary Downtown">
</div>
</div>
</body>

17CS71-WEB TECHNOLOGYhttps://hemanthrajhemu.github.io
Fundamentals of Web Development
 Pseudo Selectors
Select something that does not exist explicitly as an element

A pseudo-element selector is a way to select

something that does not exist explicitly as anelement
in the HTML document tree but which is still a
recognizable selectable object.
A pseudo-class selector does apply to an HTML
element, but targets either a particularstate or, in
CSS3,a variety of familyrelationships.
The most common use of this type ofselectors is for
targeting link states.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Pseudo Selectors

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Contextual Selectors
Select elements based on their ancestors, descendants, or siblings

A contextual selector (in CSS3also called

combinators) allows you to select elements basedon
their ancestors, descendants, or siblings.
That is, it selects elements based on their context or
their relation to other elements in the document tree.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Contextual Selectors
Selector Matches Example
Descendant A specified element that is div p
contained somewhere within
Selects a <p> element that is contained somewhere
another specified element
within a <div> element. That is, the <p> can be any
descendant, not just achild.
Child A specified element that is a div>h2
direct child of thespecified
Selects an <h2> element that is a child of a <div>
element
element.
Adjacent A specified element that is the h3+p
Sibling next sibling (i.e., comesdirectly
Selects the first <p> after any <h3>.
after) of the specifiedelement.
GeneralSibling A specified element that shares h3~p
the same parent as the specified
Selects all the <p> elements that share thesame parent
element.
as the <h3>.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Descendant Selector
Selects all elements that are contained within another element

While some of these contextual selectors are used

relatively infrequently, almost all web authors find
themselves using descendant selectors.
A descendant selector matches all elements that are
contained within another element. The characterused
to indicate descendant selection is the space
character.
context selected element

div p { …} #main d i v p : f i r s t - c h i l d { … }

Selects a <p> element Selects the first <p> element

somewhere somewhere within a <div> element
within a <div> element that is somewhere within anelement
with an id="main"

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Contextual Selectors in Action
<body>
<nav>
<ul >
< l i > <a href="#">Canada</a></li>
< l i > <a href="#">Germany</a></li>
u l a : l i n k { c o l o r: blue; } < l i > <a href="#">United S t a t e s < / a > < / l i >
#main time { c o l o r : r e d ; }
</ul>
</nav>
<div id="main">
Comments as o f <time>November 15, 2012</time>
<div>
#main>time { c o l o r : p u r p l e ; } <p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDRbuddy.</p>
< / d i v>
<hr/>

<div>
#main d i v p : f i r s t - c h i l d { <p>By Susan on <time>October 1 , 2012</time></p>
c o l o r : green ; <p>I l o ve C e n t ra l Park.</p>
} </ di v>
<hr/>
< / d i v>
<footer>
<ul>
< l i > <a href="#">Home</a> | < / l i >
< l i > <a href="#">Browse</a> | < / l i >
</ul>
</footer>
</body>

17CS71-WEB TECHNOLOGY https://hemanthrajhemu.github.io

Fundamentals of Web Development
 Section5of7
THE CASCADE: HOW STYLES
INTERACT
https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Why Conflict Happens
In CSS that is

Because
• there are three different types of style sheets
(author-created, user-defined, and the default
browser style sheet),
• author-created stylesheets can define multiple rules
for the same HTMLelement,
CSShas a system to help the browser determine how
to display elements when different style rulesconflict.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Cascade
How conflicting rules are handled in CSS

The “Cascade” in CSSrefers to how conflictingrules

are handled.
The visual metaphor behind the term cascade is that
of a mountain stream progressing downstream over
rocks.
The downward movement of water down a cascadeis
meant to be analogous to how a given style rule will
continue to take precedence with child elements.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Cascade Principles

CSSuses the following cascade principles to helpit

deal with conflicts:
• inheritance,
• specificity,
• location

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Inheritance
Cascade Principle #1

Many (but not all) CSSproperties affect not only

themselves but their descendants aswell.
Font, color, list, and text properties areinheritable.
Layout, sizing, border, background and spacing
properties are not.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Inheritance
body {
font-family: Arial; inherited
<ht ml > color: red; inherited
b o r d e r : 8pt s o l i d green; not inherited
margin: 100px; not inherited
}
<head> <body>

<meta> < t i t l e > <h1> <h2> <p> <i mg> <h3> <di v> <di v> <p>

<a> <strong> <p> <p> <p> <p> <smal l >

<t i me> <t i me>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Inheritance
How to force inheritance

It is possible to tell elements to inherit properties that

are normally not inheritable.
div {
font-weight: bold;
margin: 50px;
b o r d e r : 1 p t s o l i d green;
}
p {
border: i n h e r i t ;
margin: i n h e r i t ;
}

<h3>Reviews</h3>
<div>
<p>By Ricardo on <time>September 1 5 , 2012</time></p>
<p>Easy on t h e HDRbuddy.</p>
</div>
<hr/>

<div>
<p>By Susan on <time>October 1 , 2012</time></p>
<p>I l o ve C e n t ra l Park.</p>
</div>
<hr/>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Inheritance
<ht ml > div {
font-weight: bold; inherited
m argin: 50px; not inherited
b o r d e r : 1 p t s o l i d green; not inherited
<head> <body> }

<met a> <t i t l e> <h1> <h2> <p> <i mg> <h3> <di v> <di v> <p>

<a> <strong> <p> <p> <p> <p> <smal l >

<t i me> <t i me>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Specificity
Cascade Principle #2

Specificity is how the browser determines which style

rule takes precedence when more than one style rule
could be applied to the same element.
The more specific the selector, the more it takes
precedence (i.e., overrides the previousdefinition).

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Specificity
How it works

The way that specificity works in thebrowser is that

the browser assigns a weight to each stylerule.
When several rules apply, the one withthe greatest
weight takes precedence.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Specificity
These color and font-weight
body { This t e x t i s not w i t h i n a p element.
properties are inheritable and thus font-weight: bold; <p>Reviews</p>
potentially applicable to all the child c o l o r : red; <div>
elements contained within thebody. } <p>By Ricardo on <time>September 15, 2012</time
<p>Easy on the HDRbuddy.</p>
However, because the <div> and <p> div { This t e x t i s not w i t h i n a p element.
elements also have the same f o n t - w e i g h t : normal; </ di v>
properties set, they override thevalue c o l o r : magenta; <hr/>
}
defined for the <body> element
<di v>
because their selectors (div and p) are p { <p>By Susan on <time>October 1 , 2012</time></p>
more specific. c o l o r : green; <p>I love Central Park.</p>
} </ di v>
Class selectors are more specific <hr/>
.last {
than element selectors, andthus c o l o r: blue; <di v>
take precedence and override } <p class="last">B y Dave on <time>October 15, 20
element selectors. <p c l a s s = " l a s t " id="verylast" >Thanks f o r p o s t i n
# ve ryl a s t { </ di v>
c o l o r : orange; <hr/>
f o n t - s i z e : 16pt;
}
Id selectors are more specificthan
class selectors, and thus take
precedence and override class
selectors.

17CS71-WEB TECHNOLOGY https://hemanthrajhemu.github.io

Fundamentals of Web Development
 Specificity Algorithm
The algorithm that is used to determine specificity is :

First count 1 if the declaration is from a 'style' attribute

in the HTML, 0 otherwise (let thatvalue = a).
Count the number of ID attributes in the selector (let
that value =b).
Count the number of other attributes and pseudo-
classes in the selector (let that value = c).
Count the number of element names andpseudo-
elements in the selector (let thatvalue = d).
Finally, concatenate the four numbersa+b+c+d
together to calculate theselector’s specificity.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Specificity Algorithm Specificity Value
div {
element selector c o l o r : green; 0001
}

1 d i v form {
descendant selector overrides c o l o r : orange; 0002
}
(elements only)

2 class and attribute .example {

overrides c olor: blue; 0010
selectors }

3
#firstExample {
id selector overrides 0100
c o l o r : magenta;
}

4
overrides id + d i v #firstExample {
c o l o r : grey; 0101
additional }
selectors
A higher specificity value
overrides lower specificity
values

inline style 5
overrides <div s t y l e = " c o l o r : red; "> 1000
attribute

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Location
Cascade Principle #3

When inheritance and specificity cannotdetermine

style precedence, the principle of location will be
used.
The principle of location is thatwhen rules have the
same specificity, then the latest are given more
weight.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Location
Browser’s
default style
settings

user - st yl es. css #example {

1 c o l o r : green;
}
overrides

2 <head>
overrides <link rel="stylesheet" href="stylesA.css" /> 3
< l i n k r e l = " s t y l e s h e e t " href="stylesWW.css" / > overrides

4 <st yl e>
overrides
#example {
c o l o r : orange; 5 #example {
c o l o r : magenta; overrides color: blue;
}
}
</ st yl e>
</head>
<body> 6 overrides
<p id="example" s t y l e = " c o l o r : r e d ; " >
sample t e x t
</p>
</ body>
Can you guess what will be the color of the sample text?

17CS71-WEB TECHNOLOGYhttps://hemanthrajhemu.github.io
Fundamentals of Web Development
 Location
What color would the sample text be if there wasn’t an inline style definition?

Browser’s
default style
settings

user - st yl es. css #example {

1 c o l o r : green;
}
overrides

2 <head>
overrides <link rel="stylesheet" href="stylesA.css" /> 3
< l i n k r e l = " s t y l e s h e e t " href="stylesWW.css" / > overrides

4 <st yl e>
overrides
#example {
c o l o r : orange; 5 #example {
c o l o r : magenta; overrides color: blue;
}
}
</ st yl e>
</head>
<body> 6 overrides
<p id="example" s t y l e = " c o l o r : r e d ; " >
sample t e x t
</ p>
</ body>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Location
There’s always an exception

There is one exception to the principle oflocation.

If a property is marked with !important in an author-
created style rule, then it will override any other
author-created style regardless of its location.
The only exception is a style marked with !important
in an user style sheet; such a rule will override all
others.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Section6of7

THE BOX MODEL

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 The Box Model
Time to think inside the box

In CSS,all HTML elements exist within an elementbox.

It is absolutely essential thatyou familiarize yourself
with the terminology and relationship of the CSS
properties within the elementbox.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 The Box Model
margin
border
padding

width

hei ght

element content area

by the browser to select the HTML elements that will receive
background-color/background-image ofelement

background-color/background-image of element’sparent

Every CSS rule begins with a selector. The selector identifies

which element or elements in the HTML document will be
affected by the declarations in the rule. Another way of
thinking of selectors is that they are a pattern which is used
by the browser to select the HTML elements that will receive

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Background
Box Model Property #1

The background color or image of an element fillsan

element out to its border (if it has one that is).
In contemporary web design, it has becomeextremely
common too use CSSto display purely presentational
images (such as background gradients and patterns,
decorative images, etc) rather than using the <img>
element.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Background Properties
Property Description
background A combined short-hand property that allows you to set the background values
in one property. While you can omit properties with the short-hand, do
remember that any omitted properties will be set to their default value.

background-attachment Specifies whether the background image scrolls with the document (default) or
remains fixed. Possible values are: fixed, scroll.

background-color Sets the background color of theelement.

background-image Specifies the background image (which is generally a jpeg, gif, or png file)for
the element. Note that the URL is relative to the CSSfile and not the HTML.
CSS3introduced the ability tospecify multiple background images.

background-position Specifies where on the element the background image will be placed. Some
possible values include: bottom, center, left, and right. You can also supply a
pixel or percentage numeric position value as well. When supplying a numeric
value, you must supply a horizontal/vertical pair; this value indicates its
distance from the top left corner of the element.

background-repeat Determines whether the background image will be repeated. This is acommon
technique for creating a tiled background (it is in fact the default behavior).
Possible values are: repeat, repeat-x, repeat-y, and no-repeat.

background-size New to CSS3,this property lets you modify the size of the background image.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Background Repeat

background-image: u r l ( . . / i m a g e s / b a c k g r o u n d s / b o d y - b a c k g r o u n d - t i l e . g i f ) ;
background-repeat: r e p e a t ;

background-repeat: n o - r e p e a t ; background-repeat: r e p e a t - y ; background-repeat: r e p e a t - x ;

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Background Position
50px

300px

body {
background: whit e u r l ( . . / i m a g e s / b a c k g r o u n d s / b o d y - b a c k g r o u n d - t i l e . g i f ) no - r epeat ;
bac k gr ound - pos it ion: 300px 50px;
}

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Borders
Box Model Property #2

Borders provide a way to visually separateelements.

You can put borders around all four sides of an
element, or just one, two, or three of the sides.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Borders
Property Description
border A combined short-hand property that allows you to set the style,
width, and color of a border in one property. The orderis important
and must be:
border-style border-width border-color

border-style Specifies the line type of the border. Possible values are: solid,
dotted, dashed, double, groove, ridge, inset, and outset.

border-width The width of the border in a unit (but not percents). A variety of
keywords (thin, medium, etc) are alsosupported.

border-color The color of the border in a colorunit.

border-radius The radius of a rounded corner.
border-image The URLof an image to use as aborder.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Shortcut notation
TRBL

With border, margin, and padding properties, there

are long-form and shortcut methods toset the 4 sides
border-top-color: red; /* sets just the top side * /
b o r d e r - r i g h t - c o l o r : green; /* sets just the r i g h t side * /
border - bottom - color : ye l l o w ; /* sets just the bottom side * /
b o r d e r - l e f t - c ol o r : blue; /* sets just the l e f t side * /

border-color: red; / * sets a l l f o u r sides t o red * /

b o r d e r - c o l o r : red green orange b l u e ; / * sets a l l f o u r sides d i f f e r e n t l y * /

When using this multiple values shortcut, they are applied in clockwise order starting at the top.
Thus the order is: top right bottomleft.

TRBL (Trouble)

top
b o r d e r - c o l o r : top r i g h t bottom l e f t ;

left right
b o r d e r - c o l o r : red green orange b l u e ;

bottom

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Margins and Padding
Box Model Properties #3 and #4
p {
border: s o l i d 1pt r e d ;
m argin: 0 ;
padding: 0 ;
}

p {
border: s o l i d 1pt r e d ;
m argin: 30px;
padding: 0 ;
}

p {
border: s o l i d 1pt r e d ;
m argin: 30px;
padding: 30px;
}

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Margins
Why they will cause you trouble.
p{
border: s o l i d 1pt r e d ;
margin: 0 ;
padding: 0 ;
}

Did you notice that the space

between paragraphs one and two and p{
border: s o l i d 1pt r e d ;
margin: 30px;
between two and three is the same }
padding: 0 ;

as the space before paragraph one

and after paragraph three?
This is due to the fact that adjoining p{
border: s o l i d 1pt r e d ;
margin: 30px;
vertical margins collapse. }
padding: 30px;

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Collapsing Margins
<div>
<p>Every CSS r u l e . . . < / p >
<p>Every CSS r u l e . . . < / p >
1 90px
</ d iv>
50px <div>
<p>In CSS, the a d j o in i n g . . . </p>
<p>In CSS, the a d j o in i n g . . . </p>
50px 4 </ d iv>

50px
div {
2 90px b o rd e r: dotted 1pt green;
padding: 0 ;
50px margin: 90px 20px;
}
50px 5
p{
50px b o rd e r: s o l i d 1pt r e d ;
padding: 0 ;
3 90px margin: 50px 20px;
}
If overlapping margins did not collapse, then margin space for
would be 180p (90pixels for the bottom margin of the first<div> +
90 pixels for the top margin of the second <div>), while the
margins and for would be100px.

However, as you can see this is not the case.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Collapsing Margins
How it works

When the vertical margins of two elements touch,

• the largest margin value of the elements will be
displayed
• the smaller margin value will be collapsed to zero.
Horizontal margins, on the other hand,never collapse.
To complicate matters even further, there are a large
number of special cases in which adjoining vertical
margins do not collapse.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Width and Height
Box Model Properties #5 and #6

The width and height properties specify the size ofthe

element’s content area.
Perhaps the only rival for collapsing margins in
troubling our students, box dimensions have anumber
of potential issues.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Width and Height
Potential Problem #1

Only block-level elements and non-text inline

elements such as images have a width and height that
you can specify.
By default the width of and height of elements is the
actual size of the content.
For text,
•this is determined by the font size and fontface;
For images,
• the width and height of the actual image in pixels
determines the element box’sdimensions.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Width and Height
Potential Problem #2

Since the width and the height refer to the size of the
content area, by default, the total size of an element is
equal to not only its content area, but also to the sum
of its padding, borders, andmargins.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 div {
b o x - s i z i n g : c o n t e n t -b o x;
w i d t h : 200px;
h e i g h t : 100px;
padding: 5px;
m argin: 10px;
b o r d e r : s o l i d 2pt b l a c k ; True element width = 10 + 2 + 5 + 200 + 5 + 2 + 10 = 234 px
} True element height = 10 + 2 + 5 + 100 + 5 + 2 + 10 = 134 px

10px 5 200px 5 10px

2 2
100px
f

by the browser to select the HTML elements that will receive

Default

div {
...
b o x - s i z i n g : b o r d e r -b o x; True element width = 10 + 200 + 10 = 220 px
}
True element height = 10 + 100 + 10 = 120 px

100px
f

10px 200px 10px

17CS71-WEB TECHNOLOGY https://hemanthrajhemu.github.io

Fundamentals of Web Development
 Width and Height

p {
background-color: s i l v e r ;
}

} 100px

p {
background-color: s i l v e r ;
w i d t h : 200px;
h e i g h t : 100px;
}

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Overflow Property
o ve r f l o w: v i s i b l e ;

o v e r f l o w: hidden;

o ve r f l o w: s c r o l l ;

o ve r f l o w: a u t o ;

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Sizing Elements
Time to embrace ems and percentages

While the previous examples used pixels for its

measurement, many contemporary designers prefer to
use percentages or em units for widthsand heights.
• When you use percentages, the size is relative to
the size of the parentelement.
• When you use ems, the size of the box is relative to
the size of the text withinit.
The rationale behind using these relative measuresis
to make one’s design scalable to the size of the
browser or device that is viewingit.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 <body>
<div c l a s s = " p i x e l s " >
P i x e l s - 200px by 50 px
</div>
< s t y l e> 50% <div c las s="percent ">
html,body { Percent - 50% o f widt h and h e i g h t
m argin: 0; </div>
50% 50%
width:100%; </body>
height:100%;
background: s i l v e r ;
}
.pixels {
widt h: 200 px;
h e i g h t : 50 px ;
background: t e a l ;
} 50%
.percent {
width:50%;
height:50%; 50% 50%
background: o l i v e ;
}

<body>
. parent Fixed { <div c las s="parent Fixed">
widt h: 400 px; <strong>parent has f i x e d s ize</ s t rong>
h e i ght : 150 px ; <div c las s="percent">
background: b e i g e ; PERCENT - 50% o f widt h and h e i g h t
} </div>
. p a r e n t R e l a t iv e { 50% of parent (=200px) </div>
width:50%; <div c l a s s =" par ent Re lat iv e " >
height:50%; <strong>parent has r e l a t i v e s ize</ s t rong>
background: y e l l o w; <div c las s="percent">
} PERCENT - 50% o f widt h and h e i g h t
</style> </div>
</div>
50% 50% </body>

50% of parent (=200px)

50% of parent

50%

https://hemanthrajhemu.github.io
50%

17CS71-WEB TECHNOLOGY Fundamentals of Web Development

 Developer Tools
Help is on the way

Developer tools in current browsers make it

significantly easier to examine and troubleshot CSS
than was the case a decade ago.
You can use the various browsers’ CSSinspection tools
to examine, for instance, the box values for a selected
element.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Developer Tools
Chrome – Inspect Element Firefox –Inspect

Opera – Inspect Element

Internet Explorer – Developer Tools

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Section7of7

TEXT STYLING
https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Text Properties
Two basic types

CSSprovides two types of properties that affect text.

• font properties that affect the fontand its
appearance.
• paragraph properties that affect the text in a
similar way no matter which fontis being used.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Font-Family
A few issues here

A word processor on a desktop machine can make use

of any font that is installed on the computer; browsers
are no different.
However, just because a given font is available on the
web developer’s computer, it does not mean that that
same font will be available for all users who view the
site.
For this reason, it is conventional to supply a so-called
web font stack, that is, a series of alternate fonts to
use in case the original font choice in not on the user’s
computer.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Specifying the Font-Family
1 Use this font as
the first choice
If it isn’t available, then
3 use this one

p { f ont - f ami l y: Cambr i a, Geor gi a, " Ti mes New Roman", ser i f ; }

But if it is not available,

2 then use this one And if it is not available
4 either, then use the
default generic serif font

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Generic Font-Family

The font-family property supports five different

generic families.
The browser supports a typeface from each family.
Generic
Font-Family
Name

This ser i f serif

Th
This sans- ser i f
Without
("sans")serif Th
This
In a regular,

This monospace
In a monospace font,
each letter has the
same width
This
proportionally-spaced
font, each letter hasa
variable width

This cur si ve

This
Decorative and cursive fonts
f ant asy vary from system to system;
rarely used asa result.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 @font-face
The future is now

Over the past few years, the most recentbrowser

versions have begun to support the @font-face
selector in CSS.
This selector allows you to use a font on your siteeven
if it is not installed on the end user’s computer.
Due to the on-going popularity of open source font
sites such as Google Web Fonts
(http://www.google.com/webfonts) and Font Squirrel
(http://www.fontsquirrel.com/), @font-face seems to
have gained a critical mass of widespread usage.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Font Sizes
M o control, mo problems

The issue of font sizes is unfortunately somewhat

tricky.
In a print-based program such as a word processor,
specifying a font size in points isunproblematic.
However, absolute units such as points and inches do
not translate very well topixel-based devices.
Somewhat surprisingly, pixels are also a problematic
unit.
Newer mobile devices in recent years have been
increasing pixel densities so that a given CSSpixel
does not correlate to a single devicepixel.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 Font Sizes
Welcome ems and percents again

If we wish to create web layouts that work well on

different devices, we should learn to use relative units
such as em units or percentages for our font sizes(and
indeed for other sizes in CSSaswell).
One of the principles of the web is that the user
should be able to change the size of the text if he or
she so wishes to do so.
Using percentages or em units ensures that thisuser
action will work.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 How to use ems and percents

When used to specify a font size, both em unitsand

percentages are relative to the parent’s fontsize.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 How to use ems and percents
<body> Browser’s default text size is usually 16 pixels
<p> 100% or 1em is 16 pixels
<h3> 125% or 1.125em is 18 pixels
<h2>
150% or 1.5em is 24 pixels
<h1>
200% or 2em is 32 pixels
/ * using 16px s c al e * / <body>
<p>t hi s w i l l be about 16 p i xe l s < / p >
body { f o n t - s i z e : 100%; } <h1>this w i l l be about 32 pi xel s </ h1>
h3 { f o n t - s i z e : 1.125em; } / * 1.25 x 16 = 18 * / <h2>this w i l l be about 24 pi xel s </ h2>
h2 { f o n t - s i z e : 1.5em; } / * 1 . 5 x 16 = 24 * / <h3>this w i l l be about 18 pi xel s </ h3>
h1 { f o n t - s i z e : 2em; } / * 2 x 16 = 32 * / <p>this w i l l be about 16 p i xe l s < / p >
</body>

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 How to use ems and percents
It might seem easy … but it’s not …

While this looks pretty easy to master, things

unfortunately can quickly become quite complicated.
Remember that percents and em units are relativeto
their parents, so if the parent font size changes, this
affects all of its contents.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 ems and percents
<body>
<p>this i s 16 pi xel s </ p>
<h1>this i s 32 pixels</h1>
<article>
<h1>this i s 32 pixels</h1>
<p>this i s 16 pi xel s </ p>
<div>
<h1>this i s 32 pixels</h1>
<p>this i s 16 pixels </p>
</ di v>
</ ar t i cl e>
</body>

/ * using 16px scale * /

body { f o n t - s i z e : 100%; }
p { f o n t - s i z e : 1em; } / * 1 x 16 = 16px * /
h1 { f o n t - s i z e : 2em; } / * 2 x 16 = 32px * /

/ * using 16px scale * /

body { f o n t - s i z e : 100%; }
p { f o n t - s i z e : 1em; }
h1 { f o n t - s i z e : 2em; }

a r t i c l e { f o n t - s i z e : 75% } / * h1 = 2 * 16 * 0.75 = 24px

p = 1 * 16 * 0.75 = 12px * /

d i v { f o n t - s i z e : 75% } / * h1 = 2 * 16 * 0.75 * 0.75 = 18px

p = 1 * 16 * 0. 75 * 0. 75 = 9px */

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 The rem unit
Solution to font sizing hassles?

CSS3now supports a new relative measure, the rem

(for root emunit).
This unit is always relative to the size of the root
element (i.e., the <html> element).
However, since Internet Explorer prior to version 9 do
not support the rem units, you need to provide some
type of fallback for thosebrowsers.

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 The rem unit
/ * using 16px s c a l e * /

body { f o n t - s i z e : 100%; }
p {
f o n t - s i z e : 16px; / * f o r o l d e r browsers: w o n ’t s c a l e p r o p e r l y though * /
f o n t - s i z e : 1rem; / * f o r new browsers: s c a le s and simple t o o * /
}
h1 { f o n t - s i z e : 2em; }

a r t i c l e { f o n t - s i z e : 75% } / * h1 = 2 * 16 * 0.75 = 24px

p = 1 * 16 = 16px * /

div { f o n t - s i z e : 75% } / * h1 = 2 * 16 * 0.75 * 0.75 = 18px

p = 1 * 16 = 16px */

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development
 What you’ve learned
1 Whatis CSS?
2 CSS Syntax

3 LocationofStyles
4 Selectors

5 TheCascade:How
Styles Interact 6 The BoxModel

7 CSSTextStyling

https://hemanthrajhemu.github.io
17CS71-WEB TECHNOLOGY Fundamentals of Web Development