Lecture Notes Web Technology and its Application

Web Technology and its Application

18CS63

MODULE-I
Introduction

PREPARED BY: Geethalakshmi N M

Department of ISE
Acharya Institute of Technology, Bengaluru

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 1

Lecture Notes Web Technology and its Application

 Introduction to HTML,
 What is HTML and Where did it come from?
 Syntax, Semantic Markup, Structure of HTML
Documents,
 Quick Tour of HTML Elements,
 HTML5 Semantic Structure Elements,
 Introduction to CSS, What is CSS, CSS Syntax,
Location of Styles, Selectors,
 The Cascade: How Styles Interact, The Box Model,
CSS Text Styling.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 2

Lecture Notes Web Technology and its Application
XHTML

• During the growing stages of HTML, the W3C turned its attention in the late 1990s
to a new specification called XHTML 1.0, which was a version of HTML that used
stricter XML (extensible markup language) syntax rules.

• 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.

versions of XHTML

Two versions of XHTML were created:

• XHTML 1.0 Strict

• XHTML 1.0 Transitional.

XHTML 1.0 Strict - XHTML Strict was designed to be more predictable and standardize web
documents. The strict version was meant to render the pages by the browser using the strict syntax
rules and tag support described by the XHTML 1.0 Strict specification.

XHTML 1.0 Transitional-The transitional version is a more forgiving variant of XHTML, and
was meant to act as a temporary transition to the global adoption of XHTML Strict.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 3

Lecture Notes Web Technology and its Application
 In the mid-2000s, the W3C presented a draft of the XHTML 2.0 specification.
 XHTML 2.0 lacked backwards compatibility with HTML and XHTML 1.0.
 Browsers would become significantly less forgiving of invalid markup.
 The XHTML 2.0 specification also dropped familiar tags such as <img>, <a>, <br>, and
numbered headings such as <h l>.

HTML 5

• At the time when the XHTML 2.0 specification was under development, a group of developers
at Opera and Mozilla formed the WHATWG (Web Hypertext Application Technology
Working Group) group within the W3C.

• This group was not convinced with XML and its abandomnent of backwards-compatibility
for the web. WHATWG was focused less on semantic purity and more on the web.

• W3C stopped work on XHTML 2.0 and adopted the work done by WHATWG and named it
HTML5.

There are three main aims to HTML5:

• Specify unambiguously how browsers should deal with invalid markup.

• Provide an open, nonproprietary programming framework (via JavaScript) for creating rich
web applications.

• Be backwards compatible with the existing web.

Features

• Semantics: allowing you to describe more precisely what your content is.
• Connectivity: allowing you to communicate with the server in new and innovative ways.
• Offline and storage: allowing webpages to store data on the client-side locally and operate
• Multimedia: making video and audio first-class citizens in the Open Web.
• 2D/3D graphics and effects: allowing a much more diverse range of presentation options.
• Performance and integration: providing greater speed optimization and better usage of
computer hardware.
• Device access: allowing for the usage of various input and output devices.
• Styling: letting authors write more sophisticated themes.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 4

Lecture Notes Web Technology and its Application
HTML Syntax

• The current W3C Recommendation for HTML is the HTML 4.0.1 specification, .
• In that specification the syntax for marking up documents was defined and centered around
using elements and attributes.

HTML Elements and Attributes

• 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 HTML element.
• In XHTML, attribute values had to be enclosed in quotes; in HTML5, the quotes are optional.

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

Opening Tag Closing Tag

<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

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 5

Lecture Notes Web Technology and its Application
Nesting HTML elements

• Often an HTML element will contain other HTML elements.

• In such a case, the container element is said to be a 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.

Hierarchy of elements

ancestor

<body> parent
child
<p>
This is some <strong>text</strong>
</p>
<h1>Title goes here</h1>
sibling
<div>
descendants
<p>
This is <span>important</span>
</p>
</div>
</body>

<body>
descendants children

<p> <h1> <div>

siblings

<strong> <p>
ancestors

<span>

• In order to properly 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.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 6

Lecture Notes Web Technology and its Application
Correct Nesting

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

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

Incorrect Nesting

Semantic Markup

• 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).
• Semantics is the study of the meanings of words and phrases in a language.
• Semantic elements = elements with a meaning.
• A semantic element clearly describes its meaning to both the browser and the developer.
• Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
• Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
Structure
• Structure is a vital way of communicating information in paper and electronic documents.
• All of the HTML tags are used to describe the basic structural information in a document,
such as articles, headings, lists, paragraphs, links, images, navigation, footers, and so on.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 7

Lecture Notes Web Technology and its Application
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 the site.

Structure of HTML Documents

Simplest HTML document

1 <!DOCTYPE html>
<title>A Very Small Document</title>
<p>This is a simple document with not much content</p>

• The <title> element (Item 1) 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.

1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 8

Lecture Notes Web Technology and its Application
DOCTYPE

• 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 contains HTML.

1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

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 use them.
• The <html> element is sometimes called the root element as it contains all the other HTML
elements in the document.
• HTML pages are divided into two sections: the head and the body, which correspond to the
<head> and <body> elements.
• The head contains descriptive elements about the document, such as its title, any style sheets
or JavaScript files it uses.
• The body contains content that will be displayed by the browser.
• The <head> element contains a variety of additional elements.
• The first of these is the <meta> element. Our example declares that the character encoding
for the document is UTF-8.
• No brains but metas, styles and javascripts.
• Below example specifies an external CSS style sheet file that is used with this document.
• It also references an external Javascript file.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 9

Lecture Notes Web Technology and its Application

1 <!DOCTYPE html>
<html>
2 <head lang="en">
<meta charset="utf-8"> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css"> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>

Quick Tour of HTML Elements

• HTML5 contains many structural and presentation elements – too many to completely cover
in this presentation.

• Rather than comprehensively cover all these elements, this presentation will provide a quick
overview of the most common elements.

Sample Document

<body>
<h1>Share Your Travels</h1>
1
<h2>New York - Central Park</h2>
2 <p>Photo by Randy Connolly</p>
<p>This photo of Conservatory Pond in
<a href="http://www.centralpark.com/">Central Park</a> 3
New York City was taken on October 22, 2011 with a
<strong>Canon EOS 30D</strong> camera.
</p> 4
5 <img src="images/central-park.jpg" alt="Central Park" />

<h3>Reviews</h3>
6 <div> 7
<p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>

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

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

</body> 9

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 10

Lecture Notes Web Technology and its Application
Headings

• 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.

• The browser has its own default styling for each heading level. However, these are easily
modified and customized via CSS.
• In practice, specify a heading level that is semantically 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
secondary heading

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 11

Lecture Notes Web Technology and its Application

Paragraphs

• Paragraphs are the most basic unit of text in an HTML document.

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

Links

• Links are created using the <a> element (the “a” stands for anchor).
• A link has two main parts: the destination and the label.

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

Destination Label (text)

<a href="index.html"><img src="logo.gif" /></a>

Label (image)

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 12

Lecture Notes Web Technology and its Application
Types of Links

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

• Links to external sites (or to individual resources such as images or movies on an external
site).

• Links to other pages or resources within the current site.

• Links to other places within the current page.

• Links to particular locations on another page.

• 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.

• Links that are instructions to the mobile browser to make phone call

Link Text

• Links with the label “Click Here” were once a staple of 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 be descriptive.

• “Click here to see the race results”
• “Exam Results” or “See Exam Results”.

URL Absolute Referencing

When referencing a page or resource on an external 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 the desired resource.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 13

Lecture Notes Web Technology and its Application
URL Relative Referencing
• We also need to be able to successfully reference files within our site.
• This requires learning the syntax for so-called relative referencing.
• When referencing a resource that is on the same server as your HTML document, then you
can use briefer relative referencing.
• If the URL does not include the “http://” then the browser will request the current server for
the file.
• 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 many files 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 to locate the file on the server.
Pathnames
Pathnames on the web follow Unix conventions.
• Forward slashes (“/”) are used to separate directory names from each other and from file
names.
• Double-periods (“..”) are used to reference a directory “above” the current one in the
directory tree.
URL Relative Referencing

Share-Your-Travels

/ (root folder)

index.html

about.html
1 7
example.html

images/

2
logo.gif

central-park.jpg

css/

main.css

images/
3
background.gif

members/

4 5
index.html

randyc/
6
bio.html

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 14

Lecture Notes Web Technology and its Application
Relative Link Type Example

Same Directory To link to example.html from about.html (in

Figure 2.18), use:
To link to a file within the same folder,
simply use the file name. <a href="example.html">

Child Directory To link to logo.gif from about.html, use:

To link to a file within a subdirectory, <a href="images/logo.gif">

use the name of the subdirectory and a
slash before the file name.

Grandchild/Descendant Directory To link to background.gif from about.html, use:

To link to a file that is multiple <a href="css/images/background.gif">

subdirectories below the current one,
construct the full path by including each
subdirectory name (separated by slashes)
before the file name.

Parent/Ancestor Directory To link to about.html from index.html in members,

use:
Use “../” to reference a folder above the
current one. If trying to reference a file <a href="../about.html">
several levels above the current one,
To link to about.html from bio.html, use:
simply string together multiple “../”.
<a href="../../about.html">

Divisions

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 in contemporary CSS-based layouts to mark out sections.

Using div elements

• HTML5 has a variety of new semantic elements that can be used to reduce somewhat the
confusing Mass of div within divs within divs that is so typical of contemporary web design.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 15

Lecture Notes Web Technology and its Application

Inline Text Elements

• 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>

Images

• While the <img> tag is the oldest method for 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 CSS where
they more rightly belong.
• 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.

Specifies the URL of the image to display Text in title attribute will be displayed in a popup
(note: uses standard relative referencing) tool tip when user moves mouse over image.

<img src="images/central-park.jpg" alt="Central Park" title="Central 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 see it.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 16

Lecture Notes Web Technology and its Application
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 the
browser as a numbered list.
• Definition lists: Collection of name and definition pairs. These tend to be used infrequently.
Perhaps the most common example would be a FAQ list.

<ol>
<li>Introduction</li>
<li>Background</li>
Notice that the list item element <li>My Solution</li>
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>Conclusion</li>
</ul> </ol>

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 entity number.

e.g., &nbsp; and &copy;

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 17

Lecture Notes Web Technology and its Application

Html Semantic Structure Elements

• One substantial problem with modern, pre-HTML5 semantic markup:

• Most complex web sites are absolutely packed solid with <div> elements.
• Unfortunately, all these <div> elements can make the resulting markup confusing and hard to
modify.
• Developers typically try to bring some sense and order to the <div> chaos by using id or
classnames that provide some clue as to their meaning.

HTML 4 versus HTML5

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 18

Lecture Notes Web Technology and its Application
• <header>: Represents header data of HTML.
• <footer>: Footer section of the page.
• <nav>: Navigation elements in the page.
• <article>: Self-contained content.
• <section>: The <section> element is an element designed to programmatically designate
sections of document content. It represents the section of a document that is grouped around
a general theme and often comes with a specific heading.
• <aside>: Represent side bar contents of a page.

Header and Footer

Most web site pages have a recognizable header and footer section.

Typically the header contains

• the site logo

• title (and perhaps additional subtitles or taglines)

• horizontal navigation links, and

• perhaps one or two horizontal banners.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 19

Lecture Notes Web Technology and its Application

• 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 ontainers,
such as <article> or <section>.
<header>
<img src="logo.gif" alt="logo" />
<h1>Fundamentals of Web Development</h1>
...
</header>
<article>
<header>
<h2>HTML5 Semantic Structure Elements </h2>
<p>By <em>Randy Connolly</em></p>
Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 20
<p><time>September 30, 2012</time></p>
</header>
...
Lecture Notes Web Technology and its Application
Heading Groups

<hgroup>

The <hgroup> element can be used to group related headings together within one container.

<header>
<hgroup>
<h1>Chapter Two: HTML 1</h1>
<h2>An Introduction</h2>
</hgroup>
</header>
<article>
<hgroup>
<h2>HTML5 Semantic Structure Elements </h2>
<h3>Overview</h3>
</hgroup>
</article>

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.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 21

Lecture Notes Web Technology and its Application

<header>
<img src="logo.gif" alt="logo"
/>
<h1>Fundamentals of Web
Development</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>

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 or heading.
• 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

Sections versus Divs

How to decide which to use

• The WHATWG specification warns readers that the <section> element is not a generic
container element. HTML already has the <div> element for such uses.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 22

Lecture Notes Web Technology and its Application
• 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's
outline.
• If so, then use a <section>; otherwise use a <div>.

Figure and Figure Captions

• 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.
• 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.

<p>This photo was taken on October 22, 2011 with a Canon EOS 30D camera.</p>
<figure>
<img src="images/central-park.jpg" alt="Central Park" /><br/>
Figure could be <figcaption>Conservatory Pond in Central Park</figcaption>
moved to a </figure>
different <p>
location in
It was a wonderfully beautiful autumn Sunday, with strong sunlight and
document
expressive clouds. I was very fortunate that my one day in New York was
…
blessed with such weather!
But it has to
</p>
exist in the
document
(i.e., the
figure isn’t
optional)

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 23

Lecture Notes Web Technology and its Application
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 consists of content that is
tangentially related to the content around the aside element.”
• The <aside> element could thus be used for sidebars, pull quotes, groups of advertising
images, or any other grouping of non-essential elements.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 24

Lecture Notes Web Technology and its Application

Introduction to CSS

WHAT IS CSS?

• CSS is a W3C standard for describing the presentation (or appearance) of HTML elements.
• CSS is a language in that it has its own syntax rules.
• CSS can be added directly to any HTML element (via the style attribute), within the <head>
element, or, most commonly, in a separate text file that contains only CSS.

With CSS we can assign

• font properties,

• colors,

• sizes,

• borders,

• background images,

• even the position of elements.

Benefits of CSS

• Improved control over formatting. Why using CSS is a better way of describing
presentation than HTML
The degree of formatting control in CSS is significantly better than that provided in HTML.
• Improved site maintainability. Web sites become significantly more maintainable because
all formatting can be centralized into one, or a small handful, of CSS files.
• Improved site accessibility CSS-driven sites are more accessible.
• Improved page download speed. A site built using a centralized set of CSS files for all
presentation will also be quicker to download because each individual HTML file will contain
less markup.
• Improved output flexibility.CSS can be used to adopt a page for different output mediums.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 25

Lecture Notes Web Technology and its Application
CSS Versions

Let’s just say there’s more than 1

• W3C published the CSS Level 1 Recommendation in 1996.

• A year later, the CSS Level 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 CSS3 draft.

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.

• CSS has a reputation for being a somewhat frustrating language.

• This reputation is well deserved!

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 26

Lecture Notes Web Technology and its Application
CSS Syntax

• Each individual CSS declaration must contain a property.

• These property names are predefined by the CSS standard.
• The CSS2.1 Recommendation defines over a hundred different property names.
• A CSS document consists of one or more style rules.
• 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).
• The series of declarations is also called the declaration block.
• A declaration block can be together on a single line, or spread across multiple lines.
• The browser ignores white space.
• Each declaration is terminated with a semicolon.

Selectors

• 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 the style.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 27

Lecture Notes Web Technology and its Application
Properties

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 28

Lecture Notes Web Technology and its Application
Values

• What style value for the properties

• Each CSS declaration also contains a value for a property.
• The unit of any given value is dependent upon the property.
• Some property values are from a predefined list of keywords.
• Others are values such as length measurements, percentages, and numbers without
units, color values, and URLs.

Color Values

CSS supports a variety of different ways of describing color

Units of measure values

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 29

Lecture Notes Web Technology and its Application

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
options area.

The browser style sheet defines the default styles the browser uses for each HTML element.

Location of styles

CSS style rules can be located in three different locations.

1. Inline

2. Embedded

3. External

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 30

Lecture Notes Web Technology and its Application
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 since they increase bandwidth and decrease
maintainability.
• Inline styles can however be handy for quickly testing out a style change.

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 embedded styles.

External Style Sheet

Style rules placed within a external text file with the .css extension

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 31

Lecture Notes Web Technology and its Application

• This is by far the most common place to locate style rules because it provides the best
maintainability.
• When you make a change to an external style sheet, all HTML documents that reference that
style sheet will automatically use the updated version.
• The browser is able to cache the external style sheet which can improve the performance of
the site

Selectors

When defining CSS rules, you will need to first need to use a selector to tell the browser which
elements will be affected. CSS selectors allow you to select

• Individual elements

• Multiple HTML elements,

• Elements that belong together in some way, or elements that are positioned in specific ways in

the document hierarchy.

There are a number of different selector types.

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.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 32

Lecture Notes Web Technology and its Application

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 of your CSS files, by combining
multiple identical rules into a single rule.

Reset

• Grouped selectors are often used as a way to quickly reset or remove browser defaults.
• The goal of doing so is to reduce browser inconsistencies 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.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 33

Lecture Notes Web Technology and its Application

• 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 embedded styles.

Class Selectors

Simultaneously target different HTML elements

A class selector allows you to simultaneously target different HTML elements regardless of their
position in 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
classname.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 34

Lecture Notes Web Technology and its Application

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 idname.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 35

Lecture Notes Web Technology and its Application
Note: You should only be using an id once per page

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 HTML element.
• Class selectors should be used when (potentially) referencing several related elements.

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 of an attribute.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 36

Lecture Notes Web Technology and its Application
• 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 and images.

Attribute Selectors

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 37

Lecture Notes Web Technology and its Application
Pseudo Selectors

• Select something that does not exist explicitly as an element

• Pseudo-element selector is a way to select something that does not exist explicitly as an
element in the HTML document tree but which is still a recognizable selectable object.
• Pseudo-class selector does apply to an HTML element, but targets either a particular state or,
in CSS3, a variety of family relationships.
• The most common use of this type of selectors is for targeting link states.

Contextual Selectors

• Select elements based on their ancestors, descendants, or siblings

• A contextual selector (in CSS3 also called combinators)
• Allows you to select elements based descendants, or siblings. on their ancestors, That is, it
selects elements based on their context or their relation to other elements in the document
tree

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 38

Lecture Notes Web Technology and its Application

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
character used to indicate
• Descendant selection is the space character.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 39

Lecture Notes Web Technology and its Application

The cascade: how styles interact

Why Conflict Happens

• 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 HTML
element,CSS has a system to help the browser determine how to display elements when
different style rules conflict.

• How conflicting rules are handled in CSS

• The “Cascade” in CSS refers to how conflicting rules 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 cascade is meant to be analogous to how a given
style rule will continue to take precedence with child elements.
• CSS uses the following cascade principles to help it deal with conflicts:

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 40

Lecture Notes Web Technology and its Application
The Cascade: How Styles Interact

Specificity

location

Inheritance

Cascade Principle #1

Many (but not all) CSS properties affect not only themselves but their descendants as well.

Font, color, list, and text properties are inheritable.

Layout, sizing, border, background and spacing properties are not.

body {
font-family: Arial; inherited
<html> color: red; inherited
border: 8pt solid green; not inherited
margin: 100px; not inherited
}
<head> <body>

<meta> <title> <h1> <h2> <p> <img> <h3> <div> <div> <p>

<a> <strong> <p> <p> <p> <p> <small>

<time> <time>

It is possible to tell elements to inherit properties that are normally not inheritable.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 41

Lecture Notes Web Technology and its Application
div {
font-weight: bold;
margin: 50px;
border: 1pt solid green;
}
p {
border: inherit;
margin: inherit;
}

<h3>Reviews</h3>
<div>
<p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>

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

Specificity

• These color and font-weight properties are inheritable and thus potentially applicable to all
the child elements contained within the body.
• However, because the <div> and <p> elements also have the same properties set, they
override the value defined for the <body> element because their selectors (div and p) are
more specific.
• Class selectors are more specific than element selectors, and thus take precedence and
override element selectors.
• Id selectors are more specific than class selectors, and thus take precedence and override
class selectors.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 42

Lecture Notes Web Technology and its Application
body { This text is not within a p element.
font-weight: bold; <p>Reviews</p>
color: red; <div>
} <p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
div { This text is not within a p element.
font-weight: normal; </div>
color: magenta; <hr/>
}
<div>
p { <p>By Susan on <time>October 1, 2012</time></p>
color: green; <p>I love Central Park.</p>
} </div>
<hr/>
.last {
color: blue; <div>
} <p class="last">By Dave on <time>October 15, 2012</time></p>
<p class="last" id="verylast">Thanks for posting.</p>
#verylast { </div>
color: orange; <hr/>
font-size: 16pt;
}

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 that value = 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 and pseudo-elements in the selector (let that value = d).
• Finally, concatenate the four numbers a+b+c+d together to calculate the selector’s
specificity.

1. 1000 for inline style attribute

2. Add 100 for each ID

2. Add 10 for each attribute, class or pseudo-class

3. Add 1 for each element name or pseudo –element

A: h1{color:red;}

B:#content h1{color:maroon;}

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 43

Lecture Notes Web Technology and its Application
C:<div id=“content”><h1 style=“color:orange”>Heading</h1></div>

The specificity of A is 1(one element)

The specificity of B is 101(one ID refernce and one element)

The specificity of C is 1000(inline styling)

Since 1<101<1000, the third rule(c) has a greater level of specificity, and therefore will be applied.

Specificity Value
div {
element selector color: green; 0001
}

1 div form {
descendant selector overrides color: orange; 0002
}
(elements only)

2 .example {
overrides
class and attribute color: blue; 0010
selectors }

3
#firstExample {
id selector overrides 0100
color: magenta;
}

4
overrides id + div #firstExample {
additional color: grey; 0101
}
selectors
A higher specificity value
overrides lower specificity
values

inline style 5
overrides <div style="color: red;"> 1000
attribute

Location

Cascade Principle #3

When inheritance and specificity cannot determine style precedence, the principle of location will
be used.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 44

Lecture Notes Web Technology and its Application
The principle of location is that when rules have the same specificity, then the latest are given more
weight.

Browser’s
default style
settings

user-styles.css #example {
1 color: green;
overrides }

2 <head>
overrides <link rel="stylesheet" href="stylesA.css" /> 3
<link rel="stylesheet" href="stylesWW.css" /> overrides

4 <style>
overrides
#example {
color: orange; 5 #example {
overrides color: blue;
color: magenta; }
}
</style>
</head>
<body> 6 overrides
<p id="example" style="color: red;">
sample text
</p>
</body>

What color would the sample text be if there wasn’t an inline style definition?

Browser’s
default style
settings

user-styles.css #example {
1 color: green;
overrides }

2 <head>
overrides <link rel="stylesheet" href="stylesA.css" /> 3
<link rel="stylesheet" href="stylesWW.css" /> overrides

4 <style>
overrides
#example {
color: orange; 5 #example {
overrides color: blue;
color: magenta; }
}
</style>
</head>
<body> 6 overrides
<p id="example" style="color: red;">
sample text
</p>
</body>

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 45

Lecture Notes Web Technology and its Application
There’s always an exception

There is one exception to the principle of location.

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.

The BOX MODEL

• In CSS, all HTML elements exist within an element box.

• It is absolutely essential that you familiarize yourself with the terminology and relationship
of the CSS properties within the element box.

The Box Model

margin
border
padding

Every CSS rule begins withwidth

a selector. The selector identifies
which element or elements in the HTML document will be
height
affected by the declarations in the rule. Another way of
thinking of selectors is that they are a pattern which is used
element content area
by the browser to select the HTML elements that will receive
background-color/background-image of element

background-color/background-image of element’s parent

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

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 46

 Lecture Notes Web Technology and its Application
Background

Box Model Property #1

• The background color or image of an element fills an element out to its border (if it has one
that is).
• In contemporary web design, it has become extremely common too use CSS to display purely
presentational images (such as background gradients and patterns, decorative images, etc)
rather than using the <img> element.

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 the element.

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 CSS file and not the HTML. CSS3
introduced the ability to specify 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 a common
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.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 47

Lecture Notes Web Technology and its Application
Background Repeat

background-image: url(../images/backgrounds/body-background-tile.gif);
background-repeat: repeat;

background-repeat: no-repeat; background-repeat: repeat-y; background-repeat: repeat-x;

Background Position

50px

300px

body {
background: white url(../images/backgrounds/body-background-tile.gif) no-repeat;
background-position: 300px 50px;
}

Borders

Box Model Property #2

Borders provide a way to visually separate elements.

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

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 48

 Lecture Notes Web Technology and its Application

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 order is 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
also supported.

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

border-radius The radius of a rounded corner.

border-image The URL of an image to use as a border.

Shortcut notation

TRBL

With border, margin, and padding properties, there are long-form and shortcut methods to set the 4
sides With border, margin, and padding properties, there are long-form and shortcut methods to set
the 4 sides

border-top-color: red; /* sets just the top side */

border-right-color: green; /* sets just the right side */
Border-bottom-color: yellow; /* sets just the bottom side */
Border-left-color: blue; /* sets just the left side */
Border-color: red; /* sets all four sides to red */
Border-color: red green orange blue; /* sets all four sides differently */
When using this multiple values shortcut, they are applied in clockwise order starting at the top.
Thus the order is: top right bottom left.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 49

Lecture Notes Web Technology and its Application

TRBL (Trouble)
top
border-color: top right bottom left;

left right
border-color: red green orange blue;

bottom

Margins and Padding

Box Model Properties #3 and #4

p {
border: solid 1pt red;
margin: 0;
padding: 0;
}

p {
border: solid 1pt red;
margin: 30px;
padding: 0;
}

p {
border: solid 1pt red;
margin: 30px;
padding: 30px;
}

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 50

Lecture Notes Web Technology and its Application
Margins

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 51

Lecture Notes Web Technology and its Application
Collapsing Margins

<div>
<p>Every CSS rule ...</p>
1 90px <p>Every CSS rule ...</p>
</div>
50px <div>
<p>In CSS, the adjoining ... </p>
50px 4 <p>In CSS, the adjoining ... </p>
</div>

50px
div {
2 90px border: dotted 1pt green;
padding: 0;
50px margin: 90px 20px;
}
50px 5
p{
50px border: solid 1pt red;
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 be 100px.

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.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 52

Lecture Notes Web Technology and its Application
Width and Height

Box Model Properties #5 and #6

• The width and height properties specify the size of the element’s content area.
• Perhaps the only rival for collapsing margins in troubling our students, box dimensions have
a number of potential issues.

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 font face;

For images,

• the width and height of the actual image in pixels determines the element box’s dimensions.

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, and
margins.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 53

Lecture Notes Web Technology and its Application
div {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 5px;
margin: 10px;
border: solid 2pt black; True element width = 10 + 2 + 5 + 200 + 5 + 2 + 10 = 234 px
} True element height = 10 + 2 + 5 + 100 + 5 + 2 + 10 = 134 px

Every CSS rule begins with200px

a selector. The selector identifies
10px 5 5 10px
2 which element or elements in the HTML document will be 2
100px
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

div {
...
box-sizing: border-box; True element width = 10 + 200 + 10 = 220 px
}
True element height = 10 + 100 + 10 = 120 px

Every CSS rule begins with a selector. The selector identifies

which element or elements in the HTML document will be
100px
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

10px 200px 10px

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 54

Lecture Notes Web Technology and its Application

p {
background-color: silver;
}

} 100px

p {
background-color: silver;
width: 200px;
height: 100px;
}

Overflow Property

overflow: visible;

overflow: hidden;

overflow: scroll;

overflow: auto;

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 55

Lecture Notes Web Technology and its Application
Sizing Elements

While the previous examples used pixels for its measurement, many contemporary designers prefer
to use percentages or em units for widths and heights.

• When you use percentages, the size is relative to the size of the parent element.

• When you use ems, the size of the box is relative to the size of the text within it.

The rationale behind using these relative measures is to make one’s design scalable to the size of
the browser or device that is viewing it.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 56

Lecture Notes Web Technology and its Application
<body>
<div class="pixels">
Pixels - 200px by 50 px
</div>
<style> 50% <div class="percent">
html,body { Percent - 50% of width and height
margin:0; </div>
50% 50%
width:100%; </body>
height:100%;
background: silver;
}
.pixels {
width:200px;
height:50px;
background: teal;
50%
}
.percent {
width:50%;
50% 50%
height:50%;
background: olive;
}

<body>
.parentFixed { <div class="parentFixed">
width:400px; <strong>parent has fixed size</strong>
height:150px; <div class="percent">
background: beige; PERCENT - 50% of width and height
} </div>
50% of parent (= 200px)
.parentRelative { </div>
width:50%; <div class="parentRelative">
height:50%; <strong>parent has relative size</strong>
background: yellow; <div class="percent">
} PERCENT - 50% of width and height
</style> </div>
</div>
50% 50% </body>

50% of parent (= 200px)

50% of parent

50% 50%

Developer Tools

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’ CSS inspection tools to examine, for instance, the box values for
a selected element.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 57

Lecture Notes Web Technology and its Application

Chrome – Inspect Element Firefox – Inspect

Opera – Inspect Element

Internet Explorer – Developer Tools

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 58

Lecture Notes Web Technology and its Application
TEXT STYLING

Text Properties

Two basic types

CSS provides two types of properties that affect text.

• font properties that affect the font and its appearance.

• paragraph properties that affect the text in a similar way no matter which font is being
used.

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.

Specifying the Font-Family

1 Use this font as

the first choice
If it isn’t available, then
3 use this one

p { font-family: Cambria, Georgia, "Times New Roman", serif; }

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

Generic Font-Family

The font-family property supports five different generic families.

The browser supports a typeface from each family.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 59

Lecture Notes Web Technology and its Application

Generic
Font-Family
Name

This serif serif

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

This monospace This In a monospace font,

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

This cursive

This
Decorative and cursive fonts
fantasy vary from system to system;
rarely used as a result.

@font-face

• Over the past few years, the most recent browser versions have begun to support the @font-
face selector in CSS.
• This selector allows you to use a font on your site even 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.

Font Sizes

• 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 is
unproblematic.
• However, absolute units such as points and inches do not translate very well to pixel-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 CSS
pixel does not correlate to a single device pixel.
• 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
CSS as well).

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 60

Lecture Notes Web Technology and its Application
• 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 this user action will work.

How to use ems and percents

When used to specify a font size, both em units and percentages are relative to the parent’s font
size.

<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 scale */ <body>
<p>this will be about 16 pixels</p>
body { font-size: 100%; } <h1>this will be about 32 pixels</h1>
h3 { font-size: 1.125em; } /* 1.25 x 16 = 18 */ <h2>this will be about 24 pixels</h2>
h2 { font-size: 1.5em; } /* 1.5 x 16 = 24 */ <h3>this will be about 18 pixels</h3>
h1 { font-size: 2em; } /* 2 x 16 = 32 */ <p>this will be about 16 pixels</p>
</body>

While this looks pretty easy to master, things unfortunately can quickly become quite complicated.

Remember that percents and em units are relative to their parents, so if the parent font size changes,
this affects all of its contents.

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 61

Lecture Notes Web Technology and its Application
<body>
<p>this is 16 pixels</p>
<h1>this is 32 pixels</h1>
<article>
<h1>this is 32 pixels</h1>
<p>this is 16 pixels</p>
<div>
<h1>this is 32 pixels</h1>
<p>this is 16 pixels</p>
</div>
</article>
</body>

/* using 16px scale */

body { font-size: 100%; }

p { font-size: 1em; } /* 1 x 16 = 16px */
h1 { font-size: 2em; } /* 2 x 16 = 32px */

/* using 16px scale */

body { font-size: 100%; }

p { font-size: 1em; }
h1 { font-size: 2em; }

article { font-size: 75% } /* h1 = 2 * 16 * 0.75 = 24px

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

div { font-size: 75% } /* h1 = 2 * 16 * 0.75 * 0.75 = 18px

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

The rem unit

CSS3 now supports a new relative measure, the rem (for root em unit).

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 those browsers.

/* using 16px scale */

body { font-size: 100%; }

p {
font-size: 16px; /* for older browsers: won’t scale properly though */
font-size: 1rem; /* for new browsers: scales and simple too */
}
h1 { font-size: 2em; }

article { font-size: 75% } /* h1 = 2 * 16 * 0.75 = 24px

p = 1 * 16 = 16px */

div { font-size: 75% } /* h1 = 2 * 16 * 0.75 * 0.75 = 18px

p = 1 * 16 = 16px */

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 62

Lecture Notes Web Technology and its Application
Text Properties

Geethalakshmi N M, Dept. Of ISE, AIT, Bengaluru Page 63