Wednesday, June 27, 2012

CSS Styles

Purpose

HTML deals with the web page content and its structure, CSS with its layout and appearance and JavaScript with the associated interaction and business logic. CSS is used to describe how an element on a Web page looks.

CSS Reference

http://www.w3schools.com/css/css_intro.asp
http://www.w3schools.com/cssref/default.asp

Colors

http://www.allprofitallfree.com/color-wheel2.html

Validating CSS

http://jigsaw.w3.org/css-validator/

Trying out CSS

http://dabblet.com/

Style Rules

/* CSS comment */
selector{
  property1:value;
  property2:value;
}

selector indicates the type of element the style applies to
property:value property is any CSS property and value is any acceptable value for that property

Style Inheritance

A nested element inherits style properties of its container element. By explicitly specifying a style, a nested element can override the inherited style.

<body style="text-align:center;">
<!-- override alignment for this paragraph -->
<p style="text-align:left;">
</p>
</body>

How to apply styles?

Styles can be applied to: <tags>, element with specified id, all elements belonging to class

1. <tags>
h1{
  color : navy;
}

// apply to multiple tags
h1, h2 {
  color : navy;
}

2. Apply to an element with a given ID
// apply to any element with an id of pageheading
#pageheading{
  font-weight: bold;
}

// only apply to h1 with an id of pageheading
h1#pageheading{
  font-weight: bold;
}

3. Apply to elements of a class
// apply to any element with a class of topheading
.topheading{
  color: navy;
}
// only apply to h1 with a class of topheading
h1.topheading {
  color:navy;
}

Applying to nested elements

// apply to a:hover under footer, ul, li
div#footer ul li a:hover{
text-decoration : underline;
}

// apply to p under div only
div p{
 color : red;
}

// apply to any p under body
body p {
  color : red;
}

Applying to Multiple Elements

// apply to h1 and h2 tags, to element with id of someelementid
// and to all elements of class of redclass
h1, h2, #someelementid, .redclass{
  color: red;
}

How to enter style rules?

1. Inline - Style is specified inside an HTML tag

<p style="text-align:left;">

2. Internal - The style rules are specified in the head section of an HTML document using the style tag.

<head>
  <style type="text/css">
    body{
       text-align:center;
       background-color:yellow;
       color: navy;
    }
  </style>
</head>

3. External File - Style rules can be placed in a separate file and referenced from HTML. Omit <style..> tag when entering style rules in stylesheet.css

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

Different stylesheets can specified for different media.

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
<link rel="stylesheet" type="text/css" href="print.css" media="print"/>
</head>

Alternate style sheets can be specified (some browsers allow users the choice of the available style sheets). To specify an alternate style sheet, add multiple link tags and specify "alternate stylesheet" in the rel attributes.

<head>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<link rel="alternate stylesheet" href="oldschool.css" type="text/css" />
<link rel="alternate stylesheet" href="techno.css" type="text/css" />
</head>

Aside: External file can also be referenced using the @import url(style.css) in the head section wrapped by style tag. Multiple import statements can be specified. import can also be used within an external css file to reference another css file.

<head>
<style type="text/css">
@import url(sheet1.css);
@import ulr(sheet2.css);
p {left-margin: 10px;}
</style>
</head>

Styling a Table

<!-- table should occupy the entire width of the container -->
<!-- cellspacing of 2 will allow the background color of container such as -->
<!-- div to show through -->
<table style="width:100%;cellspacing:2;cellpadding:2" rules="all | row | col">
  <!-- background of the entire row -->
  <tr style="background-color:yellow">
     <!-- equally divide the space between the two columns -->
     <td style="width:50%">first cell</td>
     <td style="width:50%">second cell</td>
  </tr>
</table>

Styling a Layout

// style rule that horizontally centers a div
// wrapper is the id of the outermost layout div
#wrapper{
  width: 760px;
  margin:0 auto; // top/bottom margin is zero; automatically calc left/right margin
  border: thin 1px #fe9900
}
auto automatically calculates left and right margins so that they are equal; causing the div to be horizontally centered.
auto does not work for top/bottom margins

Use float attribute (float: left) to create side navigation. Apply float to side navigation div and have the main div float next to the nav div. Set percentage width for nav div (e.g. 25%). Set margin-left for main div to 30% to have it display next to the nav div.

Styling a Paragraph

Create a margin (indentation) for a paragraph
style="margin: 16px"

Centering Content

Centering horizontally

margin: 0 auto;

0 is top and bottom; can be set to anything and will take effect.
auto: puts equal amount of margin on left and right side causing the element to center horizontally

Centering vertically
assuming box is 100px

position: absolute;
top: 50%;     // 50% down from the top
margin-top: -50x   // move the center of the box to the 50% line

Centering both horizontally and vertically
Put the element in a container.
Assuming the contained box is 100px

// box - align horizontally within the container
margin: 0 auto;

// container - align vertically
position: absolute;
top: 50%;
margin-top: -50px;
left: 0;
width: 100%;

Colors

Standard, named colors
black, gray, silver, white, red, maroon, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua

Hex Codes
Colors can be specified using a hex code.

rrggbb

rr is the hex value for red
gg is the hex value for green
bb is the hex value for blue

00 means color is excluded
ff means color is fully show

000000 - hex code for black
ffffff - hex code for white
fff073 - hex code for a shade of yellow

When specify color using the hex code, # must precede the hex code.
background-color:"#fff073";

Using hex codes, one of 16.1 million colors can be specified.

Each hex digit can have up to 16 different values.

For rr, there are 16 * 16 = 256 values possible
For gg, there are 16 * 16 = 256 values possible
For bb, there are 16 * 16 = 256 values possible

For a combination of rr, gg, and bb, there are 256 * 256 * 256 = 16,777,216 values possible
http://www.allprofitallfree.com/color-wheel2.html
http://colorschemedesigner.com/
http://colorsontheweb.com/colorwheel.asp
Posted by at
Labels: