Style Sheets

JavaScript Style Sheets (JSS) or (JSSS) were a Netscape alternative to Cascading Style Sheets (CSS). The Netscspe browser was once the dominant browser, but lost that position to Internet Explorer during one of the early browser wars in the 1990s. Like CSS, JSS defines how various HTML elements display on a web page. The JSS syntax is based on JavaScript. It uses a syntax rather than the CSS property:value syntax. A browser would know whether JSS or CSS is to be used by the type attribute of the style tag. E.g., in the example below, JSS is used for an embedded style sheet to set the left margin for all h3 elements on a web page to a 10 pixel indentation from the left.

<style type="text/javascript">

JSS was a shortlived stylesheet language. Only Netscape Communicator 4 supported it with Microsoft Internet Explorer, the primary rival browser to Netscape at that time, instead supporting CSS. Even Netscape stooped supporting it in 2000 with the release of Netscape 6, choosing CSS, instead, for the stylesheet language.

CSS is now the standard stylesheet language. It enhances the formatting and layout capabilities of HTML. It allows you to modify the appearance of HTML tags or any other page elements. With CSS, If you wanted to specify that h4 elements on a web page be displayed with the color blue, you could use the CSS syntax Selector {property: value;}

<style type="text/css">
h4 {color: blue;}

An h4 heading

In the above case, h4 is a selector in the style section (the style section is placed in the "head" section of your HTML file). A selector identifies the element to which a style definition should be applied. There are three types of selectors:

  1. HTML selectors
  2. Class selectors
  3. ID selectors

The difference between a tag and a selector is that an HTML tag is an element in the page's structure, whereas a selector just identifies a tag to which a formatting rule should be applied. So when you define an HTML selector, you are redefining how particulr HTML tags display.

The property for the above case is "color" and the value assigned to it is "blue". Properties are assigned a value which can be a word or a number; the type of value depends on the property to which it is assigned. The property and value together are called a "definition".

HTML selectors define the appearance of a particular HTML tag. They apply to all instances of that tag on a page. A CSS rule for the <h3> tag will be applied whenever that tag appears in a web page that uses that rule.

You can include multiple property: value pairs within the curly braces, i.e. "{" and "}", e.g., you could use the following:

<style type="text/css">
h3 {color: blue; font-size: 15px;}

Class selectors, which are user-defined selectors, can be used to change the formatting for just some instances of a tag in a web page rather than all instances. For instance, suppose you want to have text in some paragraphs differ from the normal formatting for most paragraphs in the web page. Let's suppose you want to have one or more paragraphs have bright green text rather than the black text you will use for most of the page. You could create a class selector with a name of your own choosing, say "brightgreen".

p.brightgreen {color: green; font-weight: bold;}

You can then apply the class only to particular paragraphs by including "class=brightgreen" within the opening paragraph tag of just those paragraphs to which you want this selector applied, as below.

<p class="brightgreen">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam aliquam felis eget consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed suscipit sem id massa gravida rhoncus. Donec consequat lacinia metus eu pulvinar. Curabitur aliquam, leo sit amet lobortis feugiat, eros nisl luctus orci, eleifend sagittis magna odio vel quam. Proin purus risus, cursus quis posuere id, euismod vel lacus. Suspendisse vehicula gravida enim ac aliquet. Phasellus ut purus neque. Aliquam tincidunt felis sed metus sollicitudin gravida. Nunc odio justo, facilisis ut vestibulum non, rhoncus in eros. Aliquam accumsan libero diam, ut dictum augue. Pellentesque tincidunt, nulla non sollicitudin ullamcorper, dui libero mattis elit, eget euismod neque odio id orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

You may also create class selectors which can be applied to multiple HTML tags. E.g., you could create a class selector named "brightgreen" that might apply to many different tages, e.g., <h2>, <p>, etc. E.g., you could use the following embedded style sheet for the "brightgreen" class and then use <h2 class="brightgreen"> or <p class="brightgreen">

.brightgreen {color: green; font-weight: bold;}

To have the class selector apply to multiple tags, within the opening and closing style tags, the class selector starts with a period followed by the name to be used for the selctor and then property: value pairs separated by semicolons. The difference between a class selector that can apply to multiple tags and one that applies to specific tags is that for a class selector for specific tages you have the tag name followed by a period and then the class name, whereas with a class selector that can be applied to multiple tags, you don't start with a tag name, but instead start the class selector name with just the period.

.classname {property: value;}

ID selectors are used to define a unique ID and appearance for a specific page element. They can be applied to any HTML tag, but they should only be used once in a page according to HTML standards. E.g., perhaps you want to have several paragraphs be bright green, but you might want to have a a unique element on a web page that will be formatted like no other element in the webpage. Let's say this element will use blue text that is indented 10 pixels. You could put the following style section within the head section of the webpage.

<style type="text/css">
#bluetext { color: blue; text-indent: 10px; }

You could then use <p id="bluetext"> or <div id="bluetext">, etc. when you wanted to apply the unique id selector. E.g. putting <p id="bluetext"> before and </p> at the end of the following paragraph would indent the start of the paragraph 10 pixels and use blue text for the paragraph.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non semper nisi. Donec commodo nisl eu urna imperdiet eu sagittis velit ultrices. Nunc dui metus, semper at ornare in, volutpat et justo. Morbi eu molestie nisi. Aliquam enim justo, euismod at ornare ut, malesuada eget enim. Morbi eget fermentum tortor. Maecenas pellentesque consequat pellentesque. Maecenas pellentesque condimentum risus, ac hendrerit tellus gravida a. Suspendisse ac tortor metus, eget faucibus purus. Phasellus non augue ac nisl dapibus dictum. Nullam leo lectus, imperdiet id accumsan convallis, rutrum et risus.

The id selector is specified in the style section by prefixing the name you chose with a pound, aka hash, sign, #. The id can be applied to any appropriate element within a page, i.e., it isn't restricted to just a particular tag, such as <p>, <div>, etc., but the id selector should be applied only once within a page.

#IDname {property: value;}

CSS style sheets can be embedded within the document as shown above by including CSS rules within <style type="text/css"> and </style> in the head section of an HTML page, in which case they are known as "embedded style sheets" or can be external files that are incorporated within a web page by using a link tag within the head section of the page, e.g., as below:

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

If the stylesheet is on the same website as the webpage using it, you can use a relative link rather than an absolute one.

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

Style sheets stored in external files don't need the <style type="text/css"> and </style> tags to enclose the style definitions. By convention, the files are usually given an extension of .css.

The syntax is as follows:

<link rel="stylesheet" type="contentType" href="filename.css">

The content type is "text/css" for CSS. You may use multiple link tags, but may only have one file name per <link> tag.

An alternative method for incorporating style information from an external files is to use @import within <style> and </style> tags.

<style type="text/css">
@import url("filename.css");

Again, the file doesn't even have to be on the same server as the web page. In that case you would need a full URL, though, e.g., @import url("");. Be sure to always terminate the import rule with a semicolon, i.e., ;.

By using the method of linking, or importing, a style sheet into a webpage, you can produce style sheets that can be used for many web pages giving your website a consistent look across web pages. And, by using linked or imported style sheets, you separate the design of web pages from their content, so if you ever decide to make a style change, you can change just one style sheet document and have the change apply to all of your web pages.

You can also use "in-line" style sheets to control a single element on a webpage rather than applying a CSS rule to an entire page or document. I.e., suppose you want to make a change for a paragaph to use purple text and the Helvetica font in the paragraph. Instead of using a class or id selector you could include style information directly in the opening tag using the style attribute for an individual tag. E.g., as follows:

<p style="color: purple; font-family: helvetica;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris egestas pulvinar bibendum. Suspendisse id scelerisque sapien. Nam gravida nibh feugiat felis pellentesque gravida. Etiam hendrerit rhoncus magna eu elementum. Quisque vel hendrerit enim. Aenean eros neque, faucibus ut facilisis ac, mollis in ligula. Nulla viverra urna ut justo congue at tincidunt nunc ultrices. Duis porttitor ligula sit amet lacus dapibus tincidunt. Mauris a ultrices ante. Curabitur ornare interdum dui. Praesent semper ultrices nulla adipiscing suscipit. Nunc mollis bibendum enim a hendrerit. Vestibulum hendrerit faucibus purus pulvinar pulvinar. Proin venenatis feugiat nisl, et luctus orci dapibus id. Nam ultrices sagittis ultrices.

In-line style sheets override both linked and embedded style sheet settings. The order of precedence from highest to lowest is as follows:


You aren't restricted to just using one method for style sheet rules within a webpage, you can include any or all of them within a single page. You can also apply definitions from in-line, embedded, and linked style sheets to a single element as below.

<p class="brightgreen" style="font-style: italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis rhoncus. Duis nec nibh nec lacus mattis molestie. Donec molestie, sapien nec molestie luctus, purus lectus eleifend ipsum, nec suscipit felis nulla nec orci. Maecenas tempor interdum metus, quis euismod nisl gravida vitae. Sed porta pulvinar tortor, non molestie massa scelerisque eu. Nullam et massa iaculis lectus vehicula egestas. Praesent mattis vehicula semper.


  1. JavaScript Style Sheets
    Wikipedia, the free encyclopedia
  2. Cascading Style Sheets
    Wikipedia, the free encyclopedia
  3. Using Style Classes and IDs
    Web Design - HTML XML - Web Development - Web Site Design
  4. Lorem Ipsum - All the facts - Lipsum generator

Valid HTML 4.01 Transitional

Created: Saturday, October 1, 2011