Index:
The CSS syntax is made up of three parts: a selector, and between curly braces are property:value pairs: selector {property:value; property:value}. For example, p {font-family:"sans serif" ; color:black ; background:transparent} affects all paragraph elements, causing them to be black sans serif font on a transparent background (note quotes around multiple-word property values is mandatory).
selector { property:value; }
The selector is normally the element/tag you wish to define, the property is the attribute you wish to change, and each property is given one or more a values. The property and value are separated by a colon and surrounded by curly braces. Multiple style declarations for a single selector may be separated by a semicolon and optionally a space; according to the CSS Specification, no space is allowed between a number and a unit in the value. So "24pt" is legal syntax, but "24 pt" is not. Also, some browsers do not correctly render if is there is a space between the property and value,
For example, in STYLE="font-size:24 pt; color:red", the space between 24 and pt is illegal, and the spaces between color and the colon, and between the colon and red, could cause some browsers to ignore the value:
selector { property1:value1; property2:value2; }
As an example, the following code segment defines the "properties" (color and font-size) with specific "values" (red and blue for color, large and x-large for font-size) for the "selectors" h1 and h2 tags. Note the use of spaces, brackets, semicolons and colons:
<head>
<title>css example</title>
<style type="text/css">
<!--
h1 {font-size:x-large; color:red; background-color:transparent;}
h2 {font-size:large; color:blue; background-color:transparent;}
-->
</style>
</head>
Another example has a very different effect, centering the headings using the text-align property with value center, and using the color property to make h1 blue-green (#0066CC) and h2 red (#ff0000):
<style type="text/css">
<!--
h1 {text-align:center; color:#0066CC; background-color:transparent; }
h2 {text-align:center; color:#ff0000; background-color:transparent;}
-->
</style>
With CSS, you can precisely specify the font size and other attributes for your page, using a wide variety of sizes, like this:
<div style="font-size:12pt; font-family:Arial; color:blue; background-color:yellow;">
Your text goes here as blue 12 point Arial with yellow background, until you close the div. For smaller regions within a block, use span instead of div.
</div>
You can set your font size in points (pt), pixels (px), inches (in), or a number of other units.
With the introduction of Cascading Style Sheets, using CSS, you can even define a custom bullet using code like this:
<ul style="list-style-image:url(redball.gif)">
<li>Bullet 1</li>
<li>Bullet 2</li>
</ul>
which uses the CSS property "list-style-image," and defines the URL where the GIF image is located.
The syntax for defining the image's location is different: instead of placing the image URL inside quote marks, you have to place the URL inside a set of parentheses. For example, if you wanted to define the location of the GIF using an absolute URL, you would code the list like this:
<ul>
<li style="list-style-image:url(../images/new.gif)">if you see a red NEW on yellow bullet, your browser supports this feature</li>
<li style="list-style-image:url(../images/space.gif)">and here, the image space.gif causes no bullet to appear.</li>
<li style="list-style-type:none">and here, use style="list-style-type:none to remove the bullet (which may not work in all browsers).</li>
</ul>
Note that there's at least one disadvantage to using custom bullets like this: you can't define HEIGHT and WIDTH attributes for the image, so use an appropriately-sized image. Note that mixing list-style-types is done at each list element, and the list tag does not define the elements.
This technique so far works only under newer versions of browsers. However, the effect degrades gracefully, so browsers that don't understand this style sheet property just display the standard list bullet (if you see standard bullets above, maybe it's time to think about upgrading). There is a collection of replacement list elements online at www.w3.org/TR/REC-CSS2/generate.html#propdef-list-style
Use CSS to declare a font family, not just a particular font, when making a font-family declaration: serif, sans-serif, monospace, cursive, or fantasy. Note that if the value is in double quotes, any font with spaces should be inclosed in single quotes. For example, the following are examples of the fonts and families:
p {font-family:"new century schoolbook",serif;}
h3 {font-size:large; font-family:Arial,Verdana,sans-serif;}
h4 {font-family:"courier new",Courier,monospace;}
tt {font-size:10pt; font-family:" 'courier new',courier,monospace" ;}
There is a shorthand font property called simply font. It accepts the same values as font-family, plus a lot more, but there's one caveat: a font size is required when using font. You have to fill in something, even if it's the default value medium, like this:
p {font:italic normal bold medium "courier new", courier, monotype; color:blue;}
pre, tt, code {font:medium monospace;}
body {font:medium Times,serif;}
(be careful defining body rules, sometimes browsers get carried away rendering them, and change more than you expect).
You must also put the font's size before the font's family; again, it's what the specification requires. Besides using points (e.g. 18pt) and many other units of measurement (see Table following), you can use the safer relative sizes: xx-small, x-small, small, medium, large, x-large, and xx-large.
When you validate your CSS at W3C, you get a warning if you specify a color but do not also specify a background color. So if you use a color, also use a background color or transparent to avoid warnings.
| Unit of Measure | Web page display |
|---|---|
| Centimeter | Text at .5cm |
| Em | Text at 1.2em |
| Ex | Text at 2.5ex |
| Inch | Text at .20in |
| Millimeter | Text at 5mm |
| Pica | Text at 1.25pc |
| Pixel | Text at 20px |
| Point | Text at 14pt |
| Relative | Text at 120% |
An absolute font size always displays at a specified size. The Table preceeding shows the measurements in different units to get approximately the same size. Note some sizes may change with a different screen resolution or other settings. A relative font size displays according to the size of the surrounding text. Some designers call them scalable fonts. Instead of displaying a fixed pixel size, a relative font size displays as a percentage of the surrounding elements. Here's an example of a style sheet using a percentage size. The text of the page displays at the default size and the other elements are sized in relation to the default:
<STYLE>
BODY {font-family:arial;}
H1 {font-size:150%}
H2 {font-size:125%}
</STYLE>
or in the external style sheet:
h1 {font-size:150%; color:#0033cc; background:white; text-align:center; }
h2 {font-size:125%; color:#3333cc; background:white; text-align:center; }
At first glance, it looks as though you're setting the H1 tags to display at 150% of regular H1 tag sizes. But actually, this will probably make your page's header tags smaller than you expect because they'll display relative to the surrounding text. If your surrounding text were set to a large font, then the H1 text would be quite large. If it's very small, then the header element appears in proportion to the surrounding text. Relative font sizes allow you to keep the visual structure of your page (large heading tags, smaller sub-headings, etc.) and still let visitors control the size of the text. This is especially important to visitors who like to set their display to lower resolution or browser to show larger font sizes.
The major benefit of relative font sizes over absolute font sizes is that users with vision impairment can enlarge the page text to make it easier to read.
• The most consistent sizing used is pixels. It is supported by most browsers, but not always correctly; browsers often treat the pixels as screen pixels rather than CSS pixels. A drawback is that pixels ignore or overrule user preferences and cannot be resized in IE.
• Many developers prefer points for sizing, but points are more a product of the desktop publishing world, which doesn't easily translate to the Web. When presented, the operating system or browser makes assumptions about the pixels.
• The most common approach is to use em or percentage sizing. EMs are resizable in all browsers that support resizing. Ems are also relative to the default size in the user's preferences. IE is unpredictable when using em formatting. The better option for IE is sizing text using percentages.
You can adjust the space around any block-level element by changing the properties that control spacing. A header tag is a block-level element; other block-level elements include images, paragraphs, and lists.
Padding: the area between text and the border.
Border: the area between the padding and the margin.
Margin: the area outside the border that separates one element from another element.
To change the amount of space around the header tag, you need to adjust the margin-top and margin-bottom properties. The tricky part is that 0 is the default value (the one that causes all the space!). So when you look at a regular header tag, the value of the margin is 0 - even though there's a lot of space around it. To decrease the size of an element's margin, you have to use a negative value like this:
<style>
H1 {font-size:24px; color:blue; margin-top:-10px; margin-bottom:-15px;}
</style>
This header will display in blue, 24-pixel type and be nestled snugly between the other page elements.
Browsers Like It! Unlike many style sheet techniques, this renders fine in all recent browsers: Opera, Netscape 6.x, and Explorer. It doesn't work for Netscape 4.x browsers, but those versions have very poor CSS support and you have to deal with a lot of other Netscape CSS bugs too. Still, you don't get a broken page in Netscape 4.7, just the standard header with all that space around it.
An external style sheet may be linked to an HTML document through HTML's link element:
<link rel="stylesheet" href="spaugstyle.css" type="text/css">
<link rel="stylesheet" href="color-8b.css" type="text/css" title="8-bit color style" media="screen, print">
<link rel="alternate stylesheet" href="color-24b.css" type="text/css" title="24-bit color style" media="screen, print">
<link rel="stylesheet" href="aural.css" type="text/css" media=aural>
The <link> tag is placed in the document HEAD. The optional TYPE attribute is used to specify a media type -- text/css for a Cascading Style Sheet -- allowing browsers to ignore style sheet types that they do not support. Configuring the server to send text/css as the Content-type for CSS files is also a good idea.
External style sheets should not contain any HTML tags like <head> or <style>. The style sheet should consist merely of style rules or statements. A file consisting solely of:
P { margin:2em }
could be used as an external style sheet.
The SPAUG style sheet looks something like this:
body {color:black; background:white; margin-left:25px;}
h1 {color:#0033cc; background:white; text-align:center; }
h2 {color:#3333cc; background:white; text-align:center; }
h3 {color:#006666; background:white; }
h4 {color:blue; background:white; }
tt {font-size:10pt; font-family:"'courier new', courier, sans-serif"; color:#006633; background:white;}
p {font-size:12pt; font-family:"'times new roman', times, serif"; }
.blue {color:blue; background:white; }
#bldblu {font-weight:bold; color:blue; background:white; }
The <link> tag also takes an optional MEDIA attribute, which specifies the medium or media to which the style sheet should be applied. Possible values are:
Multiple media are specified through a comma-separated list or the value all.
Netscape Navigator 4.x incorrectly ignores any linked or embedded style sheets declared with MEDIA values other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all.
The REL attribute is used to define the relationship between the linked file and the HTML document. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the title attribute, as in the first <link> tag in the example, defines a persistent style.
A preferred style is one that is automatically applied, such as in the second <link> tag in the example. The combination of REL="StyleSheet" and a title attribute specifies a preferred style. Authors cannot specify more than one preferred style.
An alternate style is indicated by REL="Alternate StyleSheet". The third <link> tag in the example defines an alternate style, which the user could choose to replace the preferred style sheet. Note: current browsers generally lack the ability to choose alternate styles.
A single style may also be given through multiple style sheets:
<link rel="stylesheet" href="basics.css" title="contemporary">
<link rel="stylesheet" href="tables.css" title="contemporary">
<link rel="stylesheet" href="forms.css" title="contemporary">
In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, one must use the same title with each style sheet.
An external style sheet is ideal when the style is applied to numerous pages, such as the WebSIG information. With an external style sheet, we could change the look of an entire site by simply changing one file. Additionally, most browsers will cache an external style sheet, thus avoiding a delay in page presentation once the style sheet is cached. If the CSS file isn't in the same directory as the HTML file linking to it, the entire URL should be listed, not just the relative link.
Microsoft Internet Explorer 3 for Windows 95/NT4 does not support body background images or colors from linked style sheets. Given this bug, authors may wish to provide another mechanism for including a background image or color, such as embedding or inlining the style, or by using the background attribute of the body element.
A style sheet may be embedded in a document with the STYLE element:
<style type="text/css" media=screen>
<!--
body { background:url(foo.gif) red; color:black }
p em { background:yellow; color:black }
.note { margin-left:5em; margin-right:5em }
-->
</style>
The STYLE element is placed in the document HEAD. The required TYPE attribute is used to specify a media type, as is its function with the LINK element. Similarly, the TITLE and MEDIA attributes may also be specified with STYLE.
CSS Comments You can insert comments in CSS to explain your code, which can help you when you edit the source code at a later date. A comment will be ignored by the browser. A CSS comment begins with "/*" and ends with "*/", like this:
/* This is a comment */
Older browsers, unaware of the STYLE element, would normally show its contents as if they were part of the BODY, thus making the style sheet visible to the user. To prevent this, the contents of the STYLE element are contained within an SGML comment (<!-- comment -->), as in the preceding example.
An embedded style sheet should be used when a single document has a unique style. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate. Part of the Web SIG's goal is to determine an appropriate style for the SPAUG site.
A style sheet may be imported with CSS's @import statement. This statement may be used in a CSS file or inside the STYLE element:
<style type="text/css" media="screen, projection">
<!--
@import url(http://www.htmlhelp.com/style.css);
@import url(/stylesheets/punk.css);
dt { background:yellow; color:black }
-->
</style>
Note that other CSS rules may still be included in the STYLE element, but that all @import statements must occur at the start of the style sheet. Any rules specified in the style sheet itself override conflicting rules in the imported style sheets. For example, even if one of the imported style sheets contained dt {background: aqua}, definition terms (dt) would still have a yellow background.
The order in which the style sheets are imported is important in determining how they cascade. In the above example, if the style.css imported style sheet specified that STRONG elements be shown in red and the punk.css style sheet specified that STRONG elements be shown in yellow, then the latter rule would win out, and STRONG elements would be in yellow.
Imported style sheets are useful for purposes of modularity. For example, a site may separate different style sheets by the selectors used. There may be a simple.css style sheet that gives rules for common elements such as BODY, P, H1, and H2. In addition, there may be an extra.css style sheet that gives rules for less common elements such as CODE, BLOCKQUOTE, and DFN. A tables.css style sheet may be used to define rules for table elements. These three style sheets could be included in HTML documents, as needed, with the @import statement. The three style sheets could also be combined via the LINK element.
Style may be inlined using the STYLE attribute. The STYLE attribute may be applied to any BODY element (including BODY itself) except for BASEFONT, PARAM, and SCRIPT. The attribute takes as its value any number of CSS declarations, where each declaration is separated by a semicolon. Here's an example:
<p style="color:red; font-family:'New Century Schoolbook', serif"> This paragraph is styled in red with the New Century Schoolbook font, if available.</P> will give the following result:
This paragraph is styled in red with the New Century Schoolbook font, if available.
Note that New Century Schoolbook is contained within single quotes in the STYLE attribute since double quotes are used to contain the style declarations.
Inlining style is far more inflexible than the other methods. To use inline style, one must declare a single style sheet language for the entire document using the Content-Style-Type HTTP header extension. With inlined CSS, an author must send text/css as the Content-Style-Type HTTP header or include the following tag in the HEAD:
<meta http-equiv="content-style-type" content="text/css">
Inlining style loses many of the advantages of style sheets by mixing content with presentation. As well, inlined styles implicitly apply to all media, since there is no mechanism for specifying the intended medium for an inlined style. This method should be used sparingly, such as when a style is to be applied on all media to a single occurrence of an element. If the style should be applied to a single element instance but only with certain media, use the ID attribute instead of the STYLE attribute.
The CLASS attribute is used to specify the style class to which the element belongs, so you can define different styles for the same element. For example, the style sheet may have created the punk and warning classes:
.punk { color:lime; background-color:#ff80c0 }
p.warning { font-weight:bolder; color:red; background-color:white }
These classes could be referenced in HTML with the CLASS attribute:
<h1 class="punk">Proprietary Extensions</h1>
<p class="warning">
Classes allow multiple types of elements - there could be also p.justifyleft, p.justifyright, p.justifycenter, with appropriate definitions, each of which is called as appropriate.
In this example, the punk class may be applied to any BODY element since it does not have an HTML element associated with it in the style sheet. Using the example's style sheet, the warning class may only be applied to the P element.
Classes can be used as attributes of span and div elements; for examle, <span class="link">calling a pre-defined class, in this example, the .link class defined in spaugstyle.css as .link {text-decoration:underline; color:blue; background-color:transparent;}</span>
Here's an example of a generated using external CSS definition .button {font-family:"'times new roman', times, serif"; color:black; background:#cccccc; border:thin outset gray; }. If you use it with a link, use text-decoration:none to inhibit the underline.
Sometimes it may be better to name classes according to their function rather than their appearance (.link simulates a "hot" link; if you redefined the vlink to something else, you'd also redefine .link to match). The warning class in the previous example could have been named red, but this name would become meaningless if the author decided to change the style of the class to a different color, or if the author wished to define an aural style for those using speech synthesizers.
Classes can be a very effective method of applying different styles to structurally identical sections of an HTML document. For example, this page could use classes to give a different style to CSS code and HTML code. Classes can be combined in a “mix-and-match” technique, like <span class="grey thin">a grey thin (8-point) font</span>. With this technique, you would create many formatting class elements in the external CSS file, then combine them in the document as needed.
The ID attribute is used to define a unique style for an element. The id attribute has to be unique on the page. There can only be one element with a given id in a document. A CSS rule such as
#bldblu {font-weight:bold; color:blue;}
may be applied in HTML through the ID attribute:
<p id="bldblu">Welcome to the Web Design Group!</p>, and over short intervals using the SPAN element: <span id="bldblu">Welcome to the Web Design Group!</span>
The id attribute can be defined in two ways: it can be defined to match all elements with a particular id (#bldblu), or to match only one element with a particular id (p#bldblu). Each ID attribute must have a unique value over the document. The value must be an initial letter followed by letters, digits, or hyphens. The letters are restricted to A-Z and a-z.
In this example, the id attribute will match only p elements with id="intro":
p#intro {font-size:110%; font-weight:bold; color:#0000ff; background-color:transparent}
Note that HTML 4.0 allows periods in ID attribute values, but CSS1 does not allow periods in ID selectors. Also note that CSS1 allows the Unicode characters 161-255 as well as escaped Unicode characters as a numeric code, but HTML 4.0 does not allow these characters in an ID attribute value.
The use of ID is appropriate when a style only needs to be applied once in any document. ID contrasts with the STYLE attribute in that the former allows medium-specific styles and can also be applied to multiple documents (though only once in each document).
You can replace NAME With ID, so it's a simple matter convert internal navigation structure to use IDs. Just replace the NAME attribute with ID and that particular element automatically becomes an anchor, for example, instead of <a name="history"><h2>Sea Otter History</h2></a>, use <h2 id="history">Sea Otter History</a>. The anchor tag code doesn't change at all.
Applying Styles using IDs is the most common use for the ID attribute. It's used to apply CSS properties to a particular page element. As with page anchors, setting this up is a two-step process: Add the ID attribute to the page element; Define a style property. So let's go back to our Sea Otter example and apply a style to the first H2 element. We've already finished step one: <h2 id="history">Sea Otter History</a>
Now, define the ID's style properties in the external .CSS file:
#history {background-color:navy; color:white;}
Note the presence of the "#" sign in the style definition! That creates a section header that has a navy background with white text and is an internal page link. Instead of using both a NAME attribute and an ID attribute, you get two uses from one attribute.
The SPAN element was introduced into HTML to allow authors to give style that could not be attached to a structural HTML element. SPAN may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes.
SPAN is an inline element, so it may be used just as elements such as EM and STRONG in HTML. The important distinction is that while EM and STRONG carry structural meaning, SPAN has no such meaning. It exists purely to apply style, and so has no effect when the style sheet is disabled. You could define CLASSes and ID's to emulate the elements, thus removing structural meaning where it is not needed (but some browsers don't recognize CSS, and it can be turned off by a user, so caution is indicated)
Some examples of SPAN follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>example of span</title>
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css" media="screen, print, projection">
<!--
.firstwords { font-variant:small-caps }
-->
</style>
</head>
<body>
<p><span class=firstwords>The first few words</span> of a paragraph could be in small-caps. Style may also be inlined, such as to change the style of a word like <span style="font-family:Arial"> Arial</span>.</p>
The DIV element is similar to the SPAN element in function, with the main difference being that DIV (short for "division") is a block-level element. DIV may contain paragraphs, headings, tables, and even other divisions. This makes DIV ideal for marking different classes of containers, such as a chapter, abstract, or note. For example:
<div class=footer>
<h1>Divisions</h1>
<p>The DIV element is defined in HTML 3.2, but only the ALIGN attribute is permitted in HTML 3.2. HTML 4.0 adds the CLASS, STYLE, and ID attributes, among others.</p>
<p>Since DIV may contain other block-level containers, it is useful for marking large sections of a document, such as a footer (there would be a .footer class pre-defined in the CSS definitions with the desired attributes for a footer).</p>
<p>The closing tag is required.</p>
</div>
In this example, we've changed the default value of some elements and turn block-level elements into inline elements. In other places, we turned inline elements into block. You may or may not see all these effects because browser versions render them differently. In general, the newest browsers (version 6 and up) do the best job.
Examples of CSS used to replace traditional HTML tags that are deprecated. Be sure to close SPAN or DIV sections with </span> or </div>. The selectors could be defined in an external CSS file, for example using:
hr {margin-left:5%; margin-right:5%; }
(the preferred method), or defined in the HEAD using:
<style type="text/css">
<!--
hr {margin-left:5%; margin-right:5%; }
-->
</style>
or defined inline, using the <selector style="declaration; [declaration]"> format:
<hr style="margin-left:5%; margin-right:5%">, which gives the following Horizontal Rule:
Replace <big>Bigger text</big> with <span style="font-size:larger">; <span style="font-size:150%">
Replace <small>Smaller text</small> with <span style="font-size:smaller">; <span style="font-size:50%">
Replace <p align="left|right|center|justify">Paragraph text</p> with <p style="text-align:center|left|right|justify">
Replace <b>Text to Bold</b> with <span style="font-weight:bold">; <span style="font-weight:bolder">; <span style="font-weight:900">; <span style="font-weight:800"> - note not all browsers support all levels; normal=400.
Replace <i>Text to italicize</i> with <span style="font-style:italic">; <span style="font-style:oblique">
<cite>Citation text</cite>
<address>text using the CSS file defined address tag, a BLOCK element</address>Normal text; <code>default Code text</code>
Replace <u>Underlined text</u> with <span style="text-decoration:underline">
Replace <s>Strike-through text</s> with <span style="text-decoration:line-through">
Aligning Images With CSS:
The most obvious CSS solution is to use the text-align property to center the image. Unfortunately, that has the same effect as adding align="center" to the image tag: browsers ignore it entirely!
Instead, you'll have to apply the text-align property to the container element (the paragraph, DIV, or other block-level element that contains the image).
Create a style class and add it to the HEAD section of your page. Even better, add it to your external style sheet and use it on every page!
<style type="text/css">
.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
</style>
Then, apply the class to the container element:
<p class="centeredImage"><img src="imgName.gif" alt="image description" height="100" width="100"></p>
That's slightly more trouble than just applying align="center" to the paragraph tag, but it has the added benefit of giving you more control over the spacing around the image. Note that in our example, we set the margin and padding values to zero pixels to avoid extra spacing that may push important content farther down the page.
by Larisa Thomason, Senior Web Analyst, Keynote NetMechanic
Before most browsers reliably supported CSS formatting, designers had to place text inside an image if they needed a special background color, size, spacing, or other formatting not supported by basic HTML. Fortunately, you can now use cool text effects to create simple logos and other content using Cascading Style Sheets instead of images.
We'll start by creating a class called "TheaterLogo" and then using an inline style definition for the site's tagline. Remember that the tagline is important: it's where you state your site's value proposition!
<style type="text/css">
.TheaterLogo
{
background-color : white;
border-style : outset;
border-color: red;
border-width:7px;
height:85px;
width:350px;
color:maroon;
font-weight:bold;
font-family: "Comic Sans MS", sans-serif;
font-size:28px;
text-align:center;
}
</style>
This creates a logo with a white background, a rather thick red border, uses maroon text, aligned to the center, where the preferred font is Comic Sans font. The font will be 28 pixels in size and displayed in bold face. The height and width properties are determined by the amount of text you need to include and your page layout constraints. Here's how you add it in the BODY section of your document:
<div class="TheaterLogo"> Calhoun Little Theater<br>
<span style="font-size:18px;text-align:none">Amateur theatrical productions....
<br> professional quality!</span>
</div>
If you want to get really ambitious, you could even add a background image to create your site logo. It adds more visual interest without much extra download time.
Since you aren't making the text, border, and background color part of the image, visitors with images turned off will still see something more interesting than just ALT text. Add a background image using the background-image property. Stop the image from tiling by setting the background-repeat property to the "no-repeat" value.
<style type="text/css">
.ImageLogo
{
text-indent: 25px;
font-style: oblique;
color: navy;
font-weight: bold;
font-family: arial;
font-size: 28px;
background-image:url('sunriseSmall.gif');
background-repeat: no-repeat;
background-color: white;
height:80px;
}
</style>
Then, include it on your page - again using the DIV tag:
<div class="ImageLogo">
<span style="font-size:14px;"> <br></span>
<p>SunRise Coffee<br>
<span style="font-size:18px; color:maroon;
line-height:14px; font-weight:normal;">
<br>Shade-grown coffee ground fresh daily</span>
</div>
In this case, we used white as a background color, but you may want to choose a different color that will complement the rest of your site's color choices. Even if visitors are surfing using a graphical browser, there's always the chance that the background image may not load. Just in case, be safe and choose a complementary background color that works well with both the background image and the text.
Note how we use the SPAN tag first to place the company's name on the logo. Then, another SPAN tag reduces the size of the tagline text and changes the alignment. That gives the tagline a different "look" than the theater's name. There's no "best" way to accomplish this! It's always dependent on your site's individual name, logo, layout, and look and feel. Get ready to spend some time experimenting and testing in different browsers to achieve the best effect.
See also http://www.stanford.edu/group/itss-customer/ip/tgif/css/position.html for more details and absolute positioning.
Relative positioning places elements into the flow of the document . . . offsetting them from the previous element in the HTML code. This lets you place objects in relation to each other. Below, the first line of text would flow normally across the page. The <span> line uses positioning to place it 50 pixels below and 25 pixels to the right of the first line.
<html>
<head>
<style type="text/css">
<!--
#offset { position:relative; top:50 px; left:25px;}
-->
</style>
</head
<body>
<p> This text will flow normally across the screen. The next line will be offset from the end of this line. </p>
<span id="offset">this text is offset from the above line as you can see. doesn't that look nice?</span>
</body>
</html>
The Z axis lets you layer objects. Normally, if you put multiple objects at the same spot, each object will cover the earlier ones. Using the z-axis, you can specify which layer an object resides on. By setting the z-index higher or lower, you can move an object up or down the stack.
<html>
<head>
<style type="text/css">
<!--
.over { position:absolute;
top:165px;
left:20px;
z-index:2;
background-color:green
}
.under { position:absolute;
top:175px;
left:20px;
z-index:1;
background-color:blue;
font-family:arial;
color:white
}
-->
</style>
</head
<body>
<span class="over"> This text is positioned at 20 pixels from the left and 165 pixels from the top of the window.</span>
<span class="under">This text is positioned just below the above text, and would usually be placed on top because of its order on the page.</span>
</body>
</html>
Instead of JavaScript rollovers, use the CSS hover attribute. It works if you're using images for rollovers - like navigation buttons. Put the definition in the external CSS style sheet if the background image should be site-wide.
<style type="text/css">
a:hover{ background-image(insert your image name and path); }
</style>
A very detailed well-written tutorial with examples is available: Advanced CSS Rollovers
by Larisa Thomason, Senior Web Analyst, NetMechanic, Inc.
www.netmechanic.com/news/vol5/css_no9.htm
Netscape browsers have a well-known bug: they don't display empty table cells. Use this simple CSS specification to tame your empty table cells in Netscape.
You could create a GIF image that is 5 pixels high, the same color as the border, and place an IMG tag in each of the top and bottom border cells. That gets the height correct and is easy to do with just a few cells. But in a large, complex table, all the extra code causes maintenance problems and bloats the page size. Or you could create a border using the BORDER property as discussed in the March 2002 newsletter story. Remember though, as reported in that story, older Netscape browsers don't fully support the BORDER style attribute.
Use this STYLE specification to get borders that even behave in old Netscape browsers. Note the background-color controls the color of the border only for empty cells in a Table.
<style type="text/css">
<!--
TD.emptyCell {font-size:5px; background-color:Navy;}
-->
</style>
In this style specification, we're setting the style specifications for the entire document and then creating a special class to handle the border. We had to add TABLE, TR, and TD to the BODY style specification because of Netscape's incomplete support for CSS in tables.
The class we set up is called "emptyCell." In it, we define the font-size to be the height we want for the border cells and define the cell background color like this:
<table cellspacing="0" cellpadding="0" border="0" width="250">
<tr>
<td class="emptyCell" rowspan="3" width="5"> </td>
<td class="emptyCell" colspan="3"> </td>
<td class="emptyCell" rowspan="3" width="5"> </td>
</tr>
<tr>
<td>Left cell</td>
<td>Middle cell </td>
<td>Right Cell </td>
</tr>
<tr>
<td class="emptyCell" colspan="3"> </td>
</tr>
</table>
| Left cell | Middle cell | Right Cell | ||
You get the same effect as using images, but without the extra effort. Read about other Netscape/CSS quirks in the Netmechanic article "Netscape Ate My Stylesheets!".
Example at www.cssplay.co.uk/layouts/fixed.html; there is also an example of Centering Float Left Menus
The page has a fixed menu in the top left hand corner of the screen. The menu will remain on screen at all times in NN7, Opera, Mozilla, Firefox AND IE6!
Just scroll this page and see the menu pass over the top without so much as a flicker (not like those javascript things that jerk and jump down the screen trying to keep up with the scroll). In fact IE6 handles the scrolling better that Mozilla/Firefox.
This is all done using standard CSS with a little help from another IE6 BUG that makes it believe that 'ABSOLUTE' is 'FIXED'.
Just take a peek at the source code to see that all it takes is a setting of height:100% for the body (with overflow-y:auto) and it works. Anything that is position:absolute; or position:relative; will now be FIXED in IE6.
The only problem with this is that you cannot use absolute or relative positions on the moving page but float is allowed.
<style type="text/css">
#adsie {position:fixed; top:10px; left:0;}
html {background:rgb(123,187,221);}
body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto; background:rgb(123,187,221);}
body {font-family: georgia, serif; font-size:16px;}
#page {margin:310px 0 50px 250px; display:block; width:500px; border:1px solid #000; background:#fff; padding:10px;}
#page .right {font-size:30px; float:right;}
#menu {display:block; top:10px; left:170px; width:130px; position:fixed; border:1px solid #888; padding:10px; text-align:center; font-weight:bold; color:#fff; background:url(grid2.gif);}
* html #menu {position:absolute;}
#menu a:visited, #menu a {display:block; width:120px; height:20px; margin:0 auto; border-top:1px solid #fff; border-bottom:1px solid #000; text-align:center; text-decoration:none; line-height:20px; color:#000;}
#menu a:hover {background:#aaa; color:#fff;}
.clear {clear:both;}
p:first-letter {font-size:25px; color:#d88;}
#fixpic {display:block; width:108px height:145px; position:fixed; bottom:0; left:0;}
* html #fixpic {position:absolute;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<!--[if lte IE 6]>
<style>
/*<![CDATA[*/
#adsie {position:absolute; top:10px; left:0;}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<div id="page">
<div class="right">position:fixed;</div>
<div class="clear"></div>
<a id="bites"></a>
<div class="right">Another one bites the dust~</div>
<div class="clear"></div>
<p>Well, they said it couldn't be done in IE6 because of a browser bug.</p>
<p>But they didn't know that another bug works in a way that ALLOWS this to be done!</p>
<p>This page has a fixed menu in the top left hand corner of the screen. This menu will remain on screen at all times in NN7, Opera, Mozilla, Firefox AND IE6!!</p>
<p>Just scroll this page and see the menu pass over the top without so much as a flicker (not like those javascript things that jerk and jump down the screen trying to keep up with the scroll). In fact IE6 handles the scrolling better that Mozilla/Firefox.</p>
<p>This is all done using standard CSS with a little help from another IE6 BUG that makes it believe that 'ABSOLUTE' is 'FIXED'.</p>
<p>Just take a peek at the source code to see that all it takes is a setting of height:100% for the body (with overflow-y:auto) and it works.<br /> Anything that is position:absolute; or position:relative; will now be FIXED in IE6.</p>
<p>The only problem with this is that you cannot use absolute or relative positions on the moving page but float is allowed.</p>
<div class="right">and there you have it~</div>
<div class="clear"></div>
<p>The rest of this page is just put in to fill up the space to extend the div out of the screen area</p>
<p>Taking this to extremes you have <a href="http://www.cssplay.co.uk/layouts/frame.html">The Holy Grill</a></p>
<p>This page is <a href="http://validator.w3.org/check/referer">Valid XHTML1.1</a>.</p>
<p>©2004 Stuart A Nicholls ~all rights reserved (but help yourself to the code anyway ;)</p>
<p>Back to the <a href="http://www.cssplay.co.uk">Home Page</a>.</p>
<p>Let's stuff a few images at the end to see if there is a problem in IE.</p>
<img id="fixpic" src="tuck5.gif" alt="friar" title="friar" />
<img src="tuck3.gif" alt="friar" title="friar" /><br />
<img src="tuck2.gif" alt="friar" title="friar" /><br />
<img src="tuck1.gif" alt="friar" title="friar" />
<p>Looks ok to me?</p>
<a href="#bites">Goto 'Another one bites the dust'</a><br />
</div>
<div id="menu">
DUMMY MENU
<a href="#" title="Dummy menu item">Mozilla</a>
<a href="#" title="Dummy menu item">Opera</a>
<a href="#" title="Dummy menu item">Netscape</a>
<a href="#bites" title="Dummy menu item">Firefox</a>
<a href="#" title="Dummy menu item">IE6</a>
<a href="#" title="Dummy menu item">Windows</a>
<a href="#" title="Dummy menu item">Style</a>
<a href="#" title="Dummy menu item">CSS</a>
<a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=position fixed" title="Your comments">Comments</a>
</div>
<div id="adsie">
<script type="text/javascript">
<!--
google_ad_client = "pub-6651950180071236";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "666666";
google_color_bg = "000000";
google_color_link = "FFFFFF";
google_color_url = "999999";
google_color_text = "CCCCCC";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
Full article on Caption Control
HTML has always provided the ability to create a caption for your tables, using the caption tag. The contents of the caption tag are formatted as a separate flow and placed adjacent to your table. Using the align attribute, you could specify where you wanted the caption placed. CSS2 adds the new caption-side property.
This property accepts one of four values: top, bottom, left, or right. When applied to the caption tag, it causes the caption to appear on the appropriate side of the table.
Keep in mind that you can use other flow-related properties to further adjust the appearance of your captions. Properties controlling margins, width, and alignment can be applied to a caption, just like any other flow.
Captions placed above or below a table are initially the same width as the table and aligned with the table. Changes you make in the caption's indentation cause it to shift with respect the table, allowing you to indent your captions positively or negatively. Adjusting borders and margins let you place more or less space between the table and the caption.
Captions placed to the left or right of a table may require more intervention. Without an explicit width, captions may be adjusted at the discretion of the browser. Given the variations in how tables are formatted and the space available in the browser window, your caption may be squeezed or stretched in unexpected ways. To avoid these kinds of surprises, you may wish to use the width property to ensure that your captions get the room they need to be readable and attractive. Again, the border and margin properties can be used to adjust spacing around the caption.
Link to full article on General Table Element Display
The original Cascading Style Sheet specification defined a property named display. This property handles a unique function: it tells the browser how to display a given element within a text flow. This seems like such a fundamental property of any element that most authors don't realize you can change how a browser deals with an element.
In CSS1, the display property accepts one of three values: inline, block, or list-item. An element whose property is set to inline is displayed within the containing flow without any flow interruption. Elements like <i> and <code> are inline elements, rendering their contents in a certain style without interrupting the containing flow.
Similarly, elements whose display property is set to block break the current flow and display as a separate block of content. Elements like <p> and <div> display as block elements. The list-item value for the display property addresses only items that are to be displayed in an ordered or unordered list. In a normal document, only the li element uses this value, causing it to display with a bullet or sequence number.
Although most authors don't know it, you can change an element's display property and dramatically alter the appearance of your documents. If you declare:
p {display:inline} all the paragraphs in your document will collapse into a single flow. Similarly, a style like:
b {display:block} will cause all your bold text to become separate paragraphs.
What does all this mean for tables in CSS2? Just as CSS1 created a special display type for list elements, CSS2 creates a number of display elements for tables. In CSS2, these additional values (and their corresponding HTML tags) are allowed with the display property:
| table display element values | Action and corresponding HTML tag |
|---|---|
| table | causes the element to behave as a traditional table, formatted as a separate block of text. (<table>) |
| inline-table | causes the element to act like a table, but to be rendered inline with the current text flow. |
| table-row | causes the element to act like a table row, containing cells and itself contained by a table element. (<tr>) |
| table-row-group | causes the element to render as a group of table rows, usually to create special rule or formatting effects. (<tbody>) |
| table-header-group | causes the element to behave like a table header, possibly with special formatting for the contained cells and more sophisticated rendering for print. (<thead>) |
| table-footer-group | provides similar capabilities for a table footer. (<tfoot>) |
| table-column | causes the element to behave as a column, containing formatting information to control cells in related columns. (<col>) |
| table-column-group | causes the element to behave as a column group, usually for layout or border effects. (<colgroup>) |
| table-cell | causes the element to act like a table cell, contained by both a table row and in turn, a table. (<td> and <th>) |
| table-caption | causes the element to format like a table caption, as explained previously. (<caption>) |
You might want to alter the behavior of your table elements to better control how they are rendered. In particular, creating inline tables by a simple adjustment to the display property is an easy way to alter your document layout. Be warned, older browsers will completely ignore your hard work and careful coding.
These properties will also be useful when using CSS2 with more generic XML documents that need table layout capabilities but lack a full set of table tags. The CSS2 standard requires that the browser supply the missing pieces of a table if some lower-level element is used. Thus, if you set display: table-cell on a paragraph, the browser must create a table and a table row to contain that paragraph, formatting the whole collection correctly as a table.
Link to article Controlling Table Layout By Chuck Musciano, February 9, 2001
CSS2 defines a new property, table-layout, that lets the author select one of two table layout algorithms. As you might expect, there are tradeoffs between the two.
If you set the table-layout property to fixed, the browser uses a faster but potentially less accurate algorithm to determine the width of each column in the table. For each column, the first cell whose width property is set to something other than auto defines the width for that column. All other cells in that column, regardless of their content, are formatted to that width.
The fixed algorithm is fast because the browser can start displaying the table as soon as it knows the width of each column. As we've all experienced, large tables can take a long time to render if the browser must format every cell before deciding each column width. By setting those widths as soon as possible, your table content can be presented to the user that much sooner.
You should use the fixed algorithm if your table cells are all the same width. Take the time to define the width of all the cells in the first row and you'll get the fastest possible rendering with the widths you want.
Of course, the fixed algorithm is a disaster if later cells in your table are wider than cells in the beginning of the table. In these cases, you'll want to use the auto value for the table-layout property. This layout algorithm matches what most browsers currently do: inspect every cell in the table before making any formatting decisions. The resulting layout is optimal for all the content in your table but can take substantially longer to display.
For most cases, you can probably use the fixed layout to get a good layout in a reasonable amount of time. To prevent annoying delays in displaying your document, only use the auto algorithm when absolutely necessary.
The CSS2 authors understand that sometimes you have more content than a particular block, especially a table cell, can hold. While the rendering of this overflow used to be browser dependent, CSS2 gives the author control of overflow handling with the overflow property.
The default value for this property is visible, allowing the overflow content to be displayed outside the containing block. This is what most browsers currently do, but it can result in unattractive documents and layout errors.
A better solution is to set the overflow property to either hidden or scroll. As you can probably guess, using hidden causes the overflow content to be clipped by the containing block, while scroll attaches a scrollbar to the block so that the user can scroll to see the overflowing content.
Hiding or scrolling is up to you, depending on how you want each table cell to be viewed. While your choice may vary from document to document, the fact that you have a choice is just another compelling feature of the CSS2 specification.
Link to article Aligning Cell Content By Chuck Musciano, February 16, 2001
Table cells (both <td> and <th>) honor the text-align property that controls how the flow is formatted. For most HTML elements, you can specify style="text-align:left|right|center|justify as a value to get the desired text alignment. Table cells also allow a string value on which to center the data (such as x.y, to center on a decimal point).
To hide a row or column in a table while keeping the overall appearance of a table, CSS2 adds a new keyword value to the visibility property. For all other elements, style="visibility:visible|hidden" are available. Additionally within tables, the tr, thead, tbody, tfoot, col, and colgroup tags allow style="visibility:collapse" to be used to hide the entire row or column. Note a browser that doesn't support CSS2 will show the row or column.
The CSS2 standard extends the predefined color list to include dozens of additional colors as they are used in the user's desktop. Although there are too many predefined system colors to list here, a few are worthy of note. They include:
For example, to ensure your documents have the same general background and text color as most windows on the user's desktop, use this style: P {color:WindowText; background-color:Window}
You have a lot of options to choose from when you define horizontal rules with CSS. Here are some of the most common:
Here is a sample definition of a HR using CSS definition in the head to apply to the whole document:
<STYLE>
HR {height:10px; width:30%; background:#446791; margin:0px 150px 0px 150px;}
</STYLE>
or in a CSS file, to apply to a group of documents
hr {height:10px; width:30%; background:#446791; margin:0px 150px 0px 150px;}
or inline, to apply to just this single horizontal rule:
<HR style="height:10px; width:30%; background:#446791; margin:0px 150px 0px 150px;">
This specification should create a dark blue horizontal rule that is 10 pixels high, occupies 30% of the browser window, and is centered on the page, like the one above this line. Different browsers render it differently, however. If you want to right or left-justify the line, you'll need to experiment with the margin specifications to find what looks best for your page.
It works in Explorer 5.x and 6.x, and Netscape 6.x browsers. Web TV and Netscape 4.x browsers ignore the style specification and display a plain thin line that occupies 100% of the browser window. Study your server logs to determine what percentage of your audience might see the plain line instead of the custom rule. If it's a substantial percentage, you may need to use an image divider instead.
When you replace your standard horizontal rules or graphic images with CSS-defined horizontal rules, you benefit in several ways:
Few CSS-styled documents will validate at the HTML 3.2 (Wilbur) level. HTML 3.2 does not define the SPAN element, nor the CLASS, STYLE, or ID attributes, and also lacks support for the TYPE and MEDIA attributes on the LINK and STYLE elements. These style-related elements and attributes are not harmful to non-supporting browsers, as they are safely ignored. Documents using these elements and attributes may be validated against HTML 4.0.