Search Google

www.chagoyan.com

Room 208 -Computer Lab

CSS

Background

Cascading style sheets, is a "newer" technology introduced in 1996. The technology gives you a lot more control over the look of your Web pages by exposing many more properties than HTML. In addition, Cascading Style Sheets allow for easier maintenance of your Web site since you can now change the appearance of all your Web pages on a Web site by updating a single CSS file (external style sheet).

Cascading style sheets can be implemented in three ways:
  1. In an internal style section located in the head of your Web page
  2. In an external style sheet
  3. In an inline style format in an HTML tag

Cascading style sheets allow you to select HTML tags to style (modify). For example I can chose to modify the following HTML tags (elements).

 

<body> <h1> <p> <tr> <td>

For each tag above I can modify many properties. For example, I can modify the following properties for the following tags:

Tag Property
body Background
Color
Font-Family
Tag Property
hr Color
Border
Tag Property
table Background
Color
Border
Text-align
Tag Property
td Background
Color
Border
Font-Weight
You use the following components to code CSS styles:
HTML Tag to Style Property to Modify Value
p Font-family Arial
p Color Black
p Background-color Red

 

CSS is usually coded in the following format:

p
{
font-family: arial;
color: black;
background-color: red;
} 
The above code styles the P (paragraph) HTML tag. It modifies the font-family, color, and background-color and assigns values of arial, black, and red respectively.

 

Keep in mind that inline styles supersede internal styles and internal styles supersede external styles.


CSS and Color

Pay special attention to the colors you choose for your Web site. They are important and convey different emotions to your target audience. Please read the following article:

Color Psycholoogy

From Ezilon.com

Internet Design Articles
The Psychology of Colors in Website Design
By Ezilon.com Articles
Oct 24, 2005, 07:57

Since people associate particular colors with different emotions, the colors used on your website can have a psychological effect on visitors to your site. By using specific colors geared towards the emotion you want to invoke, you can actually increase product sales.

Here are some colors along with the emotions and symbols they stimulate:

1) WHITE- purity, innocence, peace, perfection, chastity, sterility, cleanliness. In general, white creates a cool and refreshing feeling.

2) BLACK- night, space, authority, sturdiness, reliability, power, constancy, prudence, wisdom, classy, elegance, submission, mourning, demons, witches. Black is a controversial color as it can symbolize both good and evil.

3) RED- love, excitement, warmth, heat, fire, blood, passion, power, aggression, action. Use red as an attention grabber. It works better as an accent color rather than a background one.

4) PINK- romantic, affection, sensuality, tenderness, calm, soft hearted, softness, femininity. Pink tends to reduce aggression.

5) BLUE- sky, ocean, water, temperature, ice, coolness, mist, shadow, travel, freedom, truth, solitude, wisdom, trust, loyalty, peaceful, calmness, intelligence, dedication, masculinity. Different shades of blue convey opposite meanings. Light blue is peaceful while dark blue is depressing.

6) PURPLE- royalty, dignity, luxury, wealth, sophistication, feminine, passion, romance, sensitivity, coolness, mist, shadows, mysterious, mystic.

7) GREEN- money, calm, envy, greed, nature, life, youth, renewal, hope, vigor, fertility, rebirth, freedom, guilt. Different shades of green have different meanings. Dark green-cool. masculine, conservative, wealth. Emerald green- immortality. Olive green- peace. Green is the easiest color on the eye.

8) YELLOW- light, purity, understanding, brightness, warmth, playfulness, creativity. Lemon yellow is the most eye fatiguing color. Yellow can increase irritability so yellow should not be used as a main color, only as an accent. Yellow enhances concentration.

9) ORANGE- autumn, youthful, fire, warmth, contentment, fruitfulness, wholesomeness, strong, generous, endurance, strength, ambition. Orange is the color most associated with appetite so it would be a good color choice for a website selling food products. Orange also makes a product seem more suitable for everyone and more affordable.

10) BROWN- wood, comfort, strength, earth, solid, reliable, credible, maturity, humility, conservancy. Light brown conveys genuineness.

11) GRAY- exclusivity. Enhances the psychological response of other colors.

In general, red, orange, and yellow are exciting colors while purple, blue and green are calming ones.

Use the color that symbolizes the emotion you want to convey as the primary color on your website. Add 1-2 other colors to reinforce this emotion. The colors used for your background, header, graphics, text, highlighting, headlines, etc. will all contribute to your website's influence on your visitors.

© Copyright 2004 by YourSITE.com

Color Theory Vignette - Colors in Movies


Color Selection

Colrd.com Palettes - Color Selection

Color Wheel - Labeled

Color Article - Color Theory and Color Combinations

Hue, Tint, Tone, and Shade
- Complementary (Contrast) Combinations (2 colors)
- Triad Combinations (3 colors)
- Split Complementary (3 colors)
- Double Complementary (Tetrad) Combinations (4 colors)

Color Wheel Scheme Generator

- Mono Combinations (1 color extended wtih shades, tones, and tints)
- Contrast Combinations (2 colors opposite on the color wheel)
- Triad Combinations(3 colors on color wheel)
- Tetrad Combinations (4 colors on color wheel)
- Analogic Combinations (3 colors next to each other on color wheel)


Color Use

Color Wheel Vignette - Color Combinations

Colors in Interior Design - Color Theory

Colors and Emotion - Color Theory and Websites

Color Report 2013 | Color Report 2014 | Color Report 2015 - Pantone Fashion Colors

Colors in Movies - Cinema5d.com

Color Theory Activities


-->
DropBox
Shared
Files






Random Number

Copyright © 2004-2024 Chagoyan.com/Chaggy.net | All Rights Reserved

All courses at Coalinga High School are open to all students without regard to race, color, national origin, sex, disability, sexual orientation, gender, ethnic group identification, ancestry, or religion.