CSS stands for Cascading Style Sheet. You use it to change the way your font, backgrounds, text and layouts look. CSS is basically a language that can be used with both HMTL and XML that can define and enhance the style or overall look of the content and presentation. You can also have user defined style sheets and have an automated processing of web pages. It is an extremely powerful language that has many more uses but using this code you should be able to set up a decent CSS layout yourself.
body
{
font-family: FONT;
font-size:FONT SIZEpt;
background-color: #BG COLOR (CAN BE TRANSPARENT);
color: #COLOR CODE;
text-align: ALIGNMENT;
scrollbar-arrow-color: #COLOR CODE;
scrollbar-track-color: #COLOR CODE;
scrollbar-face-color: #COLOR CODE;
scrollbar-shadow-color: #COLOR CODE;
scrollbar-highlight-color: #COLOR CODE;
scrollbar-darkshadow-color: #COLOR CODE;
scrollbar-3dlight-color: #COLOR CODE;
}
A:link{color: #COLOR CODE; font-weight:normal; text-decoration:none;}
A:active{color: #COLOR CODE; font-weight:normal; text-decoration:none;}
A:visited{color: #COLOR CODE; font-weight:normal; text-decoration:none;}
A:hover{color: #COLOR CODE; font-weight:normal; text-decoration:none;}
.head
{
color: #COLOR CODE;
font-size: FONT SIZEpx;
font-family: FONT;
}
input, submit, textarea
{
font-family: FONT;
font-size:FONT SIZEpt;
color:#COLOR CODE;
background:#COLOR CODE;
border-width:BORDER WIDTHpx;
border-style:solid;
border-color:#COLOR CODE;
}
font-family This is the name of the font like Times New Roman, Verdana or Arial. A font family is the standard fonts that everyone has and they form a group of similar fonts. In case a person does not have a particular font installed on their computer, it automatically goes to the next font. To make the font Georgia, for example, use Georgia, "Times New Roman", Times, serif.
font-size The size of your font. Note that you have to end it in pt. For example: 11pt
background-color The background color of your pages. Use transparent here if you have transparent iframes.
color The color of the font.
text-align You can change the alignment of the text by using left, center, right, or justify.
scrollbar-color The whole scrollbar section changes the scrollbar colors. Face color is the main color, highlight and 3d-light are the colors on the top and left, shadow and darkshadow are the colors on the bottom and right, arrow is the color of the arrow, and track is the part under the scrollbar.
A:link Used to change the standard links on the page.
A:active Used to change what the link will look like when the link is clicked on page loading.
A:visited Used to change link properties after the link has been visited or clicked.
A:hover Used to change what a link looks like when you hover over it.
.head This section changes what your headers look like. Omit this out if you don't wish to have any headers.
input, submit, textarea Changes the look of your forms and text areas. Border-style can be changed to solid, dashed, dotted, inset, outset, or ridge.
When you have your CSS file ready, simply save with .css extension and proceed to use it like described in the next part of the tutorial.
Add this in the following fashion:
<HTML>
<HEAD>
<TITLE>My First CSS Web Page</TITLE>
<STYLE TYPE="text/css">
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
All your CSS code will be between the <style and </style> tags.
If you have a CSS code in all of your pages, it can be really annoying to go through and change it when you change your layout. Instead, save your CSS code as style.css and put this code in the head section of all of your pages.
<link rel="stylesheet" type="text/css" href="/style.css">
If this doesn’t work it is because you have different folders on your site, try typing the whole URL in front of 'style.css' for example, http://yoursite.com/style.css, or you could put your root in front of it. If neither of those work, try putting a / in front of 'style.css'
This article is the property of http://www.Elegant-Templates.com
Copying and publishing any article from our site is allowed but you have got to give us a back link and keep the author info in tact. |
