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 4 – Hex Colours V Colour Names

Colours. You have to admit, this is one of the funnest parts of website coding, or at least it is in my view, apart from seeing your website in action. Anyway, this post is all about how your computer classifies colours.

So what are Hex Colours? Well, for a start, Hex is actually short for Hexadecimal. HTML uses Hexadecimal colour codes, instead of actually just saying: “Red”, “Blue”, or “Green” for example, for a number of reasons, which I will explain to you now.

1. It may be easier just saying colour names, and HTML does allow you to do so, but it does make more sense to use the Hex Codes. If you were to use just colour names, then you quickly reach a problem. What exactly is the shade of red. Many people use HTML, meaning that many people have different interpretations of what a standard red should be. With Hex Codes, the standard red will always be “#FF0000″. Therefore a lot of fairly pointless and time-consuming arguments are prevented.
2. Hexadecimal Codes are what you might call a Universal Language. In the United States of America, black is “#000000″, in England, it is still “#000000″, in Russia, I believe it is the same, as well as France and Germany. It is the same in any country that uses the same symbols for letters and numbers as the Hexadecimal Codes are formatted on.
3. In the end, you are going to run out of colour names, you have to admit. You can always say Red, Dark Red, Pink, Light Pink, Orange, Beige, Tan, but what happens when you want a Dark Blue, that is darker than the computer’s version of Dark Blue? This also links back to the first argument. I hope that is enough evidence supporting Hex Numbers.

So anyway, just to help you, I have given you the codes for about 25, or a little less Hex Numbers. These are just pretty normal ones, like some shades of Blue, Red, Green, Grey and most normal colours. I can’t show you all of them yet, because in actual fact there are 256 different colour codes, and that would take a long time time to write up. 0.0

#CCCCCC	#FFCCFF	#FFFF99	#00FF00
#999999	#FF99CC	#FFFF00	#00CC00
#666666	#FF0099	#FFCC00	#003300
#000000	#FF6666	#FFCC99	#00FFFF
#FFFFFF	#FF0000	#990099	#0000FF
#FF6600	#990000	#663300	#000066

So there we go. Now you know about some of your Hex Numbers. Now, I can freely show you examples of them in CSS, and you will have a clue about what I’m talking about, in case you didn’t already. Have fun with Hex Colours!

Update: You can now access a full list of all of the 256 Hex Colour Codes, from: http://html-color-codes.com – I haven’t counted them, but it looks like there are about that many -__- Thanks to AJCann for showing me this site.

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!

Lesson 1 – What are HTML & CSS?

HTML

Probably everyday you go and look at one website on the internet, at least one, as long as you have access to a computer. Ever wondered how you get to see what you see on those pages? Here is the short answer: HTML, or Hyper Text Mark-Up Language. Here is the long answer: HTML is a form of computer language, that your internet browser will read, and display to you. For instance, this whole page is made-up of HTML coding. Most normal websites have an awful lot of HTML coding to show you what you see. It is almost unfathomable, to people new at HTML, or those experienced with it. Don’t believe me? Go on: View > Source on the top bar of your computer. Now you can see all of the coding.

CSS

Once you know the basics of HTML, you notice that usually the text you write is fairly boring to look at, and the tables you create might be too simple for you, with just white boxes and black lines. If you wanted to make all of this more interesting, by using HTML, then it can often take a large amount of coding, that is hard (and dangerous) to edit. This is where CSS comes in. CSS, or Cascading Style Sheets. The idea of CSS is to specify what your tables, text and many most of your page looks like, by telling the web browser what it is supposed to look like before it sees all of your text. This way you can easily jazz up all of your pages easily!

And that’s it for your first lesson and CSS & HTML. Hope this helps you a bit, on your journey through the wonders of it. Good luck, but do not worry – I will be here to guide you through it.

Welcome to CSSBytes!

The CSSBytes blog is now officially open! I am the supreme master of it, CSSBytes, and I will be gradually guiding you through the complicated world of CSS (Cascading Style Sheets, in case you didn’t know). It may seem fairly tricky and difficult to understand at first, but I can assure you that it really isn’t that hard. Nobody knows everything about CSS, (yes, not even me), but by sharing what we know, than we definitely could.

As well as teaching many tricks and tips for CSS, I will also be giving you some quick HTML (Hyper Text Mark-Up Language) tips too, because CSS is pretty much useless without HTML. The reason CSS is important? Well, I’ll tell you that soon, in your first CSS lesson, that will be coming soon to the blog. Bookmark the site, and remember to keep visiting!