quickguide style sheets

Wilson Quick Guide to Style Sheets

Prepared by Stephen Wilson, Professor, Conceptual/Information Arts Program, Art Dept, SFSU

Style sheets allow flexible setting of the visual aspects of web sites including such features as style of fonts, position of elements, color, and so on. Style sheets basically allow a web author to declare the appearance of standard html elements or to create virtual style classes and id sections. Combined with javascript they allow interactive, dynamic web pages and underlie much of what is called Web 2.0.

Sample style declarations

p {font-style: italic; color: #0000FF}
(Make all paragraphs italic font is color 00-red; 00-green; blue FF= hex = 255 )

.gg {background-color: blue;text-align: center}
(Make a pseudo class arbitrailly named gg - blue background and centered text)
(Can be applied to anything on web page by adding attribute class = gg)
( for example in html page <p class=gg)
Note that you must have tags or classes in the body that match the declarations of style in order for anything visually to show up.

How to activate style sheets

Style sheets can be put in several places:

1. Inline - right in the html code
(use the 'style =' phrase)

<p style="font size: small; color: green; font-weight: bold"> this would make this text inside only this paragraph appear green and bold</p>

2. Global(embedded) - In a definition at the beginning of the html page within the head tag
(This would make all text inside paragraph tags appear italic and blue and all text inside list items red)

<html>
<head>
<title>Title</title>
<style type="text/css">

</style>
</head>
<body>
[document here]
</body>
</html>

3 Linked - In a separate text file that can loaded when the page loads
( Create a plain text file with style definiton phrases. Store it with the extension .css. Use the <link> tag placed in the head section of a html page to tell it to load the style sheet when the page loads.

(Here is example of phrases that might be in a text file. Save it with any name with .css at the end. For example let's call it test.css

H1 {font-family: serif; font-size: x-large; color: blue}
H2 {font-family: serif; font-size: large; color: blue}

To apply a .css stylesheet ("test.css" in the example below) to an HTML page, a <link> tag is added to the page header. The rel parameter tells what kind of resource it is. The href tells the url address - in this situation it was stored in the same directory as the html page so relative addressing could be used; otherwise a full url with paths to resource must be listed. The type parameter tells it is a plain text resource of a stylesheet-css)

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

Classes and id's

Sometimes you don't want to apply the style to every instance of an html tag like h1. Classes and id let you invent sets of style declarations (using any name you want) and then apply it whereever you want in the html document. They are declared with .xx for classes and #xx for id's. (xx can be whatever name you want.) You can have as many classes and id's as you want as long as they each have a unique name.

In this example the following classes and id's are declared in an embedded style sheet declaration in the head section. . gr is a class defining font as red italic; .gg is a class defining font as green italic; and #yy is an id defining font as yellow.

- Note that in this situation the first list has a class = .gr in its <ul> tag. The font in the list will be red italic as specified in the class definition in the head. The font in the second list will be normal because there is no class attached to it.
- Note that the third item in the first list (banana) has an id=#yy attached to it. In cascading stylesheets the most local definition supercedes the others so this one item will be yellow eventhough the class definition makes everything else green italic.

<html>
<head>
<title>Title</title>
<style type="text/css">

</style>
</head>
<body>
Important foods

<ul class = "gr" >
<li> spinach </li>
<li> apple </li>
<li id= "yy"> banana </li>
</ul>

Important drinks

<ul>
<li> milk </li>
<li>juice</li>
<li> water </li>
</ul>

</body>
</html>

Span and Div

Sometimes you want to apply a style beyond one tag element. Div and Span are html tags that you can enclose many elements within. If you combine them with a class or span attribute then everything within will be governed by that style. Span is usually used to enclose parts of text. Div is used to enclose longer runs of elements.

-Note in the following example that the phrase "Here are some things to consider" will be normal style text because there is no style definition attached.
- Everthing else in the sample is enclosed by a div tag. The div tag has class=.gr attached so it will all be red italics.
- Except note that in the first item in the first list part of it (spinach and lettuce) are enclosed by span tags that have the id="yy" attached. This text will be yellow.

<html>
<head>
<title>Title</title>
<style type="text/css">

</style>
</head>
<body>

Here are some things to consider
<div class = "gr" >
Important foods

<ul >
<li> <span id="yy"> spinach and lettuce </span> and beets</li>
<li> apple </li>
<li > banana </li>

</ul>

Important drinks

<ul>
<li> milk </li>
<li>juice</li>
<li> water </li>
</ul>
</div>

</body>
</html>

What can be controlled?

There is not room here to list all the attributes that can be controlled by style sheets. Consult one of the online guides for more details. Here we present a sample list. Note that not all properties and all possible values are supported by all browsers.
(note that this table is derived from WebMonkey's css tutorial)

Font properties

Name of Property	Rule syntax	Possible values
font-family	<selector> {font-family:<value>}	<family-name> (specify) or <generic-family>~ [serif, sans-serif, cursive, fantasy*, monospace]

font-style	<selector> {font-style:<value>}	normal, italic

font-weight	<selector> {font-weight:<value>}	normal, bold, 100, 200, 300, 400* , 500, 600, 700, 800, 900*

font-size	<selector> {font-size:<value>}	<absolute-size>, <relative-size>*, <length>~~, <percentage>

font	<selector> {font:<value>}	<font-style>~~, <font-weight>, <font-size>, <font-family>*
Color and Background
Name of Property	Rule syntax	Possible values
color	<selector> {color:<value>}	<color> (see "Units of Measure")

background-color	<selector> {background-color:<value>}	<color> (see "Units of Measure")

background-image	<selector> {background-image: url(<value>)}	URL (relative or absolute path)

background $	<selector>{background:<value>}	<background-color> (i.e., <color>)
Text properties
Name of Property	Rule syntax	Possible values
Text-decoration	<selector>{text-decoration:<value>}	underline, line-through

text-transform	<selector>{text-transform:<value>}	capitalize, uppercase, lowercase, none

text-align	<selector>{text-align:<value>}	left, right, center, justify*

text-indent	<selector>{text-indent:<value>}	<length>, <percentage>
Box properties
Name of Property	Rule syntax	Possible values
margin $	<selector>{margin:<value>}	<length>, <percentage>, auto(sequence: t r b l)

margin-top	<selector>{margin-top:<value>}	<length>**, <percentage>, auto

Margin-right	<selector>{margin-right:<value>}	<length>, <percentage>, auto

margin-bottom*	<selector>{margin-bottom:<value>}	<length>, <percentage>, auto*

margin-left	<selector>{margin-left:<value>}	<length>, <percentage>, auto

padding $*	<selector>{padding:<value>}	<length>, <percentage>, (sequence: t r b l)

padding-top*	<selector>{padding-top:<value>}	<length>, <percentage>

padding-right*	<selector>{padding-right:<value>}	<length>, <percentage>

padding-bottom*	<selector>{padding-bottom:<value>}	<length>, <percentage>

padding-left*	<selector>{padding-left:<value>}	<length>, <percentage>

border-color*	<selector>{border-color:<value>}	<color>*

border-style*	<selector>{border-style:<value>}	solid, double, groove, ridge, inset, outset

border $*	<selector>{border:<value>}	<border-width>, <border-style>, <color>
Block-level and Replaced Elements
width	<selector>{width:<value>}	<length>, <percentage>, auto

height	<selector>{height:<value>}	<length>, auto

float	<selector>{float:<value>}	left, right

clear	<selector>{clear:<value>}	none, left, right
Position (CSS - P)
Name of Property	Rule syntax	Possible values
position	<selector>{position:<value>}	absolute, relative

top	<selector>{top:<value>}	<length>, <percentage>, auto

left	<selector>{left:<value>}	<length>, <percentage>, auto

visibility	<selector>{visibility:<value>}	hidden, visible, inherit

z-index	<selector>{z-index:<value>}	<number>, auto

overflow	<selector>{overflow:<value>}	visible, hidden, auto

*

Length Units

<length> indicates a number followed by a unit of measure: 24px.

The number can be an integer or a decimal fraction, and can be preceded by + or -.

Units can be absolute or relative:

Absolute: mm, cm, in, pt, pc (millimeters, centimeters, inches, points, picas)

Relative: em, ex, px (the element's font height, the element's x-height, pixels)

Font size may be defined in points, pixels, inches, or centimeters (pt, px, in, cm) or as a percentage.

<absolute-size> can be: xx-small, x-small, small, medium, large, x-large, xx-large.

<relative-size> can be: larger, smaller.

Percentage Units

<percentage> indicates a number followed by a % sign: 50%.

In the text-indent, margin, padding, and width properties, percentage values are relative to the width of the parent element.

In the font-size property, percentage values are relative to the font size of the parent element.

In <color> values, percentages can be used to express RGB values.

Color Units

<color> can represent either <color-name> or <rgb> values, as defined below:

<color-name> can be: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

<rgb> can be: #<hex><hex><hex> rgb(<number>, <number>, <number>) rgb(<percentage>,<percentage>,<percentage>) <hex> represents a hexidecimal value, <number> a decimal value, and <percentage> a percentage.