This can be found at http://digitalzen.org/tutorials/basic-css.html as of 11-29-03
Okay, well I've noticed a few questions recently on how I created thus and such in the appearance of my site. Well I used CSS, and in response to the questions I've recieved I've decided to start writing some tutorials on CSS to help you folks get started. Now, without further ado...
the...
This is a tutorial on basic CSS (Cascading Style Sheet) creation. It is going to cover many of the basic fundamentals of CSS files and how they can be used to improve the appearance of a website. This particular tutorial will focus on the syntax and use of a style sheet in a webpage or site.
--Syntax--
Firstly, let’s discuss the syntax of a style definition. The syntax is divided into three parts:
A selector, a property, and a value as follows:
Code:
selector {property: value}
.button {background-color: transparent; color: #EEE8AA;}
The selector is usually the HTML element you want to define, the property is the attribute you want to modify, and each property can have a value. The property and value are separated by a colon and surrounded in the { and } brackets (the curly brackets).
As demonstrated in the above “.button” example, if you wish to specify multiple properties they should be separated by a semi-colon. The two properties above are a transparent background and a text color.
Code:
.button {background-color: transparent; color: #EEE8AA;}
can also appear as follows, which is sometimes easier to read:
Code:
.button {
background-color: transparent;
color: #EEE8AA;
}
Note that you can group several selectors by separating each with a comma. This will cause all the selectors in a group to share an attribute. This is demonstrated as:
Code:
button,textfield {
background-color: transparent;
color: #EEE8AA;
font-family: Verdana, Arial, Helvetica;
}
--Class Selectors--
With class selectors you can define different styles for the same type of element. Let’s say that your website requires two styles of paragraph and you want to automate the process. This can be done as follows:
Code:
p.right {text-align: right}
p.center {text-align: center}
With the above in your style sheet, you can identify a certain paragraph style as follows:
Code:
<p class=”right”>This is aligned with the right side of the page</p>
<p class=”center”>This one, however, will be centered on the page.</p>
Remember that only one class attribute can be applied per paragraph with the above method. You cannot apply both “right” and “center” to the same paragraph. It will not work. Another method of using a class selector is to omit the tag name in the selector as follows:
Code:
.center {text-align: center}
This will create a selector that can be identified for anything (not just paragraphs) by identifying the class as ”center” using the aforementioned method.
--ID Selectors--
As opposed to the Class Selectors in the above section, which can be applied to several elements, ID Selectors can only be applied to one element. ID attributes must be unique within the document. Below is a demonstration that will match a p element with the id value of “p1”:
Code:
P#p1 {
text-align: center;
color: blue
}
Another method for this is to use a wildcard to match the first element on the page with the id value of “p1” to the style defined for “p1”
Code:
*#p1 {
text-align: center;
color: blue
}
--Inserting a Style Sheet--
Now let’s discuss the methods of instituting a style sheet.
The internal style sheet would be placed in the <head> of your document, and would be surrounded by the following tags:
Code:
<style type=”text/css”>
<!-- CSS Goes Here -->
</style>
As stated, the CSS would be placed within the tags. It should be placed within an html comment (that’s what the <!-- and --> tags are)
The external style sheet would be a file that was something like “stylesheet.css.” This type of file will be linked into the html document and the link should appear in the <head> of the document. The link syntax will appear as follows:
Code:
<link rel=StyleSheet href="stylesheet.css" title="StyleSheet">
The above link is assuming that “stylesheet.css” is in the same directory as the file that you are linking it to. Otherwise you will need to modify the href link to suit your personal needs.
--CSS Comments--
Now to add comments to your CSS (if your CSS file becomes large you will be glad you have notes to remind you of what you were thinking at the time). A CSS note is surrounded by /* and */ as follows:
/* This is a CSS comment */
--Example CSS--
This CSS is as used in http://digitalzen.org and is to be an example for anyone wishing to learn CSS.
Code:
BODY {
background-image:url("background.jpg");
background-color: #000000;
background-attachment:fixed;
background-repeat:no-repeat;
background-position:center center;
scrollbar-face-color: #000000;
scrollbar-shadow-color: #EEE8AA;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #EEE8AA;
scrollbar-darkshadow-color: #EEE8AA;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #EEE8AA;
color: #FFFFFF; font-family: Verdana, Arial, Helvetica;}
.textfield {background-color: transparent; color: #EEE8AA; font-family: Verdana, Arial, Helvetica;}
.button {background-color: transparent; color: #EEE8AA;}
.checkbox {background-color: transparent; border: transparent solid 0px; font-family: verdana; font-size: 12px; color: #EEE8AA}
A:link {COLOR: #EEE8AA; TEXT-DECORATION: none}
A:visited {COLOR: #EEE8AA; TEXT-DECORATION: none}
A:hover {COLOR: #EEE8AA; TEXT-DECORATION: none}
}
I hope you found this informative. More to come in the CSS field.
-Zen
This Tutorial ©2003 FallenZen. If you wish to use this tutorial on your site, please leave this credit intact.
Check out The DigitalZen (http://www.digitalzen.org).
Reply With Quote