HTML and CSS Reference
In-Depth Information
The other way that we can measure height and width is through percentages. Which as you
probably could guess, the whole screen left to right is 100% and the screen top to bottom is
100%.
You can choose which method works for you best, by practicing that various techniques. I
personally use both depending on the object and where it is located on the webpage and the
type of positioning that it may need.
Positioning
Line 4, 5, and 6 are used to position the image. (Top: 300px ;) means that the objects will
be 300px from the top of the web layout screen. Likewise, line 5 and 6 apply with the same
laws. The left attribute in my example shows that we indented 0px from the left side of
the webpage meaning that the object will appear at the start of the left side of the webpage
(with no indent). And so on with the left and bottom properties.
The margin indents on the outer-boarder of an object. The tag for margin is (mar-
gin: 0px ;) in this example we have no margin. Margins are useful when making paragraphs
or text appear inside a box.
Note: You can also use border tags on other items as long as they are using the id or class
tag. By calling them in css, you can add numerous properties. To make text appear in a box,
give it a border. You can also give that border a shadow by using the (box-shadow: 5px 5px
5px;)tag in css.
Padding is the css command in line 8. The padding is used to indent on the area inside of
the elements border. This is usually set to 0px, but can be used in special circumstances to
create more room between and text and its border and any other object with a border.
The css position command is used to set an object to a specific style. In line 9, I positioned
the image as an “absolute” value. This means that the image will not move.
Example:
If you were to scroll down the website the image would disappear; until you scrolled
back up to its original position. But there are other positioning tags like (position: fixed ;)
which will remain on the screen even when you scroll down the page.
Other positioning tags:
