Posted by cssbytes on August 15, 2007
It may seem a little confusing, the title, but basically this post is about how to set up your CSS for your page. It’s something I have apparently missed out on showing you, which is a little embarrassing. But anyway, on we go. The code required to do this, needs to be placed in the head section of every page in your website. Generally, if you are making a website, you can just copy and paste a document which includes the layout of your page, along with the link to your CSS Stylesheet, on each new page you write, before you start. If you can’t find a head section on your page, look for the tags: <head></head>, and if necessary, write your own. Here’s the all important code:
| <link href=”yourcssfilegoeshere.css” rel=”stylesheet” type=”text/css”> |
- That’s it really. Make sure the code goes in between those head tags, and it’ll work fine.
- However, if you do get your website set up on the internet, it is a little different. What you need to do, is copy and paste your CSS Stylesheet onto a page onto your website. Here is the updated code you need:
| <link href=”http://theurlofyourstylesheet.css” rel=”stylesheet” type=”text/css”> |
- As you can see, there isn’t much of a difference. Instead of linking to a file which is on your computer, and only your computer, you’ve linked to a stylesheet that’s on the internet, which everyone can see, if they want to.
That’s the end of this much-needed post. I apologize for forgetting how to show this to you, but, I have now. In case you haven’t noticed, CSSBytes has finally reached a thousand hits and beyond! Yay! I won’t be writing any posts until next Wednesday or so, because I’ll be on a short break. Click here for a little more information. Bye.
Posted in CSS, HTML | Leave a Comment »
Posted by cssbytes on August 12, 2007
Now, I personally wouldn’t like having background music on my website, or any website that I may visit, because the chances are, I won’t like the music that is being played. Nevertheless, I’m sure some people would want this, so I’ll post this. Anyway, like the post before, Background is only available for IE users (I believe), but I’m not very clear on the subject, so I may be wrong. My coding hopefully won’t be wrong, but I suggest you do a Google search for some extra help, after reading this post. Here’s the code for it (note – it may be wrong):
| <bgsound src=”yourmusicfile.mp3″ loop=’infinite’> |
- There is no CSS code for background music, so you will just have to make do with a HTML one. Still, at least it’s a short one!
- I believe it can be almost any format, but you will need to host the file on an internet site. I can’t really help you with this, but I’m sure that another Google search can.
- And finally, the “loop=’infinite’” part, means that your background music will just be constantly repeated until the person leaves the page. Just remove it, and your music will only play once. Simple.
That is it for now. I hope this post has helped you, as I have told you all that I know about this subject (which isn’t really much). And, to add to that, this is the end of the body section. I shall be moving on to other things now, which I haven’t decided yet. Bye-bye!
Posted in Body, HTML, IE Only, Music | Leave a Comment »
Posted by cssbytes on August 9, 2007
Firstly, I’m sorry it took ages for the next post to be written. Firstly, I just haven’t been finding the time to go on the computer with my busy (*cough*) schedule, but it’s also taken me ages to think of what to write about next. So, eventually, I’ve decided on formatting the scrollbar. However, this isn’t essential, for the following reason:
Basically, to put it simply, all web browsers are different. So Firefox can do this, and Internet Explorer (simply shortened to IE) can do that, and formatting the scrollbar will only be seen by people using the more recent versions of IE (Internet Explorer). Still, you may as well format it, so that the people who visit your webpage, that are using IE, can enjoy it. Here is the code you need:
body
{
scrollbar-face-color: #000000;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-darkshadow-color: #999999;
scrollbar-shadow-color: #333333;
scrollbar-arrow-color: #AAAAAA;
scrollbar-track-color: #BBBBBB;
} |
- It does seem like a lot of coding, that probably makes no sense to you whatsoever, and yes, the first time I saw this, I was completely confused, but once you know what each “scrollbar-….” is, then it’s quite simple.
- Customize the colours to whatever you like, using Hex Colours. Generally, you should give it colours to match the colour scheme of your page (ie: the background, text colours, etc).
- Still confused? I often go to this really good site, which has lots of generators for your CSS coding. Click here to go to a generator that makes the code above.
That’s all for now. I hope you enjoy the post about formatting the scrollbar. It may not be an essential part of your website, but at least it’s something you can do to make IE users extra special. 
Bye!
Posted in Body, CSS, Colours, IE Only, Scrollbar | Leave a Comment »
Posted by cssbytes on August 5, 2007
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:
- 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!
Posted in Body, CSS, Margins, Padding, Tables | Leave a Comment »
