★CSS break down
Below is a detailed break down of the various properties (found within the brackets {} ). For each property, I have provided the acceptable (or commonly used) values. Replace the word 'value' in the sample css template with the appropriate value that you want. Hope this will give you greater insight and understanding of what each set of code means! :)
★CSS break down - Fonts
Throughout the style sheet you'll notice many attributes that deal with fonts. Here's what they mean:
font-family: A group of fonts that have similar designs.
font-size: Font size of your text. Values are in terms of pixels (e.g. 10px).
font-weight: This is the thickness of your font.
Values: lighter, normal, bold, bolder or you could enter a number value (try using in multiples of 100, because changes won't be obvious between values any less than that - like between font-weight:100 and font-weight:150. range of values: 100 [thin] to 900 [thick]).
★CSS break down - Text
text-decoration: Allows you to add lines over, through and under your text.
Values:
text-align: Allows you to align your text.
Values: left, center, right, justify.
text-transform: Allows you to easily capitalise all text to a standardised look.
Values: UPPERCASE, lowercase, Caplitalize.
text-indent: Allows you to indent your words.
Values can be any number in pixels (e.g. 20px) or in percentages (e.g. 10%).
letter-spacing: Allows you to adjust how far apart each alphabet is from one another.
Values can be any number in pixels, e.g. 1px, 2px, 3px.
word-spacing: Allows you to adjust how far apart each word is from one another.
Values can be any number in pixels, e.g. 10px, 11px.
★CSS break down - Color
Colors used can either be the actual name of the color (e.g. red), a hexadecimal value (e.g. #000000) or RGB values (rgb(100,0,200)).
Click here for more on colors.
★CSS break down - Background
Under the body section of the style sheet,
{ background-color: value;
background-image: url(your_image.jpg);
background-repeat: value;
background-attachment: value;
background-position: value value;
... ...
background-color: This is the background color of your page.
Values can be color names, hexadecimal values, or RGB values.
background-image: Allows you to use an uploaded image as your background. Enter the URL of your uploaded image within the brackets (), including the file extension (e.g. .jpg, .gif, etc).
background-repeat: Allows you to repeat your background image throughout the page.
Values: no-repeat, repeat, repeat-x, repeat-y.
background-attachment: Allows you to either fix your background or let your background scroll together with the content on your page.
Values: fixed, scroll.
background-position: Allows you to position your background image. Two values must be entered here.
Values can be
★CSS break down - Scrollbar
Under the body section of the style sheet, you'll also notice a series of codes pertaining to the scrollbar's properties:
scrollbar-highlight-color: value;
scrollbar-3dlight-color: value;
scrollbar-shadow-color: value;
scrollbar-darkshadow-color: value;
scrollbar-track-color: value;
scrollbar-arrow-color: value;
I guess I don't have to explain what each property means ;) The code's pretty self-explanatory, go ahead and test out color values to get the right color combination for your site's scrollbar. Values for each of the properties can be color names, hexadecimal values or RGB values. Visit our color tutorial if you need help on color values.
★CSS break down - Cursors
You can change your cursor from the default ones. This is done as one of the properties for your links - you can set the cursor look for 'link', 'visited', 'hover' and 'active'. Here are the possible cursor values you can use:
(hover your cursor over each value to preview the cursor!)
You would realise that the set of values n-resize and s-resize; e-resize and w-resize; se-resize and nw-resize; & sw-resize and ne-resize are actually the same, so you can just choose either ones.
Instead of inserting a value, you can use your own image as your cursor. Use the following code for the cursor attribute:
★CSS break down - Borders
This applies to input,textarea as well as tables.
border-width: Allows you to adjust the thickness of your border.
Values can be in pixels (e.g. 2px), or in words (e.g. thin, medium, thick).
border-style: Allows you to adjust the pattern or style of your border.
Values: solid, dashed, double, dotted, groove, inset, outset, ridge, hidden.
border-color: Allows you to adjust the color of your border.
Values can either be the color name (e.g. red), a hexadecimal value (e.g. #000000) or RGB values (e.g. rgb(100,0,200)).
Click here for more on colors.
In the sample css template, under the 'input, textarea' section, the border properties are not what we see as above. In the sample template, all the border properties have been combined into one for convenience :)
border-left: Values here will be for the left part of the border only.
Format is "value value value" - the first value is the width, second value is the style and the third value is the color.
Hence an example will be:
So similarly,
border-right: Values here will be for the right part of the border only.
Format is "value value value" - the first value is the width, second value is the style and the third value is the color.
border-top: Values here will be for the top part of the border only.
Format is "value value value" - the first value is the width, second value is the style and the third value is the color.
border-bottom: Values here will be for the bottom part of the border only.
Format is "value value value" - the first value is the width, second value is the style and the third value is the color.
★CSS break down - Padding
Padding refers to the distance between your border and your text within the border. This is useful to adjust the text within a border to make it look more pleasing to the eye (text that are stuck right to the edges of the border can look quite unpleasant).
Values are either represented in pixels (e.g. 5px) or in percentages (e.g.10%).
Formats:
(i) You can either have a uniform padding all around your text within the border, or
E.g.
(ii) you can specify the padding individually at the left, right, top and bottom.
E.g.
padding-left: 0px;
padding-right: 2px;
padding-top: 3px;
padding-bottom: 5px;
...
In the sample css template provided, format (ii) is used. You can always change it to format (i) instead to save yourself the trouble if you want uniform padding throughtout.
★CSS break down - Margins
Margins are pretty similar to paddings, but they aren't the same actually, so don't confuse them up. While a padding is the distance between your border and the text within the border, a margin is the distance that is outside your border. Although they do eman different things, the coding style for both are more or less the same.
Values are either represented in pixels (e.g. 5px) or in percentages (e.g.10%).
Formats:
(i) You can either have a uniform margin all around your text within the border, or
E.g.
(ii) you can specify the margin individually at the left, right, top and bottom.
E.g.
margin-left: 0px;
margin-right: 2px;
margin-top: 3px;
margin-bottom: 5px;
...
In the sample css template provided, format (ii) is used. You can always change it to format (i) instead to save yourself the trouble if you want uniform margins throughtout.
