Lesson 26 – ID’s (Part Two)

I’m going to skip right to the chase here, for some reason. As well as all kinds of text, ID’s can be applied to tables, divs, and images, as well (there is some really, really cool stuff you can do with images, as well, but I can’t do them myself). Here’s the CSS code for you, for images:

#IDNAMEGOESHERE { border: 2px groove #3399DD; padding: 3px; }

• Yeah, unfortunately, there’s not much I can really do with images, to be honest. Check back to the borders and images post, for reference on how to customize these.
• Remember to put a new ID for your image, as well. And here is the HTML code for it:

<img src=”yourimageswebaddressgoeshere” id=”IDNAMEGOESHERE”>

• Remember to change the ID name for your image in the HTML, as well as it’s URL, or it won’t work for you.

Unlike the images, I can do a lot more with Divs and Tables. Now, a Div box is like a table, except it only has one column, and it is easier to position on your page. You’re less likely to get in a mess, putting Divs in Divs, than Tables in Tables. Here is some stuff you can put in their ID’s CSS:

#IDNAMEGOESHERE { border: 2px groove #3399DD; font: 12px Arial; text-indent: 3px; height: 200px; width: 300px; overflow: auto; }

• That is a lot of stuff to look at, isn’t it. Well, most of it is stuff that you’ve done before, like the border of your Div or Table, the Text Indent, Height, and Width.
• Now, a good thing about Divs, is that you can specify the font which you want in your Div, and only in your Div. However, you may want to use a <p> tag for your text inside Divs instead, in case you want to use italic, bold, or fancy text in your Divs (excluding headers).
• Then, there’s the “overflow: auto;”, bit. Sounds technical, doesn’t it? Don’t worry. Basically, if your text inside your Table or Div ends up being longer than 200 pixels of height, then it will go into ’scrolling’. Scrolling just means that you’ll be able to scroll in your little box, like you can on most webpages.
• Here’s the HTML code for these two:

<table id=”IDNAMEGOESHERE”><tr><td>Whatever you want inside your little box (text, images, etc) goes here. Remember to code the right amount of columns and rows you want!</td></tr></table>

<div id=”IDNAMEGOESHERE”>Whatever you want inside your little box (text, images, etc) goes here.</div>

---

Now, you may not think it, but that was a very valuable part of making your own webpage layout. You’ve just learned how to make a Div box, and how to specify it’s height and width. You even know how to get it to scroll for you! Have fun with your Images, Divs and Tables!

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!

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 19 – Padding

Alright, I won’t blame you to be a little taken aback from what the title of this post is. After all – padding? What could that mean? Well, basically, padding is very similar to margins, although it can be applied to more things than the body. I suggest you click here; it will explain the difference between margins and padding, much better than I would be able to! And finally, here is the CSS code for padding your page:

body { padding: 4px; }

• Yes, that literally is it. I don’t really have much to explain to you. You can increase or decrease the amount of pixels as much as you like, to suit your page.
• But now, you may come across the same problem which you had with margins. What if you want different padding for different sides of the page? Well, it has the same answer. Here is the code:

body { padding-top: 2px; padding-left: 6px; padding-right: 1px; padding-bottom: 3px; }

• Yes, so you just have padding-left, padding-right, etc, just the same as you had margin-left, margin-right, etc. Although amount of padding on each side is different, you generally may as well have the same amount of padding on the left and right, and the top and bottom.

But unlike margins, padding can be used on more things than just the body. And, it is very simple, too. Just add the snippets of code between the brackets ({}), to your CSS code for tables and images. Here is the code added to what I originally did, on their previous posts:

Tables

table { width: 300px; height: 300px; background-color: #FFFFCC; border: 1px solid; border-color: #000000; padding-top: 2px; padding-left: 6px; padding-right: 1px; padding-bottom: 3px; }

Images

img { border: 1px solid #000000; padding-top: 2px; padding-left: 6px; padding-right: 1px; padding-bottom: 3px; }

Yes, some of this may seem like an awful lot of coding, especially with the tables, but in reality it is not, because you already know what all of those things do, as well as padding too now. This shall be it for this post, and I hope it helps you code your Dreamsite. Bye!

Lesson 12 – Formatting Tables

There really is a bucket load of things you can do with tables. Most of these things are quite hard, or take a long time to write with HTML, so that’s where our good old friends, CSS comes in. You don’t need to use all of these options, but they really a great way to jazz up your webpage. This is the CSS code, which will actually format the table it is in (well, almost):

table { width: 300px; height: 300px; background-color: #FFFFCC; border: 1px solid; border-color: #000000; }

• Firstly, we have the table tag. You can put Td and Tr in, but then it does start to become slightly more complicated.
• Next, we have the width and height. The table the CSS is in, is not 3oopx by 300px, but this is just an example of what you could do, but you don’t have to even put the width and height in. The good thing about this is, is that if you surpass the width with your text, it goes onto the next line. Then, if all of your text is longer than the table, it will go into scrolling, like the bar on the side of your page (on the left).
• Now, you come across the background color. The #FFFFCC really is that light yellow colour, using hex codes. Remember to use those hex colour codes. This is completely customizable, so you can put whatever colours you want there. From grey to orange!
• Another fun bit is the border. You probably remember a bit about borders from the Images post, don’t you? So, this table would have a solid one pixel border. But, now there is another thing you can add.
• That is border colour! Instead of all of your borders being a standard black, they can be any colour you want (using hex codes).You can add this little snippet to your images, as well!

And that’s it for now. It seemed like quite a short post today, for some reason. Anyway, this time I shall give you a little sneak peak about the next post – it has something to do with one of the elements brushed up upon in this post, and the images post. Bye for now!

Lesson 11 – Tables

Okay. I guess I’ll have to admit that I’ve been guilt of a little procrastination up to this post. It was also partly due to the fact that I was trying to work out what to show next, because there are so many things I can show, and now that the choices are growing, it’s getting harder deciding what to pick next. But, anyway:

For a beginner with HTML and CSS, tables can be a great way to set out pages. But in general, it is looked down upon in the CSS community. Also, it can get a bit tricky, if you want to put tables inside of tables, and so on and so forth. Nevertheless, tables are still very useful, so you will need to know how to write them. I’ll show you it in HTML today. Here we go:

<table border=”1″ width=”100%”> <tr> <td><p>Text Here!</p></td> </tr> </table>

• Basically, the table is made up of three main parts – Table, Tr and Td.
• The Table tag should basically start an end your table. Anything you want inside your table should go inside these tags.
• Next, comes Tr. This gives your table a row. If you want more than one row in your table, close the Tr tag, (</tr>), then just make a new one. Very easy.
• As one might expect, the Td tags give your table columns. ALL OF the writing inside your table should be between one set of Td tags. Once again, once you want to make another column, close the Td tag (</td>), and make another one. Be careful though. You’ll want your new column to be in the correct row. Make sure that your column is in between the right Tr tags.
• The border at this point is very simple, without CSS. In this case, it’s a pretty boring 1 pixel wide, slightly shadowed border. You’ll learn how to change that in the next CSSBytes  post. Also, the 1 inside the speech marks is completely customizable.
• And finally, you’ll need to specify the width off the table. In the example, I have put 100%. This means that your table will take up 100% of the webpage. You can change this to whatever you desire. Alternatively, what you can do is replace the 100%, width __px (put a number where the underscores are). This gives the table an exact width. Beware! Don’;t set it just to fit your computer screen perfectly, because other people’s screens might me bigger or smaller.

And that’s it for now. Tables are another valuable technique for HTML, vital for creating your Dreamsite. Goodbye!