Close X

The Cascading Style Sheet (CSS)

(Page 1 of 17: Viewing entries 1 to 10)  
Page Links: 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  
Icebox- (Rainbow- Bridge)

Principles ...- Values ...- Common Sense
Purred: Tue May 8, '07 5:08pm PST 
CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colors, margins, lines, height, width, background images, advanced positions and many other things. Just wait and see what kinds of goodies you can do!

The Cascading Style Sheet (CSS) is a way to design a website, or a group of websites, so that they have a consistent look and feel, and so that their look and feel is easy to change. By using CSS to design a website, the web developer gains a greater degree of control over how the site appears.

Two advantages for using CSS for styling instead of HTML are:
1) Pages that use CSS load faster because the amount of code is less.
2) The look and feel of an entire website can be changed at one time by making changes to the stylesheet. (ie: if you want to change text color from blue to green, you just find the 'green' and change it to 'blue')

The basic building block of a stylesheet is the rule. A rule is a statement applying one or more properties to one or more elements. The declaration of a rule is split in to two parts; the selector and the declaration block, which itself consists of declarations/definitions. Each declaration consists of a property and a value. Confused by the terminology yet? Don’t worry, that’s about as complicated as it gets. Over a period of time, this thread will show you all about putting together your very own stylesheet for your pet page.

The basic CSS syntax is: selector{property:value;}
To set your page background to blue the syntax is:
selector = body
property = background-color
value = blue

Putting this together will give you the css code:

Icebox- (Rainbow- Bridge)

Principles ...- Values ...- Common Sense
Purred: Tue May 8, '07 5:13pm PST 
selector "body"
Page Background:

To place a background on your page you use the selector "body". The properties you can define are as follows:

The values (right side of the : ) are defined as:
background-image:url(url to graphic)
background-attachment:scroll OR background-attachmentflowersixed

Let's say you want a blue background that doesn't move when your scroll down your page. This is the syntax:
<style>body{background-color:blue; background-attachmentflowersixed}</style>

Note that you are using two properties. When defining more than one property for your body, you must separate them with a semi- colon ( ; ).

Icebox- (Rainbow- Bridge)

Principles ...- Values ...- Common Sense
Purred: Thu May 10, '07 4:09am PST 
selector "body"
Page Background:

It took me a while to realize that a background is a tiled image. This meaning that any image can be used as a background. When the url to the image is placed as a value for background-image, it autotiles the image into a background for you.

Let's take this example. You have an image of Mickey Mouse at the url account/mickeymouse.jpg

<style>b ody{background-image:url(" account/mickeymouse.jpg");</style>

Transparent images, usually being gif files, can also be used. What happens with a transparent image is that the dogster blue/catster green will show through. What if you do not want these colors showing through? You do this by defining two property:value 's. background-image and background-color.

<style>body{backgrou nd-image:url(" account/mickeymouse.gif");background-color:blue;}</style>

A sk background questions HERE

Edited by author Sat Sep 29, '07 4:48pm PST

Icebox- (Rainbow- Bridge)

Principles ...- Values ...- Common Sense
Purred: Mon May 14, '07 3:01pm PST 
selector "body"

This part of the stylesheet is the most easy.

There are names for various system cursors like arrow and crosshair, but we don't use those so I won't cover that. We link to nice fancy ones.

Most of the cursors files you see are .cur(static), .ani(animated), and on occasion .ico. In this example we have a cursor file of Mickey Mouse at the url

selector{property:valu e;}

Ask cursor questions HERE

Edited by author Sat Sep 29, '07 4:47pm PST

Icebox- (Rainbow- Bridge)

Principles ...- Values ...- Common Sense
Purred: Wed May 16, '07 8:41am PST 
Now Furrs. We are going to take the previous info and make a basic stylesheet.

We are using the background file mickeymouse.jpg and the cursor file mickeymouse.ani. The background will not move as the page is scrolled.

The CSS syntax:
selector{property:value;property:value} selector{property:value;}

The stylesheet:
<style>body{background-image:url(" m/your account/mickeymouse.jpg"; background-attachmentflowersixed);}body{cursor:url(" count/mickeymouse.ani");}</style>

Icebox- (Rainbow- Bridge)

Principles ...- Values ...- Common Sense
Purred: Wed May 30, '07 8:17am PST 
selector "body"

Who wants to change the color of your scrollbar? Would it not be kewl to have your scrollbar match your page background? Unfortunately, not all internet browsers support this once exclusive Internet Explorer property. I don't have any of the other popular browsers, so any input on which ones do support this is greatly appreciated. If you wish to do a test for your browser, just try one property and see if it works.

There are eight properties for the scrollbar. First we will look at the seven major properties.

1. scrollbar-track-color: Sets the color for scroll bar track
2. scrollbar-face-color : Sets the color for the scroll bar slider
3. scrollbar-arrow-color: Sets the scroll bar arrow color
4. scrollbar-highlight-color: Sets the scroll bar highlight color left and top of slider
5. scrollbar-3dlight-color: Sets the scroll bar 3D light color left and top of 'scrollbar-highlight-color'
6. scrollbar-shadow-color: Sets the scroll bar shadow color right and bottom of slider
7. scrollbar-darkshadow-color: Sets the scroll bar dark shadow color right and bottom of 'scrollbar-shadow-color'

selector{property:value;property:value;p roperty:value; property:value; property:value;property:value;property:value;}
<style>body{sc rollbar-track-color:XXXXXX;scrollbar-face-color:XXXXXX;scrollbar-arr ow-color:XXXXXX;scrollbar-highlight-color:XXXXXX;scrollbar-3dlight-c olor:XXXXXX;scrollbar-shadow-color:XXXXXX; scrollbar-darkshadow-color:XXXXXX ;}</style>

XXXXXX is htlm color code. Your basic color names can also be used - brown, black, red, orange, yellow, green, blue, purple, grey, white. Note that any property to you not define will be the dogster/catster default.

Now for the eighth property. This is handy when you just want a basic scrollbar of a color of your choice and maybe one other property. This is also good to get a feel of the other properties above.

8. scrollbar-Base-Color: Set the 'scrollbar-track-color' and 'scrollbar-face-color' to the same chosen color. The 'scrollbar-arrow-color', 'scrollbar-shadow-color','scrollbar-darkshadow-color' is default black. The 'scrollbar-highlight-color' and 'scrollbar-3dlight-color' is default white.
Note: Any property you define along with Scrollbar-Base-Color will override the Scrollbar-Base-Color defaults.

Ask scrollbar questions HERE

Edited by author Sat Sep 29, '07 4:53pm PST

Icebox- (Rainbow- Bridge)

Principles ...- Values ...- Common Sense
Purred: Sat Jul 14, '07 7:08am PST 
Now it is time to place the scrollbar into our stylesheet. By now, you all know the CSS syntax, so I won't beat the dead horse (so to speak).

background-image:url("URL TO GRAPHIC FILE"); background-attachmentflowersixed);
cursor:url("URL TO CURSOR FILE");
scrollbar-shadow-color:XXXXX X;
scrollbar-3dlight-color:XXXXX X;
scrollbar-track-color:XXXXXX ;

Icebox- (Rainbow- Bridge)

Principles ...- Values ...- Common Sense
Purred: Sat Oct 6, '07 2:19pm PST 
Sorry I am been so late moving on. Our group members have been having so many page problems due to using myspace layouts.

selector ".bodyText"

Now we are going to tackle all the stuff in the center.

.bodyText is a Dogster/Catster class selector. When working with class selectors you use a " . " before the class name.

First we will start with the background property. Placing a background image or a background color is the same as for the 'body' selector.

< style>.bodyText{background-image:url(" account/mickeymouse.gif");}</style>

edit to add: transparent is a color

Edited by author Thu Oct 25, '07 8:20am PST

Icebox- (Rainbow- Bridge)

Principles ...- Values ...- Common Sense
Purred: Tue Oct 16, '07 8:26am PST 
Before we start changing the center text. The following is a lot to digest, but these are items you need to know to aid you in changing your text.

When you deal with text, you have text properties and font properties. Here is a short list of text and font properties and values.

Text properties:
color = sets the color of a text
text-decoration = none, underline, overline, line-through

Font properties:
font = font-style, font-weight, font-size, font-family
font-family = family-name, generic-family
font-size = xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length,%, pt, px
font-style = italic, oblique
font-weight = bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

There are five font families: ser if, sans-serif, monospace, c ursive and f antasy. You will find information on each family by clicking the family name in the previous sentence.

Do note that not all systems or even the same internet browsers will have all fonts installed. This makes it a good idea to use a font common to all. You can also list more than one font and or include the family name. If the system of your visitor does not have your first choice of font, it will go to the next and so on, and if the system does not use any of the listed fonts it will use it's system default no matter what fonts are listed in your stylesheet. If you wish to use an uncommon font, it is wise to include a common second choice and/or a font family.

{font:verdana, geneva, arial, helvetica}
{font-family:new century schoolbook, times, serif}

The following posts will deal with each text section one at a time.

Icebox- (Rainbow- Bridge)

Principles ...- Values ...- Common Sense
Purred: Thu Oct 25, '07 8:13am PST 
selector "H2.header"

H2.header is a Dogster/Catster class selector - this is your name. Here we will change the color of your name to blue.

<style>H2.header{color:blu e!important;}</style>

It is a good rule of thumb to use the !important when you change text color. Some text on your page is firm and the !important will override this setting in most cases.

I do not recommend changing the font properties of your name until you get skilled on fonts.

Edited by author Thu Oct 25, '07 8:22am PST

  (Page 1 of 17: Viewing entries 1 to 10)  
Page Links: 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17