 |
|
 |
|
 |
||||||||||||||||||
|
Link Properties and Text Formation So to start with our link properties we're going to do what a regular link is. So like our body { } we're going to open up the link with A:link { } Just like with HTML it's A:link(This could be found in the body tag in html but can't do as fancy things with it in html as we can in CSS. So using our opened A:link code we need to begin to add our properties. This is for the standard link, nothing else. There is still the visited, active and hover properties that we can manipulate. So like we did with the body tag we can add color:#c0c0c0; to change the color of the links. If you don't change this it will default to the blue color. Then we can begin changing other text properties. Most of the properties we change here can be changed anywhere on the page. So let's begin with the text-decoration. Changing this porperty usually means the lines. A link by default as an underline. by adding text-decoration: none; to our property we can make it so there is no line under our links. We can also change this property to: underline, overline, line-through, blink Next we can make our text transform by using this property. text-transform: capitalize; By using that we make it so that all our links are in all capitals, whether we type it in caps or not. We can also change this property to: uppercase, or lowercase So saying that we use all these codes it would look like this: A:link{ color: #c0c0c0; text-decoration: none; text-transform: capitalize; } Now let's say we want to change the visited link properties. We could do this by changing the A:link to A:visited and for active we change it to A:avtice
A:link{
Now when you when you hover over the link the color of the link will turn white, and there will be an underline, as well as the letters will turn to all caps.
A:link, A:active, A:visited{
So now our code looks like this:
As you will notice this makes the code a lot cleaner looking. So this is pretty much it for the link properties. You can change the cursor for the link by using the cursor:help; or whatever cursor you desire, you can also use other text formats which will be found below. Text Formatting In any of our tags we can change the format of the text, so for a div layer, a table, or a page, even a link or a specific tag we create we can format the text to be different with properties such as the ones I'm about to describe. Sometimes people like more spacing, sometimes they like less, so to change the word spacing you would use this property. word-spacing: 2px; The amount of space can be done in a pixel length so you can decide how far apart you want your words to be placed from each other. Other times they like their letters to be spaced a certain amount of space apart or closer even, keep in mind you want your stuff still legible. letter-spacing: 2px; This will change the amount of space between each letter in a word, but not the space between the words. So once again this is done in pixel length. *You'll get to learn to love pixels. Everyone loves to indent their text so to do this we would use the code text-indent: 2px; You could also use a percent here (%) But keep in mind that using a percent can screw around with the over all look of your site depending on the visitors screen resolution. Of course we can also decide on how our text is aligned by using this property: text-align:right; This property can be defined as right, left, center or justify. Not so much a text effect as it is a whole page effect we can also add in a vertical align property, though this property usually found in tables usually doesn't do much good for a site and isn't completely browser acceptable. vertical-align:baseline; This one can also be defined as sub, super, top, text-top, middle, bottom, text-bottom. I myself have never really used this property though if you play around with it a bit you will learn how it functions. There is also the effect of white space, this is to define whether or not the text wraps to the site or if it continues on, providing side scroll bars. white-space: nowrap; You can also define it as pre though I'm not quite sure what pre does, sorry. Finally in our text-formatting section there is line height. WE can change the height of our lines by typing line-height:2px; As you can see it is in pixels once again but you may also define it in percent (%) or in just a regular number. |
