Scribd
Upload
2 views

CIT-210-Compilation-of-Notes-Modules2

Cascading Style Sheets (CSS) is a W3C standard for styling HTML elements, allowing for improved formatting control, site maintainability, and accessibility. CSS can be applied inline, embedded, or through external stylesheets, with various selectors available to target HTML elements. The document outlines the syntax, benefits, and common properties of CSS, as well as its evolution and browser adoption challenges.

Uploaded by

vincedelapena7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

CIT-210-Compilation-of-Notes-Modules2

Cascading Style Sheets (CSS) is a W3C standard for styling HTML elements, allowing for improved formatting control, site maintainability, and accessibility. CSS can be applied inline, embedded, or through external stylesheets, with various selectors available to target HTML elements. The document outlines the syntax, benefits, and common properties of CSS, as well as its evolution and browser adoption challenges.

Uploaded by

vincedelapena7
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 140

Introduction to

CSS
Chapter 4

1
What Is CSS?
Cascading Style Sheets (CSS)

• CSS is a W3C standard for describing the


appearance of HTML elements

• With CSS, we can assign font properties, colors,


sizes, borders, background images, and even
position elements on the page

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

2
What Is CSS?
Benefits of CSS

• Improved control over formatting.

• Improved site maintainability.

• Improved accessibility.

• Improved page-download speed.

• Improved output flexibility (responsive design)

3
What Is CSS?
CSS Versions

• 1996 the CSS Level 1 Recommendation was published

• June 2011 - CSS2.1 becomes an official W3C


Recommendation

• a different group at the W3C was working on a CSS3


draft. So far the following CSS3 modules have made it to
official W3C Recommendations:
• CSS Selectors,
• CSS Namespaces,
• CSS Media Queries,
• CSS Color, and
• CSS Style Attributes

4
What Is CSS?
Browser Adoption

• Historically implementation of CSS was not


consistent across major browsers.

• CSS has a reputation for being a somewhat


frustrating language due to browser
implementation differences

• CSS was not really designed to be a layout


language, so authors often find it tricky dealing
with floating elements, relative positions,
inconsistent height handling, overlapping margins,
and non-intuitive naming

5
CSS Syntax
Overview

• 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:value pairs (each
pair is also called a declaration)

• The series of declarations is also called the


declaration block .

6
Benefits of CSS
Why using CSS is a better way of describing presentation than HTML

The degree of formatting control in CSS is significantly


better than that provided in HTML.
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.

7
CSS Syntax
Rules, properties, values, declarations

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).
declaration

syntax
selector { property: value; property2: value2; } rule

declaration block

selector

em { color: red; }

property value examples


p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

8
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 declaration

ignores white space selector { property: value; property2: value2; } rule


syntax

• Each declaration is
declaration block
terminated with a
semicolon. selector

em { color: red; }

property value examples


p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

9
Properties
Which style properties of the selected elements

Each individual CSS declaration must contain a


property.
These property names are predefined by the CSS
standard.
The CSS2.1 Recommendation declaration

defines over a hundred selector { property: value; property2: value2; } rule


syntax

different property names.


declaration block

selector

em { color: red; }

property value examples


p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

10
Properties
Common CSS properties
Property Type Property
Fonts font
font-family
font-size
font-style
font-weight
@font-face
Text letter-spacing
line-height
text-align
text-decoration
text-indent
Color and background background
background-color
background-image
background-position
background-repeat
color
Borders border
border-color
border-width
border-style
border-top
border-top-color
border-top-width
etc

11
Properties
Common CSS properties continued.
Property Type Property
Spacing padding
padding-bottom, padding-left, padding-right, padding-top
margin
margin-bottom, margin-left, margin-right, margin-top
Sizing height
max-height
max-width
min-height
min-width
width
Layout bottom, left, right, top
clear
display
float
overflow
position
visibility
z-index
Lists list-style
list-style-image
list-style-type

12
Values
What style value for the properties

Each CSS declaration also contains a value for a


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

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

14
Units of Measurement
There are multiple ways of specifying a unit of measurement in CSS

Some of these are relative units, in that they are


based on the value of something else, such as the size
of a parent element.
Others are absolute units, in that they have 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).

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

16
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

17
Comments in CSS

It is often helpful to add comments to your style


sheets. Comments take the form:

/* comment goes here */

18
Actually there are three …
Different types of style sheet

Author-created style sheets (what we are learning in


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

19
Style Locations
Author Created CSS style rules can be located in three different locations

CSS style rules can be located in three different


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

20
Inline Styles
Style rules placed within an HTML element via the style attribute

An inline style only affects the element it is defined


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

21
Embedded Style Sheet
Style rules placed within the <style> element inside the <head> element

While better than inline styles, using embedded styles


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

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

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

23
Selectors
Things that make your life easier

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.

24
Element Selectors
Selects all instances of a given HTML element

Uses the HTML element name.


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

declaration

selector { property: value; property2: value2; } rule

declaration block
selector

em { color: red; }

property value

p {
margin: 5px 0 10px 0;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}

25
Grouped Selectors
Selecting multiple things

You can select a group of elements by separating the different


element names with commas.

This is a sensible way to reduce the size and complexity of your


CSS files, by combining multiple identical rules into a single
rule.

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

27
Class Selectors
Simultaneously target different HTML elements

A class selector allows you to simultaneously target


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

28
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>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>

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

.first {
font-style: italic;
color: brown;
}

29
Id Selectors
Target a specific element by its id attribute

An id selector allows you to target a specific element


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

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

30
Id Selectors
<head lang="en">
<meta charset="utf-8">
<title>Share Your Travels -- New York - Central Park</title>
<style>
#latestComment {
font-style: italic;
color: brown;
}
</style>
</head>
<body>
<h1>Reviews</h1>
<div id="latestComment">
<p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>

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

#latestComment {
font-style: italic;
color: brown;
}

31
Id versus Class Selectors
How to decide

Id selectors should only be used when referencing a


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

32
Attribute Selectors
Selecting via presence of element attribute or by the value of an attribute

An attribute selector provides a way to select HTML


elements by either the presence of an element
attribute or by the value of an attribute.
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.

33
Attribute Selectors
[title] {
cursor: help;
<head lang="en"> padding-bottom: 3px;
<meta charset="utf-8"> border-bottom: 2px dotted blue;
<title>Share Your Travels</title> text-decoration: none;
<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>

34
Pseudo Selectors
Select something that does not exist explicitly as an element

A pseudo-element selector is a way to select


something that does not exist explicitly as 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.

35
Pseudo Selectors

36
Contextual Selectors
Select elements based on their ancestors, descendants, or siblings

A contextual selector (in CSS3 also called


combinators) allows you to select elements based 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.

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

38
Descendant Selector
Selects all elements that are contained within another element

While some of these contextual selectors are used


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

context selected element

div p { … } #main div p:first-child { … }

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


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

39
Contextual Selectors in Action <body>
<nav>
<ul>
<li><a href="#">Canada</a></li>
<li><a href="#">Germany</a></li>
ul a:link { color: blue; } <li><a href="#">United States</a></li>
#main time { color: red; }
</ul>
</nav>
<div id="main">
Comments as of <time>November 15, 2012</time>
<div>
#main>time { color: purple; } <p>By Ricardo on <time>September 15, 2012</time></p>
<p>Easy on the HDR buddy.</p>
</div>
<hr/>

<div>
#main div p:first-child { <p>By Susan on <time>October 1, 2012</time></p>
color: green; <p>I love Central Park.</p>
} </div>
<hr/>
</div>
<footer>
<ul>
<li><a href="#">Home</a> | </li>
<li><a href="#">Browse</a> | </li>
</ul>
</footer>
</body>

40
Why Conflict Happens
In CSS that is

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

41
Cascade
How conflicting rules are handled in CSS

The “Cascade” in CSS refers to how conflicting rules


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

42
Cascade Principles

CSS uses the following cascade principles to help it


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

43
Inheritance
Cascade Principle #1

Many (but not all) CSS properties affect not only


themselves but their descendants as well.
Font, color, list, and text properties are inheritable.
Layout, sizing, border, background and spacing
properties are not.

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

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

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

<time> <time>

45
Inheritance
How to force inheritance

It is possible to tell elements to inherit properties that


are normally not inheritable.
div {
font-weight: bold;
margin: 50px;
border: 1pt solid green;
}
p {
border: inherit;
margin: inherit;
}

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

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

46
Inheritance div {
<html>
font-weight: bold; inherited
margin: 50px; not inherited
border: 1pt solid green; not inherited
<head> <body> }

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

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

<time> <time>

47
Specificity
Cascade Principle #2

Specificity is how the browser determines which style


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

48
Specificity
How it works

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.

49
Specificity
These color and font-weight
body { This text is not within a p element.
properties are inheritable and thus font-weight: bold; <p>Reviews</p>
potentially applicable to all the child color: red; <div>
elements contained within the body. } <p>By Ricardo on <time>September 15, 2012</time
<p>Easy on the HDR buddy.</p>
However, because the <div> and <p> div { This text is not within a p element.
elements also have the same font-weight: normal; </div>
properties set, they override the value color: magenta; <hr/>
}
defined for the <body> element
<div>
because their selectors (div and p) are p { <p>By Susan on <time>October 1, 2012</time></p>
more specific. color: green; <p>I love Central Park.</p>
} </div>
Class selectors are more specific <hr/>
.last {
than element selectors, and thus color: blue; <div>
take precedence and override } <p class="last">By Dave on <time>October 15, 20
element selectors. <p class="last" id="verylast">Thanks for postin
#verylast { </div>
color: orange; <hr/>
font-size: 16pt;
}
Id selectors are more specific than
class selectors, and thus take
precedence and override class
selectors.

50
Specificity Algorithm
The algorithm that is used to determine specificity is :

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


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

51
Specificity Algorithm
element selector
div {
color: green;
Specificity Value

0001
}

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

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

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

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

inline style 5
overrides <div style="color: red;"> 1000
attribute
52
Location
Cascade Principle #3

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.

53
Location
Browser’s
default style
settings

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

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

4 <style>
overrides
#example {
color: orange; 5 #example {
overrides color: blue;
color: magenta; }
}
</style>
</head>
<body> 6 overrides
<p id="example" style="color: red;">
sample text
</p>
</body>
Can you guess what will be the color of the sample text ?

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

Browser’s
default style
settings

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

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

4 <style>
overrides
#example {
color: orange; 5 #example {
overrides color: blue;
color: magenta; }
}
</style>
</head>
<body> 6 overrides
<p id="example" style="color: red;">
sample text
</p>
</body>
55
Location
There’s always an exception

There is one exception to the principle of location.


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

56
The BOX MODEL
Section 6 of 7

57
The Box Model
Time to think inside the box

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.

58
The Box Model
margin
border
padding

Every CSS rule begins withwidth


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

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

Every CSS rule begins with a selector. The selector identifies


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

59
Background
Box Model Property #1

The background color or image of an element fills an


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

60
Background
Property Properties
background
Description
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.

61
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;

62
Background Position
50px

300px

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

63
Borders
Box Model Property #2

Borders provide a way to visually separate elements.


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

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

65
Shortcut notation
TRBL

With border, margin, and padding properties, there


are long-form and shortcut methods to set the 4 sides

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


border-right-color: green; /* sets just the right side */
border-bottom-color: yellow; /* sets just the bottom side */
border-left-color: blue; /* sets just the left side */

border-color: red; /* sets all four sides to red */

border-color: red green orange blue; /* sets all four sides differently */

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

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

left right
border-color: red green orange blue;

bottom

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

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

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

67
Margins
Why they will cause you trouble.
p {
border: solid 1pt red;
margin: 0;
padding: 0;
}

Did you notice that the space


between paragraphs one and two and p {
border: solid 1pt red;

between two and three is the same }


margin: 30px;
padding: 0;

as the space before paragraph one


and after paragraph three?
This is due to the fact that adjoining p {
vertical margins collapse. border: solid 1pt red;
margin: 30px;
padding: 30px;
}

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

50px
div {
2 90px border: dotted 1pt green;
padding: 0;
50px margin: 90px 20px;
}
50px 5
p {
50px border: solid 1pt red;
padding: 0;
3 90px margin: 50px 20px;
}
If overlapping margins did not collapse, then margin space for
would be 180p (90pixels for the bottom margin of the first <div> +
90 pixels for the top margin of the second <div>), while the margins
and for would be 100px.

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

69
Collapsing Margins
How it works

When the vertical margins of two elements touch,


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

70
Width and Height
Box Model Properties #5 and #6

The width and height properties specify the size of the


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

71
Width and Height
Potential Problem #1

Only block-level elements and non-text inline


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

72
Width and Height
Potential Problem #2

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

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

Every CSS rule begins with200px


a selector. The selector identifies
10px 5 5 10px
2 which element or elements in the HTML document will be 2
100px
affected by the declarations in the rule. Another way of
thinking of selectors is that they are a pattern which is used
by the browser to select the HTML elements that will receive
Default

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

Every CSS rule begins with a selector. The selector identifies


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

10px 200px 10px

74
Width and Height

p {
background-color: silver;
}

} 100px

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

75
Overflow Property
overflow: visible;

overflow: hidden;

overflow: scroll;

overflow: auto;

76
Sizing Elements
Time to embrace ems and percentages

While the previous examples used pixels for its


measurement, many contemporary designers prefer to
use percentages or em units for 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.

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

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

50% of parent (= 200px)

50% of parent

50% 50%
78
Developer Tools
Help is on the way

Developer tools in current browsers make it


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

79
Developer Tools
Chrome – Inspect Element Firefox – Inspect

Opera – Inspect Element

Internet Explorer – Developer Tools

80
TEXT STYLING
Section 7 of 7

81
Text Properties
Two basic types

CSS provides two types of properties that affect text.


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

82
Font-Family
A few issues here

A word processor on a desktop machine can make use


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

83
Specifying the Font-Family
1 Use this font as
the first choice
If it isn’t available, then
3 use this one

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

But if it is not available,


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

84
Generic Font-Family

The font-family property supports five different


generic families.
The browser supports a typeface from each family.

Generic
Font-Family
Name

This serif serif


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

This monospace This In a monospace font,


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

This cursive

This
Decorative and cursive fonts
fantasy vary from system to system;
rarely used as a result.
85
@font-face
The future is now

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.

86
Font Sizes
Mo control, mo problems

The issue of font sizes is unfortunately somewhat


tricky.
In a print-based program such as a word processor,
specifying a font size in points 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.

87
Font Sizes
Welcome ems and percents again

If we wish to create web layouts that work well on


different devices, we should learn to use relative units
such as em units or percentages for our font sizes (and
indeed for other sizes in 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.

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

89
How to use ems
<body>
and percents
Browser’s default text size is usually 16 pixels
<p> 100% or 1em is 16 pixels
<h3> 125% or 1.125em is 18 pixels
<h2>
150% or 1.5em is 24 pixels
<h1>
200% or 2em is 32 pixels
/* using 16px scale */ <body>
<p>this will be about 16 pixels</p>
body { font-size: 100%; } <h1>this will be about 32 pixels</h1>
h3 { font-size: 1.125em; } /* 1.25 x 16 = 18 */ <h2>this will be about 24 pixels</h2>
h2 { font-size: 1.5em; } /* 1.5 x 16 = 24 */ <h3>this will be about 18 pixels</h3>
h1 { font-size: 2em; } /* 2 x 16 = 32 */ <p>this will be about 16 pixels</p>
</body>

90
How to use ems and percents
It might seem easy … but it’s not …

While this looks pretty easy to master, things


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

91
ems and percents
<body>
<p>this is 16 pixels</p>
<h1>this is 32 pixels</h1>
<article>
<h1>this is 32 pixels</h1>
<p>this is 16 pixels</p>
<div>
<h1>this is 32 pixels</h1>
<p>this is 16 pixels</p>
</div>
</article>
</body>

/* using 16px scale */

body { font-size: 100%; }


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

/* using 16px scale */

body { font-size: 100%; }


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

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


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

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


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

92
The rem unit
Solution to font sizing hassles?

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.

93
The rem unit /* using 16px scale */

body { font-size: 100%; }


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

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


p = 1 * 16 = 16px */

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


p = 1 * 16 = 16px */

94
HTML Document Structure

1. What is the HTML?


Documents on the web are generally coded in a markup language called Hypertext
Markup Language (HTML). HTML is used to describe the structure of a document
and links in a hypertext document. HTML adds tags that identify elements in a
document such as headings, subheadings, paragraphs, and appendices. The HTML
codes embedded in the document text explicitly describe the text, providing
information to the web client about how to interpret it. The primary focus of HTML
is the content of the document, not its appearance. It is a language for describing
structured documents.

• HTML stands for Hyper Text Markup Language. Its makes parts of a document
into links to other documents.

1
• HTML describes the content of Web pages using markup represented by tags.

• HTML is the markup language for creating Web pages.

2. HTML Tags and Attributes

HTML Tags
HTML Tags are used to mark up the start and the end of HTML element and are
usually surround content and apply meaning to it. Each tag consists of an opening
angled bracket (<) and a closing bracket (>). They are normally come in pairs like

2
<head> and </head> and Nothing within the brackets will be displayed in the
browser. The tag name is generally abbreviation to the tag function.
Example: <h1> …….. </h1>.

HTML Attributes
Tags may have attributes which contain additional pieces of information. It
generally provides additional styling (attribute) to the element. Attributes appear
inside the opening tag and their values sit inside quotation marks.
Example: <img src="myimage.jpg"> …..</img>
In this example, the image source (src) is the attribute name and the "myimage.jpg"
is attribute value "of the <img> tag.

HTML Elements
Tags mark the beginning and end of an element. Elements are the bits that
make up web pages. They consist of some kind of structure or expression.
Example: <b> This is the content. </b>
Where, <b> is the starting tag and </b> is the ending tag.

3
The table below provides a brief comparison of tags, attributes and elements.

HTML TAGS HTML ELEMENTS HTML ATTRIBUTES


HTML attributes are used to
HTML tags are used to hold HTML element holds the
describe the characteristic of an
the HTML element. content.
HTML element in detail.
Whatever written within a
HTML tag starts with < and HTML attributes are found only
HTML tag are HTML
ends with > in the starting tag.
elements.
HTML tags are almost like HTML attributes specify various
HTML elements specifies
keywords where every single additional properties to the
the general content.
tag has unique meaning. existing HTML element.

3. HTML document structure

HTML document contains the text (the content of the page) with embedded tags, which provide
instruction, appearance and function of the content. The HTML document is divided into two
major portions: the head and the body.

• The head contains information about the document such as the title and "meta" information
describing the content.
• The body contains the actual contents of the document (the parts that is displayed in the
browser window).

The following examples show the tags that make up the standard structure of an HTML document:

4
1 < ! DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”> 4
3
<title>title here </title> 5
3
2
</head>
<body>

6
Page content here
</body>
</html>

1- It is a document type declaration (also called DOCTYPE declaration) that identifies this
document as an HTML document.
2- The <html> element is called the root element of an HTML page because it contains all the
elements in the document. Within the html element, the document is divided into a head and a
body.
3- The <head > element: The head element contains descriptive information about the document
itself, such as its title, the style sheet(s) it uses, scripts, and other types of “meta” information.
4- The meta elements within the head element provide information about the document itself but
no information that will be displayed on the page itself. A meta element can be used to provide
all sorts of information, but in this case, it specifies the character encoding (the standardized
collection of letters, numbers, and symbols) used in the document
5- The <title> element also in the head element, which tells the browser what to display in its
title bar (the title bar is the very top part of the browser window—the part with the minimize,
maximize, and close buttons)
6- The <body> element contains the visible page content also body element contains almost
everything that you see on the screen: headings, paragraphs, images, any navigation that’s
required, and footers that sit at the bottom of the web page

5
Example 1

< ! DOCTYPE html>


<Html>
<Head>
<Title>The first example </Title>
</Head>
<Body>
Welcome to HTML
</Body>
</Html>

The purpose of a web browser is to read HTML documents and display them. The browser does
not display the HTML tags, but uses them to determine how to display the document:

Example 2: A head section that includes metadata


<head>
<title>San Joaquin Valley Town Hall lectures
speakers and luncheons
</title>
<meta charset="utf-8">
<meta name="description" content="A yearly lecture
series with speakers that present new
information on a wide range of subjects">
<meta name="keywords" content="san joaquin,
town hall, speakers, lectures, luncheons">
</head>

6
4. HTML Headings
Use the heading tags to show the structure and importance of the content on a
page. Always use the h1 tag to identify the most important information on the
page, and only code a single h1 tag on each page. Then, decrease one level at a
time to show subsequent levels of importance.
Note: Don’t use heading levels as a way to size text. Instead, use CSS to size the
headings.

The tags of heading and paragraph are:

• h1
• h2
• h3
• h4
• h5
• h6
Example 3: if we write the same program as below

<Html>
<Head>
<Title>The second example</Title>
</Head>
<Body>
<h1>Welcome to HTML</h1>
</Body>
</Html>

7
Then the output will be

In this example the <h1> tag representing heading element within the body element. The
opening <h1> and closing </h1> tags are wrapped around the words “Welcome to HTML”
making that the main heading for the page.

Example4: <html>
<title> This is heading Hierarchal example </title>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>

In the example 4 above, we use an h1 element to show a major heading. If we wanted to include a
subheading beneath this heading, we’d use the h2 element. A subheading under an h2 would use
an h3 element, and so on, until we hit h6. The lower the heading level, the lesser its importance
and the smaller the font size: h1 h2 h3 h4 h5 h6

8
5. HTML Paragraphs

Paragraph Tag: The <p> element defines a paragraph. It uses to deal with blocks
of text in the web site document.

Example 5

if we add another element <p> such as


<Html>
<Head>
<Title>The third example</Title>
</Head>
<Body>
<h1>Welcome to HTML</h1>
<p>Welcome to HTML</p>
</Body>
</Html>

The output will be

Example 6:
< !DOCTYPE html>
<Html>
<Head>
<Title> Paragraph Example </Title>
</Head>
<Body>

9
<h1>Welcome to HTML</h1>
<p> Paragraph Tag use to deal with blocks of text in web site document</p>
</Body>
</Html>

Line Break Tag: <br> element is used to start a new line rather than a new
paragraph. The <br> tag is an empty tag which means that it has no end tag.
Example 7:
< !DOCTYPE html>
<html>
<head>
<title> Web Page </title>
</head>
<body>
<h1>The Most Basic Web Page </h1>
<p>This is a very simple web page to get you started. <br> Hopefully you will get
to see how the markup relates to the end result, <br> and that you can see on
screen. </p>
<p> This is another paragraph, by the way. Just to show how it works. </p>
</body>
</html>

10
If Rewrite Example 7 without using line break the output will be:

Horizontal Rules Tag: The <hr> tag defines a thematic break in an HTML page and
is most often displayed as a horizontal rule. The <hr> element is used to separate
content or define a change in an HTML page. The <hr> tag is also an empty tag,
which means that it has no end tag.

11
Example 8: Design a web page with three paragraphs separated by horizontal rule
<!DOCTYPE html>
<html>
<head>
<title> Web Page </title>
</head>
<body>
<h2>The Main Languages of the Web</h2>
<p>HTML is the standard markup language for creating Web pages. </p>
<hr>
<p>CSS is a language that describes how HTML elements are displayed on screen.
</p>
<hr>
<p>JavaScript is the programming language of HTML and the Web.</p>
</body>
</html>

12
Comment Tag: comments can be added to HTML source by using the following
syntax: <!-- Write comments here -->
Anything between comment tags will not display in the browser and will not have
any effect on the rest of the source. Comments are perfect for making notes on
the written work and are useful for labeling and organizing long documents,
particularly when document are shared by a team of developers. An example of a
comment:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
What is the output of this segment HTML code????

6. HTML character Entities


An HTML entity is a piece of text that begins with an ampersand (&) and ends with
a semicolon (;). Entities are frequently used to display reserved characters which
would otherwise be interpreted as HTML code. Entity can also use in place
of other characters that are difficult to type with a standard keyboard.

13
Table below provide some examples of HTML entities:
Result Description Entity Name
< less than &lt;
> greater than &gt;
& ampersand &amp;
" double quotation mark &quot;
' single quotation mark &apos;
¢ cent &cent;
© copyright &copy;
® registered trademark &reg;

Example 9:
<!DOCTYPE html>
<html>
<head>
<title> HTML character Entities </title>
</head>
<body>
<h1> Topics in Computer Science </h1>
<h3> Series Editors </h3>
<h4>Ian Nielson &amp; Steven Breitman </h4>
<p>Topics in Computer Science delivers high quality content for undergraduates
studying in all areas of computing science.<br>From core foundational and
theoretical material to final year topics and applications, UTiCS books take a fresh
and modern approach. </p>
<p> Second Edition &copy; Springer International Publishing. </p>
</body>
</html>

14
Q/ What is the output of the following HTML code?
<!DOCTYPE html>
<html>
<head>
<title> This is HTML page </title>
</head>
<body>
<!—there are two heading separated by horizontal lines -->
<h1> Software Competition </h1>
<hr>
<h2> Announcement </h2>
<hr>
<!-- This is an ad required -->
<p> This is an ad about a competition to design a site that includes simple
elementary education classes. <br> The site includes the following lessons:
<br>Arabic characters
<br>English characters
<br>Numbers in Arabic
15
<br>Numbers in English
</p>
<!--The end of required -->
<p> The last date to submit the design is the end of the this month </p>
</body>
</html>

16
Web Design
(Lecture Notes)
Introduction to: HTML – CSS – Java Script
Prepared by : Dr.Taha Basheer Taha
IT Department / Faculty of sciences
HTML
HTML is stand for Hypertext Markup Language is the standard markup language for
documents designed to be displayed in a web browser. It can be assisted by technologies
such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. It
relied on tags < > and <between tags there are the Markup Elements.
HTML code can be written using any text editor, however, the compiler is browser that
will be used, as Chrome or Mozilla.

First Example: The basic commands of HTML will be explained by an example.


<!doctype html> To inform the text editor that the document is an HTML.
<html> Here the starting of the HTML code, it ends when the </html> is typed.
<head> The header of the document has the title and the required definitions , as CSS
classes.
<title> Hello </title> The title shown in the HTML window.
</head> Closing of the header.
<body> In body, the text, buttons, and most of tags are exist, in this example the body is
empty.
</body> End of body
</html> End of HTML code.

Some HTML Tags:


Header texts <hx> x=1-6
Line brake <br>
Paragraph <p>

Example:
<!doctype html>
<html>
<head>
<title> Hello </title>
</head>
<body>
<p> TISHK International University </p > <br>
<h1> TISHK International University </h1> <br>
<h2> TISHK International University </h2> <br>
<h3> TISHK International University </h3> <br>
<h4> TISHK International University </h4> <br>
<h5> TISHK International University </h5> <br>
<h6> TISHK International University </h6> <br>
<h7> TISHK International University </h7> <br> <!– no change here
</body>
</html>

Tags ends when we close them, otherwise , it will continue. tags used to be nested
inside each other. Note : Tags in the coming examples will be written inside the body.
<p> text 1<p>
<p> text 2</p>
Or
<p> text 1
text 2</p>

Unordered and Ordered list:


Used for arranging the list. Ordered lists having a
number in front of each element. Unordered lists will
list elements by adding dots.
Example:
<h1>Our Departments</h1>
<ul>
<li> IT Department</li>
<li>Medical Analysis></li>
</ul>

Creating Tables:
The table command <table> is used to create the table. The table is created row after row.
If the table row is a header, then <th> is used, and it is shown as bold. When the row
contains data then <td> tag is used.

Example:

<table>
<tr>
<th> Name </th> <!-- this is for header , it will be bold -->
<th> Age </th>
<th> Stage </th>
</tr>
<tr>
<td> Ali </td> <!-- this is for data , it will be correspondent to the hd above -->
<td> 20 </td>
<td> Second </td>
</tr>
<tr>
<td> Saly </td> <td> 21 </td>
<td> Third </td>
</tr>
</table>
WEB Links
Syntax:
<a href=“website link"> Text appear in the page </a>
Example:
<a href="http://www.tiu.edu.iq">
Click to visit TISHK Website </a>

Adding Images
Syntax:
<img src=“name.extension" width=“num" height=“num">
<!-- the image should be on same folder if no path was specified-->

Data input in HTML

1- Input Box:

The input box is used to enter data as user name and password as shown in the figure.

Example:
<!doctype html>
<html>
<head>
<title> TIU Page</title>
</head>
<body>
<form action =" " method = " " >
<input type =“text" name=" ">
</form>
</body>
</html>
<!– when input type = password then characters will be shown as asterisk.

2- Submit bottom
<form action =" " method = " " >
<input type ="submit" value=" Submit “ name=“ ”>
</form>

3-Radio Bottom
Syntax:
<input type ="radio" name="yesno" value=""> <br> <br>

Example
form action =" " method = " " >
Answer : </br>
yes
<input type ="radio" name="yesno" value=""> <br> <br>
No
<input type ="radio" name="yesno" value="" > <br> <br>
</form>

4- Check box
<form action =" " method = " " >
Which cities you had visited : </br>
<input type ="checkbox" value="" > Paris <br> <br>
</form>
<input type ="checkbox" value="" > Cairo <br> <br>
</form>
<input type ="checkbox" value=""> Istanbul <br> <br>

5-Number
<form action =" " method = " " >
Exam Mark : </br>
<input type ="number" min="0" max="100"> <br> <br>
</form>

6-Input date/Time/ Number

<form action =" " method = " " >


<input type ="number" min="0" max="100"> <br>
<input type= "date" name="">
<input type= “time" name="">
</form>

7-Drop down list


<form action =" " method = " " >
<select>
<option value=""> Text of the 1st selection </option>
<option value=""> Text of the 2nd selection </option>
<option value=""> Text of the nth selection </option>
</select>
</form>
8- Multiple Line
Syntax
<textarea rows="" cols=""> </textarea> </br>
Example
<textarea rows=“20" cols=“50"> </textarea> </br>

Q: Design the following HTML document :

Title and alt attributes


Title =“ The title that will be shown when the mouse is over the object”
Alt=“” the caption that will be shown the “Alternative” text if the image can not be
loaded.

Example:
<img src="baby.jpg" width="200" height="150" title="Baby image">
<img src="babymissed.jpg" width="200" height="150" title="Baby image" alt="baby
image">
Labels to the input box
Syntax:
<label for=" id of the input box "> text to show </label>
<input type ="text" id="id of the input box " name=" ">

<form action = " " method = " " >


<label for="username"> Write The User Name: </label>
<input type ="text" name=" "> <br>
<label for="password"> Write The Password : </label>
<input type ="password" id="password" name=" ">
</form>

The IFRAME (Inline Frame)


It is used to show another page within the current one.
<iframe frameborder="" width="" height=""
src="html of the source" name= "name" id= "id" >
</iframe>
<iframe frameborder="1" width="350" height="350"
src=" Mypage.html " name="iframeme" id="iframeme">
</iframe>

Some font tags:


• <sup> : super script
• <sub> : subscript
• <b> for bold
• <i> for italic

Adding Audio
<audio controls>
<source src="Audio.mp3"/>
</audio>
To add autoplay and loop:
<audio controls autoplay loop>
<source src="Audio.mp3"/>
</audio>

Adding Video

<video controls autoplay loop>


<source src="video.mp4"/>
</video>
CSS Cascading Style Sheet

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation
of a document written in a markup language like HTML. CSS is designed to enable the
separation of presentation and content, including layout, colors, and fonts.
CSS is called in the header to define the formatting for each tag as explained in the example
below:

<!doctype html>
<html>
<head>
<title> welcome</title>
</head>
<style>
h1
{
color:Red; <!—in this part we defined that each h1 tag will be in red color. Any formatting
related to h1 will be written inside these two brackets.
}
</style>
<body>
<h1> TISHK University</h1> The Sentence TISHK university will appear in red color
</body>
</html>

Ex2:
<!doctype html>
<html>
<head>
<title> My Page</title>
</head>
<style>
h1,h2{
Background-color:blue <!-- Here, both h1 and h2 formatting will be changed.>
}
</style>
<body>
<h1> Tishk first Test </h1>
<p> Here is the introduction about university </p>
<h2> Contact page will be here </h2>
<p> Email us at something@tiu </p>
</body>
</html>

In case of :
Body{
Color=red;
}
All the body will be red, however, if we add individual color to <h1> for example it will
overwrite the old one , i.e. the body.

Changing Font
</head>
<style>
h1{
background-color:blue;
}
p{
color:blue;
font-size: 25px;
font-family:Arial;
}
</style>
<body>
<h1> Tishk first Test </h1>
<p> Here is the introduction about university </p>
<h2> Contact page will be here </h2>
<p> Email us at something@tiu </p>
</body>
</html>

Border ( bottom, top, right, left)


In border command the location is written ( if not it will be in all directions) and then the
width, type and color are specified.
h2 {
border-bottom:2px solid blue;
}
h1{
border : 1px solid red;
}
Classes in CSS:
Classes are used when more than on tag (ex <p>) inside the text are exist and we need to
apply different format for each of them.
Example :
</head>
<style>
p.blue
{
color: blue;
}
p.red
{
color: red
}
</style>
<body>
<p class=blue> Here is the blue class </p>
<br>
<p class=red> Here is the red class </p>
</body>

To use the CLASS in more than one tag, use the class without a name.

<!doctype html>
<html>
<head>
<title> CSS lectures</title>
</head>
<style>
.blue
{
color: blue;
}
</style>

<body>
<h1 class=blue> Here is the blue header1 </h1>
<h2 class=blue> Here is the blue header2 </h2>
<br>
<p class=blue> Here is the blue paragraph </p>
</body>
</html>

Creating External CSS file


The external CSS file ( *.css) is used to specify the formatting in a separate file so it can
be used with multiple HTML files. i.e , the *.css file will be created one time and can be
used for any HTML document.
To create and link a CSS file follow the steps:
1. Paste the contents under style as a separate text file and save it as *.css example :
ExternalCSS_1.css
2. Call the content in the HTML file using the following command :
<link rel="stylesheet" type="text/css" href="ExternalCSS_1.css">
3. The CSS should be in the same folder or specify the complete path.
4. Note that the CSS file contains all the CSS commands in style tag.
Example:
In this example the css file Colors.css will be called by the html file.
CSS FILE
Colors.css
p.par1
{
color:blue;
}
p.par2
{
color:red;
}
p.par3
{
color:green;
}

HTML File:
<!doctype html>
<html>
<head>
<title> CSS lectures</title>

<link rel="stylesheet" type="text/css" href=“Colors.css">


</head>

<body>
<p class=par1> Here is the normal paragraph </p>
<p class=par2> Here is the normal paragraph </p>
<p class=par3> Here is the normal paragraph </p>
</body>
</html>

CSS Box Model

Every element we have in HTML . <P> <h1> <h2> .. Etc has Content, padding, border and
Margin to make the design consistent and keep the spaces between elements.

1- Content: The background color which will show the content box.

In CSS file this is tagged as par1 (as shown in color example before) a text will be
written in HTML.

p.par1
{
color:blue;
background-color:yellow;
}

Content
2- Padding : Padding is the place between the color and text.
p.par1
{
color:blue;
background-color:yellow;
padding: 25px; <!– This is for all sides-->
<!– it can be specified as in image->
}

3- Border : it surrounds the contents with padding


p.par1
{
color:blue;
background-color:yellow;
padding: 25px;
border-color: red;
border-width: 5px;
border-style: solid;
}
4- Margin : The space between the element and the page. p.par1
{
color:blue;
background-color:yellow;
padding: 25px;
border-color: red;
border-width: 5px;
border-style: solid;
Margin: 60px;
}

The margin can be specified as left-right , top and bottom.

Images with CSS Box:


In the HTML file:
<img class="imgclass" src="AGalaxy.png">

In the CSS file :


In CSS File
.imgclass
{
display:block;
margin-left:auto;
margin-right:auto;
padding: 10px;
background-color:silver;
border-color: blue;
border-width: 5px;
border-style: solid;
}
JAVA SCRIPT

JavaScript is the programming language that can be used to program the Web pages.
It is written between <script> tags.
It can be written inside the HTML, but as CSS, creating a separate file for JavaScript (*.js)
and called by HTML is preferred for reusability and ease of coding.
The js file will be created in text editor and saved, for example code.js.
Then it will be called in the HTML file within the head using the following command:
<script src=“code.js”>
</script>

First Example:
In this code the Code.js file will be called in Webpage.html to show a statement. The
function document.write is used as a JavaScript command.

Code.js:
document.write("This statement is written inside JS file");

Webpage.html:
<!doctype html>
<html>
<head>
<title> Welcome to Java Script</title>
<script src="Code.js">
</script>
</head>
<body>
<form>
</body>
</html>

Variables in JS
In java script, variables can be a number, string or Boolean. Even if it is not compulsory to
write the command “var” but it is preferred for code understanding.
Code.js: ( In HTML file only calling is required)
var x=4;
var y=7;
var z=x+y;
document.write(“The addition result is ” + z)
//+z to show two elements the text and the value.

IF Conditional Statement
Syntax:
if(condition)
{ Statements to run when the condition is true}
else {in case of the condition is not true}

Example:
var x=4; var y=7;
if (x > y)
{
document.write ( "x is greater than y and it is equal to " + x );
}
else
{document.write ( "y is equal to or greater than x and it is equal to " + y); }
For Loop Statement
Syntax :
for ( initial value; final value; condition)
{
Repeated Statement(s)
}

Example:
for (var i=1;i<=5;i++)
{
document.write(" This is the repeated statement... ");
}

Syntax :
var Arrayname= [ elment 1, element 2, …. Element n]

Example:
var users=["Ahmed Saad", "Ali Salim", "Layla Mohammed",];
document.write (users[0]);
//The first user “Ahmed Saad” will be shown

Functions:
Function are used to reduce the code complexity and to be reused multiple times. The
function is defined and then called. The example below shows “add” function which
receive two numbers and find the summation.

function add(x, y) //defining


{
z=x+y;
document.write(" The addition result is " + z);
}
add( 7 , 9); //calling

The previous function sends the results directly to the page, however; if it is required to
return the result of the function to the code, the following example is used:

function add(x, y)
{
z=x+y;
return (z);
}

m= add( 7 , 8);

document.write(" The addition result is " + m);

Applying JS codes in HTML buttons

Changing text style using java script:


In this code, the font color and background for a certain paragraph will be changed after
pressing a button.
In Webpage.html file, the id=text-1 is used as identifier for the paragraph. Then <button>
element is added with the property onclick, which is used to call a function called
changeStyle. The changeStyle function is called from the Code.js file. Which is responsible
of changing the font color.
In Code.js file, the document.getElementById is called to call the element by ID (Elements
can be called by other ways as class or tag). Then the same ID is specified and the style
properity is called. The color is the target for the style in this case, hence it is changed to
“blue”.

//Webpage.html
<!doctype html><!doctype html>
<html>
<head>
<title> Welcome to Java Script</title>
<script src="Code.js">
</script>
</head>
<body>
<p id="text-1"> TISHK INTERNATIONAL UNIVERSITY </p>
<button onclick="changeStyle()"> Submit </button>
</body>
</html>

//Code.js
function changeStyle()
{
document.getElementById("text-1").style.color="blue";
}
Changing text contents
innerHTML is used to set the text inside the element. For the paragraph of the id : text-1
the text is changed from Old Text to New Text after pressing on the button.

//Webpage.html
<!doctype html><!doctype html>
<html>
<head>
<title> Welcome to Java Script</title>
<script src="Code.js">
</script>
</head>
<body>
<p id="text-1"> Old Text </p>
<button onclick="changeText()"> Submit </button>
</body>
</html>

//Code.js
function changeText()
{
document.getElementById("text-1").innerHTML=" New Text";
}

Reading text contents


In the previous example, the text in the paragraph tag <p> ( with ID text-1) is changed. In
this example the text will be read by the code and to ensure of reading it correctly, it will
be copied to the next paragraph (id text-2).
//Website.html
<!doctype html>
<html>
<head>
<title> Welcome to Java Script</title>
<script src="Code.js">
</script>
</head>
<body>
<p id="text-1"> This text will be copied </p> <br>
<p id="text-2"> This text will be changed to be like the text above </p>
<button onclick="changeText()"> Submit </button>
</body>
</html>

//Code.js
function changeText()
{
var myText=document.getElementById("text-1").innerHTML;
document.getElementById("text-2").innerHTML=myText;
}
Reading Input text contents:
In this example, the input of the user using input text box will be read and copied to the
paragraph.

//Website.html
<!doctype html>
<html>
<head>
<title> Welcome to Java Script</title>
<script src="Code.js">
</script>
</head>
<body>
<p id="text-1"> This text will be copied :</p>
<input type ="text" id="input-1" name=" ">
<p id="text-2"> This text will be changed to user input </p>
<button onclick="changeText()"> Submit </button>
</body>
</html>
Code.js
function changeText()
{
var myText=document.getElementById("input-1");
var oldtext=myText.value;

var updateMe=document.getElementById("text-1");
updateMe.innerHTML=oldtext;
}

Password Validation
In this section, the user input will be checked if it is match the saved password (1234) or
not. If the password is true , the sentence “ Successful Login” will be shown, otherwise,
the sentence “Wrong password” will be shown. Note that if statement is required to check
the validity of the input text.
Website.html
<!doctype html>
<html>
<head>
<title> Welcome to Java Script</title>
<script src="Code.js">
</script>
</head>
<body>
<p> Please Enter The Password :</p>
<input type ="text" id="input-1" name=" ">
<p id="text-1"> The Login result will be shown here </p>
<button onclick="checkPassword()"> Submit </button>
</body>
</html>

Code.js
function checkPassword()
{
var myText=document.getElementById("input-1").value;

if (myText=="1234")
document.getElementById("text-1").innerHTML="Successful Login";
else
document.getElementById("text-1").innerHTML="Wrong Password";
}

//Q: Use the for loop to count the number of login attempts and show it on the page.

You might also like