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 8 – Headers

Using bold text is good up to a point, but of course is does come to a limit. As well as that, all pages do usually need a title. Fairly surprisingly, there are actually 6 headers, but you are never actually going to use that many (most of the time), so you don’t actually actually need to format that many, either.

HTML

Basically, the headers are just called Header 1, Header 2, Header 3, Header 4, Header 5 and Header 6. But these would be quite long tags to write, so they have just been shortened to <h1></h1>, <h2></h2> and so on to make it quicker. That is really allyou need to know about headers, HTML wise, unless you want it a little more complicated…

CSS

At this early stage of CSS, formatting headers is quite easy, although they usually don’t look too interesting, until you start learning the more advanced stuff (which you will get to). A good tip for headers is to make them match your page’s colour scheme. So a quite blue page could have gray headers, or a brown page could have green or yellow headers. Remember to use those hex codes! This is an example of formatting a simple header:

h1 { color: #FF0000; text-align: center; text-transform: uppercase; text-decoration: underline; font: bold 18px Courier, Arial, Verdana, Helvetica, Geneva, sans-serif; }

• This would make a nice, simple header, perfect for perhaps, a purple webpage, because the header colour (#FF0000) is red. Change this part depending on the colour scheme of your page.
• The header would be aligned to the center of the page, but you can alter it, so that your headers are on the left, or right part of the page. It’s your choice.
• Text Decoration has returned yet again! Not all headers are (or should necessarily be) underlined. It does seem to depend on your page, but these days, not many headers are underlined. If you haven’t noticed, none of the headers on this page are underlined.
• The font is nice and big (18 pixels or just “px” for short). Also, the font itself is Courier, which looks quite like a sort of typewriter font, if you’ve never seen it before. This would be great for a FBI style page (just a suggestion!).
• Finally, it is something new. Text Transform is an option in CSS that will change all of the characters in to a certain case. In this instance, it’s uppercase, so all of the letters in the header will be in CAPITALS. Putting “lowercase” there does the opposite. This is optional though.

When you start to format more of your headers (which you probably should do, because it’s nice to have more than one type of header on a page) you should usually make sure that your font gets gradually smaller. So your Header 1, or <h1></h1> will be the largest, and Header 6, or <h6></h6> will be the smallest. Personally, I often make my Header 1 the grand title of the page, then Header 2 slightly smaller, defining sections, and so on. There is loads that you can do with headers, and they are quite fun to format. But these can get a bit complicated, so I shall noty teach them to you now. Happy CSS’in!