A lot of times, people have problems with CSS because they really don't understand what they're doing. They know that they have to copy and paste some codes, and change some colours here and there. But can you code a stylesheet on your own, from scratch? Probably not, but once you understand the basics of what you're doing, you'll shortly be able to code one with your eyes closed!
The first thing you'll need to understand is why everything in CSS is like that. Why's there so much? Why's it there? Where did it come from? At first glance, CSS is forieng and confusing, but after this, you'll be able to know what everything does, or be able to think of something, and know how to do it.
Let's start with the very basics. Any part of a stylesheet should look like this:
tag {
varibale: value;
}
In this code, you'll have to change quite a few things:
Tag will be replace with the HTML tag you're trying to effect, whether it's your body (<body>), a header (<h1-6>), a textarea (<textarea>), or even just your bolded text (<b>).
Variable will be replaced with what you want to change in your tag, like your font colour, font family, size, border, or any text decoration you'd want on there. For a large list of variables you can use, check out the CSS Variables tutorial. You can use as many as you want or need of these for each tag.
Value will be replaced with how you're specifically going to change it, like, with a specifit pixel width, specific colour, or specific font point value. These can also be found on CSS Variables page.
Hopefully that cleared up the form a bit. But let's try an example. Let's say we wanted our whole page to have a black background, with size 24, white, courier new font, with a letter spacing of 8. We'd use this code:
body {
background-color: black;
font-size: 24pt;
color: white;
font-family: courier new;
letter-spacing: 8px;
}
We'd either put this code on an external stylesheet as is, or put this in the head of an HTML document between <style> tags. And that's about it! Go crazy with it- create your own unique stylesheets, and don't be afraid to try new things! If you have a really great idea, then do it! Or if you see a site that inspires you, instead of copy and pasting their stylesheet, do it your own way- but never copy something exactly, that's just rude. It doesn't matter if you typed it out yourself, it's still copying!
Basic things to remember about CSS:
Stylesheets should be located in the head of your pages, whether it's the actual coding or the shortcut to your external stylesheet.
If there's a tag for it, you can edit it in your CSS!
If something isn't working, check over your stylesheet to see if you're missing a ':', ';', '{', or '}' somewhere. If the problem still persists, check your spelling over.
DO NOT use HTML in your stylesheet. There's no point, and it won't work.
Comments in CSS are different than HTML. TO do a comment somewhere in your CSS, do this: /* This is a comment */
It would be a good thing to validate your CSS at W3C.org. Note: Scrollbar codes ARE NOT valid!
