CSS Everyone Should Know
Nov 3rd, 2011 by Jenn
CSS style sheets are the industry standard for customizing the look of websites, pages, blogs, communities and more. We have looked at why they are useful and how they basically work. Now we need to learn some of the basic calls we need to truly make our sites sing. So what follows are the calls made within a style sheet to affect differing sections of the page’s layouts.
Starting with background properties.
{
background:
}
this allows you to set background properties.
Background colour can be added either way through colour name or the hex numbers. **TIPS: 1 You can easily find hex color codes by using the color sampling box in your favorite graphics editor. 2 You can use only 3 digit codes in the repeating hex codes, meaning ffffff=fff cc99ff = c9f and so forth *** You can also use the word transparent to create a transparent background layer.
background-color:white;
background-color:#ffffff;
background-color:#fff;
Add a background image through this call:
background-image:url(‘paper.gif’);
Do remember your folders in the call though. Think of the urls and that can help, like if my style sheet is at http://mydomain.com/style.css and my image is at http://mydomain.com/image.jpg then the call would be exactly like above. But, if my image is at say http://mydomain.com/images/image.jpg then the call should read “images/paper.gif instead in the above call.
Do you want that back ground image to repeat? Then you need to add a repeat call such as this:
background-repeat:repeat-y;
your repeat options are as follows:
repeat The background image will be repeated both vertically and horizontally.
repeat-x The background image will be repeated only horizontally
repeat-y The background image will be repeated only vertically
no-repeat The background-image will not be repeated
The no repeat is used mainly when you don’t want to totally remove the coding option but do not want the image at this point to repeat.
Next we move onto the fonts, beginning with the main font call:
{
font:
}
First you can call a font family. Font families can be called by specific names like arial or by style like sans serif. If a font name contains white-space, it must be quoted. You may start with a specific font but always end with a generic family, allowing the browser to pick a similar font in the generic family, if no other fonts are available. Remember to separate each value with a comma.
font-family:”Times New Roman”,Georgia,Serif;
You can also control your font sizes for differing areas or attributes such as headers.
The basic font size calls are as follows:
xx-small Sets the font-size to an xx-small size
x-small Sets the font-size to an extra small size
small Sets the font-size to a small size
medium Sets the font-size to a medium size
large Sets the font-size to a large size
x-large Sets the font-size to an extra large size
xx-large Sets the font-size to an xx-large size
length Sets the font-size to a fixed size in px, cm, etc.
font:size-small;
font:size-100px;
Margins are used to control the spacing within areas. Here we list the main call and example calls.
{
margin:
}
To have a top margin of 10px, a right margin of 5px, a bottom margin of 15px and a left margin of 20px use this: margin:10px 5px 15px 20px;
To have a top margin of 10px, a right margin of 5px, and a bottom margin of 15px use this:
margin:10px 5px 15px;
To have a top margin of 10px, and a right margin of 5px use this:
margin:10px 5px;
To have a margin of 10px all around simply use this:
margin:10px;
Padding would be the much same as margins only you use the word padding instead of margin.
These are the main calls you will use in creating and customizing any style sheet. Through understanding these basic calls you will able to work with any existing style sheet and customize it to your own designs. In fact that is what we will be looking at next customizing existing theme style sheets, templates and images to help you quickly adapt existing themes to your personal style.