©Condé Nast Archive/Corbis
© Henry Clarke/Condé Nast Archive/CORBIS

Style sheets

Remember that in XHTML content and style are separated. You can add style through internal or external style sheets or defining a style within the document (local style).

Internal style sheet

A style sheet defines the presentation rule. You can create an internal style sheet within the <head> </head> tags.

Because an HTML document may use different style sheet languages, the <style> element requires special information in its beginning tag, specifying the language being used. This information is in the tag attribute

Attributes allow you to specify additional information and options for the tag. In the case of style, type is an attribute and "text/css" is a value meaning that the elements are written in plain text format using the cascading style sheet language. The syntax is: name_of_attribute="value_of_attribute" 
<style type="text/css">
...
</style>
To use a style sheet , you list the name of the tag you want to customize followed by a style definition enclosed in curly braces. The style definition consists of a property and value, separated by a colon. 
<head>
<title>A Title</title>
<style type="text/css">
	h2{color:red;}
</style>
</head>
You can refer to the following colors by name:
Color Number
black 000000
gray 808080
silver C0C0C0
white FFFFFF
red FF0000
maroon 800000
magenta FF00FF
purple 800080
blue 0000FF
navy 000080
cyan 00FFFF
teal 008080
lime 00FF00
green 008000
olive 808000
yellow FFFF00

You can also call other colors using the hexidecimal(base 16) system.

The six hexidecimal digits in the color code are actually divided into three pairs of two digits each. The first pair represents a red value, the second a green value, and the third a blue value. You can check in photoshop for the 216 web safe colors and their hexidecimal values.

Multiple tags

Sometimes you might want different types of paragraphs to be displayed in different ways. If you had a page with several sections and several paragraphs in each section, you might create a special style for one kind of paragraph, say the introductory paragraph. You can do this by taking a given element and defining one or more classes of style for it. First you define the style and then you specify a sub-style, or class, that is a modification of the primary style: 
<head>
<title>A Title</title>
<style type="text/css">
	p{text-align:justify;font-weight:bold;}
	p.intro{text-align:center;color:red;}
</style>
</head>
The p.intro class includes the complete set of styles that are defined for its parent style p, but then modifies it or adds to it in certain ways. When you want to use your subclass you add a class attribute to the tag and specify the value as the name of the subclass: 
<p class="intro">Interdum volgus videt, est ubi peccat. Si veteres ita miratur</p>

Local Style

To add a style to one individual tag you can use local style: 
<p style="text-align:center;color:red;">Interdum volgus videt, est ubi peccat. Si veteres ita miratur</p>

External style

When you are creating a site with multiple pages, use external style sheets. An external style sheet is a text document stored with the extention .css. 
h2{color:red;}

h3{color:blue;}

p{
  text-align:justify;
  font-size:1.2em;
   text-transform:uppercase;
  }
  
p.intro{
   text-align:center;
   color:red;
   text-transform:capitalize;
   }
   
.mySpecialStyle{
	text-align:center;
	color:blue;
	background-color:gray;
	font-variant:smallcaps;
	}
Your web page contains a link to this text document within the <head> element. 
<link rel="Stylesheet" href="../includes/mystylesheet.css" type="text/css" media="screen" />
When multiple style rules apply to the same content, the browser uses a set of rules to resolve the conflict based on a cascade order.

An id selector is more specific than a class selector, which in turn is more specific than an element selector.

An inline style will override an internal style, which in turn will override a rule found in an external style sheet.

To force a given rule to take precedence you may use the !important value as part of the declaration.
h1 { color: maroon !important;}

Element Classification

CSS recognizes three types of elements.
  1. Block-level elements include paragraphs , heading, lists, tables, and divs. Block-level elements always begin on a new line.

  2. Inline elements include anchors (<a></a>), spans, form elements, and images. Inline elements exist in the natural flow of the document without forced line breaks. Inline elements may contain other inline elements but may not contain block-level elements.

  3. List-item elements are the <li></li> elements found in unordered and ordered lists. List-item elements have markers associated with them such as bullets, numbers, or letters.


Background
background:backgound-color | background-image | background-repeat | background-attachment | background-position;
attribute values default example
background-attachment scroll | fixed scroll body{background-attachment:scroll;}
background-color color | transparent transparent p{background-color:cyan;}
background-image url | none none body{background-image:url(images/mygif.gif);}
background-position [percentage|length]{1,2} | [top | center | bottom] | [left |center | right] 0% 0% body{background-position:top center;}
background-repeat repeat | repeat-x | repeat-y | no-repeat repeat p{background-repeat:repeat-x;}
<p style="background:cyan url(images/3dcd.gif) top left repeat;color:white;">

This is an example


Font
font: [font-style | font-variant | font-weight]? | font-size | font-family;
attribute values default example
font-style normal | italic | oblique normal p.em{font-style:oblique;}
font-variant normal | small-caps normal h2{font-variant:small-caps;}
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal p.bold{font-weight:700;}
font-size xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | length | percentage medium p{font-size:.9em;}
font-family [[family-name | generic-family],]*[family-name | generic-family] determined by browser p{font-family:Times,"New Century Schoolbook",serif;}
<p style="font:italic small-caps bold .9em 'Times New Roman',serif;">

This is an example with style

This is an example with no style

<p style=" 1.2em 'Times New Roman',serif;">

This is an example with style

This is an example with no style


Text Flow
attribute values default example
text-align left | right | center | justify determined by browser p{text-align:justify;}
text-decoration none | [underline | overline | line-through] none h2{text-decoration:line-through;}

Hi
text-indent length | percentage 0 <p style="text-indent:2em;">

This is an example of indentation
text-transform capitalize | uppercase | lowercase | none none <span style="text-transform:uppercase;">
This is an example of transform
vertical-align baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage baseline <span style="vertical-align:super;">
This is an example of vertical-align 22
letter-spacing Any valid length value none <span style="letter-spacing:1em;">
This is an example of letter-spacing set to 1em: Hello
line-height number |length | percentage 1em <span style="line-height=1.5em;">
This is an example of line-height set to 1.5em: Hello
there!
word-spacing Any valid length value none <span style="word-spacing:1.5em;">
This is an example of word-spacing set to 1.5em: Hello there


Lists
attribute values default example
list-style-type disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, or none none ul { list-style-type: circle;}
ol { list-style-type: upper-roman;}
  • Hi
  1. Hi
list-style-image none or any valid url none ul { list-style-image: url(arrow.png);}
  • item 1
  • item 2
list-style-position inside | outside outside ul { list-style-position: outide;} outside:
  • item 1
  • item 2
inside:
  • item 1
  • item 2


Positioning
attribute values default example
position static, absolute, or relative static div {position: relative;}
Hi
left Any valid length value | Any valid percentage value | auto Applies only to elements with position property set to absolute or relative div {position: relative;left:100px;}
Hi
right Any valid length value | Any valid percentage value | auto Applies only to elements with position property set to absolute or relative div {position: relative;right:100px;}
Hi
z-index Any positive or negative integer | auto Higher z-index values place the element closer to the viewer. div { position: absolute; z-index: 4; }
Hello
Good-bye
overflow visible | hidden |scroll | auto Applies to absolute positioned elements div { position: absolute; overflow:scroll; }
Hello there
visiblity inheret | visible | hidden auto

<div style="visibility:hidden;">Hello there
How are you?</div>

Hello there
How are you?
WWW URLs XHTML CSS Tables Images Links XHTML Basics JavaScript