![Page 1: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/1.jpg)
© Yaron Kanza
HTML,CSS and JavaScriptWritten by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher
![Page 2: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/2.jpg)
Age
nda
• HTML
• Style Sheets
• Style Properties
• Layout Properties
• Selector Types
• Inserting Style to a Page
• Inheritance and Cascading
• Java Script
![Page 3: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/3.jpg)
A Markup Language for representing documents• text (data)
• structure
• appearance
• functionality
Designed for writing Web pages
Traditionally rendered by Web browsers • Nowadays, also by other applications (for example: AppStore app in iOS)
3
What is HTML?
![Page 4: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/4.jpg)
Content presentation• Structures, e.g., paragraphs, lists, tables, etc.
• Decorations, e.g., fonts, images, etc.
Declaration of meta information• e.g., the page title, language, etc.
Linkage to other pages• i.e., attaching links to components
Management of user input• e.g., searching, making reservations, ordering products
Directions for browsers• e.g., refresh, redirect, caching control, etc.
4
Capabilities of HTML
![Page 5: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/5.jpg)
<html>
<head>
<title>An HTML Page</title>
</head>
<body>
<h1 id="hdr1">Hello World Wide Web!</h1>
</body>
</html>
Filename ends with .htm or .html5
HTML Page StructureHTML Page Structure
![Page 6: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/6.jpg)
HTML Version History
HTML 1.0 (first draft) – 1992
HTML 2.0 (proposed standard) – September 1995
From this point on - W3C recommendations
HTML 3.2 – January 1997• added tables, applets, ...
HTML 4.0 – December 1997• improved tables, forms, ...
6
![Page 7: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/7.jpg)
HTML Version History - cont’d
HTML 4.01 – December 1999• Slightly different from 4.0
XHTML 1.0 – January 2000• Reformulation of HTML 4.01 as an XML application
• Stricter and cleaner syntax, formatting moved to CSS
XHTML 1.1 – May 2001• “Modularization of XHTML”
7
![Page 8: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/8.jpg)
Non-standard / mixed HTML• Most of the time, will display more-or-less as expected, on most
browsers, but its appearance may vary between browser types and between browser versions
Even when using completely valid and standard HTML, always check your pages on more than one browser type
• At least IE & some Mozilla
8
(X)HTML Support in Real Life
![Page 9: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/9.jpg)
Basic HTML Syntax
(X)HTML contains text, separated by tags
Tags come in pairs: opening and closing tag
Tags can have attributes, which have values
<html>
<head><title>An HTML Page</title></head>
<body>
<h1 id="hdr1">Hello World Wide Web!</h1> </body>
</html>
9
![Page 10: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/10.jpg)
An HTML page is surrounded by the html tag
2 Basic parts:• head: general information about the document (e.g., title – shown on
the browser bar)
• body: the content of the document
<html>
<head><title>An HTML Page</title></head>
<body>
<h1 id="hdr1">Hello World Wide Web!</h1>
</body>
</html>
Actually a tree structure is created
10
Basic HTML Syntax – con’tBasic HTML Syntax – con’t
![Page 11: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/11.jpg)
Element and attr. names must be in lower case• HTML allows any case combination, e.g., <Body></BODY>, which
conveniently helped distinguish tags from the body text
All tags must have corresponding closing tags• Use <br/> as a shorthand for <br></br>
Elements should be properly nested• e.g., <b>hello <em>world</b></em> is illegal!
Attribute values must be quoted• e.g., <td rowspan="3"> and not <td rowspan=3>
11
XHTML Stricter Syntax
![Page 12: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/12.jpg)
Document Type Definitions
It is good to specify which XHTML standard you are using
Put a document type definition (DTD) at the first line of your file (before the html tag)
For an example, see the next slide
12
![Page 13: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/13.jpg)
XHTML - strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• XHTML - transitional (loose)
• XHTML - frameset (for using frames)
Transition htmlxhtml: allows some legacy formatting outside CSS
13
Document Type Definitions – con’t
![Page 14: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/14.jpg)
Basic Structures
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Hello World Example </title> </head>
<body> Hello World </body>
</html>
14
![Page 15: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/15.jpg)
Links
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Hello World Example </title> </head>
<body> <a href=“anotherExample.html”>Hello World</a> </body>
</html>
15
![Page 16: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/16.jpg)
DEMO
Mysite-index-simple
16
![Page 17: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/17.jpg)
Age
nda
• HTML
• Style Sheets
• Style Properties
• Layout Properties
• Selector Types
• Inserting Style to a Page
• Inheritance and Cascading
• Java Script
![Page 18: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/18.jpg)
What are Style Sheets
A style sheet is a mechanism that allows to specify how HTML (/XHTML/XML) pages should look
The style is specified by style rules
The style rules appear either in the document or in external files, called style sheets
18
![Page 19: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/19.jpg)
Style Sheets
Usually, a file that ends with .css
For example:
• i.a.cnn.net/cnn/.element/ssi/css/1.1/main.css (CNN)
• http://www.mta.ac.il//_layouts/1037/styles/core.cs (MTA)
To attach a style sheet to an HTML file, add <link rel="stylesheet" type="text/css" href="css-file"/>
You can link to more than one css
file to the head
19
![Page 20: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/20.jpg)
Style Sheets
A file that is used for storing information about the way elements of HTML (or XML) should appear on the browser
A style sheet increases the separation between content and presentation
• Easier to generate large sites in which all the pages have the same style
• It allows changing the look of many pages by changing a single file
• May reduce network traffic
20
![Page 21: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/21.jpg)
Without a style sheet(i.e., with the default
style definitions)
![Page 22: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/22.jpg)
Simple Example – without css
<html>
<head><title>A Joke</title></head>
<body>
<div><img src="tomato.gif" alt="joke"/></div>
<h1>A joke</h1>
<p>A mama tomato, a papa tomato and a baby tomato are walking
down the street. The baby tomato keeps falling behind so the papa
tomato goes back, steps on the baby tomato and says, ketchup ("Catch-
up!"). </p>
</body>
</html>
div defines a division/section in a document.Using div you
group elements.
22
![Page 23: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/23.jpg)
Style File: joke.css
body {
background-image: url("bg.gif"); }
h1 {
background-color: green;
color: rgb(250, 200, 250); /* pink */
font-family: cursive; }
p {
background-color: yellow;
color: purple;
font-size: 200%;}
23
Simple Example
![Page 24: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/24.jpg)
Simple Example - with css
<html>
<head><title>A Joke</title>
<link rel="stylesheet" type="text/css" href="joke.css"/>
</head>
<body>
<div><img src="tomato.gif" alt="joke"></div>
<h1>A joke</h1>
<p>A mama tomato, a papa tomato and a baby tomato are walking down the street. The baby tomato keeps falling behind so the papa tomato goes back, steps on the baby tomato and says, ketchup ("Catch-up!"). </p> </body>
</html>
24
![Page 25: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/25.jpg)
Background: Style in Legacy HTML
In traditional HTML, every HTML tag which supported changing its font/color/etc…, supported this using a different syntax
Examples:
<body background=“bg.jpg” vlink =“green”>
<center>Hello</center>
<font size="3" color="red">Hey!</font>
<strike>line-through</strike>
<table border=“1px”>
25
![Page 26: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/26.jpg)
Separates content from style
• Often require two kinds of skills; moreover, one is likely to change independently from the other
Keeps HTML pages human-readable
Reduces download time (how?)
Allows to easily maintain a consistent appearance over a whole Web site (why?)
A more flexible, unified way to specify style properties for different HTML elements (tables, paragraphs, etc…)
26
Simple Example – without cssSimple Example – without css
![Page 27: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/27.jpg)
Style Sheets provide new ways to accomplish tasks which were already possible
• … but recall the advantages from the previous slide
Once style sheets were introduced, most of the legacy features with equivalent functionality were deprecated in HTML 4.01 and in Transitional XHTML and were removed in Strict XHTML
27
The Transition to Style Sheets
![Page 28: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/28.jpg)
Style Rules
A rule has the following form
selector {declaration block}
The selector determines when the rule is applied
For example, the following rule applies to text that is inside a <p> tag
p {color: green; font-size: 1.5em; font-style: italic}
em is the current font-size of the element
28
![Page 29: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/29.jpg)
Properties that CSS Controls
Style properties
Layout propertiesThere are many properties and many possible values
• We will not cover all of them here
• Look in the Web !!!
29
![Page 30: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/30.jpg)
Age
nda
• HTML
• Style Sheets
• Style Properties
• Layout Properties
• Selector Types
• Inserting Style to a Page
• Inheritance and Cascading
• Java Script
![Page 31: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/31.jpg)
Our Examples
We use the following HTML example:
This is <span> our example </span> for css.
The <span> tag is used to group inline elements for formatting with styles
• Extremely useful tag...
31
![Page 32: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/32.jpg)
Font Properties
Font properties: family, size, weight, style, variant, etc.
span {
font-family: courier;
font-size: 130%;
font-style: italic;
font-weight: bold}
32
![Page 33: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/33.jpg)
Text Properties
Text properties: color, transform, decoration, …
span {
color: #00cc00;
text-decoration: line-through;
text-transform: uppercase}
33
![Page 34: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/34.jpg)
Background Properties
Background properties: background-color, background-image, …
span {background-color: #00ff00}
span {background-image: url('bg.gif');}
34
![Page 35: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/35.jpg)
DEMO
Mysite-joke
35
![Page 36: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/36.jpg)
Age
nda
• HTML
• Style Sheets
• Style Properties
• Layout Properties
• Selector Types
• Inserting Style to a Page
• Inheritance and Cascading
• Java Script
![Page 37: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/37.jpg)
Page Layout
Each HTML element defines a layer (rectangular box) that is placed in some location on the page
Layers are nested with correspondence to the nesting of their elements
37
![Page 38: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/38.jpg)
There are two type of elements:
Block elements: p, ol, table, div, h1, etc.
Inline elements: b, i, a, span, cite, etc.
Layers of block elements are separated from their adjacent elements (i.e., a new line before and after), while inline elements are not
You can turn a block into an inline and vice-versa (highly useful for img elements, among others), using the display property, e.g., h1 { display: inline }
38
Inline vs. Block Elements
![Page 39: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/39.jpg)
Positioning Elements
Using CSS, you can define the position of an element inside its parent layer
For that, use the properties position, left, right, top and bottom
span {
position:relative;
left: 1cm;
top: 1cm;
color: #00cc00;} distance from left
distance from top
39
![Page 40: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/40.jpg)
But 1cm left to what??
For that, we have the position property
Four position types are supported:• static: the default position
• relative: relative to the static position
• absolute: relative to the parent layer coordinates
• fixed: relative to the window coordinates (remains at the same position regardless of scrolling)
40
Position Types
![Page 41: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/41.jpg)
span {
position:absolute;
left: 1cm;
top: 1cm;
color: #00cc00;}
span {
position:fixed;
left: 1cm;
top: 1cm;
color: #00cc00;}
41
Position ExamplesPositions Examples
![Page 42: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/42.jpg)
span {
position:static;
left: 1cm;
top: 1cm;
color: #00cc00;}
This is the default
position type
42
Positions Examples – con’t
![Page 43: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/43.jpg)
Layer properties
• margin-top (-bottom, -left, -right)
• padding-top (-bottom, -left, -right)
• border-width (-color, -style, … )
Text Layout• direction, word-spacing, white-space, letter-spacing, text-align, text-
indent, …
A mama tomato, a papa tomato and a baby tomato are walking down the street.
A mama tomato, a papa tomato and a baby tomato are walking down the street.
Padding
margin
43
More Layout Properties
![Page 44: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/44.jpg)
Length Units
CSS has several types of length units:• em, ex: height of current fonts
• ex is the height of “x”, em is the distance between bottoms of two subsequent lines
• px, in, cm, mm, pt, pc: international units
• %: ratio of parent’s respective dimension
A page should remain a proper layout when fonts and/or windows are resized (usually by the user)
• Hence, do not assume anything about default sizes
44
![Page 45: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/45.jpg)
Links
• CSS Layout Tutorials: http://learnlayout.com/
45
![Page 46: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/46.jpg)
Age
nda
• HTML
• Style Sheets
• Style Properties
• Layout Properties
• Selector Types
• Inserting Style to a Page
• Inheritance and Cascading
• Java Script
![Page 47: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/47.jpg)
Type Selectors
Class Selectors
ID Selectors
Attribute Selectors
Universal Selector
Child Selectors
Adjacent-Sibling Selectors
Descendant Selectors
Pseudo-Class Selectors
Pseudo-Element Selectors
47
Several Kinds of Selectors
![Page 48: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/48.jpg)
Type Selector
A type selector is the name of an element type
A type selector matches every instance of the element type
li {color: red; font-size: 16px}
Matches:<ol>
<li> An item </li>
<li class="reditem"> Another item </li>
</ol>
48
![Page 49: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/49.jpg)
Universal Selector
The universal selector matches every element
The following rule means that all the text will have a size of 40px
* {font-size: 40px }
49
![Page 50: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/50.jpg)
Attribute Selector
p[title] • matches p when its title attribute is set to any value
p[title=intro] or p[title="intro"] (the quotes are optional)
• matches p when its title attribute is set to “intro”
p[class~=green] • matches p when the class attribute value includes the word
“green”
50
![Page 51: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/51.jpg)
Class Selector
A class selector is a selector of the form x.y
It matches xs that have the class attribute with value y (i.e., it is a shorthand for x[class~=y])
li.reditem {color: red}Matches:
<ol>
<li> An item </li>
<li class="reditem"> Another item </li>
</ol>
51
![Page 52: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/52.jpg)
ID Selector
IDs are similar to classes, except that there can only be one element with a given ID in a document
• That is, an ID uniquely identifies an element
li#23 {color: red}
Matches:
<ol>
<li> An item </li>
<li id="23"> Another item </li>
</ol>
52
![Page 53: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/53.jpg)
A descendant selector has the form S1 S2 where S1
and S2 are (possible complex) selectors
It matches all elements that• match S2, and
• are descendants (nested in any level in) elements that match S1
To match only immediate descendants (children), use a Child Selector S1 > S2
To match S2 immediately following S1, use an Adjacent-Sibling Selector S1 + S2
53
Descendant/Child/Sibling Selector
![Page 54: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/54.jpg)
Descendant/Child/Sibling Selector - Example
.head div>span em {color: blue}
What will this match?
Matches:
This is <em>not blue</em>.
<p>
This is <em> blue </em>
<span><i>and so is <em> this </em></i></span>.
</p>
p em {color: blue}
54
![Page 55: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/55.jpg)
Pseudo-Classes
Pseudo class selectors are similar to class selectors, but they match states rather than class values
• For example, a link can be in the states: visited, active, mouse-over (“hover”), etc.
• Another example: a text-area can be focused
55
![Page 56: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/56.jpg)
Pseudo-Classes - Examples of Rules
a:link {color: blue}
a:visited {color: purple}
a:hover {font-size: 1.5em}
a:active {color: red}
input[type=text]:focus {background-color: yellow}
when typing a text into a text input box (meaningful with other input types as well)
56
![Page 57: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/57.jpg)
Pseudo-Elements
Pseudo element selectors select abstract elements which are not specified as elements in the source HTML
• For example, to transform the first line of every p into uppercase, use:
P:first-line {text-transform: uppercase}
Why can’t this be faked by enclosing the first line with a span?
Example 2: p.article:first-letter {color:#ff0000}
57
![Page 58: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/58.jpg)
Grouping Selectors
We can group several declarations by specifying several selectors, separated by commas
For example, the following rule applies to all elements that match either h1, p b, or h2[class=largehead]
p b, h1, h2.largehead {font-size: 120%}
58
![Page 59: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/59.jpg)
Age
nda
• HTML
• Style Sheets
• Style Properties
• Layout Properties
• Selector Types
• Inserting Style to a Page
• Inheritance and Cascading
• Java Script
![Page 60: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/60.jpg)
In an inline style, the declaration block is the value of the attribute style of the element
Almost every tag can have the style attribute
• exceptional: base, head, html, meta, param, script, style and title
<p style="color: green; font-size: 1.5em; font-style: italic">
This text will be shown in italic green and the size will be 1.5 times the current font size
</p>
60
Inline Styles
![Page 61: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/61.jpg)
Document-Level Style
<html> <head>
<style type="text/css">
body {color: red; background: skyblue;}
h1 { color: blue; }
</style>
</head>
<body>... </body>
</html>
61
![Page 62: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/62.jpg)
Imported Style Sheets
The @import rule imports the style rules of another style sheet
Usage: @import url(file.css)
Several import rules may appear at the beginning of the style sheet
Import rules can appear in embedded style sheets or in external style sheets
62
![Page 63: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/63.jpg)
Imported Style Sheets
Why do we need the import
command when we have the <link> tag?
@import url(general.css);
body { color: red; background:skyblue }
h1 { color: blue }
Using @import in a css file, one can create style-
sheets which are based on others…
63
![Page 64: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/64.jpg)
Age
nda
• HTML
• Style Sheets
• Style Properties
• Layout Properties
• Selector Types
• Inserting Style to a Page
• Inheritance and Cascading
• Java Script
![Page 65: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/65.jpg)
Inheritance of Properties
Consider a property of an element that does not match any rule
For some properties (inherited properties), the computed value of this property is inherited from the parent of the element
For example, color, font and word-spacing are inherited
Yet border, margin and padding are not!
65
![Page 66: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/66.jpg)
Inheritance of Properties - Example
Given the rules:• body { font-size: 10pt }
• h1 { font-size: 120% }
What will be the font size of the <em> element?
<body>
<h1>A <em>large</em> heading</h1>
</body>
Computed Value: 12pt
66
![Page 67: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/67.jpg)
Cascading of Styles
CSS merges style rules from different places (inline, document-level, linked and defaults)
Different places may have conflicting style rules• conflicts may even arise in a single source
The process of merging (cascading) styles from different places determines which style rules have higher priority
67
![Page 68: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/68.jpg)
Determining Property Values
Suppose that we would like to determine the value of property p for element e
Choose all declarations that have a selector that matches e and have the property p
“Sort” all declarations according to cascading order (importance)
Apply the rule of the first declaration in the cascading order
68
![Page 69: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/69.jpg)
Cascading Order
The cascading order of declarations:1. Primary sort: Importance of origin
2. Secondary sort: Specificity of selectors
3. Final sort: Order of appearance
69
![Page 70: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/70.jpg)
Importance of Origin
There are two origins of rules: author and browser (defaults / user customizations)
browser !important rules
author !important rules
author rules
browser rules
strongest
weakest
For example, you can add stylesheets to IE in the following way:
Toolsinternet optionsAccessibilityUser style sheet.
Of course you can add !important browser rules this way as well…
70
![Page 71: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/71.jpg)
is rule in style attribute?
number of ID attributes
number of attributes and pseudo-classes
number of element names
strongest
weakest
71
Specificity of Selectors
![Page 72: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/72.jpg)
Specificity of Selectors - Example
Which is the most specific?li {…}
#x34y {…}
ul ol li.red {…}
1
2
3
72
![Page 73: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/73.jpg)
Age
nda
• HTML
• Style Sheets
• Style Properties
• Layout Properties
• Selector Types
• Inserting Style to a Page
• Inheritance and Cascading
• Java Script
![Page 74: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/74.jpg)
Client-Side Programming
Certain parts of a Web application can be executed locally, in the client
For example, some validity checks can be applied to the user’s input locally
The user request is sent to the server only if the input is valid
Java Script (not part of Java!) is an HTML-embedded scripting language for client-side programming
74
![Page 75: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/75.jpg)
Java Script is a scripting language for generating dynamic HTML pages in the browser
The script is written inside an HTML page and the browser runs the script and displays an ordinary HTML page
There is some interaction of the script with the file system using cookies
Cookies are small files that store personal information in the file system of the client
• For example, a cookie may store your user name and password for accessing a particular site
75
Java Script
![Page 76: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/76.jpg)
<html>
<head><title>JS Example</title></head> <body>
<h2>Before the script</h2>
<script type="text/javascript">
document.write('<h1>In the script<\/h1>')
</script>
<h2>After the script</h2>
</body></html>
76
Java ScriptJava Script – Example #1
![Page 77: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/77.jpg)
<html>
<head><title>JS Example</title></head><body>
<h2>Before the script</h2><h1>
<script type="text/javascript">
document.write(new Date().toLocaleString())
</script>
</h1><h2>After the script</h2>
</body></html>
77
Java Script – Example #1Java Script – Example #2
![Page 78: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/78.jpg)
<h2>Hello and
<i><script type="text/javascript">
hours = new Date().getHours();
if (hours < 10) { document.write("good morning") }
else {document.write("good day") }
</script></i>.
</h2>
78
Java Script – Example #2Java Script – Example #3
![Page 79: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/79.jpg)
DEMO
Mysite-index.html
79
![Page 80: © Yaron Kanza HTML,CSS and JavaScript Written by Dr. Yaron Kanza, Edited by permission from author by Liron Blecher](https://reader035.vdocuments.us/reader035/viewer/2022081506/56649cee5503460f949bbd8e/html5/thumbnails/80.jpg)
Links
• http://www.w3schools.com/
• http://xhtml.co.il/he/
80