 |
|
 |
|
 |
||||||||||||||||||
|
Style Sheet : Body tag Aaron said I should start with a tag. =P But since we did the explaination of how to link to one we might as well talk about creating one.Open notepad, a blank notepad before you, save this document as style.css make sure you type the .css and then you have your style sheet document. So we need to create some tags! In your blank document type body{ This will open our first tag for the css. When we add things to the body we change properties on the page. To close the tag we would add } Like with HTML code we need to close whatever tag we open. So lets add to our tag so it actually does something. Changing the Background Properties Inside the { } we're going to add background:black; this will change the color of the page to black. In html we would use bgcolor= but with css we put background: then our color and we place ; at the end to seperate it from the next property we add to the body css tag. So next we're going to change the color of the text to white so that we can read it. On a new line below the background:black; and before the } we add color:white; So far we have a black page with white text, and our code looks like this: body { background:black; color: white; } Now as with HTML we can use the CSS to make a background image, but with the CSS we can do a little more to that image so that it fits our needs more. background-image: url('/images/bg.jpg'); By using the above line you can turn your background into an image instead of a color. The text found within the (' ') is the address to where your image is on your server. So remember that / means your root directory and then everything after that should be the path to the image. background-repeat: no-repeat; By adding that property we can make it so the background is stationary. This is handy if you're background is meant to be a stationary image and nothing else. Sometimes people use an image a wallpaper as a background. (Not a very tasteful thing, see dos and donts) But you can also change the no-repeat to repeat, repeat-y, repeat-x. The y and x stand for the axis of the layout. So if you are using a div layer layout you want the background for the image to scroll down but not beside, because it's only a 750px image and someone is using a 1024px resolution. Then you would add background-repeat: repeat-y; to your coding so that the image doesn't repeat on the x-axis but only on the y-axis. background-attachment: fixed; like with HTML we can fix the background by adding in this property. background-position: bottom; By using this property we can decide where the background will flow from. Will it come from the left, right, center, bottom or top. This will help us if we have a right sided image or even one that flows from the bottom up. So Now our code looks like this: body { background:black; background-image: url('/images/bg.jpg'); background-repeat: repeat-y; background-attachment: fixed; background-position: left; color: white; } Changing the Font Properties Next let's change the font size on the page. Everything that is done within the body tag is for the whole page, not counting what is done in tables or in Div layers. So if you make the font color of the page blue but not for the div layer then the div layer's font color will default to black as is the web default color. So let's begin with our first font property. (Second if you count us changing the color above. font-size: 13px; This will allow for you to change the size of the font. In CSS it is important that you include the px at the end. px stands for pixels. So 13px is a relatively small font. font-weight: bold; By adding this in you can make the text bolded throughout the page without having to use the <b> tags, though it does mean you can't stop the bold for a small part of the text on the page. Other acceptable formats can be bolder, lighter, normal and 100-900. The 100-900 setting requires the visitor's computer to have display-weighted fonts available. font-family: Arial; Within this property we can change the text format, just keep in mind that when you change the font family you need to ensure that you're using a font that is likely to be on the visitors computer. There is no point in using redensek when you're the only one with it. font-style: italic; Like with the bolded text you can use this property to make your text either italiced, oblique or once again normal. font-variant: small-caps; By using this property we can make our text all small caps whether we are holding the shift key when we type or not the text will show up as small-caps and a large cap for whatever we do hold the shift key for. Creating something that looks like this. HELLO From this point we can now move to adding a new property to the style sheet. Most of the time a style sheet is to create fancier properties to a page. So now our code should look like this:
We don't necessarily have to include every possible property. It only needs to be there if we want to change it from the default. The default is always standard non-formated Times New Roman text in black color. |
