Scribd
Upload
55 views

Lesson 6 CSS Controling Images

This document discusses different ways to control images using CSS, including sizing images, aligning images, and centering images. It explains that the width and height properties can control image size, and specifying sizes helps pages load smoothly. Images can be aligned using the float property or new classes like "align-left". To center an image, it needs to be made a block element using display: block, then the text-align or margin properties can horizontally center it. Background images can be added using the background-image property. The document provides code samples for these techniques.

Uploaded by

Helen Asuncion
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
55 views

Lesson 6 CSS Controling Images

This document discusses different ways to control images using CSS, including sizing images, aligning images, and centering images. It explains that the width and height properties can control image size, and specifying sizes helps pages load smoothly. Images can be aligned using the float property or new classes like "align-left". To center an image, it needs to be made a block element using display: block, then the text-align or margin properties can horizontally center it. Background images can be added using the background-image property. The document provides code samples for these techniques.

Uploaded by

Helen Asuncion
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 26

UNDERSTANDING CSS:

Controlling Images in
CSS
CSS Controlling Images
You can control the size of an image using
the width and height properties in CSS, just
like you can for any other box.
Specifying image sizes helps pages to load
more smoothly because the HTML and CSS
code will often load before the images, and
telling the browser how much space to leave
for an image allows it to render the rest of the
page without waiting for the image to
download.
Sample
Aligning Images
float property can be used to
move an element to the left or the
right of its containing block,
allowing text to flow around it.
Aligning Images
Rather than using the <img>
element's align attribute, web
page authors are increasingly
using the float property to align
images. There are two ways
that this is commonly achieved:
Aligning Images
1: The float property is added to the
class that was created to represent the
size of the image (such as the small
class in our example).

2: New classes are created with names


such as align-left or align-right to align
the images to the left or right of the
page. These class names are used in
addition to classes that indicate
the size of the image.
Sample
Centering Images using CSS
By default, images are inline elements. This
means that they flow within the surrounding
text. In order to center an image, it should be
turned into a block level element using the
display property with a value of block.
Once it has been made into a block-level
element, there are two common ways in which
you can horizontally center an image:
Centering Images using CSS
1: On the containing element, you
can use the text-align property with
a value of center.

2: On the image itself, you can use


the use the margin property and set
the values of the left and right
margins to auto.
Sample
BACKGROUND IMAGES
background-image
BACKGROUND IMAGES
background-image
Activity
• Create an Internal CSS Web page
with the following formats:
body
background-image: url("images/PNHSCHARCOAL2.png");
background-repeat: no-repeat;
background-position: center top;
color: maroon;
padding: 20px;
p
font-family:arial
font-size: 15px
OUTPUT:
Assignment:
1. Visit this website:
http://www.w3schools.com/css
2. Click CSS Navigation Bar.
3. On your notebook copy important details,
steps on how to layout CSS using the
position property of an element.
4. Prepare for a hands-on activity regarding
the topic next meeting. I will pose in our FB
group page the activity that you are going to
make in our ICT Lab.
Transitional Page
www.animationfactory.com

Backdrops:
- These are full sized
backdrops, just scale them up!
- Can be Copy-Pasted out of
Templates for use anywhere!

You might also like