<style type="text/javascript">
tags.H3.marginLeft=10;
</style>
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;}
</style>
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:
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;}
</style>
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".
<style="text/css">
p.brightgreen {color: green; font-weight: bold;}
</style>
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.
</p>
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">
<style="text/css">
.brightgreen {color: green; font-weight: bold;}
</style>
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; }
</style>
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:
<head>
<link rel="stylesheet" href="http://example.com/css/mystylesheet.css" type="text/css>
</head>
If the stylesheet is on the same website as the webpage using it, you can use a relative link rather than an absolute one.
<head>
<link rel="stylesheet" href="/css/mystylesheet.css" type="text/css>
</head>
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");
</style>
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("http://www.example.com/imported.css");. 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.
</p>
In-line style sheets override both linked and embedded style sheet settings. The order of precedence from highest to lowest is as follows:
in-line
embedded
linked
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.
</p>
References:
Created: Saturday, October 1, 2011