| There are only three parts to Cascade Style Sheets | | | | Verdana, Arial, Helvetica, and sans-serif. So, in plain |
| (CSS), and once we understand what they are and | | | | English, what we are saying is the font that we want |
| how to use them, CSS becomes very easy and | | | | to use for all of our h1 headers is going to be |
| exciting to use. One of the best parts of CSS is that | | | | Verdana, Arial, Helvetica, or sans-serif. You might be |
| you can create an external Cascade Style Sheet | | | | asking if we want the main font to be Verdana, why |
| which you can use for all web pages on your | | | | are we also using Arial, Helvetica, and sans-serif as |
| website. You can also have one CSS for all of your | | | | fonts? The reason for this is not all computers are |
| articles and a different one for all of your press | | | | going to have Verdana font loaded on them. If they |
| releases. Making one change in your CSS, you are | | | | don't, then the default font becomes Arial. The same |
| able to effect changes to a few web pages or to | | | | thing holds true for the Arial font, which then defaults |
| hundreds of web pages without ever touching any | | | | to Helvetica and, finally, to what is called a system |
| of the different web pages themselves. Below I am | | | | font or screen font that all computers have on them, |
| going to break out each one of the parts of CSS and | | | | which is sans-serif. Now for the next line, which is |
| explain them in non-techie terms: 1. Selector 2. | | | | font-size: 22pt. The property is font-size and the |
| Property 3. Value This is what these three parts will | | | | value of that is 22pt. 22pt is the easiest to use |
| look like when they are all put to together: selector { | | | | because we all know about 10 pitch, 12 pitch, 14 pitch |
| property: value } The first part is the selector. In | | | | fonts when we are using our word processors. There |
| techie terms, a selector is the (x)HTML element that | | | | are several other different ways to express the size |
| you want to style. Now what does this really mean | | | | of the font, one of which is small, medium, and large, |
| to the person who doesn't know about (x)html code | | | | and is much more complex than just entering the |
| and really doesn't want to learn it, but does want to | | | | pitch size. Next we come to the font-weight which is |
| make changes to their own websites. Absolutely | | | | a real easy way to bold all of the text in your header |
| nothing, right? It just went over your head and now | | | | without using any other code to do it. Following along |
| you are at a loss (oh how well I know that feeling!). | | | | with what we already know, font-weight is going to |
| Well, let me show you what some of the most | | | | be the property and bold is going to be the value of |
| common selectors are, and I know that you will begin | | | | the font weight. If you choose not to bold all the |
| to feel more comfortable with selectors. The first | | | | text, all you need to do is change the word "bold" to |
| selector that you come across in all web pages is the | | | | "normal" and you are all done. The text-align is just |
| body, next might be h1, or the p. In (x)html the code | | | | that: by changing the word "center" to "left", you can |
| is going to look like this: < body> your web page | | | | align your text to the left margin instead of centering |
| content goes here< /body>: or, < h1> Your headline | | | | it all. I am sure that you are beginning to get the |
| text goes here< /h1> ; or, < p> your paragraph text | | | | hang of this by now, but just follow through, |
| goes here< /p> . For the first example, let's start | | | | "text-align" is the property and "center" is the value. |
| with the body. Here is the main thing that you will | | | | The color of your font or text is going to be the hex |
| likely do with this simple but important piece of code. | | | | code color #000000, or black. If you want to change |
| Let's say you want the main background color of | | | | the color of the font, find the hex code for the color |
| your website to blue or #0000ff (which is the hex | | | | that you want it to be and replace #000000 with it. |
| code for blue). It will look like this: body | | | | The last one here is the background color, which is |
| {background-color: #0000ff} OK, what does all that | | | | behind the header text. This background color is |
| mean? It is saying that the "background-color", which | | | | different from the body background color in that this |
| is the property, is going to be blue, which is the value | | | | color is going to be directly related just to the text in |
| of that property. In simple terms, it means the main | | | | between the header tags or the h1 tags. In our |
| background color of your website is going to blue. It | | | | example, "background-color" is the property and |
| is easy to change the background color of your | | | | "#ffffff" is the value. You can change the |
| website now just by changing the hex code | | | | background color to any color you like just by |
| (#0000ff) to a different color, say red, which would | | | | replacing the hex code #ffffff, which is white, with |
| look like this: #ff0000. Now let's look at the selector | | | | the hex color code of your choosing. In our next |
| h1: h1 { font-family: Verdana, Arial, Helvetica, | | | | article we begin with the paragraph tags and show |
| sans-serif; font-size: 22pt; font-weight: bold; text-align: | | | | just how easy it is to get rid of a ton out dated |
| center; color: #000000; background-color: #ffffff; } | | | | code. This article may be distributed freely on your |
| Here we are defining what h1, or the text inside of | | | | website, as long as this entire article, including working |
| our header 1 tags, is going to look like. The first line in | | | | links and this resource box are unchanged. |
| the property is the font-family, and the value is | | | | |