|
|
| |||
Please use Microsoft Internet Explorer to view the first few examples on this page. We'll go into Netscape workarounds at the end of this lesson. BordersLet's begin by making a simple <div> box:
<div id="mybox"> Now let's begin styling our box by adding borders and making it look like a box. We do this by referring to the ID we gave our box ("mybox") in the <style> section of our <head> or external stylesheet:
<style type="text/css"> There's one important thing to notice right from the start. That's the hash mark (#) preceding "mybox". This tells the browser that you are styling a specific block of content using "mybox" as an ID. It's very important and the styling won't work if you forget it. Remember the hash (#) mark. (Above the 3 key on most keyboards.). Use dots (.) for classes and hash marks (#) for IDs. Now, lets add some properties and values that will put a border around our box. These first few declarations are only supported by IE. We'll see how to get the same effect in Netscape at the end of this lesson. Lets put a solid border around our <div> box: #mybox {border-style: solid;} All we did was type in the new property "border-style" and set it to the value "solid". (Don't forget the hyphen (-) between "border" and "style".) In IE, this will put a solid border around our box with a default width and color. Here's an example of what we've got so far. The three big elements you'll use to style borders are style, width, and color. You'll be using these three properties on almost every border you code. Border-StyleIn the above example, we used a solid border. There are other types of borders as well: border-style: dotted; border-style: dashed; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; Make sure to look at the above section in Netscape to see which border styles Netscape supports and how that browser presents them. (Note: The above borders were made with Netscape compatible code that you'll be learning in a minute. That's why they show up in Netscape and the original "border-style" example does not.) Border-WidthWe can determine how thick our borders are with the "border-width" property. The best value to use when determining width is pixels (px).
#mybox { This would make our border 10 pixels thick. Don't forget the "px" part. This is what a 10px, solid border would look like. The same sizing applies to the other styles of borders as well. The only practical limits are a 1 pixel minimum, that will probably be displayed as 2 or 3 pixels in actual rendering, and, the size of the screen. Border-ColorWe can color the border to any browser safe color by using the "border-color" property in our style rule:
#mybox { This border was made by adding "border-color: #ff0000" to the previous styling. The hex code #ff0000 stands for "red". You can use the word "red", but hex code will give you a broader range of colors. The "Border" PropertyThe "border" property is a shorthand method of coding a border's style, width, and color in one CSS declaration. This is the only border property that Netscape understands. So, you'll be using it for most of your borders. It looks like this: #mybox{border: solid #ff0000 10px;} The above code is a lot easier and more compact, huh? And, it works in Netscape as in this sample. Pay special attention to the fact that the different values are separated by spaces. There are no commas or anything else between them. I always code the "border" property in the order above -- style, color, width-- but, you don't have to. Just make sure everything you want is included. It pays to be consistent, but the browsers will figure things out regardless of the order. Styling Individual BordersUnlike <table> cells, you can style each individual border of a <div> box. This comes in handy when you only need a vertical line and such. The code to style a single border goes like this: #mybox{border-right: solid #00ff00 5px;} Here's a box with only the right border ("border-right") styled. Pretty cool, huh? You can style each border using: "border-top", "border-bottom", "border-left", or "border-right". If you don't want a border, just don't style it, or use "border-left: none". If you're using Netscape, you can't see the vertical green line. Netscape doesn't support the individual styling of borders. Netscape only renders the "border" property. Period. You can use the "border" property to set a default border for both browsers and then use the "border-right", etc. properties to style individual borders for IE users. The individual border styling should be coded after the overall "border" property styling. This will give them precedence when rendered by IE. Remember "cascading"? Netscape users will see the styling of "border" and IE users will see the individual "border-right", etc. styling. Borders Around Other ThingsYou don't necessarily have to limit the use of CSS borders to <div> boxes. You can add border properties to any of the HTML elements like "p", "h2", "blockquote". You can also use it in custom classes that don't apply to boxes. One way to make a quickie inset box is to use a border around a regular paragraph like I have in several examples above. Try this in a <p> tag:
<p style="border: dotted #ff0000 10px"> Here's the above code in action. Remember that Netscape doesn't support dots, so Netscape users are seeing a default solid line. The above is a great, quick way to highlight a particularly important paragraph or header. Go nuts, decorate all of your headers with one line of CSS:
<style type="text/css"> The above styling would produce headers like the one below: HeaderExercisesPractice making <div> boxes with borders. Try all the styles and various widths and colors. Always check your work in Netscape to see how it's handling things. Get comfortable using the overall "border" property. You'll find yourself cussing Netscape a lot as a web master. Keep in mind that almost all of the breakthroughs in browsers began with Netscape. IE didn't really come into its own until it began its superior support for CSS and some exotic HTML tags. Netscape's 6.x series is trying hard to upgrade its support of CSS and, someday, I think they'll make it. The most important things to understand well are the overall "border" property and styling, and how to use and apply IDs. Don't forget those hash marks ("#")! |
|||
| |||