Web technology Unit-II Part-C

 Basic Tags
◦ HTML Comments
◦ Adding a Title
◦ First HTML Page
◦ HTML Background
◦ Paragraph
◦ Inserting Line Breaks
◦ Text Styles
 Changing Base Font
 Changing style of a specific text
 Bold text
 Underlined text
 Italicized text
 Combining styles

◦ Heading
◦ Performatted text
◦ Strikethrough text
◦ Lists
◦ HTML Symbols
 Advanced Tags
◦ Table
 Border
 Row and Column Header
 Caption
 Rowspan and Colspan

◦ Cellspacing and Cellpadding
◦ Nested tables
◦ Forms
◦ Form elements
 Text field
 Password field
 Hidden field
 Label
 Check box
 Radio button
 Selection list
 Text area
 File upload

 Button
 Action Buttons
 Image Button
 Frames
◦ Frameset Element
◦ Frame Element
◦ Layout
◦ Specifying Target
 Target Rules
◦ Alternate Message
◦ Inline Frames

 Cascading Style Sheet (CSS);
◦ Introduction
◦ Advantages
◦ Adding CSS
 External Style Sheets
 Embedded Style Sheets
 Imported Style Sheets
 Inline Style Sheets
 Cascading Rule
◦ Browser Compatibility
◦ CSS and Page Layout
 Anatomy of a Style Rule

 Selectors
◦ Grouping
◦ Type Selectors
◦ Universal Selectors
◦ Descendant Selectors
◦ Child Selectors
◦ Pseudo Classes and Elements
◦ Pseudo Elements
◦ Attribute Selectors
◦ Class Selectors
◦ ID Selectors

Introduction
 Cascading Style Sheet (CSS) allow web page designers
to improve and change the appearance of their web
pages very efficiently.
 A style sheet is a document that contains style
information about one or more documents written in
markup languages.
 It enables us to control rendering of styles such as fonts,
color, size etc.

 It is composed of a set of style rules written in a specified
format.
 CSS is a style sheet language that specifies how to
incorporate style information in a style sheet.
 The term “Cascading” indicates that several style sheets
can be blended to present a document on the browser’s
screen.

Advantages
 The primary intention of CSS is to separate document
presentation from document content written in markup
languages.
 Example: HTML or XHTML
 It can think about the visual presentation of these
documents without bothering about the document
content.

 Most of the browsers cache external style sheets.
 So, once a style sheet is cached, there is no delay in
document presentation.
 The size of a document using external style sheet is
comparatively smaller.
 This speeds up overall response time.
 CSS provides many more style attributes for defining
the look and feel of web pages, than plain HTML.

Content Style Document
Separation of style from content

Adding CSS
 External
 Embedded
 Imported
 Inline

External Style Sheets
 Style information is written in a separate file and is
referenced from an HTML document.
 An external style sheet is useful when the same style is
applied on different documents.
 Example: The designer of a website may keep one
style sheet file for entire website.

 If the document is an HTML document, the external
style sheet is specified using the HTML <link> tag.
 This tag specifies that the style information to be used to
display this document is stored in a file named
mystyle.css.
 It is inserted in the head section of an HTML document.

External style sheet types
 Persistent
◦ It is one that is always applied.
 Alternate
◦ It specify a set of alternate style sheets, one of which
is selected by the user depending on their choice.
 Preferred
◦ Authors may also specify one of the alternate style
sheets as the preferred style sheet which is applied
when no style sheet is selected.

 Several alternate style sheets may be grouped under a
single title.
 Example:
 <link rel=“stylesheet” type=“text/css”
href=“mystyle.css” title=“large”/>
 <link rel=“alternate stylesheet” type=“text/css”
href=“mystyle.css” title=“large”/>

Attribute Meaning
href Target file of a link
charset Character set of the target of a link
hreflang Language of the target of a link, it should only be
used when href is also used
type The type of the target of a link
rel Relationship of the target of the link to the
current page
rev Relationship of the current page to the target of
the link
media Referes to media the link is associated with.
A value such as screen, print, projection, braille,
speech or all or a combination of these can be
used in a comma-separated list.

Embedded Style Sheets
 Style information is placed under the
style tag in the head section of an
HTML page.

Imported Style Sheets
 Another way to importing a style sheet is to use a @import
statement.
 It works in much the same way as linking.
 It allows importing a style sheet from another style sheet.
 Example:
 <style>
 @import url(“style1.css”);
 </style>

 The style element may include other internal style rules,
but the import statement must be the first rule within a
style tag.
 Even a comment before the import statement can cause
it to fail.
 Example:
 <style>
 @import “style1.css”;
 </style>

 Internal rules override the conflicting rules in the
imported style sheets.
 Example:
 <style>
 @import url (“style1.css”);
 p { color: green;}
 </style>

 A <style> tag may contain an arbitrary number of import
statements, but the order in which the style sheets are
imported is important in determining cascading rules.
 Example:
 <style>
 </style>

 If style1.css contains the style rule p{color:red} and
 style2.css contains the style rule p{color:blue;},
 The color of the paragraphs will be blue as the value
corresponding to the color blue is described last.
 A CSS file may also import another style sheet.
 Example:
 <style>
 p { color: red};
 </style>

Media Type Meaning
all Apply rules for all devices
braille Targets are braille tactile feedback device
embossed Specified for paged braille printers
eandheld Used for handheld devices
print Used for documents viewed on screen in print preview
mode and for paged material
projection Intended for projected presentations, such as projectors
screen Intended primarily for color computer screens
speech Intended for speech synthesizers
tty Intended for media using a fixed-pitch character grid
tv Intended for television-type devices

Inline Style Sheets
 Style information is incorporated directly into the
HTML tags
 This is the least flexible styling method.
 If you want to modify the style of an element, you have
to work through the document and modify.

Cascading Rule
Specificity rules
 More specific rules get preference over less specific
rules.
Example:
<b> Welcome</b>
<p><b> Hello World </b></p>
P b { color: green; }
b { color: red; }

 The former makes text under the tag <b>, which is a
descendant of the tag <p>, green.
 The latter makes text under the <b> tag used.
 Every <b> tag that matches the former rule also matches
the latter, but the reverse is not true.
 So, former is a more specific one.

 Order rules
 For conflicting rules, latter rules get
preference over the earlier rules.
Rules resolving conflicting styles
Inline
style
Internal
style
External
style
Imported
style
Browser’s
Default style
Highest importance Lowest importance

Browser Compatibility
Compan
y
Browser or
Search Engine
Version Level of
supports
Microsoft Internet Explorer 8 CSS2
Google Chrome Freely CSS2
Safari Apple 3 CSS2
- It is based on the open source HTML/CSS library “WebKit”
Mozilla Firefox 3 CSS2
Opera Operamini 9.50 CSS2 and parts of
3
- It is free on most platforms
- Lobo 0.98
(Current version)
CSS2
Mac OS iCab CSS2
- It can help you fix errors in CSS or HTML files.
Oregan
Networks
Oregan TV
Browser
- -
- It supports CSS2, XHTML, XML, etc.

CSS and Page Layout
 A CSS file contains a set of one or more style rules that
apply to an HTML document.
 Each rule specifies the stylistic aspect of one or more
HTML elements.

Anatomy of a Style Rule
 A style rule has basically two parts
◦ Selectors
◦ Declaration

Selectors
 A selector specifies which HTML elements are affected
by this style rule.
 This rule has the selector body.
 It is only applied on the <body> tag in an HTML
document.
 The selector used here is a name of an HTML tag.
 These types of selectors are called type selectors.
 A type selector may select a single element or a set of
HTML elements.

Syntax
 selector{
 property1: value1;
 ……
 }

Declaration
 It is a semicolon-separated (;) list of property:value
pairs.
 Property is a specific style that some elements possess
and value is the specific information that property holds.
Example:
<style>
body{
background-color: gray;
}
</style>

Selectors
 It is basic building blocks of style rules.
 It determine elements on which rules are to be applied.
Subjects of the selectors:
◦ The elements selected by selectors
 Simple Selector:
◦ A selector may simply be the name of an element
 Complex Selector:
◦ It may consists of a rich contextual pattern.
 A complex selector consists of one or more simple selectors
separated by combinators such as a white space, “>”, and
“+”.

Grouping
 Selectors having common declarations are grouped into
a comma-separated (,) list.
 Example-1:
 h1 { color: red; }
 Example-2:
 h1, h2, h3 { color: red;}

Type Selectors
 A type selector is a simple selector, which is the name of
a document element and it matches every single element
of the document.
 Example:
 The selector p selects every <p> element in the
document.
 Similarly, the selector b selects every <b> element.

Universal Selectors
 CSS has a special selector *, which matches with every single element
in the document.
 Example:
 * { color: red; }
 * .note and .note
 * [class = “left”] and [class = “left”]
 *#example and #example
 It makes all the text in the document red.
 If the universal selector has an additional component, * may be
omitted.
 It is useful when element names aren’t known in advance during the
development of a style sheet.

Descendant/Contextual
Selectors
 It allows us to determine the elements
depending upon their hierarchical
relationships.
 It selects only those elements that are
descendants of a specified element.

Child Selectors
 It select elements that are immediate children of a
specified element.
 The combinatory used for child selector is “>”.
 It can be combined with other selectors to get interesting
results.
Example:
Tag Description
body > * Select all children of the <body> element
body > * > * Select all grandchildren of the <body> element
body > * > p Select all <p> grandchildren of the <body>
element

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
ol{
list-style-type: decimal;
}
ol>ol {
list-style-type: upper-roman;
}
ol>ol>ol{
list-style-type:lower-alpha;
}
ol>ol>ol>ol{
list-style-type:lower-roman;
}
</style>
</head>

<body>
Title: Web Technology <br>
Table of content
<ol>
<li>Introduction</li>
<li>Adding Style Sheets</li>
<ol>
<li>External</li>
<ol>
<li>External style sheets are useful..</li>
</ol>
<li>Inline</li>
</ol>
<li>Browser incompatibility</li>
</ol>
<li>XML</li>
</ol>
</body>
</html>

Pseudo Classes and Elements
 Pseudo classes and elements are used to add style to
those elements not accessible by traditional selectors.
 Pseudo elements and pseudo classes are always
preceded by a colon.
Syntax:
◦ Selector: pseudo-class { declaration }
or
◦ Selector: pseudo-element { declaration }

 These classes and elements can’t be used with the class
attribute.
 Normal classes and elements may be used with pseudo
classes and elements.
Syntax:
◦ selector.class: pseudo-class { declaration }
or
◦ Selector.class: pseudo-element { declaration }

The :first-child, :last-child and
:only-child pseudo classes
 It selects an element if it is the first child of its parent
regardless of what this parent element is.
Example:
 p:first-child selects all p elements that are the first
children of any element.
 span > p:first-child

<!DOCTYPE html>
<html>
<head>
<style>
span > p:first-child{
color:red;
</style>
</head>
<body>
<<b><h3>This is not a child of span</h3></b></p>
<span>
<p>This is first child of span</p>
<p>This is last child of span</p>
</span>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
ul > li:first-child
</style>
</head>
<body>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</body>
</html>

Output
 It selects the first <li> child element of
the <ul> element

 The last-child pseudo class selects
the last child element of another
element.
 Example:
 span > p:last-child

<!DOCTYPE html>
<html>
<head>
<style>
span > p:last-child{
color: red;
}
</style>
</head>
<body>
<p><b><h3>This is not a child of span</h3></b></p>
<span>
<p>This is first child of span</p>
<p>This is last child of span</p>
</span>
</body>
</html>

 The only-child pseudo class selects
an element if it is the only child of
another element

<!DOCTYPE html>
<html>
<head>
<style>
ul > li:only-child{
color:red;
}
</style>
</head>
<body>
<p><b><h3>This is not a child of span</h3></b></p>
<ul>
<li>This is only child of span</li>
</ul>
</body>
</html>

CSS Selector Summary
Selector Meaning
E Selects all E elements
* Selects all * elements
P D Selects all descendants D of parent P
P > C Selects all children C of parent P
E: first-child Selects all E elements which are the first child elements of
its parent
E + S Selects all following sibling S elements of E
E [A] Selects all E elements having attribute “A”
[A] Selects all elements having attribute “A” (equivalent to
*[A])
E [A = “V”] Select all E elements having “A” attribute value “v”
[ A = “V” ] Select all elements having “A” attribute value V
(equivalent to *[A=V])

The anchor pseudo classes: :link and
:visited
Hyperlinks:
 These pseudo classes are used to apply style rules on anchor tags.
 It may go through different states: normal (unvisited) or visited.
 CSS provides two pseudo classes to display respectively unvisited and
visited hyperlinks differently and are mutually exclusive.
Before CSS, the only way to add effects on anchor tags was to use
JavaScript code.
 The :link pseudo class applies to those hyperlinks that have not yet
been visited.
 The :visited pseudo class applies to hyperlinks that have already been
visited at least once.

The dynamic pseudo classes: :hover, :active,
:focus
 CSS provides three more pseudo
classes that allow us to change rendering
of anchor tags in response to user
actions such as mouse over and mouse
click on anchor tags.
 :hover
 :active
 :focus

:hover
 It selects elements that are being designated by the user
with a pointing device.
 A web page having underlined text and hyperlinks.
 A CSS author may make an arrangement such that
whenever the mouse pointer moves over a link, it loses
the underline.

<html>
<head>
<title>Title of the document</title>
<style>
div {
padding: 30px;
background-color: #8ebf42;
color: #eee;
}
div: hover {
background-color: #666;
color: #fff;
}
</style>
</head>
<body>
<h2>:hover selector example</h2>
<div>
<button>Select</button>
</div>
</body>
</html>

If go to that button color will be
changed

:active
 It applies to an element that is currently being activated
by the user.
 Activation includes pressing a mouse button, releasing a
mouse button, etc.

<html>
<head>
<style>
div {
padding: 30px;
background-color: #8ebf42;
color: #eee;
}
div: active {
background-color: #666;
color: #fff;
}
</style>
</head>
<body>
<h2>:active selector example</h2>
<div>
<input type="button" value="Button">
</div>
</body>
</html>

If button is clicked color will be
changed

:focus
 It applies to an element that has currently
got the focus by keyboard events or other
means.

<!DOCTYPE html>
<html>
<head>
<style>
input: focus {
background-color: #ccc;
}
</style>
</head>
<body>
<h2>:focus selector example</h2>
<form>
Name:
<input type="text" name="name"> Surname:
<input type="text" name="surname">
</form>
</body>
</html>

Focus also same to place the
text box in arrow it will be
changed the color

 Pseudo classes that aren’t exclusive can be combined to
form a complex class.
Example of valid selectors:
 a:link:hover, a:visited:hover, a:focus:hover
Example of invalid selectors:
 a:link:visited
Mutually Exclusive:
 :link and :visited

The lang() pseudo class
 Different languages have different conventions.
Example:
 The English language uses quote marks (“ and “) for quoting
purposes.
 The French language uses angle brackets (< and >) for quoting
purposes.
 The pseudo class :lang provides a way to specify the language to be
used for a specific element.
 The first rule specifies that the quotation marks to be used in
French are <<. >> < and >.
 The second rule specifies the regular quotation marks used in
English.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width">
</head>
<body>
<q lang="en">An English
quotation</q><br>
<q lang="fr">A French quotation</q>
</body>

CSS pseudo classes
summary
Pseudo
class
Meaning Applies to
:first-child Matches an element that is the first child
of another element
All
:link Applies to links that have not yet been
visited
Anchors
:visited Applies to links that have already been
visited
Anchors
::hover Applies to an element when the cursor
is held over it
All
:active Applies to an element when it is active All
:focus Applies to an element while it has the
user focus
All
:lang() Applies to an element when it is in the
designated language
All

Pseudo Elements
 The :first-line pseudo element
 The :first-letter pseudo element
 The :before and :after pseudo
elements

The :first-line pseudo element
 It allows us to add styles to the first line of an element
and actually exists in the document tree.
 This hypothetical element is addressed depending on
factors such as block width, page width, font size, etc.
 It is used mostly with the <p> element to give a different
look and feel.

 Color
 Font
 Background
 Vertical-align
 Line-height
 Text-decoration
 Text-transform
 Word-spacing
 Letter-spacing
 clear

<!DOCTYPE html>
<html>
<head>
<style>
p:first-line {
color: red;
text-decoration: underline;
text-transform: uppercase;
}
</style>
</head>
<body>
<p> The :first-line element allows us to add styles to the first line
an element. This element actually exists in the document
tree.</p>
</body>
</html>

The :first-letter pseudo
element
 It is used to add styles to the first letter of
the first line of block elements.
 It is also mostly used with <p>, <div> and
<span> elements.

<!DOCTYPE html>
<html>
<head>
<style>
p:first-letter {
color:red;
font-size:50px;
float:left;
text-decoration:underline;
text-transform:uppercase;
}
</style>
</head>
<body>
<p> The :first-line element allows us to add styles to the first line
an element. This element actually exists in the document tree.</p>
</body>
</html>

The :before and :after pseudo elements
 CSS allows us to add styles to the existing elements in an
HTML file and insert some new content.
 :before inserts some new content before an exiting element
 :after inserts some new content after an existing element.
 The content may be anything such as text, images, audio, or
even video.
 Note: Internet Explorer doesn’t support these pseudo
elements.
 The content property is used to define the content to be
inserted before and after the selected elements.

<!DOCTYPE html>
<html>
<head>
<style>
ol{
list-style-type: none;
counter-reset: chap;
}
body > ol > ol {
counter-reset: sec1 0
}
body > ol > ol> ol{
}
body > ol > ol > ol > ol{
}

body > ol > li:before{
content: "Chapter " counter(chap) ".";
counter-increment:chap 1
}
body > ol > ol > li:before{
content: counter(chap) " . " counter(sec1) " ";
counter-increment:sec1 1;
}
body>ol>ol>ol>li:before{
content: counter(chap) " ." counter(sec1) "." counter(sec2) "
";
}
body>ol>ol>ol>ol>li:before{
content: content(chap) "." counter(sec1) "." counter(sec2) "
.";
counter(sec3) " ";
}
</style>
</head>

<body>
Title: Web Technology <br>
Table of content
<ol>
<li>HTTP</li>
<li>Java</li>
<li>HTML</li>
<li>CSS</li>
<ol>
<li>Advantages</li>
<li>Adding style sheets</li>
<ol>
<li>External</li>
<ol>
<li>External style sheets are useful..</li>
</ol>
<li>Inline</li>
</ol>
<li>Browser incompatibility</li>
</ol>
<li>XML</ol>
</ol>
</body>

CSS pseudo elements
summary
Pseudo element Meaning Applies to
:first-line Applies to the first
formatted line of a
paragraph
Block level elements
:first-letter Applies to the first letter of
a paragraph
Block level elements
:before Inserts some new content
before an existing element
Any element
:after Inserts some new content
after an existing element
Any element

Attribute Selectors
 It provide a way of selecting elements
depending on the presence of an
attribute/values.
 They aren’t supported by IE but are
supported by Firefox and Opera.
 CSS2 specified four attribute selectors.

Simple attribute selector
 It selects elements having a specified attribute.
Syntax:
 element [attribute_name]
Example:
 a[href] selects all <a> elements having the attribute
href.
 If the element name is omitted, all elements are
assumed.

Attribute value selector
 It based on their attribute value.
 Syntax:
 element [attribute_name = “attribute_value”]
 Example:
 p [type=“note”] [align=“note”] selects all <p>
elements having the type attribute value “note”.

One of many attribute value
selector
 It allows us to select elements having an attribute with a
value equal to any one of the values separated by white
spaces.
Syntax:
 element [attribute_name~=“value”]
Example:
 <p class= “bold” italic”>……</p>
 <p class=“underlined bold”>……</p>

Hyphen attribute value
selector
 It selects an element having attribute value exactly equal
to the specified value or beginning with the specified
value immediately followed by “-”.
 Example:
 p<lang=“en”>….</p>

Starts-with attribute value
selector
 It selects elements having an attribute value that starts
with the value specified.
Syntax:
 element [attribute_name ^ = “attribute_value”]
Example:
 p<type = “copyright”> Copyright…</p>

Ends-with attribute value selector
 It selects elements having attribute value that ends with
the value specified.
Syntax:
 element [attribute_name$ = “attribute_value”]
Example:
 <a href=https://www.yahoo.com>Yahoo </a>

Substring match attribute value
selector
 It having an attribute value containing at least one
occurrence of the value specified.
Syntax:
 element [attribute_name* = attribute_value]
Example:
 a[href=“image”] selects those anchor tags that have
image in the href attribute.

Class Selectors
 It provide a flexible way to apply styles to elements.
 It deal with the elements having the attribute class and adds an
element to a group whose name is the attribute’s value.
 This way a set of related elements can be grouped and a common
style can be applied to every element in the group.
 They are useful to control elements that belong to a group as well as
to remove limitations of the selector.
 The class names are case-sensitive.
 So, class1 and CLASS1 are two different class names.
 They are normally used to group top level elements in a document.

ID Selectors
 The id attribute of an element is a unique identifier in a
web page.
 This means that no two id attributes can have the same
value within the document.
 That id differs from class in that id identifies a single
element uniquely whereas class identifies a set of related
elements.
 It is used by the id selector and based on its unique id
attribute.
 An id selector is defined by placing a # symbol before
the selector name.

Syntax:
 <p id=“para1>….</p>
Example:
 <div id =“book1”>
 <h1>Web Technology</h1>
 <p>HTML</p>
 </div>

CSS selector compatibility
Selector IE Firefox
5.5 6 7 8 2 3.0 3.1
* Yes Yes
> No Yes Yes
+ No Fixed Almost Fixed Yes
[attr] No Yes Yes
class buggy Yes Yes
:before / :after No Yes Yes
:hover /
:active
Minimal Incomplete Yes Yes

CSS selector compatibility
Selector Safari Chrome Opera Konquer
3.0 3.1 4.0 1 2 9.
6
10 3.5.7
* Yes Yes Yes Yes
> Yes Yes Yes Yes
+ Fixed Yes Fixed Yes Yes Yes
[attr] Yes Yes Yes Yes
class Yes Yes Yes Yes
:before /
:after
Yes Yes Yes Yes
:hover /
:active
Yes Yes Almost

Web technology Unit-II Part-C

More Related Content

What's hot

Similar to Web technology Unit-II Part-C

More from SSN College of Engineering, Kalavakkam

Recently uploaded

Web technology Unit-II Part-C