Diploma in Coding and Technology
Advanced CSS
2
Contents
3 Lesson outcomes
3 Styling the navigation bar
6 CSS box model
10 Positioning in CSS
16 Animations in CSS
18 References
CODING & TECHNOLOGY
3
Lesson outcomes
In this lesson we will discuss the CSS box model and learn all about how we can use padding,
margin and borders to style our elements. This will greatly improve the layout and dimensions of
our elements. We will also learn all about positioning our styled elements in our viewport and
working with animations. To wrap things up we will put everything we’ve learned so far into
practice.
Styling the navigation bar
Formatting lists
The default browser style for ordered and unordered lists is to display each list item alongside a
symbol known as a list marker. 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. If the
graphic can’t be displayed, the default list marker will be shown. Graphics as list markers only work
for unordered lists.
CODING & TECHNOLOGY
4
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 <ul> and its accompanying list items <li>
• To remove list markers, use list-style-type: none; property.
• The display: inline; property aligns list items horizontal for more natural navigation bar look.
• To create a vertical navigation bar, use the display: block; property.
• 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.
CODING & TECHNOLOGY
5
Types of elements
Block level elements Inline level elements
• HTML block level elements can appear in • HTML inline level elements can appear in
the body of an HTML page. the body of an HTML page.
• It can contain another block level as well • It can contain data and
as inline elements. other inline elements.
• By default, block-level elements begin on • By default, inline elements do not begin
new lines. on new lines.
• Block level elements create larger • Inline elements create shorter structures
structures (than inline elements) (than block level elements).
Inline level elements
CODING & TECHNOLOGY
6
Block level elements
CSS box model
CSS box model layout
The CSS box model is essentially a box that wraps around every HTML element.
(Source: w3schools)
CODING & TECHNOLOGY
7
• Content - The content of the box, where text and images appear.
• Padding - Clears an area around the content. The padding is transparent. Extends from the
content to the border.
• Border - A border surrounds the padding space and content.
• Margin - Clears an outside area beyond the border. Up to surrounding elements - the margin is
transparent.
Padding
HTML
CSS
CODING & TECHNOLOGY
8
Borders
HTML
CSS
CODING & TECHNOLOGY
9
Margin
HTML
CSS
CODING & TECHNOLOGY
10
Positioning in CSS
Positioning in elements
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 - Elements are positioned static by default and not affected by the top, bottom, left, and
right properties.
• Relative - Positioned relative to its normal position.
• Fixed - Positioned relative to the viewport, which means it always stays in the same place even
if the page is scrolled.
• Sticky - Positioned based on the user's scroll position. Toggles between relative and fixed until
a given offset position is met in the viewport.
• Absolute - Positioned relative to the nearest positioned ancestor.
Static
CODING & TECHNOLOGY
11
Relative
CODING & TECHNOLOGY
12
Fixed
CODING & TECHNOLOGY
13
Sticky
CODING & TECHNOLOGY
14
Absolute
CODING & TECHNOLOGY
15
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
CODING & TECHNOLOGY
16
Animations in CSS
Working with 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 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.
CODING & TECHNOLOGY
17
Animating colours and borders
HTML
CSS
Animating size
HTML
CSS
CODING & TECHNOLOGY
18
Animating position
HTML
CSS
References
w3schools. CSS Box Model. Retrieved January 19, 2021, from
https://www.w3schools.com/css/css_boxmodel.asp
w3schools. CSS Navigation Bar. Retrieved January 19, 2021, from
https://www.w3schools.com/css/css_navbar.asp
CODING & TECHNOLOGY
