★CSS components
First will come the explanation of the different sections or components of the style sheet. This will help you to understand what each section presents and what they are for. The next tutorial on the Break down of CSS properties will explain what all these properties you see actually represent and the acceptable values that can be inserted in your style sheet.
★CSS components - Links
The style sheet starts of with the formatting of links. i.e.
{ color: value;
background-color: value;
text-decoration: value;
font-weight: value;
font-size: value;
font-family: value;
cursor: value; }
A:visited
{ color: value;
background-color: value;
text-decoration: value;
font-weight: value;
font-size: value;
font-family: value;
cursor: value; }
A:hover
{ color: value;
background-color: value;
text-decoration: value;
font-weight: value;
font-size: value;
font-family: value;
cursor: value; }
A:active
{ color: value;
background-color: value;
text-decoration: value;
font-weight: value;
font-size: value;
font-family: value;
cursor: value; }
Here you'll see the defining properties for "link", "active", "visited" and "hover". "link" basically refers to the links on your site - those that the visitor hasn't clicked on before. "active" refers to links which you are clicking on, meaning the webpage is currently open in another window, "visited" refers to links which you have clicked and gone to the webpage before, and "hover" refers to the style of your link when your cursor is placed over the link.
IMPORTANT! the list must be displayed in the particular order:
- link
- visited
- hover
- active
★CSS components - Body
The body section of the style sheet defines all the stuffs in the main body content of your site. It consists of 3 parts:
First, are the background properties
background: value;
background-image: url(your_image.jpg);
background-repeat: value;
background-attachment: value;
background-position: value value;
...
Second, are the text properties
font-family: value;
font-size: value;
font-weight: value;
color: value;
text-decoration: value;
text-align: value;
text-transform: value;
text-indent: value;
letter-spacing: value;
word-spacing: value;
...
and lastly, are the scrollbar properties (playing around with this can be very fun =] )
scrollbar-face-color: value;
scrollbar-highlight-color: value;
scrollbar-3dlight-color: value;
scrollbar-shadow-color: value;
scrollbar-darkshadow-color: value;
scrollbar-track-color: value;
scrollbar-arrow-color: value;
...
These properties will apply to everything that lies between the <body> and </body> tags in your HTML source.
★CSS components - Paragraphs
Next, we have the properties for paragraphs. This are the format settings for stuffs within your paragraphs, i.e. <p> and </p> tags.
{ font-family: value;
font-size: value;
font-weight: value;
color: value;
text-decoration: value;
text-align: value;
text-transform: value;
text-indent: value;
letter-spacing: value;
word-spacing: value; }
★CSS components - Headers
Similar to paragraphs, the codes for headers define the properties for stuffs placed between your <h1> and </h1> tags. For subsequent headers, i.e. h2, h3, h4, and so on (till h6), the code's the same - just replace the 'h1' with your respective header.
{ font-family: value;
font-size: value;
font-weight: value;
color: value;
text-decoration: value;
text-align: value;
text-transform: value;
text-indent: value;
letter-spacing: value;
word-spacing: value; }
★CSS components - Input, Textarea
This section is to set the properties for input text areas.
{background-color: value;
background-image: url(your_image.jpg);
font-family: value;
font-size: value;
font-weight: value;
color: value;
text-decoration: value;
text-align: value;
text-transform: value;
text-indent: value;
letter-spacing: value;
word-spacing: value;
border-left: value value value;
border-right: value value value;
border-top: value value value;
border-bottom: value value value;
padding-left: value;
padding-right: value;
padding-top: value;
padding-bottom: value;
margin-left: value;
margin-right: value;
margin-top: value;
margin-bottom: value; }
The first part is basically the background-color of your text area. You can use an uploaded image as your background within the text area as well, just place the URL path within the brackets (). Then comes the font/text properties and the last three sections are stuffs to do with the border, padding and margin of your text area.
★CSS components - Tables
This section is to set the properties for tables.
{ background-color: value;
font-family: value;
font-size: value;
font-weight: value;
color: value;
text-decoration: value;
text-align: value;
text-transform: value;
text-indent: value;
letter-spacing: value;
word-spacing: value;
border-left: value value value;
border-right: value value value;
border-top: value value value;
border-bottom: value value value;
padding-left: value;
padding-right: value;
padding-top: value;
padding-bottom: value;
margin-left: value;
margin-right: value;
margin-top: value;
margin-bottom: value; }
The first part is basically the background-color of your table. Then comes the font/text properties and the last three sections are stuffs to do with the border, padding and margin of your table. Pretty standard stuff I would say. Now to move on to more interesting stuffs! The explanation of various properties :)
