Web Technologies

Course Code: BTCS 520-18

 Introduction
HTML
•HTML describes the different parts of a document
– Paragraphs, section headings, quotes, images, ...
•HTML does not describe the formatting of a document
•HTML is a logical markup language not a physical markup
language
•HTML was designed to be rendered on a wide variety of devices
– Graphical web browsers, text terminals, screen readers, ...

2
 Introduction
What is CSS?
•Cascading Style Sheets, referred as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.
•CSS handles the look and feel part of a web page.
•Using CSS, you can control
– the color of the text,
– the style of fonts,
– the spacing between paragraphs,
– how columns are sized and laid out,
– what background images or colors are used,
– as well as a variety of other effects.
3
 Introduction
What is CSS?
•CSS is easy to learn and understand but it provides a powerful
control over the formatting and presentation of an HTML
document.
•Most commonly, CSS is combined with the markup languages
HTML or XHTML.

4
 Introduction
Advantages of CSS
•CSS saves time
– We can write CSS once and then reuse the same sheet in
multiple HTML pages.
– We can define a style for each HTML element and apply it
to as many web pages as you want.

•Pages load faster

– Using CSS, we do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to
all the occurrences of that tag.
– So, less code means faster download times.

5
 Introduction
Advantages of CSS
•Easy maintenance
– To make a global change, simply change the style, and all
the elements in all the web pages will be updated
automatically.

•Superior styles to HTML

– CSS has a much wider array of attributes than HTML, so
we can give a far better look to our HTML page in
comparison to HTML attributes.

6
 Introduction
Advantages of CSS
•Multiple Device Compatibility
– Style sheets allow content to be optimized for more than
one type of device.
– By using the same HTML document, different versions of
a website can be presented for handheld devices such as
PDAs and cellphones or for printing.

•Global web standards

– Now HTML attributes are being deprecated and it is being
recommended to use CSS.
– So it’s a good idea to start using CSS in all the HTML
pages to make them compatible with future browsers.
7
 Introduction
Who Creates and Maintains CSS?
•CSS is created and maintained through a group of people within
the W3C called the CSS Working Group.
•The CSS Working Group creates documents called
specifications.
•When a specification has been discussed and officially ratified
by the W3C members, it becomes a recommendation.
•These ratified specifications are called recommendations
because the W3C has no control over the actual implementation
of the language.
•Independent companies and organizations create that software.

8
 Introduction
CSS Versions
•Cascading Style Sheets level 1 (CSS1) came out of W3C as a
recommendation in December 1996.
•This version describes the CSS language as well as a simple
visual formatting model for all the HTML tags.
•CSS2 became a W3C recommendation in May 1998 and builds
on CSS1.
•This version adds support for media-specific style sheets e.g.
printers and aural devices, downloadable fonts, element
positioning and tables.

9
 CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

•The selector points to the HTML element you want to style.

•The declaration block contains one or more declarations
separated by semicolons.
•Each declaration includes a CSS property name and a value,
separated by a colon.
•A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces. 10
 CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

•Selector: A selector is an HTML tag at which a style will be

applied. This could be any tag like <h1> or <table> etc.

•Property: A property is a type of attribute of HTML tag. Put

simply, all the HTML attributes are converted into CSS
properties. They could be color, border, etc.

•Value: Values are assigned to properties. For example, color

property can have the value either red or #F1F1F1 etc.

11
 CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

•Example:

h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

12
 CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

•Example:

H1, H2, H3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

13
 Types of CSS
Three Ways to Insert CSS

Styling can be added to HTML elements in 3 ways:

•Inline - using a style attribute in HTML elements
•Internal - using a <style> element in the HTML <head> section
•External - using one or more external CSS files

The most common way to add styling, is to keep the styles in

separate CSS files.

14
 Types of CSS
Inline Styling (Inline CSS)

•Inline styling is used to apply a unique style to a single HTML

element:
•Inline styling uses the style attribute.
•This example changes the text color of the <h1> element to
blue:

Example
•<h1 style="color:blue;">This is a Blue Heading</h1>

15
 Types of CSS
Internal Styling (Internal CSS)

•Internal styling is used to define a style for one HTML page.

•Internal styling is defined in the <head> section of an HTML

page, within a <style> element:

16
 Types of CSS
• Example

17
 Types of CSS
External Styling (External CSS)

•An external style sheet is used to define the style for many
pages.
•With an external style sheet, you can change the look of an
entire web site by changing one file!
•To use an external style sheet, add a link to it in the <head>
section of the HTML page:

18
 Types of CSS
• Example

19
 Types of CSS
External Styling (External CSS)
•An external style sheet can be written in any text editor. The file
should not contain any html tags. The style sheet file must be
saved with a .css extension.
•Here is how the "styles.css" looks:

20
CSS Properties

21
CSS Properties

22
CSS Properties

23
CSS Properties

24
CSS Properties

25
CSS Properties

26
 CSS Properties
Margin

27
 CSS Properties
Padding

28
 CSS Properties
Background/Images/Color

29
 Features of CSS3
• CSS3 is the 3rd level and latest version of CSS, the style
language of web.
• It includes all the features of CSS1, CSS2, CSS2.1 including
its own new features.
• It is an integral part of HTML5.

30
 Features of CSS3
CSS3 includes some new features, like new
•CSS3 selectors,
•rounded corners,
•box shadows,
•RGBA, HSL and HSLA colors,
•box sizing,
•Opacity,
•CSS3 Gradients,
•transitions,
•transformations,
•animations,
•multi-column layout,
•flex box,
•CSS grids, embedded fonts and Responsive web design . 31
Features of CSS3

32
Features of CSS3

33