CSSBytes

Helping You With Your CSS

  • Blog Goals:

    • Getting it's own domain.

    • Creating a completely unique layout for it.

    • Becoming very well-known across the CSS community.

    • Most Importantly:

      To help you with your CSS!

  • CSS & HTML Help

  • Subscribe

  • Blog Stats

    • 11,038 hits

Archive for June, 2007

Lesson 14 – The Body

Posted by cssbytes on June 28, 2007

Sorry about not posting lately, a lot of stuff has just been coming up. This almost means that this post will be short and sweet. But at least it means you don’t have to read a lot. (Yes, that was the best excuse I could come up with).

So anyway, this next section of posts will be about the body. It will cover many things about CSS, and a tiny bit about HTML (which is today). Basically, HTML wise, the body is where ALL of your HTML goes. The body does have it’s own tags, being: <body></body>. In between those, all of your HTML coding will go, but not your stylesheets, unless you are doing something a little different with stylesheets, but that’ll come later on.  Usually, when you use your HTML writing document, the body tags should come up automatically, (I know they do when using Dreamweaver). But if they don’t, just write them at the start of your code, then put everything HTML-wise in between them, and forget about it!

And, that is it. Sorry about the short post, but I will tell you this: The next two posts will teach a very important, and sometimes fun technique, which can make your pages look much better than normally. The only hint I’ll give you, is that it has something to do with a part of the page that is always white, unless formatted. Bye-bye for now!

Posted in Body, CSS, HTML | Leave a Comment »

Lesson 13 – Borders

Posted by cssbytes on June 22, 2007

Oh dear, I hope this post won’t be too unlucky… So anyway, like I promised (in riddle form, at least), here is the CSS guide to borders. There really is a lot of stuff which borders can be used for. In this case, the only real examples will be fore tables. Here we go:

There are quite a few different type of borders, such as…

Solid

As explained before, the solid border is just your normal, standard border, with no gaps, or anything clever, just a solid, straight line. Usually, most of the borders you find on websites are like this.

Dashed

Unlike the solid border, a dashed border has gaps in it, being dashed and all. If used correctly, with the right colours, dashed borders can look pretty good, but if you mess up, they look terrible.

Dotted

This one is fairly similar to the dashed border in reality. The only real difference, is that there are slightly larger gaps between the lines of border, and the lines (or dots) are smaller.

Double

Wow, that’s three borders in a row that begin with the letter “D”. (I really need to get out more…) Anyway, just like the name suggests, the double border has two borders instead of one. Those borders are the equivalent of a solid border, in case you were wondering, so you get two solid borders.

Groove

To be honest, I haven’t quite worked out what this border really is myself. It looks pretty similar to the solid border, except that it has a little shadow, and the border doesn’t meet up at the end, which I don’t remotely understand at all.

Inset

This one and the next one are really cool. Basically, what inset does, is gave your table some dark shadow on the top and left borders, and lighter shadow on the bottom and right. It’s quite similar to the Bevel & Emboss effect, often used in applications such as Adobe Photoshop, or Paint.

Outset

The next super-cool one, is outset. As you might’ve expected, this is just the opposite to the inset border. The bottom and right borders get the darker shadow, whilst the the top and left borders get the lighter shadow.

Ridge

Ridge makes the border look like it has a ridge in it, basically. This one can be used especially well for a 3D looking page, but you do need thicker borders to make it work well.

- – - – - – - – - – -

Firstly, the line above wasn’t a dashed border of any kind, it was just handwritten (or typed) dashes with sapces in the middle. So anyway, this is a reminder of how to format those borders.

table
{
width: 300px;
height: 300px;
background-color: #FFFFCC;
border: 1px solid;
border-color: #000000;
}
  • The bits highlighted in bold and a different colour are the things that you can customize, from this post. Firstly, there’s the style of border. Change the thickness, and type of border (listed above), to whatever you want. Next, you can change the border colour to whatever you desire, but it generally helps if your border works well with the table fill colour, (if it has one), and page colour scheme.

That’s all for now. I have to apologize for the lack of examples, but it’s something that I will work on getting you. Have fun with all of those tables and borders!

Posted in Borders, CSS, Colours | Leave a Comment »

Lesson 12 – Formatting Tables

Posted by cssbytes on June 18, 2007

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!

Posted in Borders, CSS, Colours, Tables | Leave a Comment »

Lesson 11 – Tables

Posted by cssbytes on June 15, 2007

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!

Posted in Borders, HTML, Tables | Leave a Comment »

Lesson 10 – Images & CSS

Posted by cssbytes on June 10, 2007

Okay. I apologize for the late post. This is all because I have been wrestling with the little bug. Fortunately, I’ve got rid of it now, so I’m not going to be held up any longer by it. Anyway, onto the lesson:

Unfortunately, I must admit, that I am pretty when it comes to doing images and all that. I can’t draw them (on the computer, or by hand, it doesn’t matter – either way I’m rubbish)! And we know that you can’t just take someone else’s image without permission, no matter how much you want it. And sometimes it’s hard to get permission. To add to that, I’m crap at formatting them with CSS too. Usually when I use images, I end up having to resort to just HTML, which is a bit embarrassing. Because of this, I’m only going to be able to teach you one CSS trick, with images.

img
{
border: 1px solid #000000
}
  • The tag is called “img” seeing as when you use HTML, you put <”img” src…>. Again, img is short for image.
  • When formatting borders with CSS, you can have a lot more fun than with HTML. You can:
  • Customize the hex colour code to whichever one you desire.
  • Change the border thickness from 1px (one pixel), to whatever you like.
  • And, you can change the type of border too. Two different examples of borders are solid, (the one we are using, which is just well… solid), and dashed, (which is well… a dashed border).

That’s it for now. I hope you have more luck creating and formatting images than I do…

Posted in Borders, Images | 3 Comments »

Lesson 9 – Images & HTML

Posted by cssbytes on June 6, 2007

Images are definitely a way to brighten up your webpage. They can be fun, colourful, or whatever you want them to be. This is an example of an image, from a great site called: Neopets.com. Sign up for it now it if you want.

 

 

About Images

All images have to come from somewhere, right? So how do people get images onto their websites (such as the one above). Basically, all images have their own URL, or website address, on something that is called an image server. In this case, the URL for this image is: http://images.neopets.com/new_shopkeepers/t_62.gif. It might seem quite complicated, but this is just the system that the website happens to use. Anyway, the image’s URL all comes into use when putting one on your site.

 

Getting Images Onto Your Site

There are two way of doing this. You can either go to many websites known as Image Hosting websites. These, basically give you a place to put your images, giving them their own URL. They don’t usually cost money either, and they shouldn’t need too. Two great examples of these are Photobucket, and Flickr (what I use), but remember to read the terms and conditions for both of them! Or, your website might have an image server of it’s own, where you can just place your images.

 

And Finally, The HTML…

I know this is probably what you’ve been waiting for, so I won’t be stalling it any longer. Basically, all images use the <img> tag. As you can tell, “img” is just short for image. The interesting thing about this tag, though, is the fact that it doesn’t close. It is also similar to the tags for links, because you can’t just say “img”, because then the computer doesn’t know what image to display. This is the code for putting up the image that I have:

<img src=”http://images.neopets.com/new_shopkeepers/t_62.gif”>
  • Notice how you can see the Image’s URL in that code. Also,you can see that there is no point closing the code, because there is nothing to close in reality.
  • For image

Extra Stuff (Optional)

Sometimes you might want to put a border around your image, to make it look snappier, or more defined. This is very simple. Here is the code (which has been extended a little) for it:

<img src=”http://images.neopets.com/pets/happy/scorchio_darigan_baby.gif” border=”1″>
  • So you put border=”1″after the image’s URL, but before the end of the tag. This means that your images will have a border, in this case it will just be 1 pixel thick, but you can change the number to make the border thicker or thinner.
  • Below, is what the image would look like if you used this code:

 

As you can tell, borders don’t always look right around images, like this one for example. They can sometimes be useful though, if your page has a different background colour to your image, so the border will prevent them from clashing together.

One other thing that you can do, is re-size your image. Firstly, you need to know what size your image is in the first place. If you can’t remember, then all you have to do is open the image in your web browser (as long as you can remember the URL), or open it in an application like, Paint, and check the size. Now that you know the size of the image, it becomes easy to change it. In this case, our image is 150 pixels x 150 pixels. This is how you would change it:

<img src=”http://images.neopets.com/pets/happy/scorchio_darigan_baby.gif” width=”75px” height=”75px”>
  • Like when you formatted a border, you just placed your text after the image’s URL. The image size will usually be measured in pixels, so put “px” after your number, to tell the computer that it is in pixels.
  • Very importantly, always keep the proportions on your image the same, or else it will look absolutely terrible. In this case, both measurements were the same, so it wasn’t too hard. The only exception to this would be if your image was warped to start with.
  • This is what your image would look like:

And that is it for now. There is more that you can do with your images, but again,it is more advanced. But for now, have fun with your images!

Edit: Sorry if this post came out  strangely. I have been wrestling with a bug on WordPress to get it fixed.

Copyright 2000-2007 Neopets, Inc. All Rights Reserved. Used With Permission

Posted in Borders, HTML, Images | 1 Comment »

Lesson 8 – Headers

Posted by cssbytes on June 1, 2007

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!

Posted in CSS, HTML, Headers | Leave a Comment »