WT Module-1.pdf

WEB TECHNOLOGY AND ITS
APPLICATIONS

HTML DEFINED + ITS HISTORY
Section 1 of 6

Brief History of HTML
• 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.

HTML Syntax
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.
What is a markup language?

Markup
At its simplest, markup is a way to indicate information about
the content
• This “information about content” in HTML 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.
What is it again?

What is the W3C?
 The W3C is the main standards organization for the World Wide
Web.
 To promotes compatibility the W3C produces 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.
Standards

XHTML
oThe 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.
Partying like it’s 1999

XHTML
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).
You too can be strict

XHTML
To help web authors, two versions of XHTML were created:
XHTML 1.0 Strict and XHTML 1.0 Transitional.
• The strict version was meant to be rendered by a 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 act as a temporary transition to
the eventual global adoption of XHTML Strict.
Two versions

Standards Movement
During much of the 2000s, the focus in the professional web
development community was on standards: that is, on limiting
oneself to the W3C specification for XHTML.
Following a standard is a good thing

Validators
A key part of the standards movement in the web
development community of the 2000s was the use of HTML
Validators as a means of verifying that a web page’s markup
followed the rules for XHTML transitional or strict.
How to ensure your pages follow a standard

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)

XHTML 2.0 and WHATWG
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 at Opera 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 the web.
Where did it go?

HTML5
By 2009, the W3C stopped work on XHTML 2.0 and instead
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, non-proprietary programming framework
(via Javascript) for creating rich web applications.
• Be backwards compatible with the existing web.
The new hotness

HTML5
 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 all versions support every
feature of HTML5.
 This is in fact by design. HTML in HTML5 is now a living
language: that is, it is a language that evolves and develops
over time.
 As such, every browser will support a gradually increasing
subset of HTML5 capabilities
It evolves

HTML5 Support in Browsers
Full HTML5 Support
No HTML5
Support
Partial HTML5 Support

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.
More syntax

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…

Elements and Attributes
<a href="http://www.centralpark.com">Central Park</a>
Element Name Attribute
Opening Tag Closing Tag
Content
May be text or other HTML elements
<br />
Element Name
Trailing Slash
Example empty element

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
<body>
<p>
This is some <strong>text</strong>
</p>
<h1>Title goes here</h1>
<div>
<p>
This is <span>important</span>
</p>
</div>
</body>
child
parent
sibling
descendants
ancestor
<body>
<p> <div>
<h1>
<strong>
<span>
<p>
children
siblings
descendants
ancestors

Nesting HTML elements
 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.
<h1>Share Your <strong>Travels</strong></h1>
<h1>Share Your <strong>Travels</h1></strong>
Correct Nesting
Incorrect Nesting

SEMANTIC MARKUP
Section 3 of 6

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).
 As a consequence, beginning HTML authors are often
counseled to create semantic HTML documents.
 That is, an HTML document should not describe how to
visually present content, but only describe its content’s
structural semantics or meaning.
What does it mean?

Structure
 Structure is a vital way of communicating information 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.

Semantic Markup
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.
Its advantages

STRUCTURE OF HTML
Section 4 of 6

Simplest HTML document
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.
<!DOCTYPE html>
<title>A Very Small Document</title>
<p>This is a simple document with not much content</p>
1

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

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.
(short for Document Type Definition)
1
<!DOCTYPE html>
<html>
<head lang="en">
</head>
<body>
...
</body>
</html>
1
2
3
4
5
6
7

HTML, Head, and Body
o HTML5 does not require the use of the <html>, <head>, and
<body>.
o However, in XHTML they were required, and most web authors
continue to use them.
o The <html> element is sometimes called the root element as it
contains all the other HTML elements in the document.
2
<!DOCTYPE html>
<html>
<head lang="en">
</head>
<body>
...
</body>
</html>
1
2
3
4
5
6
7

Head and Body
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.
The body contains content that will be displayed by the browser.
3
4
<!DOCTYPE html>
<html>
<head lang="en">
</head>
<body>
...
</body>
</html>
1
2
3
4
5
6
7

Inside the head
You will notice that 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.
There are no brains
5
<!DOCTYPE html>
<html>
<head lang="en">
</head>
<body>
...
</body>
</html>
1
2
3
4
5
6
7

Inside the head
Our example specifies an external CSS style sheet file that is used
with this document.
It also references an external Javascript file.
No brains but metas, styles and javascripts
6
7
<!DOCTYPE html>
<html>
<head lang="en">
</head>
<body>
...
</body>
</html>
1
2
3
4
5
6
7

QUICK TOUR OF HTML
Section 5 of 6

Why a quick tour?
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>
<h2>New York - Central Park</h2>
<p>Photo by Randy Connolly</p>
<p>This photo of Conservatory Pond in
<a href="http://www.centralpark.com/">Central Park</a>
New York City was taken on October 22, 2011 with a
<strong>Canon EOS 30D</strong> camera.
</p>
<img src="images/central-park.jpg" alt="Central Park" />
<h3>Reviews</h3>
<div>
<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>
<p><small>Copyright © 2012 Share Your Travels</small></p>
</body>
1
5
8
2
3
4
6 7
9

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.
<h1>, <h2>, <h3>, etc
1

Headings
The browser has its
own default styling for
each heading level.
However, these are
easily modified and
customized via CSS.

Headings
 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
Be semantically accurate

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.
<p>
2

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.
<div>
6

Using div elements
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 within divs within divs that is so typical of contemporary
web design.
Can you say “div-tastic”

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>
3
Label (text)
<a href="index.html"><img src="logo.gif" /></a>
Label (image)
Destination

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.

Different link destinations
<a href="http://www.centralpark.com/logo.gif">Central Park</a>
Link to resource on external site
<a href="index.html">Home</a>
Link to another page on same site as this page
<a href="#top">Go to Top of Document</a>
Link to another place on the same page
Link to external site
<a href="productX.html#reviews">Reviews for product X</a>
Link to specific place on another page
<a href="mailto://person@somewhere.com">Someone</a>
Link to email
<a href="javascript://OpenAnnoyingPopup();">See This</a>
Link to javascript function
<a href="tel:+18009220579">Call toll free (800) 922-0579</a>
Link to telephone (automatically dials the number
when user clicks on it using a smartphone browser)

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”
“Race Results” or “See Race Results”.
Some guidance … or … don’t “Click Here”

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.
For external resources

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.
An essential skill

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

Share-Your-Travels
/
index.html
example.html
images/
logo.gif
central-park.jpg
css/
main.css
members/
index.html
about.html
(root folder)
images/
background.gif
randyc/
bio.html
1
5
2
3
4
6
7
Relative Link Type Example
Same Directory
To link to a file within the same
folder, simply use the file name.
To link to example.html from
about.html (in Figure 2.18), use:
<a href="example.html">
Child Directory
To link to a file within a subdirectory,
use the name of the subdirectory
and a slash before the file name.
To link to logo.gif from about.html,
use:
<a href="images/logo.gif">
Grandchild/Descendant
Directory
To link to a file that is multiple
subdirectories below the current
one, construct the full path by
including each subdirectory name
(separated by slashes) before the file
name.
To link to background.gif from
about.html, use:
<a
href="css/images/background.gif"
>
Parent/Ancestor Directory
Use “../” to reference a folder
above the current one. If trying to
reference a file several levels above
the current one, simply string
together multiple “../”.
To link to about.html from
index.html in members, use:
<a href="../about.html">
To link to about.html from
bio.html, use:
<a href="../../about.html">
1
3
2
4

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

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.
Do not disrupt the flow

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.

Images
<img src="images/central-park.jpg" alt="Central Park" title="Central Park" width="80" height="40" />
SpecifiestheURLoftheimagetodisplay
(note:usesstandardrelativereferencing)
Textinaltattributeprovidesabrief
descriptionofimage’scontentforuserswho
areunabletoseeit.
Textintitleattribute willbedisplayedinapopup
tooltipwhenusermovesmouseoverimage.
Specifiesthewidthandheightof
imageinpixels.

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.
HTML provides three types of lists

Lists
<ol>
<li>Introduction</li>
<li>Background</li>
<li>My Solution</li>
<li>
<ol>
<li>Methodology</li>
<li>Results</li>
<li>Discussion</li>
</ol>
</li>
<li>Conclusion</li>
</ol>
<ul>
<li><a href="index.html">Home</a></li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
Notice that the list item element
can contain other HTML
elements

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

HTML SEMANTIC ELEMENTS
Section 6 of 6

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.
<header> <footer>
1 10

Header and 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.
<header> <footer>
1 10

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 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>
<p><time>September 30, 2012</time></p>
</header>
...
</article>

Heading Groups
The <hgroup> element can be used to group related headings
together within one container.
<hgroup>
<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>
2

Navigation
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.
<nav>
3

Navigation
<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
 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.
<article> <section>
6
5

Sections versus Divs
 The WHATWG specification warns readers that the
<section> element is not a generic container element.
HTML already has the <div> element for such uses.
 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>.
How to decide which to use

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.
<figure> <figcaption>
7 8

Figure and Figure Captions
<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/>
<figcaption>Conservatory Pond in Central Park</figcaption>
</figure>
<p>
It was a wonderfully beautiful autumn Sunday, with strong sunlight and
expressive clouds. I was very fortunate that my one day in New York was
blessed with such weather!
</p>
Figure could be
moved to a
different
location in
document
…
But it has to
exist in the
document
(i.e., the
figure isn’t
optional)

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.
<aside>
9

XHTML versus HTML5
<body>
<div id="header">
<div id="logo-headings">
...
</div>
...
<div id="top-navigation">
...
</div>
</div>
<div id="main">
<div id="left-navigation">
...
</div>
<div class="content">
<div class="story">
...
</div>
<div class="story">
...
<div class="story-photo">
<img ... class="blog-photo"/>
<p classs="photo-caption">...
</div>
</div>
<div class="related-stuff-on-right">
...
</div>
</div>
<div class="content">
...
</div>
</div>
<div id="footer">
...
</div>
</body>
1
2
3
10
8
6
9
<header> <hgroup>
<nav>
<article>
<aside>
<footer>
7
<figure>
5
<figcaption>
<section>
4
<body>
<header>
<hgroup>
...
</hgroup>
...
<nav>
...
</nav>
</header>
<div id="main">
<nav>
...
</nav>
<section>
<article>
...
</article>
<article>
<figure>
<img ... />
<figcaption>...
</figure>
...
</article>
<aside>
...
</aside>
</section>
<section>
...
</section>
</div>
<footer>
...
</footer>
</body>
1
2
3
10
8
6
9
7
5

Objectives
What is CSS? CSS Syntax
Location of Styles Selectors
The Cascade: How
Styles Interact
The Box Model
1 2
3 4
5 6
CSS Text Styling
7

What is CSS?
CSS is a W3C standard for describing the presentation (or
appearance) of HTML elements.
With CSS, we can assign
• font properties,
• colors,
• sizes,
• borders,
• background images,
• even the position of elements.
You be styling soon

What is CSS?
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.
You be styling soon

Benefits of CSS
• The degree of formatting control in CSS is significantly better
than that provided in HTML.
• Web sites become significantly more maintainable because
all formatting can be centralized into one, or a small handful,
of CSS files.
• CSS-driven sites are more accessible.
• 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.
• CSS can be used to adopt a page for different output
mediums.
Why using CSS is a better way of describing presentation than HTML

CSS Versions
• 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.
Let’s just say there’s more than 1

Browser Adoption
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!
Insert obligatory snide comment about Internet Explorer 6 here

CSS Syntax
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).
Rules, properties, values, declarations
selector { property: value; property2: value2; }
declaration block
declaration
em { color: red; }
p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
property value
selector
rule
syntax
examples

declaration block
declaration
em { color: red; }
p {
font-weight: bold;
}
property value
selector
rule
syntax
examples
Declaration Blocks
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.
Which elements
declaration block
declaration
em { color: red; }
p {
font-weight: bold;
}
property value
selector
rule
syntax
examples
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.

Properties
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.
Which style properties of the selected elements
declaration block
declaration
em { color: red; }
p {
font-weight: bold;
}
property value
selector
rule
syntax
examples

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
Common CSS properties

Properties
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
overflow
position
visibility
z-index
Lists list-style
list-style-image
list-style-type
Common CSS properties continued.

Values
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, numbers without units, color values, and URLs.
What style value for the properties

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

Units of Measurement
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 a real-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).
There are multiple ways of specifying a unit of measurement in CSS

Relative Units
Unit Description Type
px Pixel. In CSS2 this is a relative measure, while in CSS3 it is
absolute (1/96 of an inch).
Relative (CSS2)
Absolute (CSS3)
em Equal to the computed value of the font-size property of
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.
Relative
% A measure that is always relative to another value. The
precise meaning of % varies depending upon which
property it is being used.
Relative
ex A rarely used relative measure that expresses size in
relation to the x-height of an element’s font.
Relative
ch Another rarely used relative measure; this one expresses
size in relation to the width of the zero ("0") character of
an element’s font.
Relative
(CSS3 only)
rem Stands for root em, which is the font size of the root
element. Unlike em, which may be different for each
element, the rem is constant throughout the document.
Relative
(CSS3 only)
vw, vh Stands for viewport width and viewport height. Both are
percentage values (between 0 and 100) of the viewport
(browser window). This allows an item to change size
when the viewport is resized.
Relative
(CSS3 only)

Absolute Units
Unit Description Type
in Inches Absolute
cm Centimeters Absolute
mm Millimeters Absolute
pt Points (equal to 1/72 of an inch) Absolute
pc Pica (equal to 1/6 of an inch) Absolute

Comments in CSS
It is often helpful to add comments to your style sheets.
Comments take the form:
/* comment goes here */

LOCATION OF STYLES
Section 3 of 7

Actually there are three …
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.
Different types of style sheet

Style Locations
CSS style rules can be located in three different locations.
• Inline
• Embedded
• External
You can combine all 3!
Author Created CSS style rules can be located in three different locations

Inline Styles
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.
Style rules placed within an HTML element via the style attribute

Embedded Style Sheet
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.
Style rules placed within the <style> element inside the <head> element

External Style Sheet
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
Style rules placed within a external text file with the .css extension

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.
Things that make your life easier

Element Selectors
Uses the HTML element name.
You can select all elements by using the universal element
selector, which is the * (asterisk) character.
Selects all instances of a given HTML element
* {
background-color: yellow;
}
div * {
background-color: yellow;
}

Grouped Selectors
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.
Selecting multiple things

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.

Class Selectors
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 class name.
Simultaneously target different HTML elements

Class Selectors
<head>
<title>Share Your Travels </title>
<style>
.first {
font-style: italic;
color: brown;
}
</style>
</head>
<body>
<h1 class="first">Reviews</h1>
<div>
<p class="first">By Ricardo on <time>September 15, 2012</time></p>
</div>
<hr/>
<div>
<p class="first">By Susan on <time>October 1, 2012</time></p>
</div>
<hr/>
</body> .first {
font-style: italic;
color: brown;
}

Id Selectors
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
Target a specific element by its id attribute

Id Selectors
<head lang="en">
<style>
#latestComment {
font-style: italic;
color: brown;
}
</style>
</head>
<body>
<h1>Reviews</h1>
<div id="latestComment">
</div>
<hr/>
<div>
</div>
<hr/>
</body>
#latestComment {
font-style: italic;
color: brown;
}

Id versus Class Selectors
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.
How to decide

Attribute Selectors
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.
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.
Selecting via presence of element attribute or by the value of an attribute

Attribute Selectors
<head lang="en">
<title>Share Your Travels</title>
<style>
[title] {
cursor: help;
padding-bottom: 3px;
border-bottom: 2px dotted blue;
text-decoration: none;
}
</style>
</head>
<body>
<div>
<img src="images/flags/CA.png" title="Canada Flag" />
<h2><a href="countries.php?id=CA" title="see posts from Canada">
Canada</a>
</h2>
<p>Canada is a North American country consisting of … </p>
<div>
<img src="images/square/6114907897.jpg" title="At 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>
[title] {
cursor: help;
padding-bottom: 3px;
border-bottom: 2px dotted blue;
text-decoration: none;
}

Pseudo Selectors
A 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.
A 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.
Select something that does not exist explicitly as an element

Common Pseudo-Class and Pseudo-Element Selectors

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

Contextual Selectors
Selector Matches Example
Descendant
A specified element
that is contained
somewhere within
another specified
element
div p
Selects a <p> element that is contained
somewhere within a <div> element.
That is, the <p> can be any descendant,
not just a child.
Child
A specified element
that is a direct child
of the specified
element
div>h2
Selects an <h2> element that is a child
of a <div> element.
Adjacent
Sibling
A specified element
that is the next
sibling (i.e., comes
directly after) of the
specified element.
h3+p
Selects the first <p> after any <h3>.
General
Sibling
A specified element
that shares the same
parent as the
specified element.
h3~p
Selects all the <p> elements that share
the same parent as the <h3>.

Descendant Selector
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.
Selects all elements that are contained within another element
div p { … }
context selected element
Selects a <p> element
somewhere
within a <div> element
#main div p:first-child { … }
Selects the first <p> element
somewhere within a <div> element
that is somewhere within an element
with an id="main"

Contextual Selectors in Action
<body>
<nav>
<ul>
<li><a href="#">Canada</a></li>
<li><a href="#">Germany</a></li>
<li><a href="#">United States</a></li>
</ul>
</nav>
<div id="main">
Comments as of <time>November 15, 2012</time>
<div>
</div>
<hr/>
<div>
</div>
<hr/>
</div>
<footer>
<ul>
<li><a href="#">Home</a> | </li>
<li><a href="#">Browse</a> | </li>
</ul>
</footer>
</body>
#main time { color: red; }
ul a:link { color: blue; }
#main div p:first-child {
color: green;
}
#main>time { color: purple; }

THE CASCADE: HOW STYLES
INTERACT
Section 5 of 7

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

Cascade
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.
How conflicting rules are handled in CSS

Cascade Principles
CSS uses the following cascade principles to help it deal with
conflicts:
• inheritance,
• specificity,
• location

Inheritance
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.
Cascade Principle #1

Inheritance
<body>
<h1> <p>
<h2>
<small>
<time>
<a>
<head>
<html>
<img>
<strong>
<h3> <div>
<p> <p>
<p>
<time>
<div>
<p> <p>
<meta> <title>
body {
font-family: Arial;
color: red;
border: 8pt solid green;
margin: 100px;
}
inherited
not inherited
inherited
not inherited

Inheritance
It is possible to tell elements to inherit properties that
are normally not inheritable.
How to force inheritance
div {
font-weight: bold;
margin: 50px;
}
p {
border: inherit;
margin: inherit;
}
<h3>Reviews</h3>
<div>
</div>
<hr/>
<div>
</div>
<hr/>

Inheritance
<body>
<h1> <p>
<h2>
<small>
<time>
<a>
<head>
<html>
<img>
<strong>
<h3> <div>
<p> <p>
<p>
<time>
<div>
<p> <p>
<meta> <title>
div {
font-weight: bold;
margin: 50px;
}
inherited
not inherited
not inherited

Specificity
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 previous definition).

Specificity
The way that specificity works in the browser is that the
browser assigns a weight to each style rule.
When several rules apply, the one with the greatest weight
takes precedence.
How it works

Specificity
This text is not within a p element.
<p>Reviews</p>
<div>
<p>By Ricardo on <time>September 15, 2012</time
This text is not within a p element.
</div>
<hr/>
<div>
</div>
<hr/>
<div>
<p class="last">By Dave on <time>October 15, 20
<p class="last" id="verylast">Thanks for postin
</div>
<hr/>
body {
font-weight: bold;
color: red;
}
div {
font-weight: normal;
color: magenta;
}
p {
color: green;
}
.last {
color: blue;
}
#verylast {
color: orange;
font-size: 16pt;
}
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.

Specificity Algorithm
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.
The algorithm that is used to determine specificity is :

Specificity Algorithm
div {
color: green;
}
element selector
class and attribute
selectors
id selector
descendant selector
(elements only)
div form {
color: orange;
}
overrides
overrides
.example {
color: blue;
}
#firstExample {
color: magenta;
}
overrides
1
2
3
4
id +
additional
selectors
div #firstExample {
color: grey;
}
overrides
A higher specificity value
overrides lower specificity
values
inline style
attribute <div style="color: red;">
overrides
5
Specificity Value
0001
0002
0010
0100
0101
1000

Location
When inheritance and specificity cannot determine style
precedence, the principle of location will be used.
The principle of location is that when rules have the same
specificity, then the latest are given more weight.

Location
<head>
<link rel="stylesheet" href="stylesA.css" />
<link rel="stylesheet" href="stylesWW.css" />
<style>
#example {
color: orange;
color: magenta;
}
</style>
</head>
<body>
<p id="example" style="color: red;">
sample text
</p>
</body>
overrides
overrides
overrides
1
2
3
overrides
#example {
color: green;
}
#example {
color: blue;
}
user-styles.css
Browser’s
default style
settings
overrides
4
5
6
overrides
Can you guess what will be the color of the sample text ?

Location
What color would the sample text be if there wasn’t an inline style definition?
<head>
<link rel="stylesheet" href="stylesA.css" />
<link rel="stylesheet" href="stylesWW.css" />
<style>
#example {
color: orange;
color: magenta;
}
</style>
</head>
<body>
<p id="example" style="color: red;">
sample text
</p>
</body>
overrides
overrides
overrides
1
2
3
overrides
#example {
color: green;
}
#example {
color: blue;
}
user-styles.css
Browser’s
default style
settings
overrides
4
5
6
overrides

Location
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.
There’s always an exception

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.
Time to think inside the box

The Box Model
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
padding
margin
element content area
border
background-color/background-image of element
width
height
background-color/background-image of element’s parent

Background
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.
Box Model Property #1

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.

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
body {
background: white url(../images/backgrounds/body-background-tile.gif) no-repeat;
background-position: 300px 50px;
}
300px
50px

Borders
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.
Box Model Property #2

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 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
With border, margin, and padding properties, there are long-
form and shortcut methods to set the 4 sides
TRBL
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.
border-color: red green orange blue;
border-color: top right bottom left;
top
right
bottom
left
TRBL (Trouble)

Margins and Padding
Box Model Properties #3 and #4
p {
border: solid 1pt red;
margin: 0;
padding: 0;
}
p {
margin: 30px;
padding: 0;
}
p {
margin: 30px;
padding: 30px;
}

Margins
Did you notice that the space
between paragraphs one and two and
between two and three is the same
as the space before paragraph one
and after paragraph three?
This is due to the fact that adjoining
vertical margins collapse.
Why they will cause you trouble.
p {
margin: 0;
padding: 0;
}
p {
margin: 30px;
padding: 0;
}
p {
margin: 30px;
padding: 30px;
}

Collapsing Margins
90px
90px
90px
50px
50px
50px
50px
div {
border: dotted 1pt green;
padding: 0;
margin: 90px 20px;
}
p {
padding: 0;
margin: 50px 20px;
}
<div>
<p>Every CSS rule ...</p>
<p>Every CSS rule ...</p>
</div>
<div>
<p>In CSS, the adjoining ... </p>
<p>In CSS, the adjoining ... </p>
</div>
1
2
3
4
5
50px
50px
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.
However, as you can see this is not the case.

Collapsing Margins
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.
How it works

Width and Height
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.
Box Model Properties #5 and #6

Width and Height
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 #1

Width and Height
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.
Potential Problem #2

200px
100px
div {
box-sizing: content-box;
width: 200px;
height: 100px;
padding: 5px;
margin: 10px;
border: solid 2pt black;
}
10px 5 5 10px
2 2
True element width = 10 + 2 + 5 + 200 + 5 + 2 + 10 = 234 px
True element height = 10 + 2 + 5 + 100 + 5 + 2 + 10 = 134 px
div {
...
box-sizing: border-box;
}
True element width = 10 + 200 + 10 = 220 px
True element height = 10 + 100 + 10 = 120 px
100px
200px 10px
10px
Default

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

Overflow Property
overflow: visible;
overflow: hidden;
overflow: scroll;
overflow: auto;

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.
Time to embrace ems and percentages

<body>
<div class="pixels">
Pixels - 200px by 50 px
</div>
<div class="percent">
Percent - 50% of width and height
</div>
</body>
<body>
<div class="parentFixed">
<strong>parent has fixed size</strong>
PERCENT - 50% of width and height
</div>
</div>
<div class="parentRelative">
<strong>parent has relative size</strong>
PERCENT - 50% of width and height
</div>
</div>
</body>
<style>
html,body {
margin:0;
width:100%;
height:100%;
background: silver;
}
.pixels {
width:200px;
height:50px;
background: teal;
}
.percent {
width:50%;
height:50%;
background: olive;
}
.parentFixed {
width:400px;
height:150px;
background: beige;
}
.parentRelative {
width:50%;
height:50%;
background: yellow;
}
</style>
50%
50%
50%
50%
50%
50%
50% 50%
50% of parent (= 200px)
50% of parent (= 200px)
50% 50%
50% of parent

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.
Help is on the way

Developer Tools
Chrome – Inspect Element Firefox – Inspect
Internet Explorer – Developer Tools
Opera – Inspect Element

Text Properties
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.
Two basic types

Font-Family
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.
A few issues here

Specifying the Font-Family
p { font-family: Cambria, Georgia, "Times New Roman", serif; }
Use this font as
the first choice
But if it is not available,
then use this one
If it isn’t available, then
use this one
And if it is not available
either, then use the
default generic serif font
1
2
3
4

Generic Font-Family
The font-family property supports five different generic
families.
The browser supports a typeface from each family.
This
This
This
This
This
serif
sans-serif
monospace
cursive
fantasy
Th
Th
serif
Without
("sans") serif
This In a monospace font,
each letter has the
same width
Decorative and cursive fonts
vary from system to system;
rarely used as a result.
Generic
Font-Family
Name
This
In a regular,
proportionally-spaced
font, each letter has a
variable width

@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.
The future is now

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.
Mo control, mo problems

Font Sizes
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).
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.
Welcome ems and percents again

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.

Browser’s default text size is usually 16 pixels
200% or 2em is 32 pixels
150% or 1.5em is 24 pixels
125% or 1.125em is 18 pixels
<body>
<h3>
<h2>
<h1>
100% or 1em is 16 pixels
<p>
/* using 16px scale */
body { font-size: 100%; }
h3 { font-size: 1.125em; } /* 1.25 x 16 = 18 */
h2 { font-size: 1.5em; } /* 1.5 x 16 = 24 */
h1 { font-size: 2em; } /* 2 x 16 = 32 */
<body>
<p>this will be about 16 pixels</p>
<h1>this will be about 32 pixels</h1>
<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.
It might seem easy … but it’s not …

ems and percents
p { font-size: 1em; } /* 1 x 16 = 16px */
h1 { font-size: 2em; } /* 2 x 16 = 32px */
<body>
<p>this is 16 pixels</p>
<h1>this is 32 pixels</h1>
<article>
<div>
</div>
</article>
</body>
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.
Solution to font sizing hassles?

The rem unit
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 */

WT Module-1.pdf

More Related Content

Similar to WT Module-1.pdf (20)

Recently uploaded (20)

WT Module-1.pdf