IT 223 - WEB SYSTEMS

AND TECHNOLOGIES

HTML, CSS
& JAVASCRIPT
CASCADING
STYLE SHEETS
(CSS)
TOPIC CONTENTS: CSS

• D e fi n i t i o n
• CSS Syntax
• CSS Selectors
• Setting up CSS in
HTML Documents
• CSS3
TOPIC CONTENTS: CSS

• Re s p o n s i v e We b
Design
• F l e x b ox
• Grid Layout
• Media Queries
• B re a k p o i n t s
• CSS Library
WHAT IS CSS?
CSS or Cascading Style Sheets is a
style sheet language used for
specifying the presentation and
styling of a document written in a
markup language such as HTML or
XML. CSS is a cornerstone
technology of the World Wide Web,
alongside HTML and JavaScript.
WHAT IS CSS?
CSS or Cascading Style Sheets is a
style sheet language used for
specifying the presentation and
styling of a document written in a
markup language such as HTML or
XML. CSS is a cornerstone
technology of the World Wide Web,
alongside HTML and JavaScript.
WHAT IS CSS?

CSS is designed to enable the

separation of content and
presentation, including layout,
colors, and fonts.
WHAT IS CSS?

This separation can improve content

accessibility; provide more flexibility
and control in the specification of
presentation characteristics;
WHAT IS CSS?

Enable multiple web pages to share

formatting by specifying the relevant
CSS in a separate .css file, which
reduces complexity and repetition in
the structural content;
WHAT IS CSS?

And enable the .css file to be cached

to improve the page load speed
between the pages that share the
file and its formatting.
WHAT IS CSS?

CSS initial release was on December

17, 1996 and was developed by the
retired World Wide Web Consortium
(W3C).
CSS SYNTAX

CSS has a simple syntax and

uses a number of English
keywords to specify the names of
various style properties.
CSS SYNTAX

The selector points to the HTML element you want to

style.
SELECTOR TYPES

Selectors may apply to the following:

• all elements of a specific type, e.g. the second-level

headers h2
• elements specified by attribute, in particular
• elements depending on how they are placed relative to
others in the document tree.
SELECTOR TYPES

Elements specified by attribute, in particular:

• id: an identifier unique within the document, denoted

in the selector language by a hash prefix e.g.
SELECTOR TYPES

Elements specified by attribute, in particular:

• class: an identifier that can annotate multiple

elements in a document, denoted by a dot prefix e.g.
TAKE NOTE:

Classes and IDs are case-sensitive, start with letters, and

can include alphanumeric characters, hyphens, and
underscores.

A class may apply to any number of instances of any

element. An ID may only be applied to a single element.
CSS SYNTAX

The declaration block contains one or more declarations

separated by semicolons.
CSS SYNTAX

Each declaration includes a CSS property name and a

value, separated by a colon.
CSS SYNTAX

Property defines the specific aspect or characteristic of an

element that you want to modify.
CSS SYNTAX

Value is an assigned setting or parameter for a given

property, determining how the selected element should
appear or behave.
CSS SYNTAX

Multiple CSS declarations are separated with semicolons,

and declaration blocks are surrounded by curly braces.
CSS SYNTAX
CSS SYNTAX

Example Explained

• p is a selector in CSS (it points to the HTML element

you want to style: <p>).
• color is a property, and red is the property value
• text-align is a property, and center is the property
value
PSEUDO-CLASS

Pseudo-classes are used in CSS selectors to permit

formatting based on information that is not contained in
the document tree. In other words, a pseudo-class is used
to define a special state of an element.
PSEUDO-CLASS

For example, it can be used to:

• Style an element when a user mouses over it

• Style visited and unvisited links differently
• Style an element when it gets focus
PSEUDO-CLASS SYNTAX
ANCHOR
PSEUDO-
CLASSES

Links can be displayed

in different ways:
ANCHOR PSEUDO-CLASSES

Output:
PSEUDO-CLASS

One example of a widely used pseudo-class is

which which identifies content only when the user "points
to" the visible element, usually by holding the mouse
cursor over it. It is appended to a selector as in
or
PSEUDO-CLASS

Note: a:hover MUST come after a:link and a:visited in the

CSS definition in order to be effective! a:active MUST
come after a:hover in the CSS definition in order to be
effective! Pseudo-class names are not case-sensitive.
PSEUDO-CLASS AND HTML CLASSES
Pseudo-classes can be combined with HTML classes:
When you hover over the link in the example, it will
change color:
HOVER ON <DIV>
An example of using the :hover pseudo-class on a <div>
element:
SIMPLE TOOLTIP HOVER
Hover over a <div> element to show a <p> element (like
a tooltip):
THE FIRST-CHILD PSEUDO-CLASS
The :first-child pseudo-class matches a specified element
that is the first child of another element.

Matching the first <i> element in all <p> elements:

In the following example, the selector matches any <p>

element that is the first child of any element
THE FIRST-CHILD PSEUDO-CLASS
The :first-child pseudo-class matches a specified element
that is the first child of another element.

Match all <i> elements in all first child <p> elements:

In the following example, the selector matches all <i>

elements in <p> elements that are the first child of another
THE :LANG PSEUDO-CLASS
The :lang pseudo-class
allows you to define
special rules for
different languages.

In the example, :lang

defines the quotation
marks for <q> elements
with lang="no":
THE :LANG PSEUDO-CLASS
The :lang pseudo-class
allows you to define
special rules for
different languages.

In the example, :lang

defines the quotation
marks for <q> elements
with lang="no":
ALL CSS PSEUDO-CLASSES
ALL CSS PSEUDO-CLASSES
ALL CSS PSEUDO-CLASSES
ALL CSS PSEUDO-CLASSES
ALL CSS PSEUDO-CLASSES
ALL CSS PSEUDO-ELEMENTS
More on:

https://www.w3schools.com/css/css_pseudo_classes.asp
SETTING UP CSS IN
HTML DOCUMENTS
CSS can be added to HTML
documents in 3 ways:

• Inline - by using the style

attribute inside HTML
elements
• Internal - by using a <style>
element in the <head>
section
• External - by using a <link>
INLINE CSS
An inline CSS is used to apply a
unique style to a single HTML
element.

An inline CSS uses the style

attribute of an HTML element.

The following example sets the

text color of the <h1> element
to blue, and the text color of the
<p> element to red:
INTERNAL CSS

An internal CSS is used to define a style for a

single HTML page.

An internal CSS is defined in the <head> section of

an HTML page, within a <style> element.
INTERNAL CSS

The following example sets

the text color of ALL the
<h1> elements (on that
page) to blue, and the text
color of ALL the <p>
elements to red.

In addition, the page will be

displayed with a
"powderblue" background
INTERNAL CSS

The following example sets

the text color of ALL the
<h1> elements (on that
page) to blue, and the text
color of ALL the <p>
elements to red.

In addition, the page will be

displayed with a
"powderblue" background
EXTERNAL CSS

An external style sheet is

used to define the style
for many HTML pages.

To use an external style

sheet, add a link to it in
the <head> section of
each HTML page:
EXTERNAL CSS

An external style sheet is

used to define the style
for many HTML pages.

To use an external style

sheet, add a link to it in
the <head> section of
each HTML page:
EXTERNAL CSS

The external style sheet

can be written in any text
editor. The file must not
contain any HTML code,
and must be saved with
a .css extension.

Here is what the Tip: With an external style sheet, you can
"styles.css" file looks like: change the look of an entire web site, by
changing one file!
More on:

https://www.w3schools.com/html/html_css.asp
CSS3

CSS3 stands for Cascading Style

Sheet level 3, which is the
advanced version of CSS. It is
used for structuring, styling, and
formatting web pages.
CSS3

Several new features have been

added to CSS3 and it is
supported by all modern web
browsers.
CSS3

The most important feature of

CSS3 is the splitting of CSS
standards into separate modules
that are simpler to learn and use.
CSS VS CSS3
CSS VS CSS3
CSS VS CSS3
CSS VS CSS3
CSS VS CSS3
CSS3 NEW
FEATURES
Combinator: CSS3 has a new
General sibling combinator which
matches up with sibling elements
via the tilde (~) combinator.
CSS3 NEW
FEATURES
CSS Selectors: CSS3 selectors
are much advanced in
comparison to simple selectors
offered by CSS, and are termed
as a sequence of easy to use and
simple selectors.
CSS3 NEW
FEATURES
Pseudo-elements: Plenty of new
pseudo-elements have been
added to CSS3 to give easy
styling in depth. Even a new
convention of double colons :: is
also added.
CSS3 NEW
FEATURES
Border Style: The latest CSS3
also has new border styling
features like border-radius,
image-slice, image-source, and
values for “width stretch”, etc.
CSS3 NEW
FEATURES
Background style properties:
New features like background-
clip, size, style, and origin
properties have been added to
CSS3.