Lecture 3

Images and Shapes

CN 0113 - IWT
Images
Worth 1000 words.

• Sometimes too much text can be boring. You might want to add
an image or two.

• Images can be placed on a page using the img tag.

• Within the src attribute, you type the path to where your image is
located. It is wise to have all your images in the same folder as
your site, or in a subfolder called ‘images’

• Images load with their full height and width. Use css to make the
image smaller or larger.

 Images
Graphic Elements

• The rst thing to always remember is everything in css is a box.

All images regardless of type, will load as a box.

• The most common type of image extensions are .jpg .jpeg .png
• However, HTML and CSS support other types like :
.svg .gif .tiff
fi

Images

<img class=“image” src=“image-1.jpg”>

Remember to type the name of

the image correctly with its
extension. Some file extension
include png, svg and jpeg
 Scaling images
By height or by width

• All images come with their own default size. You may have seen
images with 4000px by 2000px. If that was to load into your
document, it would overflow all over your page.

• To x this, you can change either the height or the width of that
image. This will keep the proportions of the image similar to the
original size.
fi

Overflow
Hiding what doesn’t t

• When something over ows the boundaries of the

parent, it means it’s height and width are a lot
larger and cannot be contained. You can hide
whatever is over owing by applying a hidden
value to the over ow attribute.

• This works well with parents that aren’t squares,

that might have children which are.
fl
fl
fi
fl

Shapes
Shapes

• You can build almost any shape you like using HTML and CSS.
• Some shapes maybe 1 element, some maybe 2, some maybe
even hundreds of elements.

• Some shapes use pseudo elements, ::before and ::after to render

themselves on the page.

Circle
Triangle Up
Triangle Down
Pac Man
Egg
Heart
Heart
www.getcssscan.com/css-shapes
Exercise 1
Create the following look using HTML and CSS
Exercise 2
Find any three shapes, and keep them in one line using HTML and CSS