Cascading Style Sheets

 

Methods

There are 3 methods of using style sheets in HTML documents. They are, linked , embedded and inline.

Linked style sheets are placed in a separate text file and accessed by the visiting browser each time a web page is viewed.

Embedded style sheets are placed in the head section of the HTML web page and can over ride linked settings.

Inline style sheets are placed in the actual lines of code and can over ride both linked and embedded style sheet settings.

Style Sheet Construction

No matter what method is used, the basic structure of an individual style sheet setting is the same.

Each line of a style sheet is made up of 2 parts: selector and declaration
selector { declaration }
Selectors are placed to the left of the curly brackets and refer to the HTML tag which is to be defined by the declaration. All declarations are enclosed in curly brackets.
Selectors take the form of the html tag without its enclosing brackets.
Examples:

• Tag: <p> CSS: p { declaration }
• Tag: <h2> CSS: h2 { declaration }
• Tag: <a href> CSS: a { declaration }

The declaration also contains 2 parts separated by a colon which acts as an equal sign.
attribute: value
Simply put it reads attribute equals value. You can assign more than one declaration per selector. Each individual declaration is separated by a semi-colon.
selector { attribute: value; attribute: value; attribute: value }

Examples:

body { background: #000000 }
p { font-family: arial }
h1 { font-size: 28px}

Multiple settings are separated by semi colons:

body { max-width: 1200px; margin: 0 auto; background: #000000 }

When creating linked or embedded style sheets use:

body {
	 max-width: 1200px; 
     margin: 0 auto; 
     background: #000000 
     }

Just makes it easier to read.

some Attributes and Values

A few attributes with values which can be set using Style Sheets are:

font-family

arial

arial black

courier

times

tahoma

verdana

Always include a generic - example: serif

font-size

xx-small

x-small

small

medium

large

x-large

xx-large

% - example: 100% (16px = 1em = 100%)

pixels - example: 12px (most accurate)

em - example: 0.875em (.875X16px - same as percentage method)

font-style

normal

oblique

italic

font-weight

normal

bold

bolder

lighter

weight in numbers 100 - 900

text-align (for aligning text)

left

right

center

justify

color

name - example: red

hexidecimal code - example: #ff0000 - Recommended

rgb - example: #f00

background-color

name - example: red

hexidecimal code - example: #ff0000 - Recommended

rgb - example: #f00

background

Same as background-color for color but accepts transparent

url(images/imagename.gif) for adding background images

text-indent (for indenting paragraphs)

set value in pixels, ems or %

padding: # # # # (start top then clockwise - right, bottom, left)

set value in pixels, ems or %

shorter version: padding: 2px 2px ; ( top-bottom left-right)

margin: # # # # (start top then clockwise - right, bottom, left)

set value in pixels, ems or %

An example of each setting is shown in the style sheet shown below. Notice that each individual declaration is separated or followed by a semi-colon.

p { 
font-family: arial, tahoma, sans-serif;
font-style : normal ;
font-size : .875em; 
font-weight : normal;
text-align :left; 
color :#000000;
background: transparent; 
text-indent : 1em;
padding: 2px 0 2px 2px
}

NOTE: Color can be specified by name (blue), hexidecimal code (#0000ff) or RGB code (#00f).

1. When declaring font families, specify a minimum of 2. The last should always be a generic family.
2. Use EMs, pixels or percentages to size your text

Generic Font Families

• serif
• sans-serif
• fantasy
• cursive
• monospace

The browser defaults to the generic choice when a declared font is not available on a surfer's machine.

Font-size and W3C Validation

All of the methods for font-size shown above are acceptable

The examples provided below show how each method is calculated:

body {
  font-size: 100%/16px/1em
}

p {
  font-size: 87.5%/14px/0.875em
}

h1 {
  font-size: 150%/1.5em/24px
}

h2 {
  font-size: 125%/1.25em/20px
}

You can of course adjust the %/em/px values for your own size preferences.