Web Engineering 1

Lecture 8 – CSS Part 3

Faizullah Hamdard – Kandahar University

2023/05/27
Contents
▪ CSS Lists
▪ CSS Tables
▪ CSS Display
▪ CSS Position
▪ CSS Pseudo Classes
▪ CSS Pseudo Elements
▪ CSS Opacity
▪ CSS3 Gradients

2
 CSS Lists

In HTML, there are two main types of lists:

▪ unordered lists (<ul>) - the list items are marked
with bullets
▪ ordered lists (<ol>) - the list items are marked
with numbers or letters

3
 CSS Lists

The CSS list properties allow you to:

▪ Set different list item markers for ordered lists
▪ Set different list item markers for unordered lists
▪ Set an image as the list item marker
▪ Add background colors to lists and list items

4
 All CSS List Properties

Property Description
list-style Sets all the properties for a list in one
declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear
inside or outside the content flow

list-style-type Specifies the type of list-item marker

5
All CSS List Properties

6
 CSS Tables

Property Description
border Sets all the border properties in one declaration
border-collapse Specifies whether or not table borders
should be collapsed
border-spacing Specifies the distance between the borders of adjacent
cells
caption-side Specifies the placement of a table caption
empty-cells Specifies whether or not to display borders
and background on empty cells in a
table
table-layout Sets the layout algorithm to be used for a table
7
CSS Tables

8
 CSS Layout - The display Property

The display property is the most important CSS property

for controlling layout.
The display property specifies if/how an element is
displayed.
Every HTML element has a default display value depending
on what type of element it is.
The default display value for most elements
is block or inline.

9
CSS Layout - The display Property

10
 CSS Layout - The position Property

The position property specifies the type of positioning

method used for an element (static, relative, fixed,
absolute or sticky).

11
 Static Position

HTML elements are positioned static by default.

Static positioned elements are not affected by the top,
bottom, left, and right properties.
An element with position: static; is not positioned in any
special way; it is always positioned according to the normal
flow of the page.

12
 Relative position

An element with position: relative; is positioned relative to

its normal position.
Setting the top, right, bottom, and left properties of a
relatively-positioned element will cause it to be adjusted
away from its normal position.
Other content will not be adjusted to fit into any gap left by
the element.

13
 Fixed Position

An element with position: fixed; is positioned relative to

the viewport, which means it always stays in the same
place even if the page is scrolled. The top, right, bottom,
and left properties are used to position the element.
A fixed element does not leave a gap in the page where it
would normally have been located.

14
 Absolute Position

An element with position: absolute; is positioned relative

to the nearest positioned ancestor (instead of positioned
relative to the viewport, like fixed).
However; if an absolute positioned element has no
positioned ancestors, it uses the document body, and
moves along with page scrolling.

15
 Sticky Position

is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed
depending on the scroll position.
It is positioned relative until a given offset position is
met in the viewport - then it "sticks" in place (like
position: fixed).

16
CSS Layout - The position Property

17
 CSS Pseudo-classes

A pseudo-class is used to define a special state of an

element.
For example, it can be used to:
• Style an element when a user mousse over it
• Style visited and unvisited links differently
• Style an element when it gets focus

18
 CSS Pseudo-classes
Selector Example Example description
:active a:active Selects the active link
:checked input:check Selects every checked <input> element
e d
:disabled input:disabl Selects every disabled <input> element
e d
:empty p:empty Selects every <p> element that has no children
:enabled input:enabl Selects every enabled <input> element
e d
:first-child p:first-child Selects every <p> elements that is the first child of its
parent
:first-of-type p:first- Selects every <p> element that is the first <p> element of
of- its parent
type
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
19
 CSS Pseudo-Elements

A CSS pseudo-element is used to style specified parts of an

element.
For example, it can be used to:
• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

20
 CSS Pseudo-Elements
Selector Example Example description
::after p::after Insert content after every <p> element

::before p::before Insert content before every <p> element

::first-letter p::first-letter Selects the first letter of every

<p> element
::first-line p::first-line Selects the first line of every <p>
element
::selection p::selection Selects the portion of an element
that is selected by a user
21
CSS Pseudo Elements & Classes

22
 CSS Opacity

he opacity property specifies the

opacity/transparency of an element.
The opacity property can take a value from 0.0 -
1.0. The lower value, the more transparent.

23
CSS Opacity

24
 CSS3 Gradients
CSS3 gradients let you display smooth transitions between two
or more specified colors.
Earlier, you had to use images for these effects. However, by using
CSS3 gradients you can reduce download time and bandwidth
usage. In addition, elements with gradients look better when
zoomed, because the gradient is generated by the browser.
CSS3 defines two types of gradients:
• background: linear-gradient(direction, color-stop1, color-stop2, ...);
• background: radial-gradient(shape size at position, start-color, ..., last-color);

25
CSS3 Gradients

26
THANKYOU
[email protected]