Diploma in
Coding and Technology
Lesson: Advanced CSS
Styling the navigation bar
CSS box model
Positioning in CSS
Animations in CSS
Objectives
TIP OF THE
DAY
Avoid using templates in the
web development process.
Loading…
Styling the navigation bar
Formatting lists
By default, unordered lists are
displayed with a solid disc, while
ordered lists are displayed with
numerals. To alter the list marker
property, use the list-style-type
property.
Using images
for list markers
Instead of using the predefined list
markers, developers can also opt
for using custom graphics.
Styling the navigation
bar
A navigation bar is one of the key
elements used in websites. A navigation
bar needs an HTML base which is
transformed with CSS.
A navigation bar is basically a styled
unordered list
To remove list markers, use list-style-
type:none;
Styling the The display: inline; property aligns list items
horizontal
navigation bar
To create a vertical navigation bar, use
display: block;
To space list items, use the “padding” and
“margin” properties.
Example of
styled
navigation bars
(Source: w3schools)
List style properties
Value Details
list-style Specifies all the list properties in one declaration
list-style-position Specifies where to place the list-item marker.
list-style-image Specifies the type of list-item marker.
list-style-type Specifies the type of list-item marker.
Types of elements
Block level Inline
Block level elements
Can appear in the body of an Can contain other block level
HTML page. as well as inline elements.
Block level elements begin on Block level elements create
new lines. larger structures
Block level
elements
Inline level elements
Can appear in the body of an Can contain data and
HTML page. other inline elements.
Inline elements do not begin Inline elements create shorter
on new lines. structures
Inline level
elements
Loading…
CSS box model
CSS box model
The CSS box model is essentially a box
that wraps around every HTML
element. It consists of:
• padding
• borders
• margins
• content
(Source:w3schools)
Padding, borders, margins and content
Content Padding Border Margin
Clears outside area
The content of the box, Clears an area around A border surrounds the
beyond the border, up
where text and images the content. The padding padding space and
to surrounding
appear is transparent. content.
elements.
Padding
HTML
CSS
Borders
HTML
CSS
Margin
CSS HTML
Loading…
Positioning in CSS
Positioning in CSS
The positioning property specifies the
type of positioning method used for an
element. Elements are positioned using
the top, bottom, left, and right
values.
Types of positioning
Static Relative Fixed Sticky Absolute
Elements are Positioned relative Always stays in the Positioned based on Positioned relative
positioned static by to its normal same place even if the user's scroll to the nearest
default. position. the page is scrolled. position. positioned ancestor.
Static
positioning
Relative
positioning
Fixed
positioning
Fixed
positioning
Sticky
positioning
Sticky
positioning
Absolute
positioning
CSS float
The CSS float property specifies how
an element should float and is used for
positioning elements such as images or
containers.
Float properties
Property value Details
left Element floats to the left of its container
right Element floats to the right of its container
inherit The element inherits the float value of its parent
none The element does not float. Remains in default position
CSS float
Loading…
Animations in CSS
Animations
CSS animations allow dynamic
changes of most HTML elements
without using JavaScript. An
animation lets an element
gradually change from one style
or state to another.
To use animations we must call
@keyframes in css.
Animation properties
Property Details
animation-name Specifies the name of the keyframe you want to bind to the
selector.
animation-duration Specifies how many seconds or milliseconds an animation
takes to complete.
animation-delay Specifies a delay before the animation will start.
animation-iteration-count Specifies how many times an animation should be played.
animation-direction Specifies whether or not the animation should play in
reverse on alternate cycles.
animation-fill-mode Specifies what values are applied by the animation outside
the time it is executing.
animation-play-state Specifies whether the animation is running or paused.
Animating colours and borders
HTML CSS
Animating size
HTML CSS
Animating position
HTML CSS
