XP

History of HTML

1991 HTML first published

1995 HTML 2.0 After HTML 4.01 was released, focus shifted
to XHTML and its stricter standards.
1997 HTML 3.2

1999 HTML 4.01 XHTML 2.0 had even stricter standards than
1.0, rejecting web pages that did not comply.
It fell out of favor gradually and was
2000 XHTML 1.0
abandoned completely in 2009.

2002
HTML5 is much more tolerant and can handle
- XHTML 2.0
2009 markup from all the prior versions.

Though HTML5 was published officially in

2012 HTML5
2012, it has been in development since 2004.
 XP
What is HTML5?

• HTML5 is the newest version of HTML, only recently gaining

partial support by the makers of web browsers.
• It incorporates all features from earlier versions of HTML,
including the stricter XHTML.
• It adds a diverse set of new tools for the web developer to use.
• It is still a work in progress. No browsers have full HTML5
support. It will be many years – perhaps not until 2019 or later
- before being fully defined and supported.
• See: http://html5test.com/
 XP
Most Important Differences between
HTML vs HTML5 (1)

• In HTML video and audio are not supported whereas in HTML5, video, and
audio are integrated into it.
• HTML is compatible with almost all the browsers whereas HTML5 is
supported by most of the modern browsers such as Firefox, Mozilla, and
Chrome etc.
• In HTML, JavaScript and browser interface will run in the same thread
whereas in HTML5 we can run JavaScript in the background with help of web
worker API can run in different threads.
• In HTML, vector graphics is supported with help of other tools such as Silver
light, Flash etc. whereas in HTML5 vector graphics is supported by default it
has canvas and SVG inbuilt.
• In HTML5 applet tag was removed which is used for displaying applets and
object tag was introduced whereas, in HTML, applet tag is being used.

Working with CSS 3

Prepared by: C. Hueckstaedt
 XP
Most Important Differences between
HTML vs HTML5 (2)

• In HTML, <acronym> tag was used for displaying abbreviation whereas in

HTML5 this tag is replaced by the <abbr> tag which will be used for the same
purpose.
• HTML is unable to handle inaccurate syntax and other errors whereas HTML5
is capable of handling the errors.
• HTML5 provides further new web form elements, such as email and www
textboxes, calendars, color palettes, canvas etc.
• Drag and Drop functionality
• Many new tag, e.g. <footer>, <header>, <aside>

Working with CSS 4

Prepared by: C. Hueckstaedt
 XP

Working with
Cascading Style Sheets (CSS)

Presenter: Assist.Prof.Dr. Fatih ABUT

5
 XP
What is CSS?

• A simple mechanism for controlling the style of a Web

document without compromising its structure.

• It allows you to separate visual design elements (layout,

fonts, colors, margins, and so on) from the contents of a
Web page.

• Allows for faster downloads, streamlined site maintenance,

and global control of design attributes across multiple
pages.

Working with CSS 6

Prepared by: C. Hueckstaedt
 XP
How to write CSS? (1)

• Selector
– HTML element tags
(examples: p, h2, body, img, table)
– class and ID names
• Property (examples: color, font-size)
• Value (examples: red, 14pt)

Working with CSS 7

Prepared by: C. Hueckstaedt
 XP
How to write CSS? (2)

• The basic syntax of a CSS rule:

selector { property 1: value 1; property 2: value 2 }

Example:
p { font-size: 8pt; color: red }

Notice the { } around the rule and the : before each

value!
Working with CSS 8
Prepared by: C. Hueckstaedt
 XP
How to write CSS? (3)

property names
declarations

p{
font-size: x-large ;

background-color: yellow
}

selector string declaration block

Working with CSS 9

Prepared by: C. Hueckstaedt
 XP
Selector Strings

• Type selector:
– Element type, such as body, p, hr, etc.
• See previous example
– Multiple element types using the same style are separated by comma
• h1, h2, h3, h4, h5, h6 {background-color:purple}

• ID selector:
– #p1, #s1 {background-color: blue}
– <p id=“p1”> … </p>
– <span id=“s1”>…</span>
– id values are case-sensitive
Working with CSS 10
Prepared by: C. Hueckstaedt
 XP
Sector Strings

• Class selector:
– .myitalic {font-style: italic}
– .myred {color: red}
– <span class=“myitalic myred”> … </span>
– class values are case sensitive
– multiple classes can be applied, separated by space
– All but a few elements, such as html, head, and elements that
appear as content of head, have the class attribute

• ID and class selectors can be prefixed by an element type name

– p.right {text-align: right}
– p#left {text-align: left}
– <p class=“right”> … </p>
– <p id=“left”> … </p>
Working with CSS 11
Prepared by: C. Hueckstaedt
 XP
Three ways to include CSS:

1. Local (Inline)
2. Global (Embedded, or Internal)
3. Linked (External)

Working with CSS 12

Prepared by: C. Hueckstaedt
 XP
1. Local

• Inline style sheet.

• Placed inside tags.
• Specific to a single instance of an html tag on a
page.
• Must be used instead of <font> tags to specify
font size, color, and typeface and to define
margins, etc.
• Use to override an external or embedded style
specification.
Working with CSS 13
Prepared by: C. Hueckstaedt
 XP
Local (inline)

• Example
<p style="font-size: 10pt; color: red; font-weight: bold;
font-family: Arial, Helvetica, sans-serif">
This is a local stylesheet declaration. </p>

On the browser:

Working with CSS 14

Prepared by: C. Hueckstaedt
 XP
2. Global

• Embedded or internal style sheet

• Applicable to an entire document
• Styles are defined within the <style> </style> tag,
which is placed in the header of the html file (i.e.,
within <head> and </head>).

Working with CSS 15

Prepared by: C. Hueckstaedt
 XP
Global (Internal)

• Example:

<html>
<head>
<title>Title</title>
<style type="text/css">
<!--[STYLE INFORMATION GOES HERE] -->
</style>
</head>
<body>
[DOCUMENT BODY GOES HERE]
</body>
</html>
Working with CSS 16
Prepared by: C. Hueckstaedt
 XP
3. Linked

• External style sheet

• Styles are saved in a separate file, with the
extension .css
• This single stylesheet can be used to define the
look of multiple pages.

Working with CSS 17

Prepared by: C. Hueckstaedt
 XP
Linked (External)

• Example
Save this text
In TextPad,Notepad, etc.…
file as
p {font-family: verdana, sans- whatever.css
serif; font-size: 12pt; color: red}

h1 {font-family: serif; font-size:

14pt; color: green}

h2 {font-family: serif; font-size:

11pt; color: blue}

Working with CSS 18

Prepared by: C. Hueckstaedt
 XP
Linked (External)

• Example (continued)

To apply the stylesheet “whatever.css“ to an

HTML document, call it in from the header:
<head>
<link rel="stylesheet"
href=“whatever.css" type="text/css">
</head>

Working with CSS 19

Prepared by: C. Hueckstaedt
 XP
Inheritance: which style prevails when
several are present?

• Inline (local) overrides internal (global)

• Internal (global) overrides external (linked).

Working with CSS 20

Prepared by: C. Hueckstaedt
 XP
Cascading

The way styles will be used when there is more than one style
specified for an HTML element:

1. Browser default
2. External Style Sheet (Linked) (in an external .css file)
3. Internal Style Sheet (Global, or embedded) (inside the <head> tag)
4. Inline Style (Local) (inside HTML element)

• An inline style (inside an HTML element) has the highest priority,

which means that it will override every style declared inside the
<head> tag, in an external style sheet, and in the browser (default
value).
Working with CSS 21
Prepared by: C. Hueckstaedt
 XP
Let’s try this now!

<h1 style=“text-align: center; font-weight:bold; color:

blue”> Styling with CSS! </h1>

<p style="font-size: 10pt; color: red; font-weight: bold;

font-family: Arial, Helvetica, sans-serif“ >
Write whatever you want here </p>

Working with CSS 22

Prepared by: C. Hueckstaedt
 XP
Grouping properties

• Separate properties with a semi-colon

– Example:
p {text-align:center;color:red; font-
family:Arial; font-style:italic}

Working with CSS 23

Prepared by: C. Hueckstaedt
 XP
Grouping selectors

• Separate selectors with a comma

– Example:
h1,h2,h3,h4,h5,h6 { color: green }
(each header will be green)
• Separate selectors with a space
– Example:
p li { color: red }
(only items within a list and a paragraph tag
will be red)
Working with CSS 24
Prepared by: C. Hueckstaedt
 XP
The class Selector

• With a class selector you can define different styles for the
same type of HTML element
• Examples:
First define the class:
p.right {text-align: right; color: red; font-style: italic}
p.blue {text-align: center; color:blue}
Then use the class in your HTML code :
<p class="right"> This paragraph will be right-aligned, italic, and red.
</p>
<p class=“blue"> This paragraph will be center-aligned and blue. </p>

Working with CSS 25

Prepared by: C. Hueckstaedt
 XP
The class Selector

• You can also omit the tag name in the selector to

define a style that will be used by all HTML
elements that have this class.

• Example:
.poem {text-align: center; font-style:italic}

Any HTML element with class=“poem" will be

center-aligned and italic.
Working with CSS 26
Prepared by: C. Hueckstaedt
 XP
The class Selector

• Example (continued)
Both elements below will follow the rules in the
".poem“ class:

<h1 class=“poem"> This heading will be center-aligned

and italic </h1>

<p class=“poem"> This paragraph will also be center-

aligned and italic. </p>
Working with CSS 27
Prepared by: C. Hueckstaedt
 XP
Class Example

<style>
p {font-family: sans-serif; font-size: 10pt}
h1 {font-family: serif; font-size: 30pt}
h2 {font-family: serif; font-size: 24pt}
.boldred {color: red; font-weight: bold}
.green {color: green}
.tinyblue {color: blue; font-size: 8pt}
</style>

The tags and classes can then be used in combination:

<h1 class=“boldred">This is rendered as 30-point red serif bold

text.</h1>
<p class=“boldred">This is rendered as 10-point red sans-serif bold
text.</p>
Working with CSS 28
Prepared by: C. Hueckstaedt
 XP
ID Selectors

• IDs are identical to classes, except that there can

only be one element with a given ID in a
document
• In the HTML document:
– <BODY id="introduction">
• In the style sheet:
– BODY#introduction {font-size: 1.2em}
– #introduction {font-size: 1.2em}

Working with CSS 29

Prepared by: C. Hueckstaedt
 XP
Pseudo-Classes

• The pseudo-classes :link and :visited are used to

define styles for links and visited links
• :hover is used to define a style for an element when
the mouse is over that element
• :focus is used to define a style when the element is
ready to accept input
• :active is used while an element is being activated by
the user (during the time between pressing the
mouse button and releasing it or pressing it again in
a different place)
Working with CSS 30
Prepared by: C. Hueckstaedt
 Examples of Rules for XP
Pseudo-Classes

• A:link {color: blue}

• A:visited {color: purple}
• A:hover {font-size: 1.5em}
• A:active {color: red}
• INPUT:focus {background-color: yellow}
From a usability point of view, it is not
recommend to change the default
colors of :link and :visited

Working with CSS 31

Prepared by: C. Hueckstaedt
 XP
Applying styles to portions of a document
(Container elements)

• <div>
– A division tag: to “package” a block of document into
one unit. It defines a block element.
– Causes a line break, like <br> and <p>.
• <span>
– “Wraps” a portion of text into a unit, but doesn't cause a
line break. Allows styles to be applied to an 'elemental'
region (such as a portion of a paragraph).

Working with CSS 32

Prepared by: C. Hueckstaedt
 XP
Examples (1)

<p><span class="foo">This text is rendered as

foo-style</span> and this is not. </p>

<div class="foo">
<p>The "foo" style will be applied to this text, and
to <a href="page.html">this text</a> as well.
</div>

Working with CSS 33

Prepared by: C. Hueckstaedt
 XP
Examples (2)

• In CSS:
div.classname a:link { color: #123456; }
div.classname a:hover { color: #123; }
div.classname a:visited { color: #654321; }

• In HTML:
<div class="classname">
<a href="#link">link</a>
</div>
Working with CSS 34
Prepared by: C. Hueckstaedt
 XP
Using Font Families

• The font-family attribute allows you to choose a font face

for use in Web pages.
• CSS works with two types of font faces:
– a specific font, which is a font such as Arial, Garamond, or
Times New Roman that is actually installed on a user’s
computer.
– a generic font, which is a general description of a font,
allowing the operating system to determine which installed
font best matches it.
• CSS supports five generic font types: serif, sans-serif,
monospace, cursive, and fantasy.

Working with CSS 35

Prepared by: C. Hueckstaedt
 XP
Managing Font Size Continued

• In CSS, you use the font-size attribute to

manage font sizes. Font sizes can be expressed:
– as a unit of length
– with a keyword description
– as a percentage of the parent element
– with a keyword expressing the size relative to
the font size of the parent element

Working with CSS 36

Prepared by: C. Hueckstaedt
 XP
Absolute and Relative Units

• If you choose to express size as a unit of length, you can use

absolute units or relative units.
– absolute units define the font size based on one of the following
standard units of measurement: mm (millimeter), cm (centimeter),
in (inch), pt (point), and pc (pica).
– use a relative unit, which expresses the font size relative to a size
of a standard character, e.g. “em”.

Working with CSS 37

Prepared by: C. Hueckstaedt
 XP
Expressing Font Size
as a Percentage of the Parent Tag

This figure shows the impact of such a style definition on boldface text in a Web page.
The style has the same impact within a heading, since the heading is the parent
element, and the boldface text is increased to 150% of the surrounding heading text.

Working with CSS 38

Prepared by: C. Hueckstaedt
 XP
Specifying Word, Letter,
and Line Spacing

• Use CSS font attributes to control the spacing

between letters, words, and lines of text.
• To set the space between individual letters, you
use the letter-spacing attribute, with the syntax:
letter-spacing: size
– size can either have the value “normal”, which allows
the browser to determine the letter spacing based on the
font being used, or a number expressed in the same
measuring units used to describe font size (inches,
millimeters, centimeters, em units, etc.)
Working with CSS 39
Prepared by: C. Hueckstaedt
 XP
Specifying Word, Letter,
and Line Spacing Continued
• Another technique to change the spacing between individual
words is the word-spacing attribute, with the syntax:
word-spacing: size
– size is either equal to “normal,” to allow the browser to set the
word spacing, or to a specific length using the standard units of
measure
• Use the line-height attribute to modify the vertical space
between lines of text.
• Graphic designers may know this spacing as leading.
• The line-height attribute specifies the minimum distance
between the baselines of adjacent lines.

Working with CSS 40

Prepared by: C. Hueckstaedt
 XP
Line Height

• To set the line height, use the style:

line-height: size
– size is either a specific length, a percentage of the font
size, or a number representing the ratio of the line
height to the font size
– the standard ratio is 1.2, which means that the line
height is 1.2 times the font size
– to make paragraphs double-spaced use the style
definition p {line-height: 2}

Working with CSS 41

Prepared by: C. Hueckstaedt
 XP
Setting Font Styles and Weights

• Font styles are controlled by the font-style attribute.

• The font-style attribute has three possible values:
normal, italic, or oblique.
• The italic and oblique styles are similar in appearance
though there can be small differences depending on
the font.

Working with CSS 42

Prepared by: C. Hueckstaedt
 XP
Font Weights

• CSS considers “bold” to be an aspect of the font’s weight,

or line thickness.
• Font weights can be expressed as an absolute number
ranging in intervals of 100, going from 100 (the lightest)
up to 900 (the heaviest or “most bold”).
• For most fonts, you can assume that:
– a weight of 400 corresponds to normal text
– a weight of 700 can be used for bold text
– a weight of 900 for “extra” bold text
• Use the keywords “normal” and “bold” in place of a
weight value. Working with CSS 43
Prepared by: C. Hueckstaedt
 XP
Aligning Text Horizontally
and Vertically

• Use the text-align attribute to left, center, right or

justify text.
• To do this with CSS, use the text-align attribute:
text-align: alignment
– alignment can be left, center, right, or justify
– setting the text-align value to “justify” stretches the
text, extending it from the left to the right margin
– some browsers will ignore the text-align attribute value

Working with CSS 44

Prepared by: C. Hueckstaedt
 XP
Applying the Center Text-Align Style

This figure shows how to apply the center text-align style.

Working with CSS 45

Prepared by: C. Hueckstaedt
 XP
Vertically Align Elements

• CSS allows you to vertically align elements such

as text and images relative to the surrounding text.
• The syntax for setting the vertical alignment is:
vertical-align: alignment
– alignment has one of the keyword values

Working with CSS 46

Prepared by: C. Hueckstaedt
 XP
Values of the Vertical
Alignment Attribute

This figure shows the alignment keyword values.

Working with CSS 47

Prepared by: C. Hueckstaedt
 XP
Examples of the
Vertical Alignment Values

This figure shows an example of each vertical-align value.

Baseline is the default value for vertical alignment.

Working with CSS 48

Prepared by: C. Hueckstaedt
 XP
Indenting Text

• CSS allows you to indent the first line of a

paragraph.
• The syntax for creating an indentation is:
text-indent: indentation
– indentation is either the length, in either absolute or
relative units, of the indentation or a percentage of the
width of the paragraph

Working with CSS 49

Prepared by: C. Hueckstaedt
 XP
Special Text Attributes

• CSS provides three attributes for special text

effects:
– text-decoration
– text-transform
– font-variant

Working with CSS 50

Prepared by: C. Hueckstaedt
 XP
Values of the
Text-Decorating Attribute

This figure shows the text-decoration attribute can be used to underline your text
or place a line over or through your text. You can also make your text blink
on and off using the text-decoration: blink attribute.

Working with CSS 51

Prepared by: C. Hueckstaedt
 XP
The Text-Transform Attribute

• The text-transform attribute can be used to:

– capitalize the first letter of each word in a
paragraph
– display the text in all capital letters
– display the text in all lowercase letters

Working with CSS 52

Prepared by: C. Hueckstaedt
 XP
Values of the
Text-Transform Attribute

This figure shows the effect of the various text-transform values.

Working with CSS 53

Prepared by: C. Hueckstaedt
 XP
The Font-Variant Command

• Use the font-variant command to create small

caps.
• Small caps are capital letters that are the same size
as lowercase letters.
• The syntax for the font-variant attribute is:
font-variant: small-caps

Working with CSS 54

Prepared by: C. Hueckstaedt
 XP
Values of the Font-Variant Attribute

This figure shows values of the font-variant attribute.

Working with CSS 55

Prepared by: C. Hueckstaedt
 XP
The font Attribute

• The font attribute provides an efficient way for you to define

multiple attributes.
• The syntax for the font attribute is:
font: font-style; font-variant; font-weight;
font-size/line-height; font-family
– font-style, font-variant, and so forth are the values for font and text
style attributes
• The font attribute requires that you specify the font size, font
variant, and font weight.
• If a font attribute is not included, the browser assigns the
normal or standard value for the element.

Working with CSS 56

Prepared by: C. Hueckstaedt
 XP
The color Attribute

• CSS works with most of the color names supported by HTML.

• Another way to specify color in CSS is to use RGB color
values.
• You can enter the hexadecimal form of the color value or the
RGB color values directly.
– for example, to change the body text color to teal, use any of
the following styles:
body {color:teal}
body {color: #008080}
body {color: rgb (0,128,128)}
body {color: rgb (0%, 50%, 50%}

Working with CSS 57

Prepared by: C. Hueckstaedt
 XP
Changing the Color of
the H1-H6 Headings
RGB color values range from 0 to 255, so specifying a color percentage of 50% for
green and blue is close to a color value of 128. This figure shows an example of
changing the color of the H1-H6 headings.

Working with CSS 58

Prepared by: C. Hueckstaedt
 XP
Working with Background Color

• By default, elements take on the background color

of their parent element.
• To change the background color of almost any
element, use the background-color style.

Working with CSS 59

Prepared by: C. Hueckstaedt
 XP
Applying a Background Color

This figure shows how to apply a background color.

Working with CSS 60

Prepared by: C. Hueckstaedt
 XP
Working with Background Images

• Almost any element on the page can also be displayed with its
own background image.
• The background image has four attributes:
– the source of the image file
– how the image is repeated in the background
– where the image is placed on the background
– whether the image scrolls with the display window
• To specify which file to use for a background, use the syntax:
background-image: url(URL)
– URL is the location of the image file

Working with CSS 61

Prepared by: C. Hueckstaedt
 XP
Applying a Background Image
to an Element
This figure demonstrates how you can apply this style to the <b> tag to create an
interesting design for a section of boldface text.

Working with CSS 62

Prepared by: C. Hueckstaedt
 XP
Working with Background
Images Continued

• By default, background images are tiled both

horizontally and vertically behind the element
until the entire element is filled.
• Control the way the tiling occurs using the
background-repeat style attribute.
• The background-repeat attribute has four
possible values.

Working with CSS 63

Prepared by: C. Hueckstaedt
 XP
Values of the
Background-Repeat Attribute
This figure shows the background-repeat attributes four possible values.

Working with CSS 64

Prepared by: C. Hueckstaedt
 XP
Examples of the
Background-Repeat Values
This figure shows examples of each background-repeat values.

Working with CSS 65

Prepared by: C. Hueckstaedt
 XP
The Background-Position Attribute

• Background images are placed in the upper-left corner of

their element, and then repeated (if tiling is being used)
from there.
• You can move the background image to a different location
using the background-position style attribute.
• The background-position attribute has two values:
– the first indicates the distance from the left edge of the element
– the second indicates the distance from the element’s top edge
• These values can be expressed as a percentage of the
display area, in units of length, or with keywords.

Working with CSS 66

Prepared by: C. Hueckstaedt
 Background-Position Keywords XP
and Percentages
This figure shows how background-position keywords relate to the percentage values.

Working with CSS 67

Prepared by: C. Hueckstaedt
 XP
Working with List Styles

• CSS provides more control over the appearance and

behavior of ordered, unordered, and definition lists than
does HTML.
• CSS allows you to specify the types of labels attached to
list items and how to position the labels with respect to the
label text.
• The list-style-type attribute allows you to choose the type
of label to display alongside text formatted with the <ul>,
<ol>, or <li> tags.

Working with CSS 68

Prepared by: C. Hueckstaedt
 XP
Values of the
List-Style-Type Attribute
This figure shows the possible values of the list-style-type attribute.

Working with CSS 69

Prepared by: C. Hueckstaedt
 XP
Creating a Nested Outline Style

Use contextual selectors to create an outline style for several levels of nested lists.
This figure shows a set of contextual selectors used to create an outline style
for different outline levels.

Working with CSS 70

Prepared by: C. Hueckstaedt
 XP
Using a list-style-image Attribute

• You can create a label, not included in the list-style-type

values, with an image file and the list-style-image
attribute.
• The syntax for applying this attribute is:
list-style-image: url(URL)
– URL is the location and the filename of the image file
• It’s a good idea to include the list-style-type
attribute along with the list-style-image attribute.

Working with CSS 71

Prepared by: C. Hueckstaedt
 XP
Defining the List Style Position

• List items are treated by CSS as if they have an

invisible box around them.
• The syntax for specifying the location of the list
item label is:
list-style-position: location
– location is either “inside” or the default value,
“outside.”

Working with CSS 72

Prepared by: C. Hueckstaedt
 XP
Defining the Position of the List Label

This figure shows that the labels for the list items can be placed either outside or inside the box.

Working with CSS 73

Prepared by: C. Hueckstaedt
 XP
The list-style Attribute

• You can combine all of these attributes into the

list-style attribute.
• The syntax for this style is:
list-style: list-style-type list-style-
image list-style-position
– list-style-type, list-style-image, and list-style-position
are the attribute values for each of the individual list
style attributes

Working with CSS 74

Prepared by: C. Hueckstaedt
 XP
Defining the Appearance
of a List Label

This figure shows how to define the appearance of a list label.

Working with CSS 75

Prepared by: C. Hueckstaedt
 XP
Controlling Margins

• The margin is the space between the block-level element

and the parent element.
• There are four attributes that control the margin size:
– margin-top - the space between the top of the box and the
top margin
– margin-right - the space between the right side of the box
and the right margin
– margin-bottom - the space between the bottom of the box
and the bottom margin
– margin-left - the space between the left side of the box and
the left margin
Working with CSS 76
Prepared by: C. Hueckstaedt
 XP
Setting Padding Size

• Padding refers to the amount of space between

the element and its border.
• Four attributes are used to control the size of the
element’s padding:
– padding-top
– padding-right
– padding-bottom
– padding-left

Working with CSS 77

Prepared by: C. Hueckstaedt
 XP
Formatting the Border

• CSS provides a variety of attributes for managing the box’s

border width, border color, and border style.
• To combine all of the border attributes, use the syntax:
border: border-width border-style border-color;
• These attributes can be applied to all four borders at once, or
you can work with individual borders.
• There are a variety of ways with which border styles can be
expressed.
• Support for the border declaration is inconsistent across
browser types and versions.
Working with CSS 78
Prepared by: C. Hueckstaedt
 XP
Different Border Attributes

The figure
summarizes the
various border
attributes.

Working with CSS 79

Prepared by: C. Hueckstaedt
 XP
Example of Border-Style Values

Border widths can be

expressed using units
of length or with the
keywords thin,
medium, or think.

The border color can

be defined using color
names or color values.

This figure shows that

each of the nine
different styles that
can be applied to a
border.

Working with CSS 80

Prepared by: C. Hueckstaedt
 XP

Responsive Web
Design with
Bootstrap
 XP
What is Responsive Web Design?

• Responsive web design is about creating web sites

which automatically adjust themselves to look
good on all devices, from small phones to large
desktops.
• Bootstrap is the most popular HTML, CSS, and
JavaScript framework for developing responsive,
mobile-first web sites.
• Bootstrap is completely free to download and use!
 XP
What is Bootstrap?

• Bootstrap is a free front-end framework for faster

and easier web development
• Bootstrap includes HTML and CSS based design
templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many
other, as well as optional JavaScript plugins
• Bootstrap also gives you the ability to easily create
responsive designs
 XP
Bootstrap History

• Bootstrap was developed by Mark Otto and Jacob

Thornton at Twitter, and released as an open source
product in August 2011 on GitHub.
• Advantages of Bootstrap:
– Easy to use: Anybody with just basic knowledge of HTML and
CSS can start using Bootstrap
– Responsive features: Bootstrap's responsive CSS adjusts to
phones, tablets, and desktops
– Mobile-first approach: In Bootstrap 3, mobile-first styles are part
of the core framework
– Browser compatibility: Bootstrap is compatible with all modern
browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
 XP
Where to Get Bootstrap?

• There are two ways to start using Bootstrap on

your own web site.
– Download Bootstrap from getbootstrap.com
• If you want to download and host Bootstrap yourself, go
to getbootstrap.com, and follow the instructions there.
– Include Bootstrap from a CDN
• If you don't want to download and host Bootstrap yourself, you
can include it from a CDN (Content Delivery Network).
• MaxCDN provides CDN support for Bootstrap's CSS and
JavaScript. You must also include jQuery.
 XP
Bootstrap CDN

• You must include the following Bootstrap’s CSS from MaxCDN into your web page.
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >

• Advantage of using the Bootstrap CDN:

– Many users already have downloaded Bootstrap from MaxCDN when visiting another site. As a
result, it will be loaded from cache when they visit your site, which leads to faster loading time.
Also, most CDN's will make sure that once a user requests a file from it, it will be served from the
server closest to them, which also leads to faster loading time.
 XP
Create Web Page with Bootstrap (1)

• Add the HTML5 doctype

– Bootstrap uses HTML elements and CSS properties that require the
HTML5 doctype.
– Always include the HTML5 doctype at the beginning of the page,
along with the lang attribute and the correct character set:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
</html>
 XP
Create Web Page with Bootstrap (2)

• Bootstrap is mobile-first
– Bootstrap 3/4 is designed to be responsive to mobile devices. Mobile-first
styles are part of the core framework.
– To ensure proper rendering and touch zooming, add the
following <meta> tag inside the <head> element:

<meta name="viewport" content="width=device-width, initial-scale=1">

– The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
– The initial-scale=1 part sets the initial zoom level when the page is first
loaded by the browser.
 XP
Create Web Page with Bootstrap (3)

• Containers
– Bootstrap also requires a containing element to wrap
site contents.
– There are two container classes to choose from:
• The .container class provides a responsive fixed width
container. (See Sample)
• The .container-fluid class provides a full width container,
spanning the entire width of the viewport. (See Sample)
• Note: Containers are not nestable (you cannot put
a container inside another container).
 XP
Bootstrap Grids

• Bootstrap’s grid system allows up to 12 columns across the page.

• If you do not want to use all 12 columns individually, you can
group the columns together to create wider columns:
<div class="col-md-12">Span 12 columns</div>
<div class="col-md-6">Span 6</div><div class="col-md-6">Span 6</div>
<div class="col-md-4">Span 4</div><div class="col-md-8">Span 8</div>
<div class="col-md-4">Span 4</div><div class="col-md-4">Span 4</div> <div class="col-md-4">Span 4</div>

• Bootstrap's grid system is responsive, and the columns will re-

arrange automatically depending on the screen size.
 XP
Grid Classes

• The Bootstrap grid system has four classes:

– xs (for phones)
– sm (for tablets)
– md (for desktops)
– lg (for larger desktops)
– xl (for extra large desktops)
• The classes above can be combined to create more dynamic and
flexible layouts.
 XP
Basic Structure of a Bootstrap Grid

<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>

• First; create a row (<div class="row">). Then, add

the desired number of columns (tags with
appropriate .col-*-*classes). Note that numbers
in .col-*-* should always add up to 12 for each
row.
 XP
Bootstrap Tables

• A basic Bootstrap table has a light padding and only horizontal dividers.
– The .table class adds basic styling to a table:
• Striped Rows
– The .table-striped class adds zebra-stripes to a table:
• Bordered Table
– The .table-bordered class adds borders on all sides of the table and cells:
• Hover Rows
– The .table-hover class enables a hover state on table rows:
• Responsive Tables
– The .table-responsive class creates a responsive table. The table will then scroll
horizontally on small devices (under 768px). When viewing on anything larger than
768px wide, there is no difference:
 XP
Bootstrap Images

• Rounded Corners
– The .rounded class adds rounded corners to an image (IE8 does not support rounded
corners):
• Circle
– The .rounded-circle class shapes the image to a circle (IE8 does not support rounded
corners):
• Thumbnail
– The .img-thumbnail class shapes the image to a thumbnail:
• Responsive Images
– Images comes in all sizes. So do screens. Responsive images automatically adjust to fit
the size of the screen.
– Create responsive images by adding an .img-responsive class to the <img> tag. The
image will then scale nicely to the parent element.
– The .img-responsive class applies display: block; and max-width: 100%; and height:
auto; to the image:
 XP
Bootstrap Buttons

• Button Styles
– Bootstrap provides seven styles of buttons with the following
classes:
.btn-default
.btn-primary
.btn-success
.btn-info
.btn-warning
.btn-danger
.btn-link
 XP
Bootstrap Button Elements

• The button classes can be used on the following

elements:
– <a>
– <button>
– <input>
 XP
Button Sizes

• Bootstrap provides four button sizes with the

following classes:
.btn-xl
.btn-lg
.btn-md
.btn-sm
.btn-xs
 XP
References

• Discovering the Internet: Complete, Jennifer

Campbell, Course Technology, Cengage Learning,
5th Edition-2015, ISBN 978-1-285-84540-1.
• Basics of Web Design HTML5 & CSS3, Second
Edition, by Terry Felke-Morris, Peason, ISBN
978-0-13-312891-8.
• W3schools.com