Site Development
Downloads
Help!!
Home
MarginsThere are often times when you want more than one overall margin on your pages. One example is in quoting large amounts of text. In HTML you can use <blockquote> to get some indentation on the left side -- extra left margin. In CSS, you can specifically determine all four margins -- top, bottom, left, and right -- around your text in one style rule. Lets say we want both left and right identation in our <blockquotes>. This would do more to set our quoted text apart from the surrounding content. We'd do that like this in the <head> of our page:
<style type="text/css"> This would put a margin that's 20% of the "parent element" wide on each side. This means that the <blockquote> text would occupy the center 60% (20 + 60 + 20 = 100) of the page. Here's an example of the effect. You can also add some padding to the top and bottom of a block of text by using "margin-top" and "margin-bottom". I imagine you've already figured out what these do.
<style type="text/css"> Notice here that I did not use a percentage ( % ). I used "ems". The "em" unit comes from traditional paper printing and roughly equals the line height of the particular font you're using. Different fonts have different heights. Using percentages could get tricky unless you know exactly how long your page is. You can use either percentages or "ems" for sizing margins. As a rule, percentages are better for margin-left and margin-right because they provide the proportionately same indentation regardless of the viewer's screen resolution. The "em" is better for margin-top and margin-bottom. You can use one declaration to set all of your margins. This declaration uses the "margin" property:
<style type="text/css"> The above style rule would set a value of "10em" to all four margins. This is only useful if you want the same margin on all sides. The style rule below would set a "5em" margin for top and bottom and a 20% margin for the left and right:
<style type="text/css"> Remember that the top/bottom margin is set first and the left/right set last. Also notice that there is no comma between the values like in the "font-family" and other value lists. Use only spaces to delimit (separate) margin values. Now let's set all for margins with the "margin" property:
<style type="text/css"> This sets the margins in this order: top, right, bottom, left. Just think the block of text as a clock. Start at the top and go clockwise. This is a timesaver if you want margins of different sizes. Of course you could still use "margin-top", "margin-right", "margin-bottom", and "margin-left". The "margin" property is just sort of a shorthand to get the same job done with a little less typing. AlignmentYou can use CSS to replace the ALIGN attribute in your HTML tags. This can really save you a lot of typing. The property employed is called "text-align" and it uses the same values that HTML tags use: "left", "right", "center", and "justify". Lets say that we are using centered <h2> headers to title the sections of a web page. All of these headers are to be centered, so lets use CSS to align them all in one line of code instead of using the ALIGN element in each <h2> tag.
<style type="text/css"> Now all the <h2> headers on the page will automatically center themselves. When you learn how to make external Stylesheets, you'll see how this one line would center the <h2> headers on an entire site automatically. Now lets assume that our page uses centered <h5> headers for subtopics. We don't have to make another style rule for the "h5" element. We can just add "h5" to the "h2" element already centered:
<style type="text/css"> Notice that we just added "h5" to the list of elements and used a comma ( , ) to delimit (separate) it from "h2". The style rule won't effect any property other than centering both tags. It doesn't effect their size or anything else. You can list as many elements as you want. The tag above would center all <h2> and <h5> headers. Headers are often styled together like this because they generally use the same font-family, color, and alignment. Remember that you can use the other ALIGN values, too. Other Text PropertiesThere are some other text properties you can style. One of the most common is "text-decoration". The text-decoration property can be set to: "overline" "line-through" "underline" "none". The "none" value is the default in most cases. Links are a noticeable exception. They are underlined by default.
<style type="text/css"> The above style rule would underline all <h2> headers on the page. One of the biggest uses of text-decoration is not to add a line, but to remove the default underlining from links. We'll learn how to do this when we learn about styling our links. But, if you want to jump ahead, try:
<style type="text/css"> This removes the underlining from your "fresh", unvisited links. Like I said, we'll get into this more later. Another text property that's used occassionally is "line-height". This sets the height of a line of text. This is the space between the "baseline" (imaginary line running along the bottom of the letters of a line of text) of one line and another. The property is used to set the spacing between lines -- the width of a line break.
<style type="text/css"> The above tag uses a percentages and would double the distance between lines of text. This would be the same as double spacing. You can shrink the space between lines by using decimal percentage values:
<style type="text/css"> The above value is only one-fifth of the default value and would push the lines closer together. Negative values cannot be used and are ignored. In other words, you can overlap the lines with the "line-height" property. Make a page with plenty of different headers and bulk text and then play around with styling the text. Align elements different ways and experiment with margins until you feel comfortable with all of the properties discussed. |
To Next Beginning CSS Lesson
Back To Beginning CSS Index