This presentation discusses using CSS to style HTML elements on a webpage. It focuses on positioning and styling an image. Specifically, it demonstrates how to add a border, change the image size, and position the image using static, relative, absolute and fixed positioning. It also shows how to float images left or right, use div tags to group elements, and tests the CSS on different browsers.

1. By Stephanie Huynh

2. Why have I created this presentation?
• For my web design class assignment based on
what the class has focused on for the past few
weeks which are:
~HTTP5 (Hyper Text Transfer Protocol)
~HTML (Hyper Text Mark up Language)
~Cascade Style Sheet (CSS)

3. What is my chosen
element?

4. • To make a
difference to your
webpage you
design.
• Changes the
audience’s view of
Why would you web pages.
need to use this • Is creative
type of element?

5. Which internet browsers support the
type of code we use?
• Google Chrome
• Internet Explorer
• Firefox
• Opera
• Safari
HINT - Google Chrome is the
recommended internet browser to use to
show CSS at its best potential

6. How to begin using HTTP/HTML
• You will first have to use a program to build
your webpage.
• For starters you can use the program notepad.
• I prefer using a program called Notepad++
which is a free program downloadable from
the internet.

7. How to begin using CSS
• This is a screenshot
of my webpage html
using notepad++.
• To start using my
CSS, I created a
external CSS page
and had to link it with
my HTML page as
seen on the
screenshot.

8. • To begin demonstrating my element I will first
have to import a image onto my webpage.
I have chosen this image to
focus on in my example.

9. • Here is a screenshot on how I have
imported a image into my html code.
I have used <img src=“image
name”.image type”/>
HINT: Ensure your image is saved in the same
folder/area as where your html and CSS code is saved.
In this example my image
name is “Picture1” and the
file type was “jpeg”

10. • This is what my webpage looks like so far.

11. • The amazing idea about CSS is that you can
customise what a image can appear as or
positioned on your webpage.

12. Border
• My first creative CSS
feature I would like to
demonstrate is to
create a border
surrounding your
selected image.

13. • The code displayed above in my CSS file, creates a
black border 5 pixels thick.
The code is;
img {border : pixel size solid;}

14. Borders
• You can create different coloured borders for
your image with the code used in the previous
slide but with a little extra code to add.
The code is;
img {border : pixel size solid colour;}
EG - img {border : 5px solid blue;}

15. • Next CSS feature I will demonstrate is to edit
the size of the image displayed on my
webpage.
The code is;
Width: Size in pixels
Height: Size in pixels

16. • This is how my webpage is displayed so far
with the following features on CSS;
~A border
~The change of size of the image

17. Positioning CSS
• The next CSS feature I will introduce and
demonstrate is to have the ability to position
your image in a certain way on your webpage.
There are certain element positioning
techniques available with the following codes;
~Static
~Absolute
~Fixed
~Relative

18. Static positioning
• This is the default setting for every page
element. Each element that can be used all
have the same default setting as ‘Static’
positioning.
• The only reason why you would set an
element to position: static is to forcefully
remove some positioning that got applied to
an element outside of your control.

19. Static positioning screenshot
Also known as the default
setting for all elements.

20. Relative positioning
• If you set a element to relative position
without other positioning attributes
(top, bottom, left or right) there will be no
difference than the static positioning.
• If a positioning attribute e.g top100px is used
than it will shift your element 100pixels down
from where it is normally placed rather than
100 pixels above the normal position the
element is placed.

21. Relative positioning screenshot

22. Fixed positioning
• This type of positioning is used rarely but is
also useful.
• It is relative positioned in a browser.
• The special feature of this positioning, is that
it will not move even if the window is scrolled.

23. With the two screenshots
demonstrates the positioning set
to fixed. As I scrolled to the
bottom of my webpage the
image stayed in the same exact
position.

24. Absolute positioning
• This is the best positioning option because
this technique allows users to place an
element exactly where you want it to be
placed.
• Using the positioning attributes top, bottom,
left and right to set the position.
• Setting the position attribute using pixels on
the webpage. (E.g Top:100px;)

25. • As I said before, setting your
element to absolute, is the most
ideal positioning as you can
position your element exactly
where you prefer.
As seen on my screenshot I was
able to position my element in
the center of my webpage.

26. REMINDER - Web Browser differences
• As discussed before on a previous
slide, different web browsers may affect some
features offered for your element and CSS
designs, such as my CSS demonstrations.
• I recommend using Google Chrome to ensure
you are able to sight all features at it’s best
quality.

27. Floating
• Elements are floated horizontally meaning
left and right. (NOT up and down)
• A floated element will move as far either
left or right depending where you set it.
• Other elements used will flow around the
floating element.

28. Floating
• Here are two
screenshots of a
image floating to
ABOVE – Image is floating to the right. the right and
another floating
to the left.
ABOVE – Image is floating to the left.

29. • Below is a screenshot of several
extra images uploaded onto my
webpage and are all set on floating
to the right.

30. • Than we can use a HTML div tag.

31. HTML Div tag
• Div tags can be viewed as containers as they
group certain elements of a web page
together.
• E.G – If I wanted to upload multiple
images, and each image has different border
settings, image size etc.

32. The image below is a screenshot of me using a div class for two images
and also the floating element. One image is floating on the left and the
other image floating on the right.
The next slide will
have valid code to
make your web page
like the above image.

33. • Here is the
code I used
to have my
webpage
displayed like
the previous
slide screen
shot.

34. Testing
• I have tested my HTML/CSS element on two
popular web browsers.
• Google Chrome – worked successfully
• Internet Explorer – worked successfully

35. What we have demonstrated in this
presentation
• We have learnt how to begin our HTML5 Page and
connecting a CSS page.
• We have shown you different web browsers you can choose
to use.
• How to import a image into your web page.
• How to put a border around your image and select the
colour of the border.
• How to change the size of your image using pixels.
• The different types of positioning for elements.
• How to make your element float to the left or right.
• What the div tag can do
• A result of my testing on two different web browsers.

36. By Stephanie Huynh