Creating a basic CSS file
Complete tutorial on making your CSS
Follow the steps provided, and you'll have a generic CSS file you've created all yourself. If you skip any steps, you will have things missing on you stylesheet you might've wanted to have, so follow the steps vigorously!
Step 1: Starting / Finishing Your Stylesheet
To begin, paste this at the beginning of your stylesheet:
Step 2: The generic body style
The body style sets a general appearance for how your page will look. This includes font style and a background.
Step 3: Making a style for your links.
You can change the way all of your links look with a few simple styles. A:link, being what your links look like normally. A:visited is how your links will look once they are clicked on once. A:active is what your links look like when they are clicked. A:hover is how they look when you have your mouse on them.
Step 4: Forms and Textareas
These are what you would find on contact forms, comment forms, and anywhere you would want a textarea. The code that is displayed on this page in boxes are in textareas. Be sure to customize everything to your liking!
Step 5: Closing Tag
I told you I would remind you of this! Place this after all the code you have written, if you haven't done so already.
Note: I'm sure you want to get rid of that ugly colors of the scroll bar, and change the colors of it, right? Technically this isn't XHTML correct, so if you care about validating your css, don't put scrollbar attributes in your stylesheet. If you don't care, then go for it! So here's the code for that.
That is your basic CSS file, including scrollbar colors, link colors, style for the text on your page, and textareas/buttons.
I know this can be really confusing for first time coders. Questions? Submit them here!
Step 1: Starting / Finishing Your Stylesheet
To begin, paste this at the beginning of your stylesheet:
You will write all your code below this. After you have written your code, you must close the css with this (I will remind you of this at the end of this tutorial also.)
Step 2: The generic body style
The body style sets a general appearance for how your page will look. This includes font style and a background.
Let's decode the above. The first part of the code sets the font color and size of your text. You can leave it verdana, or change it to whatever font you like. But please be careful to make sure that people will have that font on their computer already, or provide a link to exactly where they can download it to view your site. Next, The font size and line height I don't really understand too well. But it works fine and makes the text a good size. For an example, that's the size of my text you see on my site. Now for the background image. Change BACKGROUND.NAME to the URL of your background. background-attachment: fixed; makes it so your background doesn't scroll. So if its an image, it stays in one place and the text scrolls on it instead of with it. If you'd like your background to scroll with your text, remove 'fixed' from the code.
Step 3: Making a style for your links.
You can change the way all of your links look with a few simple styles. A:link, being what your links look like normally. A:visited is how your links will look once they are clicked on once. A:active is what your links look like when they are clicked. A:hover is how they look when you have your mouse on them.
You can change the colors to fit your layout. This specific style underlines the link when the mouse hovers over it. For changing the color, use the same directions as above. For text-decoration you can use any font style, such as underline, italic, bold, strikeout, etc.
Step 4: Forms and Textareas
These are what you would find on contact forms, comment forms, and anywhere you would want a textarea. The code that is displayed on this page in boxes are in textareas. Be sure to customize everything to your liking!
Step 5: Closing Tag
I told you I would remind you of this! Place this after all the code you have written, if you haven't done so already.
Note: I'm sure you want to get rid of that ugly colors of the scroll bar, and change the colors of it, right? Technically this isn't XHTML correct, so if you care about validating your css, don't put scrollbar attributes in your stylesheet. If you don't care, then go for it! So here's the code for that.
Customize the colors how you would like. Basically, you can use the word, or the hex code, provided you know it. If you use a hex code, you have to leave the # in front of the numbers. One note though, don't make them all the same color. Otherwise you won't see the scrollbar at all but a color. Play around until you find a combination you like for your scrollbar.
That is your basic CSS file, including scrollbar colors, link colors, style for the text on your page, and textareas/buttons.
I know this can be really confusing for first time coders. Questions? Submit them here!
