myspaceprodesigns.com
stylesheets
- bookmark us
- add me on myspace
- add me on xuqa
- add me on yfly
10/24/2007 09:23 PM
Video Player YouTube Line Up
10/24/2007 02:19 PM
Re: Help with blogs
stylesheet tutorial
The first thing we need to understand before building a custom page or website is style sheet is. Basically, a style sheet is the code which defines how your page is going to look, but not function. By this, I mean that it does not define which links will be used, which pictures you will display, or anything else. It simply tells your browser the visual properties of your page.
Your style sheet starts with <style type="text/css"> and ends with </style>:
<style type="text/css">
CSS Coding
</style>
Your CSS Coding has three parts to it:
Selector {property:value;}
Selector - This is also commonly called an Element. This is the item you are trying to define. For example this can be the body, table, text, a layer, links, etc.
Property - This is also commonly called a declaration. The declarations can be for color, borders, background-image, etc.
Value - This is the value of your declaration. For example, if your declaration is color, then this will the hex value of the color you wish to use.
One Selector - Many Properties
Selector {
property:value;
property:value;
property:value;
property:value;
}
Example:
body {
background-color:blue;
background-image:url('none');
background-repeat:repeat;
background-position:center;
}
One Property - Many Selectors
Selector1, Selector2, Selector3, Selector4 {property:value;}
Example:
a, a:hover, a:link, a:active, a:visited {color:blue;}
Does that look a little funny to you? Those are called pseudoselectors. The selector a is the real selector. Hover, Link, Active, Visited are pseudoselectors because they are defining what happens to the selector a when certain things that your browser knows happens. The same can be applied for many different types of selectors.
Putting It Together:
<style type="text/css">
body {
background-color:blue;
background-image:url('none');
background-repeat:repeat;
background-position:center;
}
a, a:hover, a:link, a:active, a:visited {color:blue;}
</style>
CSS Shorthand
Now we know the basics, lets make our code even shorter by using CSS shorthand. For example, instead of typing so many background properties and values, why not just type background once and lay out what the background does? Take for example:
body {
background-color:blue;
background-image:url('none');
background-repeat:repeat;
background-position:center;
border-style-top:solid;
border-width-top:2px;
border-color-top:blue;
border-style-bottom:inset;
border-width-bottom:8px;
border-color-bottom:red;
font-size:12pt;
font-weight:bold;
font-family:arial;
font-style:italic;
}
This is easy to condense to this:
body {
background:blue url('none') repeat center;
border-top: 2px solid blue;
border-bottom: 8px inset red;
font: 12pt bold arial italic;
}
CSS Classes
Something else we can do is build classes for certain selectors. For example, lets say that you wanted two different classes of links to behave differently. This is easy to do. We would add the class to the codes.
a.class1, a.class1:hover, a.class1:link, a.class1:active, a.class1:visited {
color:blue; border:2px solid green;
}
a.class2, a.class2:hover, a.class2:link, a.class2:active, a.class2:visited
{
color:hotpink;
}
Now, when we put the link in our HTML, we reference the class like this:
<a href="URL OF LINK" class="class1">Text</a>
What that just did is tell our browser that this link needs to display the properties that we defined for class1. In this case, it tells our browser that this link will be blue with a solid green 2 pixel border.
Multiple Classes to a Single Selector
Now let's say that we want multiple classes on a single element. For example, let pretend that we want two different types of links that share some but not all properties.
a.class1, a.class1:hover, a.class1:link, a.class1:active, a.class1:visited {color:blue; border:2px solid green;}
a.class2, a.class2:hover, a.class2:link, a.class2:active, a.class2:visited {text-decoration:overline;}
So we have class1 which states that every link in that class is blue with a 2 pixel solid green border. We also have one class which states that every link in that class is overlined.
Using just two classes, we can make three different types of links:
<a href="URL_OF_LINK" class="class1">Text</a>
• This link will be blue with a 2 pixel solid green border.
<a href="URL_OF_LINK" class="class2">Text</a>
• This link will be overlined.
<a href="URL_OF_LINK" class="class 1 class2">Text</a>
• This link will be blue with a 2 pixel solid green border and be overlined.
Comments
View Comments (4) • Leave Comment • Support Forum