Scribd
Upload
0 views

5. CSS (1)

The document outlines the learning outcomes for a course on CSS, emphasizing the understanding of CSS layout principles, responsive design, and image styling. It details the use of lists, the CSS box model, and various layout techniques such as Flexbox and Grid Layout. Additionally, it covers the float property and its application in web design.

Uploaded by

anis humaira'
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0 views

5. CSS (1)

The document outlines the learning outcomes for a course on CSS, emphasizing the understanding of CSS layout principles, responsive design, and image styling. It details the use of lists, the CSS box model, and various layout techniques such as Flexbox and Grid Layout. Additionally, it covers the float property and its application in web design.

Uploaded by

anis humaira'
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 15

ICT 0545 Web Technologies

(CSS - Cascading Style Sheets)

Muhammad Taufiq
Aisyah Binti Mohd. Hanifiah
Siti Nurul Akmal Binti Mohd
Nur Hidayu Binti ‘Aris

Department of Information and Communications Technology, IIUM


Learning Outcome
• Student should be able to:
• Understand the fundamental principles of CSS layout.
• Be able to create responsive designs using different CSS layout
techniques.
• Learn how to properly include and style images using CSS.
• Understand the float property and its impact on document flow.
• Learn different CSS positioning properties: static, relative,
absolute, fixed, and sticky.

2
CSS Lists
• Lists are fundamental in organizing and displaying items on a
webpage.
• Used for navigation menus, content lists, to-do lists, and more.
• Enhances readability and structure of web content.

There are two types of lists:

• Unordered Lists (<ul>): List items are marked with bullets.


• Ordered Lists (<ol>): List items are marked with numbers or
letters.

3
Ordered Lists
• For ordered lists, user can specify the type of numbers or letters
they would like to use.
• Ordered list can also be use as markers. For instance, roman
numbers (e.g. i, ii, iii).
• Example:
- decimal (this is the default),
- decimal-leading-zero (number with a leading zero, e.g. 01,
02..),
- lower-alpha (e.g. a, b, c..),
- lower-greek (e.g. α, β, γ..),
- upper-alpha (e.g. A, B, C..)
- upper-roman (e.g. I, II, III…).
4
Unordered List
• For unordered list, user can specify the shape that they want to use as the bullet.

Example of unordered and ordered list can be


seen at:
https://www.w3schools.com/css/css_list.asp
5
CSS Layout
CSS can be chosen from a few layout models such as:

The Box Model - Every HTML element can be considered as a


box, and CSS allows you to style these boxes with properties
like width, height, padding, border, and margin.
Example https://www.w3schools.com/Css/css_boxmodel.asp

6
CSS Box Model

7
CSS Box Model
Content
• The content area is where the actual content of the element is displayed. This
includes text, images, etc.
• The height and width properties help to modify the box dimensions.
Padding
• The padding area is the space around the content area and within the border-
box. It can be applied to all sides of the box or to the specific, selected side(s) -
top, right, bottom, and/or left.

8
CSS Box Model
Border
• The border area surrounds the padding and the content, and can be
applied to all the sides of the box or to selected side(s) - top, right, bottom,
and/or left.
Margin
• The margin area consists of space between the border and the margin. The
margin does not possess its own background color and is completely
transparent. It shows the background color of the element, like the body
element.
• Try on websites
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The
_box_model#what_is_the_css_box_model\ 9
CSS Layout
Flexbox - A layout model that allows responsive elements within
a container to be automatically arranged depending upon
screen size.
Example https://www.w3schools.com/csS/css3_flexbox.asp

Grid Layout - A two-dimensional layout system for the web,


enabling more complex designs and layouts.
Example https://www.w3schools.com/css/css_grid.asp

Positioning - CSS positioning properties


(static, relative, absolute, fixed, and sticky) are used to control
the positioning of elements.
Example https://www.w3schools.com/css/css_positioning.asp
10
Exercise and Practice
CSS Image
• Use to enhance the appearance and layout of images on a
webpage.
• Example as shown in:
https://www.w3schools.com/css/css3_images.asp
https://kinsta.com/blog/css-image-styling/#how-to-add-images-in-htm
l
https://www.programiz.com/css/image-styling

12
CSS Float
Float is use as a CSS positioning property.
• Float is a technique that allows the elements to float to the left
or right of one another, rather than the default of sitting on top of
one another.

• The main uses of floats are to lay out columns and float text
around an image.

13
CSS Float
The float property can take several values:
-left: The element floats to the left of its container.
- right: The element floats to the right of its container.
- none: The element does not float and is displayed where it
occurs in the text
(default).
- inherit: The element inherits the float value from its parent.

Example https://developer.mozilla.org/en-US/docs/Web/CSS/float

14
Thank You

You might also like