TweetFollow Us on Twitter

Intro To Cascading Style Sheets

Volume Number: 14 (1998)
Issue Number: 6
Column Tag: WebTech

Introduction to Cascading Style Sheets

by Paola Aliverti
Contributing Editor Tantek Çelik

HTML authoring has just gotten easier: style sheets land on the Web

History

Cascading Style Sheets have been sporadically seen on the web for a while. It isn't until recently, with the latest versions of Microsoft Internet Explorer and Netscape Navigator, that they can be more widely appreciated. Style sheets on the Web work pretty much like style sheets in a word processor, or in a desktop publishing application. You can define a style called 'note' with blue text, enclosed in a border, with 24pt type set. If you need to make visual changes at a later date, all you need to do is change the defined style, without going through all the text in a page, or all the pages. CSS allows you to establish a set of rules to apply throughout the document, or, in our case, a site. Just like word-processing style sheets, Cascading Style Sheets on the Web help in a more consistent and time-saving preparation of your documents, and in styling and formatting of your documents.

The W3 Consortium has so far come up with the first list of specifications (CSS1), and is working on the second series of specs. Both Netscape 4.0 and Internet Explorer 4.0 support most of the CSS1 specs. Authoring tools are currently on the market to help you with CSS (Macromedia Dreamweaver, and Cascade, for example). You can find up-to-date information about the current CSS standards on the Web Consortium web site, at: http://www.w3.org/Style/CSS/.

HTML was designed for structure, not for style and formatting. That's why solutions like frames, and tables came along. The problem is that both of those solutions are neither straightforward nor consistent. Frames cause problems with bookmarks, and tables bloat code and promote inflexible formats.

Tables and frames will not disappear from everyday use, but style sheets will make your life much easier. If you are a web author, there will no longer be a need for tables hacks, spacer GIFs, or text-based GIFs. Style sheets allow for easy maintenance of your site, easier design, and improved control over the page layout. They help build scalable sites, uniform sites with a consistent look among browsers and platforms. If you are a web user, surfer, or cybernaut, you will like style sheets because the pages are smaller, your downloads faster, and the layout 'spiffier'. You will also like the browser scalability.

CSS allows you to re-define the look of HTML tags, add your own styling to them, or create new Classes with new characteristics.

For example, you can decide to have non-underlined links:

<A STYLE="text-decoration: none" HREF="examples.html">non-underlined link</A>

Or to have a blue <H1> tags:

<H1 STYLE="color: blue">H1 blue</H1>

Or place a dotted border around a paragraph:

<P STYLE="border: dotted blue">paragraph with dotted border</P>

NB: If you are among those who have not closed their <P> tags, it's time to start. Browsers behave much more predictably when you close the tags properly!

The basics

How does style sheet code work? Let's start with some basic terminology. In a style sheet code, there is a selector and a declaration.

A:link { text-decoration: none }

A:link is the selector, and
{ text-decoration: none } is the style declaration

The style declaration has a property (in this case 'text-declaration'), and a value ('none'). The selector can be a tag, or a newly-defined class. More specifics on different selectors can be found in the CSS1 recommendation:

Of course, even though the CSS1 properties are defined by the official spec, not all CSS-savvy browsers support all CSS1 properties. For a list of what is supported by Navigator and Explorer, you can look at:

They are not always up-to-date, but they are the best I've found so far.

There are different ways to add style sheets to your HTML code:

  • Embedding a Style Sheet
  • Linking to External Style Sheet
  • Importing an External Style Sheet
  • Adding Styles Inline

The above-mentioned examples (except the A:link example) are all inline styles. All you need to do is add the STYLE attribute to the tag you want to modify, and specify a properties and values.

If you are looking at CSS not only for styling, but for efficient site management, you don't want to be repeating the style for each instance of each tag. Let's take a look at other ways to implement style sheets...

Embedded Style Sheets

You can add your CSS code at the beginning of each HTML file you want to affect, by putting the following inside your HEAD (in your HTML <HEAD> silly!!!)

embedded.html
<HTML>
<HEAD>
<TITLE>Welcome to the fruit factory!</TITLE>
<STYLE TYPE="text/css">
<!--
H1 {color: blue}
A:link {text-decoration: none;
    color: green;
    font-size: larger;
    font-weight: bold}
P {border: dotted blue;
  text-align: center}
-->
</STYLE>
</HEAD>
<BODY>
<H1>Welcome</H1>
<P>You will find the latest and greatest news on <A HREF="topo.html">this page</A>!
</P>
</BODY>
</HTML>

Remember to hide the content of your style sheets from the old browsers with the HTML comment tag, as older browsers will ignore the <STYLE> and </STYLE> tags, but not the text in between.

Notice that different property/value pairs for the same selector should be separated by a semicolon ";".

External Style Sheet

This is my favorite implementation of CSS, as it allows you to style several files in your site, and update them by changing only one file. You can create separate external files for the different sections of your web site. A file called 'eggplant.css' can define the look and feel of the pages in all the sections of 'eggplant.com' site.

eggplant.css
H1 {color: blue}
A:link {text-decoration: none;
    color: green;
    font-size: larger;
    font-weight: bold}
P {border: dotted blue;
  text-align: center}

In the 'eggplant.com' site's pages, I will have the following code in the <HEAD> to link to the 'eggplant.css' style sheet:

<LINK REL=stylesheet HREF="eggplant.css" TYPE="text/css">

external.html
<HTML>
<HEAD>
<TITLE>Welcome to the fruit factory!<TITLE>
<LINK REL=stylesheet HREF="eggplant.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Welcome</H1>
<P>You will find the latest and greatest news on <A HREF="news.html">this page</A>!
</P>
</BODY>
</HTML>

Importing an External Style Sheet

Let's say that Eggplant is partnering with TopoCo. in a sale of Topo Mouse dolls, and I need to add TopoCo.'s traditional style to my Eggplant site. I can do this by adding to my previously-mentioned 'eggplant.css' file one line of code: @import url(topo.css)

import.css
H1 {color: blue}
A:link {text-decoration: none}
P {border: dotted blue}
@import url(topo.css)

You can import as many style sheets as you like (but beware of possible conflicts, as the next sections explain...). There are already collections of style sheets available on the web http://www.microsoft.com/gallery/files/styles, and expect more in the future. Importing style sheets can come pretty handy when you don't feel like creating the files yourself. Of course, you should be aware not only of the legal implications of taking someone else's work, and use it in your own site, but also of the stability of the site you are linking to.

As far as I can tell, though, it's something you don't have to worry about, yet, because only one version of the common browsers supports imported style sheets (Internet Explorer 4.0 for the Mac).

Order of importance

As you probably already guessed from looking at the examples above, you can mix and match any of the methods of implementation of CSS. Which one is more important? And which one will prevail, in case two of them conflict? Although many references attempt to explain (see comments about CSS1, and CSS2 specs in the next section), the correct order of importance is the following:

  1. Inline Styles.
  2. Embedded, Linked, and Imported Style Sheets.
  3. User preferences.
  4. Browser's default settings.

Now let's move on to the next section to find out what prevails when styles conflict.

Cascading Abilities, Inheritance, Conflicts

As you probably already guessed from looking at the examples above, browsers need firm rules of cascading and inheritance for different style sheets, or implementations thereof, in order to avoid chaos. The specs of CSS1 differ a bit from CSS2 in this matter. According to my research, browsers have already started to support CSS2 rules. I will skip the CSS1 rules, and just discuss the CSS2 cascade rules, which, apart from being the latest, also seem more logical. Here is the first set of rules:

  1. Follow specific declarations, or, if there aren't any, inherit values.
  2. Sort declarations by importance.
  3. Sort by specificity of selector.
  4. Finally, among selectors of equal specificity, the latest onewins.

As most of the current versions of CSS browsers do not support factor 2 (the 'important' modifier), I will concentrate on the cascading declarations and inheritance.

The first rule can be divided in two simple rules:

  1. Cascading takes precedence over inheritance.
  2. Follow the order in which the styles appear, considering the latest (closest to the text to which it refers) style the most important.

Let's take a look at what cascading and inheritance mean.

Cascading declarations and inheritance

inherit.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
H1 {color: blue}
BODY {text-decoration: none;
   color: navy}
A:link {text-decoration: underline;
    color: green}
P {font-style: italic}
-->
</STYLE>
<TITLE>Welcome to the veggie factory!</TITLE>
</HEAD>
<BODY>
<H1>Welcome</H1>
<P>You will find the latest and greatest news on <A HREF="latest.html">this page!</A></P>
</BODY>
</HTML>

All the text within the <BODY> tag should be navy, and not underlined. The <H1> tag is within the body tag. It will then appear not underlined. The <H1> tag has its own declaration rule to follow, and it will appear as blue.

The text within <P> will be in italic, and it will inherit the color specified in BODY, because it has no color declarations of its own. The link tag <A>, though, has its own rule, and will display in green, while inheriting the italic style of the <P> tag.

How can you tell which properties inherit? A simple rule might be this: pure adornment properties inherit, formatting properties don't. E.g.: a color property will inherit. A positioning property won't. One notable exception to this rule: background and border, which can be considered adornment properties, do not inherit.

Cascading declarations and order

order.html
<HTML>
<HEAD>
<STYLE TYPE="text/CSS">
<!--
B { font-family: courier;
  color: blue}
B { font-family: arial;
  color: yellow}
-->
</STYLE>
<TITLE>CSS is fun!</TITLE>
</HEAD>
<BODY>
<B>
Is this text yellow or blue? Arial or Courier?!
</B>
</BODY>
</HTML>

The text will appear yellow arial, because the second rule wins over the first rule.

Conflicts

What happens if style sheets conflict with a standard HTML tag? The style sheet rules take precedence.

conflict.html
<HTML>
<HEAD>
<STYLE TYPE="text/CSS">
<!--
BODY { font-family: arial;
    color: yellow}
-->
</STYLE>
<TITLE>CSS are fun!<TITLE>
</HEAD>
<BODY COLOR=blue>
Style sheets take precedence over HTML tags. This text is yellow arial.
</BODY>
</HTML>

The browsers seem to behave differently, not only depending on the versions, but on the platform, as well. The ever-valid web authoring rule applies even to style sheets: test on all possible configurations before publishing online.

The most accurate sources of information I have found on and offline about browsers support are:

Web Designer's Guide to Style Sheets, by Steven Mulder, Hayden Books. ISBN# 1-56830-306-8,

http://www.webreview.com/guides/style/.

Classes, Ids, Contextual Selectors

If you need to style different tags in the same fashion (e.g.: highlighting anything with a yellow background), or the same tag in different ways (e.g.: three different kinds of underlining, according to where the links appear), you can define classes within your style sheet.

class.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
.hilite {background-color: yellow}
-->
</STYLE>
<TITLE>Highlight what's important</TITLE>
</HEAD>
<BODY>
<H1>Highlight what's <SPAN CLASS="hilite">important</SPAN></H1>
With style sheets, you can <SPAN CLASS="hilite">highlight</SPAN> the important parts of your document.
</BODY>
</HTML>

Hilite is declared as a class selector by preceding it with a period "." The <SPAN> tag is essentially just a vehicle for applying a style to a range of content, it has no intrinsic effect of its own. The CLASS attribute inside the SPAN tag then binds it to the style declared for the indicated class.

class2.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
P.green {background-color: green;
     color: red}
P.yellow {background-color: yellow;
     color: green}
P.orange {background-color: orange;
     color: purple}
P.red {background-color: red;
     color: blue}
P.purple {background-color: purple;
     color: yellow}
P.blue {background-color: blue;
    color: orange}
-->
</STYLE>
</HEAD>
<BODY>
<H1>My favorite colors</H1>
<P CLASS="green">In this line we will talk about the color green.</P><BR>
<P CLASS="yellow">In this line we will talk about the color yellow.</P><BR>
<P CLASS="orange">In this line we will talk about the color orange.</P><BR>
<P CLASS="red">In this line we will talk about the color red.</P><BR>
<P CLASS="purple">In this line we will talk about the color purple.</P><BR>
<P CLASS="blue">In this line we will talk about the color blue.</P><BR>
</BODY>
</HTML>

The class2.html example demonstrates tag specific class selectors. Only <P> tags with the respective classes will bind to the styles declared. Other tags with classes won't be affected. You can also use HTML 3 ID attributes instead of CLASSES to define a new style. In this case, the ID will work as a selector.

id.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
#bggrtxr {background-color: green;
     color: red}
-->
</STYLE>
</HEAD>
<BODY>
<H1>My favorite colors</H1>
<P>In this line we will talk about the <SPAN ID="bggrtxr">color green.</SPAN><BR>
</BODY>
</HTML>

You can also have a sequence of tags for a selector, creating contextual selectors. In this case, the CSS rules will apply to tags which have the indicated parent-child relationship.

conindex.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
H1 I B {background-color: yellow} 
-->
</STYLE>
</HEAD>
<BODY>
<H1>More<I> <B>highlights!</B></I></H1>
<P>In this line we will talk about the <I><B>contextual selectors.</B></I><BR>
</BODY>
</HTML>

In this case, 'contextual selectors' is bold and italic, but is not highlighted because it is not contained within the <H1>. 'Highlights!', on the other hand does appear with a yellow background.

Style Sheet Properties

Here is a review of the main properties and their values. I recommend you look at the books or URLs listed at the bottom of the page, and test your pages thoroughly, to make sure that the properties are properly supported across browsers. Be sure to check the CSS1 Recommendation and the latest CSS2 Working Draft for the complete details on particular properties and values.

Possible values are listed after the colon, separated by a vertical bar "|", meaning 'or', or by a double vertical bar "||", meaning and/or.

Common values

Many style properties take the similar values. Here is a summary of the most common value types and what they mean. In the list of properties, I will simply list <length> when a property can be defined in inches, centimeters, etc.

Length

length is expressed in inches (in), centimeters (cm), millimeters (mm), points (pt), picas (pc), em (em), x-height (ex), or pixels (px).

Percentage

percentage is expressed in comparison to the standard size or size of one's parent tag. 150% means that the font-size, for example, is one and a half times the size of the parent tag's font-size.

Color
Any of the pre-defined standard web colors.
{1,4}
Appears in properties that can take from one to four values. They indicate the top, right, bottom, and left values respectively for the property. E.g.:
Margin:
<length> | <percentage | auto {1,4} means that the four values of margin can be listed as follows: <P> {margin: 20px 10px 20px 10px}

Properties

Fonts

  • font-family: <family name>, .. || <generic name> where <family> : helvetica |arial | times | etc. and <generic> : serif | sans-serif | cursive | fantasy | monospace.
  • font-size: <absolute> | <relative> | <length> | <percentage> where <absolute>: xx-small | x-small | small | medium | large | x-large | xx-large and <relative>: smaller | larger
  • font-style: normal | italic | oblique
  • font-weight: extra-light | light | demi-light | medium | normal | demi-bold | bold | extra-bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  • font-variant: normal | small-caps
  • text-transform: capitalize | uppercase | lowercase | none
  • text-decoration: none | underline | overline | line-through | blink

Color and Background

  • color: <color>
  • background-color: transparent | <color>
  • background-image: <url> | none
  • background-repeat: repeat | repeat-x | repeat-y | no-repeat
  • background-attachment: scroll | fixed
  • background-position: <percentage> | <length> | top | center | bottom | left | right
  • background by itself also takes any of the above values.

Space and Layout

  • word-spacing: normal | <length>
  • letter-spacing: normal | <length>
  • line-height: normal | number | length | percentage
  • text-align: left | right | center | justified
  • text-indent: <length> | percentage
  • vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>
  • margin: <length> | <percentage | auto {1,4}. In lieu of the shorthand margin, you can also use the more specific: margin-top, margin-right, margin-bottom, margin-left.
  • padding: <length> | <percentage> {1,4} In lieu of the shorthand padding, you can also use the more specific: padding-top, padding-right, padding-bottom, padding-left.
  • border-width: thin | medium | thick | <length> {1,4} In lieu of the shorthand border-width, you can also use the more specific: border-top-width, border-right-width, border-bottom-width, and border-left-width.
  • border-color: <color> {1,4}
  • border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset {1,4}
  • border: <border-width> ||<border-style> || <border-color> In lieu of the shorthand border, you can also use the more specific: border-top, border-right, border-bottom, and border-left.
  • width: <length> | <percentage> | auto
  • height: <length> | auto
  • float: left | right | none
  • clear: none | left | right | both

Positioning

  • position: absolute | relative | static
  • left: <length> | <percentage> | auto
  • top: <length> | <percentage> | auto
  • width: <length> | <percentage> | auto
  • height: <length> | <percentage> | auto
  • overflow: none | clip | scroll
  • z-index: auto | <integer>
  • visibility: inherit | visible | hidden

Classification

  • display: block | inline | list-item | none
  • white-space: normal | pre | nowrap
  • list-style: <keyword> || <position || <url> where <keyword>: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none <position>: inside | outside and <url>: <url> | none

In lieu of the shorthand list-style, you can also use the more specific: list-style-type, list-style-image, and list-style-position.

Fun with Style Sheets

Here are a few examples that will hopefully give you an idea of how much fun you can have with style sheets. The examples are sample code that you can use, but they are not guaranteed to be a complete, scalable solutions for all browsers and platforms.

Rollover effect

rollover.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
A:link {color: navy;
    text-decoration: none;
    font-size: 40pt;
    font-family: helvetica, arial}
A:active {color: orange}
A:hover {font-weight: bold;
     color: red}
-->
</STYLE>
<TITLE>Rollover effect</TITLE>
</HEAD>
<BODY>
This example will work for Internet Explorer 4.0 Mac users:<BR>
<A HREF="rollover.html">ROLLOVER EFFECT</A>
</BODY>
</HTML>

Unfortunately, this example will work only with Internet Explorer 4.0 for the Mac. But considering how little it takes to implement it, why not add a little excitement just for your Internet Explorer Mac users?

Navigation bar

navigation.html
<HTML>
<HEAD>
<TITLE>navigate with CSS</TITLE>
<STYLE TYPE="text/css">
A:link {color: blue}
A:visited {color: navy}
A:active {color: orange}
A:hover {color: red}

A.nav:link {color: white}
A.nav:visited {color: #3300FF}
A.nav:active {color: yellow}
A.nav:hover {color: yellow}

.bar {line-height: 150%;
   background-color: #FF0000;
   font-weight: bold;
   font-family: helvetica}
</STYLE>
</HEAD>
<BODY>
<CENTER>
<DIV CLASS="bar">
<A CLASS="nav" HREF="home.html">home</A> | 
<A CLASS="nav" HREF="about.html">about us</A> | 
<A CLASS="nav" HREF="prod.html">products</A>| 
<A CLASS="nav" HREF="news.html">news</A> | 
</DIV>
</CENTER>
</BODY>
</HTML>

This is a simple navigation bar, that takes advantage of the <A> and <DIV> tags, and the "nav", and "bar" classes.

'bar' defines the 'spine' of our bar. It sets the font to use (helvetica), the weight (bold), the background color (some sort of red), and the line-height (150%), which gives the 'bar' effect. To set the line-height, you could also use a number (\ the browser will multiply that number by the font-size specified), or a value, such as 'em' or 'pt'.

'nav' decides the behavior of the different <A> tags. We can safely set the link color to white, because if the browser doesn't recognize CSS, it will not display any of the values.

Horizontal rule

hr.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.hr {background-image: url(plane.gif);
   width: 70%;
   line-height: 150%;
   text-align: center}
</STYLE>
<TITLE>Nice horizontal rule</TITLE>
</HEAD>
<BODY><CENTER>
Da plane, da plane!<BR>
Da plane, da plane!<BR>
<SPAN CLASS="hr"><BR></SPAN>
<BR>
Da plane, da plane!<BR>
Da plane, da plane!<BR>
Da plane, da plane!<BR>
</CENTER></BODY>
</HTML>

You can take a logo or a small image and use it as a background image to create a different kind of horizontal rule.

Chapter divider

chapdiv.html
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.hr {width: 100%;
   border-top: thick solid red;
   color: red;
   text-align: left;
   font-size: 24pt;
   font-weight: bold;
   font-family: arial}
</STYLE>
<TITLE>Chapter divider</TITLE>
</HEAD>
<BODY>
<P>This example will show you how to divide different sections of your page:</P>
<DIV CLASS="hr">Company</DIV>
Here is where we talk about the company.
<DIV CLASS="hr">Products</DIV>
Here is where we talk about the products.
<DIV CLASS="hr">News</DIV>
Here is where we talk about the news.
</BODY>
</HTML>

This divider is ideal to break out chapters or sections of your page, in a book-like format familiar to your user.

Shapes and colors

eggplant.html
<HTML>
<HEAD>
<TITLE>Company's logo</TITLE>
</HEAD>
<BODY>
<SPAN STYLE="COLOR: green; POSITION: absolute; TOP: 5px; LEFT: 180px; font-weight: bold; font-size: 32pt; font-style: italic">!</SPAN><BR>
<SPAN STYLE="COLOR: green; POSITION: absolute; TOP: 20px; LEFT: 170px; font-weight: bold; font-size: 32pt; font-style: italic">!!</SPAN><BR>
<SPAN STYLE="COLOR: green; POSITION: absolute; TOP: 40px; LEFT: 170px; font-weight: bold; font-size: 32pt; font-style: italic">!</SPAN><BR>
<SPAN STYLE="COLOR: green; POSITION: absolute; TOP: 70px; LEFT: 105px">Green. Green. Green. Green.</SPAN><BR>
<SPAN STYLE="COLOR: green; POSITION: absolute; TOP: 80px; LEFT: 100px">GreenGreenGreenGreenGreen</SPAN><BR>
<SPAN STYLE="COLOR: yellow; POSITION: absolute; TOP: 90px; LEFT: 95px">Yellow.Yellow.Yellow. Yellow. </SPAN><BR>
<SPAN STYLE="COLOR: yellow; POSITION: absolute; TOP: 100px; LEFT: 92px">Yellow.Yellow. Yellow.Yellow. </SPAN><BR>
<SPAN STYLE="COLOR: orange; POSITION: absolute; TOP: 110px; LEFT: 92px">Orange.Orange.Orange.Orange.</SPAN><BR>
<SPAN STYLE="COLOR: orange; POSITION: absolute; TOP: 120px; LEFT: 95px">Orange.Orange.Orange.Orange.</SPAN><BR>
<SPAN STYLE="COLOR: red; POSITION: absolute; TOP: 130px; LEFT: 95px">Red.Red.Red.Red.Red.Red.Red.</SPAN><BR>
<SPAN STYLE="COLOR: red; POSITION: absolute; TOP: 140px; LEFT: 100px">Red.Red.Red.Red.Red.Red.Red.</SPAN><BR>
<SPAN STYLE="COLOR: purple; POSITION: absolute; TOP: 150px; LEFT: 105px">Purple. Purple. Purple. Purple.</SPAN><BR>
<SPAN STYLE="COLOR: purple; POSITION: absolute; TOP: 160px; LEFT: 110px">Purple.Purple.Purple.Purple.</SPAN><BR>
<SPAN STYLE="COLOR: blue; POSITION: absolute; TOP: 170px; LEFT: 120px">Blue. Blue. Blue. Blue.</SPAN><BR>
<SPAN STYLE="COLOR: blue; POSITION: absolute; TOP: 180px; LEFT: 125px">Blue.Blue.Blue.Blue.</SPAN><BR>
</BODY>
</HTML>

This example might give you ideas for a different kind of ASCII art!

Positioning

examples.html
<HTML>
<HEAD>
<TITLE>Intro to CSS</TITLE>
<STYLE TYPE="text/css">
A:link {color: blue}
A:hover {color: cyan}
</STYLE>
</HEAD>
<BODY>
<CENTER>
<SPAN STYLE="color: black; position: absolute; top: 20px; left: 50px; font-weight: bold; font-size: 48pt; font-family: arial, helvetica">Introduction to</SPAN>
<SPAN STYLE="color: cyan; position: absolute; top: 50px; left: 200px; font-weight: bold; font-size: 48pt; font-family: arial, helvetica">Cascading</SPAN>
<SPAN STYLE="color: navy; position: absolute; top: 75px; left: 150px; font-weight: bold; font-size: 48pt; font-family: arial, helvetica">Style</SPAN>
<SPAN STYLE="color: blue; position: absolute; top: 100px; left: 250px; font-weight: bold; font-size: 48pt; font-family: arial, helvetica">Sheets</SPAN>
<SPAN STYLE="color: blue; position: absolute; top: 4px; left: 330px; font-size: 28pt; font-family: times, helvetica"><A HREF="/">MacTech, June 1998</A></SPAN>
</CENTER>
<SPAN STYLE="position: absolute; top: 150px; left: 50px">
<H2>The basics</H2>
<A HREF="embedded.html">embedded</A><BR>
<A HREF="external.html">sample</A> of <A HREF="eggplant.css">external file</A><BR>
<A HREF="inherit.html">inheritance</A><BR>
<A HREF="order.html">order</A><BR></SPAN>
<A HREF="conflict.html">conflict</A><BR>
<A HREF="class.html">class, example 1</A><BR>
<A HREF="class2.html">class, example 2</A><BR>
<A HREF="id.html">ID</A><BR>
<A HREF="conindex.html">contextual </A><BR>
<SPAN STYLE="position: absolute; top: 150px; left: 250px">
<H2>Fun with Style Sheets</H2>
<A HREF="rollover.html">rollover</A><BR>
<A HREF="navigation.html">navigation</A><BR></SPAN>
<A HREF="hr.html">horizontal rule</A><BR>
<A HREF="chapdiv.html">chapter divider</A><BR>
<A HREF="eggplant.html">eggplant</A><BR>
<A HREF="eggplant.html">eggplant</A><BR>
</BODY>
</HTML>

Amazing what you can accomplish with positioning, isn't it?

References

There are many HTML authoring books that have sections about CSS, but I would suggest looking at more specific guides. Here is a list of my favorite references:

Books

  • "Web Designer's Guide to Style Sheets", by Steven Mulder, Hayden Books - http://www.hayden.com/internet/style
  • "Cascading Style Sheets - Designing for the Web", by Häkon Wium Lie and Bert Bos, Addison Wesley.

URLs

A Few Sites that use CSS


Paola Aliverti is a web designer at New Software, Inc. in Palo Alto, CA. In her previous life, she was a software developer, and a translator. She can be reached at Paola@Paola.com.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Parallels Desktop 12.0.0 - Run Windows a...
Parallels allows you to run Windows and Mac applications side by side. Choose your view to make Windows invisible while still using its applications, or keep the familiar Windows background and... Read more
Spotify 1.0.36.124. - Stream music, crea...
Spotify is a streaming music service that gives you on-demand access to millions of songs. Whether you like driving rock, silky R&B, or grandiose classical music, Spotify's massive catalogue puts... Read more
Firefox 48.0.2 - Fast, safe Web browser.
Firefox offers a fast, safe Web browsing experience. Browse quickly, securely, and effortlessly. With its industry-leading features, Firefox is the choice of Web development professionals and casual... Read more
BBEdit 11.6.1 - Powerful text and HTML e...
BBEdit is the leading professional HTML and text editor for the Mac. Specifically crafted in response to the needs of Web authors and software developers, this award-winning product provides a... Read more
OmniGraffle Pro 6.6.1 - Create diagrams,...
OmniGraffle Pro helps you draw beautiful diagrams, family trees, flow charts, org charts, layouts, and (mathematically speaking) any other directed or non-directed graphs. We've had people use... Read more
OmniGraffle 6.6.1 - Create diagrams, flo...
OmniGraffle helps you draw beautiful diagrams, family trees, flow charts, org charts, layouts, and (mathematically speaking) any other directed or non-directed graphs. We've had people use Graffle to... Read more
Dropbox 8.4.21 - Cloud backup and synchr...
Dropbox is an application that creates a special Finder folder that automatically syncs online and between your computers. It allows you to both backup files and keep them up-to-date between systems... Read more
BetterTouchTool 1.84 - Customize Multi-T...
BetterTouchTool adds many new, fully customizable gestures to the Magic Mouse, Multi-Touch MacBook trackpad, and Magic Trackpad. These gestures are customizable: Magic Mouse: Pinch in / out (zoom... Read more
ScreenFlow 6.1 - Create screen recording...
ScreenFlow is powerful, easy-to-use screencasting software for the Mac. With ScreenFlow you can record the contents of your entire monitor while also capturing your video camera, microphone and your... Read more
f.lux 37.7 - Adjusts the color of your d...
f.lux makes the color of your computer's display adapt to the time of day, warm at night and like sunlight during the day. Ever notice how people texting at night have that eerie blue glow? Or wake... Read more

Become the King of Avalon in FunPlus’ la...
King Arthur is dead. Considering the legend dates back to the 5th century, it would be surprising if he wasn’t. But in the context of real-time MMO game King of Avalon: Dragon Warfare, Arthur’s death plunges the kingdom into chaos. Evil sorceress... | Read more »
Nightgate (Games)
Nightgate 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: *** Launch Sale: 25% OFF for a limited time! *** In the year 2398, after a great war, a network of intelligent computers known as... | Read more »
3 best fantasy football apps to get you...
Last season didn't go the way you wanted it to in fantasy football. You were super happy following your drafts or auctions, convinced you had outsmarted everyone. You were all set to hustle on the waiver wire, work out some sweet trades, and make... | Read more »
Pokemon GO update: Take me to your leade...
The Team Leaders in Pokemon GO have had it pretty easy up until now. They show up when players reach level 5, make their cases for joining their respective teams, and that's pretty much it. Light work, as Floyd Mayweather might say. [Read more] | Read more »
Ruismaker FM (Music)
Ruismaker FM 1.0 Device: iOS Universal Category: Music Price: $4.99, Version: 1.0 (iTunes) Description: Following up on the success of Ruismaker, here's her crazy twin-sister, designed for people who want to design their own... | Read more »
Space Marshals 2 (Games)
Space Marshals 2 1.0.15 Device: iOS iPhone Category: Games Price: $5.99, Version: 1.0.15 (iTunes) Description: The sci-fi wild west adventure in outer space continues with Space Marshals 2. This tactical top-down shooter puts you in... | Read more »
Dungeon Warfare (Games)
Dungeon Warfare 1.0 Device: iOS Universal Category: Games Price: $3.99, Version: 1.0 (iTunes) Description: Dungeon Warfare is a challenging tower defense game where you become a dungeon lord to defend your dungeon against greedy... | Read more »
Solitairica (Games)
Solitairica 1.0.7 Device: iOS Universal Category: Games Price: $3.99, Version: 1.0.7 (iTunes) Description: Solitairica takes RPG combat and challenging rogue-like progression to a fresh new place—the world of solitaire! | Read more »
Bowmasters tips, tricks and hints
At least for this writer, archery was one of the more pleasant surprises of the 2016 Rio Olympics. As opposed to target shooting with guns, which was dreadfully boring, watching people shoot arrows at targets was pretty darn cool. [Read more] | Read more »
Best apps for watching live TV
The Olympics have come and gone, leaving nearly everyone in a temporary state of "What the heck am I going to watch on TV right now?" Besides old reruns of Golden Girls, but that goes without saying. [Read more] | Read more »

Price Scanner via MacPrices.net

BookBook Releases SurfacePad, BookBook &...
BookBook has released three new covers just for iPad Pro: SurfacePad, BookBook and BookBook Rutledge Edition. BookBook for iPad Pro is a gorgeous leather case reminiscent of a vintage sketchbook.... Read more
Clean Text 1.0 for iOS Reduces Text Cleanup a...
Apimac today announced availability of Clean Text for iOS, a tool for webmasters, graphic designers, developers and magazine editors to reduce text cleanup and editing time, and also for any iPhone... Read more
27-inch iMacs on sale for up to $220 off MSRP
B&H Photo has 27″ Apple iMacs on sale for up to $200 off MSRP including free shipping plus NY sales tax only: - 27″ 3.3GHz iMac 5K: $2099 $200 off MSRP - 27″ 3.2GHz/1TB Fusion iMac 5K: $1899 $100... Read more
Apple refurbished 13-inch MacBook Airs availa...
Apple has Certified Refurbished 2016 and 2015 13″ MacBook Airs now available starting at $849. An Apple one-year warranty is included with each MacBook, and shipping is free: - 2016 13″ 1.6GHz/8GB/... Read more
Apple refurbished iPad mini 2s available for...
Apple is offering Certified Refurbished iPad mini 2s for up to $80 off the cost of new minis. An Apple one-year warranty is included with each model, and shipping is free: - 16GB iPad mini 2 WiFi: $... Read more
Save up to $600 with Apple refurbished Mac Pr...
Apple has Certified Refurbished Mac Pros available for up to $600 off the cost of new models. An Apple one-year warranty is included with each Mac Pro, and shipping is free. The following... Read more
Mac Pros on sale for $200 off MSRP
B&H Photo has Mac Pros on sale for $200 off MSRP. Shipping is free, and B&H charges sales tax in NY only: - 3.7GHz 4-core Mac Pro: $2799, $200 off MSRP - 3.5GHz 6-core Mac Pro: $3799, $200... Read more
Will We See A 10.5″ iPad Pro in 2017? – The ‘...
A MacRumors report, cites a research note from KGI Securities analyst Ming-Chi Kuo, saying a new size iPad model is in the works. According to the highly respected Cho, who has a strong track record... Read more
IOGEAR USB-C Docking Station Transforms Lapto...
IOGEAR has announced the launch of its innovative USB-C Docking Station with Power Delivery which turns USB-C enabled laptops into desktop workstations. The new IOGEAR USB-C Docking Station features... Read more
12-inch Retina MacBooks on sale for up to $10...
Amazon has 2016 12″ Apple Retina MacBooks on sale for $100 off MSRP. Shipping is free: - 12″ 1.1GHz Space Gray Retina MacBook: $1199 $100 off MSRP - 12″ 1.1GHz Silver Retina MacBook: $1224.99 $75 off... Read more

Jobs Board

*Apple* Professional Learning Specialist - A...
# Apple Professional Learning Specialist Job Number: 51234243 Portland, Maine, Maine, United States Posted: Aug. 18, 2016 Weekly Hours: 40.00 **Job Summary** The Read more
*Apple* Mobile Master - Best Buy (United Sta...
What does a Best Buy Apple Mobile Master do? At Best Buy, our mission is to leverage the unique talents and passions of our employees to inspire, delight, and enrich Read more
*Apple* Retail - Multiple Positions Akron, O...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
Simply Mac *Apple* Specialist- Repair Techn...
…The Technician is a master at working with our customers to diagnose and repair Apple devices in a manner that exceeds the expectations set forth by Apple Read more
*Apple* Retail - Multiple Positions Germanto...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.