Lesson 25 – ID’s (Part One)

Yeah, so I’ve spent a while trying to write a post for AJCann, but I then eventually decided that it would be too difficult to explain it in a post, until I’ve covered some other stuff. So basically – I’ve wasted a lot of time. A week or so, to be more precise. But anyway, on to a very important post for you all.

So now you have quite a lot of tags, don’t you? You have your <p> tags, your strikethroughs, your bold text, and don’t forget your links, either. Well, what if you want two kinds of these sort of tags, for instance. What if you want certain text for the left side of your page, and certain text for the other side of the page? (I know, that probably sounds a little weird, but it could happen). That’s where ID’s come in. ID’s can give you two kinds of <p> tag, or header, or whatever kind of text you like. Here’s a code you would use:

#IDNAMEGOESHERE { font: 12px Courier; color: #663399; text-align: left; text-indent: 1px; }

• In case you were wondering, the “#”, which I have put in bold, is something you always need to put before your ID name (which you can change to whatever you want, by the way).That tells the web browser, reading your CSS, that the tag you’ve just formatted is an ID.
• Change the the height, colour, and the font itself to whatever you want. It’s all customizable to whatever you like.
• Due to the fact that you now know about aligning divs, you do not actually need to align your text in the CSS, but it can be quite helpful, depending on the situation you’re in. And you never actually needed the text-indent anyway, so use it if you like.

So now you have your nicely named ID (I hope it has a better name than my one does). The question you’ll probably ask yourself now, is how do you apply this to your text? Actually, it’s very simple. This is all you need to do:

<p id=”IDNAMEGOESHERE“>Text goes here.</p>

• That is, literally, all there is to it on the HTML side. Remember to put the ID name you chose, in between the “”, or else it won’t work!
• Also, you can change it from the <p> tag to what ever text tag you want. It’s really that simple! All you’ll have to do, is replace the two ‘p’s with the name of the tag you desire.

And that’s it for now. But for any of you wondering, this is what the text with the applied ID would actually look like!

Lesson 23 – More :Hover…

Yes, so if you’ve read an earlier post, showing you about hyperlinks that go on your page, you should already be familiar with the :hover, and what it does. If not, then basically, it’s what something (in the previous post’s case it was a link) will look like, whilst you hover over it with your mouse. But, this feature isn’t just for links. It can be used for many other things too, such as the following:

Text

Yes, so basically, any type of text has a :hover feature. This means normal text (<p>), bold, italic, underlined, strikethrough, overline, links, headers and simply any type of text, including any tags which you might make up yourself!This is the code you need for it:

p { font: 10px Arial; color: #000000; } p:hover { font: bold 15px Times; color: #FFCC99; }

• This was just an example. But anyway, see the bit in bold? That’s what you add to any of the tags mentioned above, if you want them to have a :hover attribute.
• You can also use this to fool people into thinking that piece of normal text is actually a link. They’ll press on it, and obviously, nothing will happen. That’s for all of you mean people out there!

Images and Tables

Those two are generally the more popular tags to have a :hover attribute, especially the images. It will be a very simple hover, at this stage, but you can do some very fancy ones. Here is the code for them:

img/table{ border: 1px solid; color: #000000; }img/table:hover { border: 27px groove; color: #FFCC99; }

• Of course, unlike with the text, your tables and images will have their borders edited instead. What I have showed is a little extreme, from one to twenty seven pixels, but it’s just an example. Try out both of the examples if you like!

That will be it for now. You don’t necessarily have to have the :hover attribute on any of your text whatsoever (not even the links), but it is a nice was to spruce up your text. Until later, ciao!

Lesson 7 – Anchors

This lesson will really be quite a quick one. So anyway, what are anchors? A heavy object that keeps a boat in place? Yes, but not in this context. Anchors are completely different to that, when they are referred to HTML or CSS wise.

Anchors are very similar to Hyperlinks, in reality. Instead of linking you to another page on the web, like a Hyperlink does, Anchors link you to a certain point on the same page. They do require a bit more coding than Hyperlinks, but they are still easy. This is how you do them.

Step One

Firstly, you need to find the text, or certain point that you want to link to. It could be an image, or quite a lot of other things too, but usually they are just used to link to text. Anyway, let’s say that you want to link to a certain bit of text, which says CSSBytes, this is how you would code it.

<a name=”CSSBytes”>CSSBytes</a>

• Basically, you have given the text a name. In this case, we have called it CSSBytes, seeing as that is what it is, but you could name it anything that you want to. You could name it just CSS if you wanted to. Anyway, now onto the next section.

Step Two

Now, you need to actually link to that part on the page. This is how you do it:

<a href=”#CSSBytes”>Link</a>

• Remember the “a href” part? The reason you can see that again, is because Anchors are just a version of Hyperlink. But because you’re linking to somewhere on the same page, you don’t need to put the website address, just #, and whatever the a name was, (in this case it was CSSBytes).

Step Three

• Formatting anchors is incredibly easy, you know why? Because you’ve already done it before! Seeing as Anchors are just Hyperlinks, they don’ look any different. In fact, here is a link to formatting Hyperlinks, in anchor form: link!

That’s it for now. Happy Anchoring!

Lesson 6 – Formatting Hyperlinks

Now you know how to write hyperlinks, using HTML, you have learnt a very useful bit of coding. Of course, without CSS, your hyperlinks just look plain and boring, usually just blue with an underline and a standard font.

Hyperlinks are a little different to your usual text, when formatting, because they come in different modes. Have you ever notice that when you hover over a link, it changes colour, or after you’ve visited that link, it might change colour. Sometimes, when you click on the link, it changes colour. This is all due to CSS. When you format a hyperlink, there are four things you have to think about*:

• What it normally looks like.
• What it looks like when you’ve visited the link.
• What it looks like when you hover over the link with your mouse*.
• And what it looks like when you click on the link*.

These different options all have different names: A:link, A:visited, A:hover, and A:active. You need to format all of these in CSS, otherwise your links might mess up, and be completely different in the respective modes. This is how you will format them

A:link { text-align: left; text-indent: 5px; color: #00FF00; text-decoration: underline; font: 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

A:visited { text-align: left; text-indent: 5px; color: #330066; text-decoration: underline; font: 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

A:active { text-align: left; text-indent: 5px; color: #FF9900; text-decoration: underline; font: 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

A:hover { text-align: left; text-indent: 5px; color: #00FFFF; text-decoration: underline; font: 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

• It is actually no different from normal text, when you format the separate modes. They basically all come together, to make your links work. The computer does most of it for you. So in this case, the links would normally be a nice bright green, when you’ve visited them, they become purple, when you click on them, they go orange, and when you hover on them, they go light blue. That’s it for now. Now you can format and write hyperlinks, an essential part of making a website. Remember to read the bit after the star at the bottom.

*Important Note: When formatting hyperlinks, you can only use the A:hover, (text changes when your mouse is hovering over the link), or A:active, (text changes when you activate, or click on the link), option. A:link and A:visited will always be there, but you can only choose one of the other two to use.

Lesson 5 – Writing Hyperlinks

Hyperlinks are basically what most people call links on a website. They take from one place on a website to another, or to other websites instead. The good thing about them, is that there is so much more that you can do with them than just normal text. This is an example of a link, which just takes you to the blog again: link.

The Basics of Writing Them

Hyperlinks are very simple to write in HTML, although they are a little different from your normal <p></p> or <u></u> tags for instance. Still, once you’ve got your head around them, there isn’t really that much to them. Basically, they are written like this:

<a href=”http://WHEREYOUWANTTOLINKTO”>TEXTHERE</a>

• The basic tag for links is just <a></a>, but if you just wrote that, your computer wouldn’t know where the link should take you to. That’s why there is the “href=” bit. That stands for Hyperlink Reference Equals, or where you want the link to go. Next, you put the name of the website where you want to go to, (remember to put that is speech marks “”). Now, you close the tag, and write the text that the link to be. Finally, you simply close the tag, </a>. So, if you wrote this:

<a href=”http://cssbytes.wordpress.com/”>CSSBytes!</a>

• This is what it would look like on the web: CSSBytes!

A Little Extra

Sometimes though, you might want people to stay on your webpage, but still click the link. What you would do now, is make the link open in a new window. Because this is little different from it not opening in a new window, all you have to is add this:

<a href=”http://cssbytes.wordpress.com/” target=”_blank”>CSSBytes!</a>

• All you added was: target=”_blank”, just before the end of the first tag. As it says, this gives the computer a target to where you wanted the link to go. In this case, the target is a new window. If you click on this link, then you will see the difference.

That’s it for now. You can now put links on your website, make them open in the same window, or a new one. And this is just with HTML. In the next lesson, you will learn how to format your links, (via CSS of course). Until next time!

Lesson 3 – Fancier Text

So, now you know what HTML & CSS are (that’s always good XD), and how to format your basic text. That’s your normal text, your bold text, and your italic text. You shall now be learning about some fancier text, like strikethrough, underlined, and . Note: overlined text isn’t really a picture, it is jsut the only way I could work out to put it on WordPress.

Strike Through Text

Basically, this is the computer equivalent of having your text crossed out, like this. You could use it, for instance if you want to show that you have got rid of some old information, but you still want people to see it. Or, perhaps if you were correcting something on a webpage, you could use the effect. The standard tag for strike through is <strike></strike>. This is how you would format it:

strike { text-align: left; text-indent: 5px; text-decoration: strikethrough; color: #000000; font: 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

• Very similar to your Basic Text, don’t you think? If you don’t remember, go and have a look, then come back. The only differences are in bold and coloured.
• The name is one change. It is pretty simple, so I don’t think that there are many ways that you can really go wrong. The name is strike for the tag, written <strike></strike>.
• The more important change is text-decoration. This is how we do the three fancy bits of text. Text-decoration can do a lot of things, in this case, lines. Write “strikethrough;” after text-decoration.

Underlined Text

Well, this can be used to define something, as well as your strong/bold text. It also comes in handy for other things, which I shall mention later on in the blog. The tag I use for the effect is <u></u>. I believe there are other ways of doing it, via HTML though, not CSS.

u { text-align: left; text-indent: 5px; text-decoration: underline; color: #000000; font: bold 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

• The first difference is the name. There isn’t really much to say about the name apart from that.
• Next, comes the return of text-decoration. Although, this time you don’t say strikethrough, but underline instead. It this feature especially is used in more than just underlined text.
• The final change is optional. If you wish to stress your underlined text more, then do what you have done with bold text before, and write bold, before the rest of your font information.

Overlined Text

Even I have to admit, I doubt that there are many uses for this type of text. Still, there are a couple of uses, and why not just learn it now, anyway? Overline is basically the opposite of underline, and is looks like this: . The thing is, overline is so uncommon, that I don’t think there is a standard tag for it. I guess we shall just use <overline></overline> or a shorter version, <over></over>.

overline or over { text-align: left; text-indent: 5px; text-decoration: overline; color: #000000; font: 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

• Once again, the changes are pretty much the same as when we did underline. Seeing as this is the opposite of underline, it makes sense, kinda.
• Firstly, we have changed the name of the tag to overline, or over, or anything you feel is appropriate (just keep it clean)!
• And finally, it is the last appearance of text-decoration for the moment. In this case, we have replaced underline, or strikethrough with overline – Easy.

And that is it for today. You have now learnt two more valuable skills of CSS, as well as one that is a little bit different. These are: strikethrough, with the <strike></strike> tags, underline, with the <u></u> tags, and finally, , with the <overline></overline>, <over></over>, or anyhting clean you can think of tags/ Happy CSS’in!

Lesson 2 – Basic Text

Normal Text

When building a website, or just playing about with HTML, all of your normal text should be written in between these two things called tags: <p>Writing here</p> The little “p” stands for paragraph. If you do not use these two tags, then your text will just become a hideous font, depending on your web browsers standard font, font size etc. This is how you can jazz it up with CSS (remember, this is just an example):

p { text-align: left; text-indent: 5px; color: #000000; font: 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

• Text-align, basically, is whether you want your text to be centered, to the left, or to the right, like on Microsoft Word. It’s your choice which one you want, but most people choose left, sometimes center.
• Text-indent is optional. As you would expect, it gives you a margin, or indent. If you choose to add this, then it is completely customizable.
• Color is what it is; the color of your text. This has been written in something called hex colours, but you can just say “Black” or “Yellow” for instance. I will come onto hex colours later.
• The font section in my view is the most important bit. This will sort out the size of your font, and what you want your font to be. You should always specify more than one font, just in case somebody doesn’t have that font on their computer. If you want to see examples of font sizes, just check it on Microsoft Word, with the view at 100%. Once again, it is your choice what you want.

Bold Text

Bold text will just look like the writing above really. There are two common ways of tagging bold text, and that is with <b></b> tags that stand for bold, and <strong></strong> tags. It is your choice which one you wish to use. CSS wise, there isn’t much you need to add, compared to normal text.

b or strong { text-align: left; text-indent: 5px; color: #000000; font: bold 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

• See the text I have put in pink. Those are is the differences. All you have to put is “bold” before your font and font size (which is compulsory), as well as changing the name to something other than “p”.

Italic Text

Italic text looks like this. Again, there isn’t really much to do. You just have to add some words, like you did for bold text. Also, you have two choices of tags – <i></i> or <em></em>.

i or em { text-align: left; text-indent: 5px; color: #000000; font: italic 10px Arial, Verdana, Helvetica, Geneva, sans-serif; }

• Once again, just two differences, in pink once again. Change the name, and put italic in front of the text (that part is compulsory).

And that is that. You already know what HTML & CSS were. Now, you know how to write normal, bold, and italic text. See, it wasn’t that hard, was it? Good luck with your CSS!