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 24 – A Simple Div

Divs are actually used all over the internet. They are a brilliant way of doing many things, and are probably the most popular way of formatting a webpage, (aside from flash perhaps). But flash can get very annoying, and it is very difficult to code. I would show you how to code it, but I’d need someone to show me how, first!

Probably the most simple div I can show you, is a div that will align things to the left, or right, or center. They can also be used to align ‘justify’, like on Microsoft Word, but this only works with text. The rest will work with tables, paragraphs, images, almost anything you can think of. It does save a lot of time, because then you don’t have to put ‘<p align=”center”>’, for instance, all of the time. And here is the code for an aligning div:

<div align=”center“>Anything you want to be aligned center, should go here.</div>

• Pretty self-explanatory, isn’t it? The text in bold, (in between the inverted commas), can be changed to left, right, or justify (only for text, though), to suit you.

These are really useful to align what you want. I generally find myself using them to align several things to the same place, so that I can save myself some typing (yeah, I’m lazy). So anyway, that’s enough for simple divs. Bye.

So…. what to do now, you ask?

Sorry this post took so long, it took me ages to root up the link I originally had to the site below. It was in my email archives somewhere, and well, that’s a dangerous place to go. But anyway, here are some examples of the next things CSSBytes will be showing you how to make.

You might think that you can already make layouts, and that is true, with the use of tables. However, putting tables inside tables, for instance, can get very cluttered, and make your page look, well…  look like a big eyesore. With the use of these things called Divs (short for divisions, I believe), as well as ID’s (which is really what you’d think it might be), you can make your own layouts like on the page above.

A bit boring, you probably think, looking at the layouts on the other page. Well, you can spruce them up, with CSS, as well as some software such as Adobe Photoshop CS3 (which I just got – yay!), or simply MS Paint. So, in the next post, we’ll be getting started, with some simple Divs. Until then, bye!

Finally! WordPress Helps me Out!

Yeah, it has been a long time since I posted, blah, blah, blah, please don’t remind me. My holiday ended recently, so I am not in the best of moods, obviously. But this did cheer me up a little.

Basically, if you didn’t know before, it is very hard to format CSS in blog posts on WordPress, or so I thought. Thankfully, my friend showed me the link above, which now explains to me how to format CSS in blog posts. Thank you! Yeah, I’m rambling on about nothing, aren’t I? Well, to stop your suffering, this’ll be it for my post. Bye.