»
Tech Talk
»
How Do You Spell HTML?
»
A Question About Links
| How Do You Spell HTML? |
|
A Question About Links |
|
|
vlraynes Member Rara Avis
since 2000-07-25
Posts 8229Somewhere... out there... 
|
<i> Okay, Christopher...here I am.  I've figured out how to fancy up my links by making them change colors when the mouse hovers over them, but, now I need to know how to make my links NOT be underlined. If you can help me with this one, you'll be my hero. <font color="c1dffd">[This message has been edited by vlraynes (11-25-2002 10:57 PM).] |
||
| © Copyright 2002 Vicky L. Raynes - All Rights Reserved | |||
|
Ron
Administrator
Member Rara Avis
since 1999-05-19
Posts 8669Michigan, US |
Sometimes, Vicky, the best way to figure something out is to just look and see how someone else did it. Did you ever notice that the Member's Menu at the top left side of this screen doesn't have underlined links? Did you know that if you right-click on this screen you can do a "View Source?" Take a look and you'll find "one way" of doing it, probably the easiest to understand way, and almost certainly the most cross-browser compatible way. There are other ways, all of them based on different ways of implementing Styles (CSS). Browsers have evolved a bit since the code for this page was written over three years ago, and the in-line Styles I used probably aren't the best way any more. But they DO still work. |
||
|
vlraynes Member Rara Avis
since 2000-07-25
Posts 8229Somewhere... out there... |
Hi there, Ron. Thanks very much for the tips. Actually, I do a lot of viewing sources, but I don't always understand exactly what it is that I'm looking for, or I don't know where on the page to look for it, so that doesn't always work. As far as viewing the source for pages on this site, I get COMPLETELY lost! LOL. I have saved a few of the source codes for the forums, so that I can try to decipher them when I have time to really focus on them. Actually, I have learned quite a bit since the last time that I looked at the forum source codes, so I MIGHT be able to understand them a bit better than I did the last time I tried...wish me luck. Concerning this particular code, I did talk to Christopher on MSN and he taught me the most 'simple' way of doing it and it's working for me now, so I'm happy. He asked me to post this here so that he could give an indepth reply that included how to create entire style sheets. I'm looking forward to that one. Thanks again for the input. I'm sure I'll be popping in here more often, since the more I learn, the more I WANT to learn. When I find something on a page, that I really like,I MUST know how to do it. I have a feeling you and Christopher may get sick of me after awhile. [This message has been edited by vlraynes (11-26-2002 01:30 AM).] |
||
|
Christopher
Moderator
Member Rara Avis
since 1999-08-02
Posts 8296Purgatorial Incarceration |
Haven't forgotten this Virgil, but haven't been able to get to it yet... I will! |
||
|
Christopher
Moderator
Member Rara Avis
since 1999-08-02
Posts 8296Purgatorial Incarceration |
tonight! |
||
|
vlraynes Member Rara Avis
since 2000-07-25
Posts 8229Somewhere... out there... |
LOL! Stop teasing me with those little e-mail notifications!  [This message has been edited by vlraynes (11-27-2002 07:43 PM).] |
||
|
Christopher
Moderator
Member Rara Avis
since 1999-08-02
Posts 8296Purgatorial Incarceration |
CSS - Cascading Style Sheets Ok - I want to agree and disagree with Ron. It is probably the most cross browser compliant. And that is something to definitely take into consideration - not everyone has the most up-to-date browser, and there are several different types of browsers. So you have to first determine your intended users and their needs. Personally, I head toward the last several versions of IE and Netscape, which are currently the two most dominant browsers in use. In Ron's case, the small, small percentage of people that don't have these updated browsers amounts to a LOT of people, so it makes sense to worry more about it. The good thing, however, is that there are ways around non-compliant browsers.The part I disagree with is that it's the easiest way to do it. Using the Inline Style may be easier initially, but makes quite a bit more work to carry that same style through a document, or even worse, through several documents. In addition, you have a lot of work to update it if you ever decide to change your format. Inline Style - Is exactly what it says, a style that is effected inline. This is taking the CSS definitions and applying them to single instances inside a document. An example would be: quote:As you can see, this differs from your normal "<a href=" tag with a couple other things. These are fairly standard throughout CSS'. What you're doing here is telling the browser that you want to a) use a "style", but just in this tag, and b) you want to change some of the default attributes of this tag (font size, family, etc.). You'll notice that instead of using the "=" character to tell it what you want something to be, you use the ":" character. In addition, you have to end all but the last statement with a semi-colon. This tells the browser that you're not adding extra definitions to that particular attribute. (And yes, you can if you'd like, but we'll get to that in a minute). The advantage of using an inline style is that you can change only one thing if you want. It doesn't affect anything else in the document save what you've used it on. Also, the Inline Style will override any other style definitions. The main disadvantages were listed above: You only get to affect one tag at a time, and if you use it a lot, in many documents, changing the look of your documents will be a lot of work! Document-Wide Style - This is the middle road. Document wide styles affect, as the name suggests, only the document itself. However, if you've used any Inline Styles in your document, those definitions will override this one, but only in those instances. Using a document wide style is getting a little more involved than Inline. First, you have to effect it in the header of your document. This is the style I showed Vicky the other night. An example would be: quote:With this, you affect the entirety of your document. Everything between your body tags that is reflected in your style information will be presented as directed. In this example, your background will be white, with margins on both sides, and any "H1" tag you use will be red with a 24 point sans-serif font and aligned to the right. Ah, but it gets cooler! Say, for example, that you want to have more than one H1 style? Say you want your main H1 content to be red at 24 point, but you also have a few things you want to be green, and a little smaller? Can do - with "classes." quote:What we've done is added a class type, since we have more than one in our document. (I have 10 different link classes for Countless Horizons). The one that isn't assigned a class will be the dominant of the two (or three, or more) and will affect every tag that isn't specified otherwise in the body of your document. As you can see, you will have to call it by "class" inside your tag, for it to reference the 'green' one. Advantage to the Document-Wide Style: You can affect the entire document from one portion, without having to repeat the code over and over. The disadvantage is that you only control one document. If you have many documents, you're adding a lot of extra bits to your site as a whole to do the same thing. External Style Sheets - I have to admit that this is my favorite. An external style sheet is just that, a sheet that is outside your document that affects your styles. It works very similar to the way that Document-Wide does, with the major difference being that you only need ONE sheet that will affect ALL your documents! quote:Uhm - but where are your style definitions? Yep - in the document you've named style.css quote:Oh - notice something else? It doesn't have to be broken into different lines… all that is important is that you contain all the formatting information inside the brackets " { } ", that you define the formats with a " : " delimiter, and that you finish each individual statement with a " ; ". Outside that, you can put them on the same line or on different lines. The only thing is that you can read them easily. The advantages to External Style Sheets are that you only have to format one time that will then affect all documents linked, and if you want to update you will only have to change one document. The disadvantage to this is that it takes extra time to load the external sheet. How much time depends on your server and how large your external file is. Ok - I think I've gone enough. Feel free to ask questions for clarifications. Style sheets are great, and remember - if it's something you can think of formatting, you can do it with style sheets. [This message has been edited by Christopher (11-28-2002 01:28 AM).] |
||
|
Ron
Administrator
Member Rara Avis
since 1999-05-19
Posts 8669Michigan, US |
Why are they called Cascading Styles? |
||
|
vlraynes Member Rara Avis
since 2000-07-25
Posts 8229Somewhere... out there... |
<i> Yes...what Ron said. Other than that, at this point I don't have any questions. Scary thing...I think I actually understand this now. Thank you so much, Christopher, for the indepth explanation. I'm sure I'll have more questions later, but for now I'm just anxious to try it, so I'm going to do that now. Chris and Ron...Happy Thanksgiving to you both!  |
||
|
Christopher
Moderator
Member Rara Avis
since 1999-08-02
Posts 8296Purgatorial Incarceration |
uhm - you know, the only thing i can think of is the way it uses precedence in the various forms... ie: Document Style overrides External Sheet, while Inline overrides the previous two. But i've a feeling it's probably something else, lol. it always is. Virgil - you're welcome. Feel free to ask any questions you want! |
||
|
Ron
Administrator
Member Rara Avis
since 1999-05-19
Posts 8669Michigan, US |
Actually, Chris, they're called Cascading Styles because they DON'T really override each other, not in the strictest sense of the word. Instead, their effects cascade. I raised the point because some of your examples are technically redundant. Let's change your example just a bit and look at what happens. P {color: #000066; font-size: 12px; font-family: Arial, Helvetica, sans-serif;} P.tab {color: Black; } If I then include, <p class="tab">This is black text</p> in my HTML page, we know the text should be black because that's what we specified for that Style. But what is the font-size and font-family? You should find that it's 12px Arial. Since we didn't specify a font-size and -family in our .tab style, thus overriding the previous setting, the closest applicable style will CASCADE to our paragraph. When styles redefine a specific tag, in this case the <p> tag, the cascade is pretty short and simple. It can get much more complicated when you start embedding tags within tags. For example, the <body> tag can contain <div> tags, which can contain <td> tags, which can contain <p> tags. Define your font-face for the <body> tag and you never have to do it for embedded tags, unless you specifically want to override. The font-face will cascade down to them. Theoretically, it allows us to avoid redundancy and simplifies maintenance. Six months from now, if you want to change the font-face, you need change it in only one place. Unfortunately, theory only goes so far. In practice, browsers support CSS to varying degrees and older ones like Netscape 4.x and webTV 1.0, do so very poorly. When you start relying on your styles to cascade, as was the intention of the designers, you have to do a lot more testing to make sure it really works. |
||
|
Christopher
Moderator
Member Rara Avis
since 1999-08-02
Posts 8296Purgatorial Incarceration |
ooooh! that's cool! i did not know this. however, i will definitely check it out before my next 'release' goes online, because i can reduce the size of my external file by over half if i can get rid of all the redundancies. that would be a very cool thing indeed!!! |
||
|
Christopher
Moderator
Member Rara Avis
since 1999-08-02
Posts 8296Purgatorial Incarceration |
*Chris wonders why he never thought of this before* |
||
|
vlraynes Member Rara Avis
since 2000-07-25
Posts 8229Somewhere... out there... |
*Vicky wonders too, because even SHE knew that.  Don't worry though, Christopher. You still know LOTS more than me. LOL. I just had to come back and say thanks again to both of you for all your help and information. I've been playing with this for the past couple of days, and not only do I understand it (to a degree) but it's working too! I LOVE learning stuff!:> |
||
|
Christopher
Moderator
Member Rara Avis
since 1999-08-02
Posts 8296Purgatorial Incarceration |
 hey - i'm happy i got to learn something new!Virgil - maybe when you get something finished, you can post it in here and show us? |
||
|
vlraynes Member Rara Avis
since 2000-07-25
Posts 8229Somewhere... out there... |
Don't worry, Christopher. You'll get to see the finished product. I do have another question though. I've thought about it and tried to come up with a solution, but I'm not getting too far with it. The site that I am currently rebuilding is a poetry site. (big surprise) There's not a great deal of content, so the pages are relatively simplistic, and most of the pages only consist of a poem and a few links. The only thing causing me a bit of confusion is that I have two different colors of pages. The main site colors are black and white, and as a result, part of the poetry pages are black with white font, and part of them are white with black font, depending on the poem content and/or any accompanying graphics. All of the links are red, but the hover color is supposed to match the normal font color for the page. Thus, my question. Is there a way to make only a portion of a style sheet 'talk' to a certain group of pages, or is it all or nothing? Can a second style sheet be given a different name and saved in the same file, or will I have to put the web pages in two seperate files in order to use two different style sheets? I know I'm probably not explaining this very clearly. It's really much too late for me to be trying to think, but I'm just anxious to know what I should do, so that I can continue on with my fun. I hope I haven't just completely confused you. [This message has been edited by vlraynes (12-01-2002 02:33 AM).] |
||
|
vlraynes Member Rara Avis
since 2000-07-25
Posts 8229Somewhere... out there... |
Okay...I'm back and I MIGHT have just answered my own question. I just viewed the source file for Countless Horizons and I see that your style sheet is NOT called "style.css", but is instead called "ch.css". Does that mean that, I CAN give my style sheet a different name? At this point, my guess would be that I can do that, as long as the name is "SOMETHING.css". Am I correct, or am I just confusing myself? LOL. [This message has been edited by vlraynes (12-01-2002 02:43 AM).] |
||
|
Christopher
Moderator
Member Rara Avis
since 1999-08-02
Posts 8296Purgatorial Incarceration |
you are completely correct, you can have as many different names as you want... but you don't need to bother unless you want to (or are worried about size). that's where the "class" designations come in handy. A {font-color: red} A:hover {font-color: green} A.page2 {font-color: purple} A:hover.page2 {font-color: yellow} Your anchor tag on your first page would look like this: <a href="blah.com">blah.com</a> and on the second page would look like: <a class="page2" href="blah.com">blah.com</a> This way you can keep everything together and only develop extra classes where needed. if you'd like to see the style sheet for countless horizons: http://countlesshorizons.com/ch.css you can d/l it and open it up for a peek. [This message has been edited by Christopher (12-01-2002 02:59 AM).] |
||
|
vlraynes Member Rara Avis
since 2000-07-25
Posts 8229Somewhere... out there... |
Coolies. I actually figured it out for myself, and I've just been playing with a second style sheet and confirming that it worked. Thanks for giving me a bit more of an explanation, Christopher. I really appreciate all the help you've given so far. If I start to drive you nuts, just let me know. I understand the concept of the 'classes', but I think I'm going to go with the second style sheet for now. I can always change it, once I've played with the classes and become more comfortable with that method. At this point, that just sounds more confusing to me. (probably because I'm tired..lol) The second style sheet seems the more simple way to go, and I've already set it up on some of my pages since my last post on this thread. Thanks much, for offering me a peek at the style sheet for Countless Horizoos. I will definately take you up on that, and I'm sure that will be a great help. It makes a huge difference when I can actually 'see' what someone is talking about. Thanks again, Christopher. I appreciate you.  |
||
|
|
⇧ top of page ⇧ |
|
| All times are ET (US). All dates are in Year-Month-Day format. | ||
