Welcome to my "html_sampler-1"
Where I jot stuff down as I learn it so that I can look it up later.
Maybe you will find it useful too.
I have a basic understanding of html and am trying to adapt to the
newer xhtml and css specifications so that my coding will be
attractive to the latest browsers (and potential clients).
I will give some description of the examples used in this page
but it will always be better to look at this page's source to see what you're seeing:)
The "box" concept - and - margin, border and padding
Yes, you can think of most html elements as "boxes".
As boxes, they have 4 sides which each has 3 "properties" which are (from outside in):
margin
border and
padding. (padding is like a margin inside of the border)
Some element might me kinda obvious like a <table>s or a <div>
But others not so much , like a <b>!
So lets try a <b> with a border:
<b style='border:2px solid black;'> BOLD </b>
BOLD
So there you go... bold with a border:)
border
The 3 properties can be set to values to change the effect.
There are 3 types of values that can be used
px, % or auto
<div class='x1'> <div class='x2'> <div class='x3'> (see source <head> for "class" definitions)
margin
There is a specific margin property name for each of the four sides
of a "box" - body, div, table, td, etc:
margin-top, margin-right, margin-bottom, margin-left
They can be set to auto, Npx, or N%
All 4 of the properties in one declaration is
margin: 5px 10px 15px 5px;
The order of those values starts at the top and goes clockwise:
margin-top, margin-right, margin-bottom, margin-left
eg:
<div style='width:300px; margin-left:5%; border:1px solid gray; padding:5px;'>
Note that whole div is indented 5%.
Nested tables:
