my care2
make a difference

community & fun

groups

get together & make a difference

 
 
 Using CSS June 09, 2005 3:56 PM

I love CSS I can't live without it lol I use css on every single website I make, and I feel it is one of the most

imporant things I could have learned to make my site better!

There are several different points I will discuss about CSS:

1. What is CSS?

2. How to make a style sheet to change font, backgrounds, links, etc...

3. External Style Sheets

4. Creating layouts using CSS (in a new thread)

What is CSS?

CSS stands for Cascading Style Sheet. CSS lets you define HTML elements such as font, images, colors, backgrounds, links, etc... You can even link to an external style sheets, and make everything so much easier because it allows you to change the code on one page and have it affect your entire site if you want!

CSS can save you time and energy and let you make a great site quickly and easily.


With CSS you can say all font inside a table will be blue, and the only thing it will affect is font you put

inside a table. So you do not have to go through and put <font color="blue"> for every table on every page

of your site!

CSS also makes it really simple to update your pages look without changing the content. You just go through

and change the colors, fonts, etc... You can change one page and it will effect your entire site!


This will just touch on CSS and give you the basic understanding and how to use it.


CSS basics


Creating the Style Sheet

Put your style sheet inbetween the <head></head> tags!

To begin start with this:

<style type="text/css">

This says that you will begin a style sheet using css.

the closing tag is: </style>

Now you need a selector, a property and a value:

It will look like this:

selector {property: value}

the selector is what you want to define such as, p, body, td, etc...

the property is what you want to change such as, font-family, color, background, etc...

the value is the attribute you want it to take on such as, blue, verdana, etc...

So its the selector first, then { then the property then : then the value then }

if you have multable values you seperate them with this ;

 [ send green star]
 
font June 09, 2005 4:01 PM

Now lets say you want to make your pages font red, verdana, size of 11px (pixels).

You need to define those styles so, you would put:

body {
font-family: verdana;
font-size: 11px;
color: red
}

You tell it that it affects the body of the page (within the <body></body> tags first.

Then you begin it using { and end it using }

font-family: says the family of font being used.

font-size: for the size of the font

and color: for the color of the text.

remember to use ; after each part except the one right before the }.

Easy huh?

you can change the values to anything you wish, the font family to any you would like the size to anything

you choose, and the color to one you choose (read more about this on the font thread).

So the code would be:

<html>
<head>
<style type="text/css">
body {
font-family: verdana;
font-size: 11px;
color: red
}
</style>
</head>
<body>
</body>
</html>

 [ send green star]
 
LINKS June 09, 2005 4:06 PM

To define the style for the links the code is:

a:link    {color: #383369; text-decoration: underline}
a:visited {color: #383369; text-decoration: underline}
a:active  {color: #B8860B; text-decoration: none}
a:hover   {color: #B8860B; text-decoration: none}

a:link is the normal link how it looks when someone first comes to your page.

a:visited is the link after it has been clicked by the person, I usually leave it the same as the first one but

you can change it to make it stand out so people know which links they have already clicked on. It is helpful.

a:active this affects the link when it is clicked on. So if they click on a link to open a new window to another site, and you have the a:link color set to red, and the a:active link set to blue. Once the link was clicked on it would turn blue.

a:hover this affects the link when the mouse is over it.


You must keep it in that order!

You can define any color you want to it. You can make them all have the same color, or each one different.

For text-decoration you have several choices of what to put:

none means it looks like normal text (no line udner it like a normal link).
underline means it looks like a normal link, it has a line under it.
overline means there is a line above the link
underline overline means there is a line above and under the link
line-through means there is a slash through the link

So lets say you want a link to have a line above it at first, when it has been visited to have a line through it,

when it is active to have a line above and under it and when the mouse hovers over it you want it to have

no lines at all?

The code would be:

a:link    {color: #383369; text-decoration: overline}
a:visited {color: #383369; text-decoration: line-through}
a:active  {color: #B8860B; text-decoration: underline overline}
a:hover   {color: #B8860B; text-decoration: none}


Now lets say you wanted to have more then one kindof link on the same page. So on your page you want the links to be like what we did above, but for your navigation you want them all to be one color and no lines at all?

You would first add the code above. Then you would add this:

a.nav:link    {color: #383369; text-decoration: none}
a.nav:visited {color: #383369; text-decoration: none}
a.nav:active  {color: #383369; text-decoration: none}
a.nav:hover   {color: #383369; text-decoration: none}

and then in each link for the navigation you would add: class="nav"

like this:

<a class="nav" href="link.html">Home</a>

You can change the word nav to whatever you want, a.bob:link  and then it would be class="bob" it doesn't matter. But using a word like nav will make it easier to find what goes with what lol.

Adding the link style to your style sheet


So right now we have:


<style type="text/css">
body {
font-family: verdana;
font-size: 11px;
color: red
}
</style>

We will add the link style and it will be:


<style type="text/css">
body {
font-family: verdana;
font-size: 11px;
color: red
}
a:link    {color: #383369; text-decoration: overline}
a:visited {color: #383369; text-decoration: line-through}
a:active  {color: #B8860B; text-decoration: underline overline}
a:hover   {color: #B8860B; text-decoration: none}
a.nav:link    {color: #383369; text-decoration: none}
a.nav:visited {color: #383369; text-decoration: none}
a.nav:active  {color: #383369; text-decoration: none}
a.nav:hover   {color: #383369; text-decoration: none}
</style>

You can also change the cursor when the mouse hovers over the links by adding:

cursor:

you can use:

auto, wait, crosshair, s-resize, e-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize, default, text, move.

experiment! I love using the crosshair one for my navigation links.

And add it like so:

a:link    {color: #383369; text-decoration: underline;cursor:crosshair}
a:visited {color: #383369; text-decoration: underline;cursor:crosshair}
a:active  {color: #B8860B; text-decoration: none;cursor:crosshair}
a:hover   {color: #B8860B; text-decoration: none;cursor:crosshair}

remember to add the ; after the text-decoration if you add a cursor!


!!! Cursors only work in IE !!!

 [ send green star]
 
Adding Background Images and Color June 09, 2005 4:10 PM

To set a background color for the entire page you put:

body {
background: #000000
}

To set a background image you put:

body {
background-image:url(july4.jpg);
background-repeat:no-repeat;
background-position:top left;
background-attachment:fixed
}

background-image:url() is where you put the url of the image you want to use.

background-repeat: you can put repeat, no-repeat, repeat-x, repeat-y if the image is small and you want it to just show up once, to go all the way across or up and down, or not repeat at all.

background-position: where you want it to align, first you say the first value which is either top, bottom, center, percent (100%, 75%) or pixel number so you can tell it exactly how and where you want it (100px)
then the second value which is either: right, left, center, percent (100%) or pixel (100px)

background-attachment: do you want the screen to scroll or just the text? if just the text then put fixed if the screen then put scroll.

Now lets add our background to our Style Sheet, place it with the rest of the body{}:


<style type="text/css">
body {
background: #000000;
background-image:url(july4.jpg);
background-repeat:no-repeat;
background-position:top left;
background-attachment:fixed;
font-family: verdana;
font-size: 11px;
color: red
}
a:link    {color: #383369; text-decoration: overline}
a:visited {color: #383369; text-decoration: line-through}
a:active  {color: #B8860B; text-decoration: underline overline}
a:hover   {color: #B8860B; text-decoration: none}
a.nav:link    {color: #383369; text-decoration: none}
a.nav:visited {color: #383369; text-decoration: none}
a.nav:active  {color: #383369; text-decoration: none}
a.nav:hover   {color: #383369; text-decoration: none}
</style>


I prefer to assign a color also when I use an image.

 [ send green star]
 
Scrollbar colors June 09, 2005 4:11 PM

This will only work in IE

scrollbar-face-color : #383369;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #383369;
scrollbar-shadow-color : #383369;
scrollbar-darkshadow-color : #383369;
scrollbar-track-color : #383369;
scrollbar-arrow-color : #000000;


insert the colors you want! You add it like this:

<style type="text/css">
body {
background: #000000;
background-image:url(july4.jpg);
background-repeat:no-repeat;
background-position:top left;
background-attachment:fixed;
font-family: verdana;
font-size: 11px;
color: red;
scrollbar-face-color : #383369;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #383369;
scrollbar-shadow-color : #383369;
scrollbar-darkshadow-color : #383369;
scrollbar-track-color : #383369;
scrollbar-arrow-color : #000000
}
a:link    {color: #383369; text-decoration: overline}
a:visited {color: #383369; text-decoration: line-through}
a:active  {color: #B8860B; text-decoration: underline overline}
a:hover   {color: #B8860B; text-decoration: none}
a.nav:link    {color: #383369; text-decoration: none}
a.nav:visited {color: #383369; text-decoration: none}
a.nav:active  {color: #383369; text-decoration: none}
a.nav:hover   {color: #383369; text-decoration: none}
</style>

 [ send green star]

 
Using and June 09, 2005 4:13 PM

You can also define just certain areas of your page using css.

Use <p></p> <h1></h1> <h2></h2> <h3></h3> <td></td>


So lets say your page has black text but you want one section to have blue text. You can go:

<style type="text/css">
body {
font-family: verdana;
font-size: 11px;
color: #000000
}
p {
color: blue
}
</style>

then where you want the blue text just put:

<p>text here you want blue</p>

Remember to close that tag with the </p>!!

You can also use it to define all the font in a table!

with:

<style type="text/css">
td {
font-family: verdana;
font-size: 11px;
color: #000000
}
</style>

 [ send green star]
 
Classes & IDS June 09, 2005 4:19 PM

Classes

You can also use classes to define multable sections differently.

<style type="text/css">
p.blue {
color= blue
}
</style>

and then on your page between the <body></body> tags add this:

<p class="blue">blue text here</p>


IDs

you can also use ids like this:

<style type="text/css">
#blue {
color= blue
}
</style>

and then on your page between the <body></body> tags add this:

<p id="blue">blue text here</p>

 [ send green star]
 
External Style Sheets June 09, 2005 4:21 PM

External Style Sheets allow you to put all the css stuff on another page and just link to it on your pages and have it work!

It is really great when you are using the same basic colors, etc... on many pages.

You want to place it within the <head></head> tags like so:

<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>


change the style.css to whatever the name of your page is.


Ok so here is the style sheet we created above:

<style type="text/css">
body {
background: #000000;
background-image:url(july4.jpg);
background-repeat:no-repeat;
background-position:top left;
background-attachment:fixed;
font-family: verdana;
font-size: 11px;
color: red;
scrollbar-face-color : #383369;
scrollbar-highlight-color : #000000;
scrollbar-3dlight-color : #383369;
scrollbar-shadow-color : #383369;
scrollbar-darkshadow-color : #383369;
scrollbar-track-color : #383369;
scrollbar-arrow-color : #000000
}
a:link    {color: #383369; text-decoration: overline}
a:visited {color: #383369; text-decoration: line-through}
a:active  {color: #B8860B; text-decoration: underline overline}
a:hover   {color: #B8860B; text-decoration: none}
a.nav:link    {color: #383369; text-decoration: none}
a.nav:visited {color: #383369; text-decoration: none}
a.nav:active  {color: #383369; text-decoration: none}
a.nav:hover   {color: #383369; text-decoration: none}
</style>


We want to remove the <style type="text/css"></style> tags. Then copy the rest and save it by itself to whatever name you want but make it end with .css so for example style.css

That simple!

 [ send green star]
 
 June 09, 2005 4:22 PM

More useful properties you can use:

just change the word value to the one you want to use inside the ( )

letter-spacing: value (either normal or add a length)
text-align: value (right, left, center, justify)

font-style: value (normal, italic, oblique)
font-weight: value (normal, bold, bolder, lighter, 100-900)

If you have any questions or comments speak up!!

 [ send green star]
 
 April 02, 2006 12:41 PM

Hi Raven,

I'm having problems setting up a RSS news feed, it currently half works, as in, it only shows up as having one news item listed on my Care2 homepage.

Here's the file:

http://www.worldheritagealert.org/Pages/rssmaster1.rss

The homepage that it is one is here:

http://www.care2.com/c2c/group/WHAlert

Any ideas?
 [ send green star]  [ accepted]
 
 April 03, 2006 3:14 AM

1. Sorry for getting the threads mixed up - RSS, not CSS!

2. Sorted it, it turns out that I got it right seconf time, but Care2's RSS feeds system is bugged and will not refresh.
 [ send green star]  [ accepted]
 
css order August 13, 2007 12:23 PM

what is the corrrect order of:
a:link
a:visited
a:active 
a:hover 
 [ send green star]  [ accepted]
 
 August 13, 2007 12:31 PM

the order doesn't matter  [ send green star]  [ accepted]
 
Using External CSS October 24, 2008 8:14 AM

I love using CSS also. I would suggest that when you have as many CSS tags as you show that using and external CSS sheet is more appropriate. What an external CSS gives you is that you can have the CSS codes affect all of your web pages in a site. To create the CSS you save it as a .css file, such as:

myCSS.css

To make this accessible to your web pages you put the following code in between the <head> and </head> tags.

<link rel="stylesheet" type="text/css" href="myCSS.css" />

On the myCSS.css page you put in the same code that you were putting in between the <style> and </style> tags.


 [ send green star]  [ accepted]
 
  New Topic              Back To Topics Read Code of Conduct

 

This group:
Website Design Help
208 Members

View All Topics
New Topic

Track Topic
Mail Preferences


Copyright © 2009 Care2.com, inc. and its licensors. All rights reserved