|
|
Tutorial #10:
|
Well, here it is. The second Cascading Style Sheets tutorial. In this one, you're going to learn about manipulating text and cool stuff like that.The purpose of the first CSS tutorial was to get you acquainted with CSS syntax and stuff like that. I wanted to show you the ropes, to coin a phrase. Now, it's crunch time. Now, you're going to learn about text, enhancing it. I'm going to rattle off the CSS properties and go in-depth with them. If you want to get the most out of this, run IE. Some cool stuff can be done in IE and not Netscape. So, are you ready? font-sizeI touched base on this in the first tutorial, so you should already know what this is and how it works. but take a look:b {font-size: 50pt;} Simple enough, I think. The pt is just like what you'd see in Microsoft Word or something like that. font-familyFont-family is the font face of HTML. It's simple, but there is one important thing you have to remember, and I'll show it to you in one of these two examples.
.htmlcentral {font-family: Arial;} Did you see it? You use the spacebar in Times New Roman, so it's gotta be in quotes. font-weightIf you want to be bold, then you need to read here. Font-weight controls boldness and only boldness. There are different ways you can present bold, though:
.brendan {font-weight: bold;} Well, that may have seemed a bit confusing, huh? The first one isn't. That's what I usually deal with, and it's the closest to the <b> tag of HTML. Now what's the deal with bolder and lighter? Well, what it does is take the default boldness set by the person's browser, and then darkens or lightens the text, depending on what you put in. The number thing goes from 100 to 900. However, when you type that in, you should see two zeroes. Don't put anything like 462. It won't work. And the last thing I put in overrides the boldness and makes it look normal. font-styleIf you use font-style, then you obviously want to italicize some text. There are three different things you can apply with font-style. Take a look.
.css {font-style: italic;} Italic and oblique have the exact same effect, except that oblique doesn't work in Netscape. So use italics. The third thing is used if you don't want italics to be italicized. font-variantFont-variant creates MINICAPS. It looks just like that. Or at least it should. Netscape doesn't support it and IE 4.0 displays it as all capital letters. So, it doesn't work in many, if any, browsers. But take a look anyway.p {font-variant: small-caps;} It's small-caps, not minicaps. line-heightI'm sure you've typed a paper where the teacher says "Double space this, or you lose points." I know I have. But now you can do it on web pages too. See, I'm doing it now! Very cool. You can write your paper in HTML! .dblspace {line-height: 2;} You could do 1.5, 3, stuff like that. Or, you could put in 200% for double spacing, 300% for triple-spacing, you get the idea. text-indentOk, let's say you took me seriously and you decide to write a paper with HTML and CSS. Cool. You have your snazzy double-space. Now, you're typing your first paragraph and you wonder, "How do I indent?" Do you notice that I did with this paragraph? (kinda hard to see with the current alignment; you'll see it in the next thing) .indent {text-indent: 2em;} 2em is probably the best thing, 1em is a bit too small and 3em is a bit too big. text-alignNow, you're typing along, and you want to change alignment. Uh-oh, you think. Don't panic. See this current paragraph? I aligned it using CSS. It's really easy to do. (Look, you can see the indent now!) .align {text-align: left;} Simple enough. You can do left, center, right, or justify. text-decorationDid you notice that in my nav bar on this tutorial, none of the links are underlined (unless you are in the 'ABC HTML Central')? This is a part of text-decoration. There are many different things you can do, but beware: not everything works in all browsers.
a {text-decoration: none;} The first thing is the way to get rid of the underline in the links. Ain't CSS great? Don't use blink unless you come up with a really good reason. white-space*This is Netscape only as of now. Sorry.
H ey, I' m u s i n g wh i te s p a c e . Cool, huh? It is essentially the same as the <pre> tag, except that it doesn't have that icky monospaced font. .whtspce {white-space: pre;} Since Netscape doesn't support the next thing, You could really use this to your advantage. letter-spacing*This is IE only as of now. Sorry.
HTML Central
This attribute, letter-spacing, can be used to make powerful titles on a web site. It's very cool. Take a look:.ltrspace {letter-spacing: 2em;} I would suggest that you don't go too much bigger than that, especially on a title. text-transformthe final attribute that i want to talk about is text-transform. do you see how every letter is capitalized? i did it with cSS. if you were to look at the page source, you would notice that the first letters are all in lowercase. .txtrnsform {text-transform: capitalize;} .txtrnsform {text-transform: uppercase;} .txtrnsform {text-transform: lowercase;} uppercase makes all of your letters uppercase, and lowercase does the opposite. Phew! That was a lot. Next up is another CSS tutorial! We're moving right along. |