HTML and CSS Reference
In-Depth Information
Once you have an imaged loaded, you might realize that the image is either way to big or
way too small. (If your image file appears to be corrupted, review your code or download a
new image). This is because you have not set a value for the width and height of the image.
To do this we are going to need to use our .css file. But in order for the browser to know
we want to style our image using css there are few things we have to do.
First we have to tell our html file where our css file is. This is one of the only times where
you will have to make changes to your <head> class of your code. Go between your header
tags and type in the following:
<link rel=”stylesheet” href=”HomepageStyle.css” >
Assuming that you named your css file “HomepageStyle”, if you gave it another name, go
ahead and rename your hyperlink reference accordingly. Capitalization must be accounted
for when doing anything in programming; just something to keep in mind. Once you have
this command in, your css file is ready and will now link the html page when the script is
The first thing we want to do is make our image smaller. Now, when we want to change the
property of a specific item such as a picture we have to add an i.d or a class to the object
that you want to change.
Example of an I.D:
<img source=”SpaceHD.jpg” id=”Image1”>
I.d's don't change how a file appears, they simply give a name to an item, so that your css
file can call it using that name. The names must be distinct when you're using i.ds so that
the css file doesn't get confused, don't use the same name more than once. Instead of id's
it is also okay to use class's to identify different objects. We use the class attribute in html
<img src=”SpaceHD.jpg” class=”MyImage”>
Id's in a css file are called in css using the hash mark or the number symbol (#). In my ex-
amples I will be using the ID version to identify my objects as I just see it as a cleaner way
to code. Classes are declared in css use a dot separator (.). Both of the methods are equally
similar so It doesn't matter which one you would like to use.
Search WWH ::

Custom Search