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.
