|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Box properties are the properties such as margin settings, padding, and border widths and colors. Also included are width & height, float, and clear. I will discuss these properties and some of their values individually, starting with the margin settings. Margins Margins can be set for the right, top, bottom, and left all independently of each other. With stylesheets you can then make an element with a different margin on each side and create some cool special effects (if you're into that sort of thing). Right now I will list the possible margin properties:
margin-top Right now we will discuss the four first properties, the hyphenated ones. The last one is a 'blanket' term and is more intricate than the others. We will discuss them all as one since they are all used the same and have the same possible values. For brevity's sake I will from this point on call those four magin properties "margin(d)" collectively. Margin(d) settings are simple. The CSS Resource Guide says this of margin settings: "Sets the size of the margin of an element. Negative values are permitted, but exercise caution." All the four margin(d) properties can be changed with the use of either a percentage(%) or a unit of measurement such as pixels, centimeters, etc. Simple enough, right? Now, since I have explained the whole measurement thing before and percentages are self-explanatory (bigger percentage = bigger border), I'll just show you a few examples and we'll move on.
p {margin-top: 20%}
Those three examples each show different ways to use values to change the properties' settings. In the first example we use a percentage as a setting, and the other two we use measurements. The MARGIN thing The 'coverall' margin property is used to define all the margin properties in on line of code. It's really unnecessary unless you're into saving space and time. Here we go. You set the values the same way as the other margin settings with the coverall property, except the value you give is applied to all the margins (left, right, top, and bottom). If you're simply applying a margin to one thing with margins of equal amount on all sides, then this will do. The code would look like so:
b {margin: 3cm}
Padding Padding is the amount of white space you want surrounding an element. and the padding of that element will take on whatever background properties that are applied to the element it's padding. Let's assume you were putting a padding around a table with a background of a frog picture. If the padding was 3em then the table would have 3em worth of frog around it. Padding is set the same way as margin. There is a padding-top, padding-bottom, padding-left, and padding-right setting, and then a coverall padding setting. You apply padding just as you apply margins, with a length or percentage. That being said I will skip a detailed explanation. If you want a big explanation then just refer to the margin section up above this one and put padding in each time I say margin, OK? Border To start off I will list all the borde properties so I can get it out of the way. As I explain borders I will touch on each property one by one. border-top-widthborder-right-width border-left-width border-bottom-width border-width border-color border-style border-top border-bottom border-right border-left border All the border properties that deal with widths (border-top-width through border-bottom-width and plain border) can have only absolute values as values. You can use thin, medium, or thick as value settings or a unit of measurement. Border color simply needs a color as a value. For that you can use a hex code or a keyword. Border style can have a good number of values. Here they are...
none All of those values are pretty much self-explanatory. If you don't get it, just play around and experiment. I'd sample them all for you and show examples but that would be a lot of work and I'd explain them all but that would be boring for you and me. Border-top through border-bottom are coveralls for the border settings. You include the info for color, style, and width all in one line of code for each, like so:
img {border-right: thin dashed red}
As you can see in those two examples the three settings of color, width, and style are all addressed and covered with one line of code. No commas. Border alone is the coverall for all the border-top through border-bottom properties. If you wrote this code...
cite {border: 5in groove fuschia}
...then all the border-top, border-bottom, border-right, and border-left properties would be 5in, groovy, and fuschia. Height & Width Height and width are settings for the amount of distance (length) from top to bottom and left to right, and these settings are good for all elements with which width and height are possible properties. Some examples of elements that width and height can be applied to are:
table Of course there are plenty more elements to use width and height with, but I'll leave you to experiment with the code and try different tags out. Experimenting is really the only way to learn things - through trial and error. Height and width can be either a percentage, a unit of measurement, or a default setting (auto). The default setting simply lets the element expand it's width and height as needed. A percentage will increase or decrease the element to make it a certain percentage of it's parent element. If an image is inside a table that has a set width of 300 pixels and you set the width of an image inside that table to be 50%, then the image will be 150 pixels wide. By that same rule, if you set an image that is alone on a page simply inside the body of the document and you set it's width to 95% then the image will be 95% the width of the page. Got it? Keep in mind, though, that height can not be dictated using a percentage because a pages with is comparable to screen size but a pages height can be enitirely different. Rarely are pages exactly one screen worth of info. Units of measurement are simple enough to understand. Float The "float" of an element is sometimes hard to understand. Check out what Webreview has to say about it: "Sets the float for an element. Generally applied to images in order to allow text to flow around them, but any element may be floated." So what does that mean? I don't know. But I'll try my hardest to explain it. I'm assuming it is a replacement for the text wrap commands. For example, if you place an image on your page and then have about 300 words enclosed inside the paragraph tag following it then it would normally appear on two seperated lines. With an image with a float value of "right" then the image would be aligned to the right of the page with text flowing around it. Other float values can be left and none. None would be the same as not using the float property. Clear Clear is another tricky property. Clear, in the immortal words of Webreview, "Defines which floating elements (if any) are allowed to exist to either side of the element." Got it? In other words, clear sets the ability to have elements NOT float. Let's assume that you want elements to not be able to have text wrap around them on either side, OK? You might include code like this:
H1 {clear: both}
That code sets the Header 1 text to disallow any other elements to float with it. Other settings (values) for clear are left, right and none. None, just as in the float property, is equivalent to having not used the clear property. Welp, that about wraps it up for box properties.
| Site Map
| |