Richard's JavaScript Tutorials

Updated 07/18/14
Home
Animation
precachedImages
digitalClock
Object Tag (Audio)
Cookies.htm
Math_Object
Using CSS
The Style Object
Client_Info
customObject
functions
UsingArrays
comments
concatenation
documentwrite
ifelse
Loops
forms
Strings
variables

 

Using Cascading Style Sheets in your JavaScripts

This section will demonstrate a few simple JavaScripts using CSS

You can create style sheets in an externally or internally. Using an external style sheet you can use one page to modify styles used on several pages on a website. Internal styles are either used in the head tag or what we call inline style which is used inside an HTML element. Here is an example of an internal style sheet being used for the <h1> tags in the following example:

All text in the h3 tags are centered and the background is changed. The code for this script is below the actual script.

Internal Style Sheets Example

Using CSS

No CSS

More CSS

<html>
<head>
<title>Internal Style Sheets Example</title>
<style type="text/css">
<!-- This style modifies the background of all text -->
<!-- within the h3 tag and centers it -->
h3 {text-align:center;background:"#94d6e7"}
</style></head>

<body>
<h3>Using CSS</h3>
<h2>No CSS</h2>
<h3> More CSS</h3>
</body></html>

You can modify just about any html element in a web page I'll give you one more example. This time I'm going to modify the p tag using  class selectors. First I'll show you the script and the code will follow.
 

See the text is red and aligned to the center

Second paragraph has the right align

Now the 3rd paragraph is aligned to the left

 

Now here is the code for the above script:

<head>
<title>Class selectors</title>
<style type="text/css">
<!-- Here I am defining 3 different types of paragraph classes -->
P.exampleOne { text-align:left}
P.exampleTwo { text-align:right}
P.exampleThree { text-align:center;color:red;}
</style></head><body>
 

<!-- Now I'll use them in the body referencing the correct class selector -->
<!-- To either align text left, right or center. -->
<!-- Example 3 also changes the font color to red -->

<p class ="exampleThree">See the text is red and aligned to the center</p>
<p class = "exampleTwo"> Second paragraph has the right align</p>
<p class = "exampleOne"> Now the 3rd paragraph is aligned to the left</p>

</body></html>

See using CSS is pretty easy you can change any HTML element in a web page and you can either change every element on a page, every element on a website or just one element.

Now try using CSS in one of your JavaScript pages. If you need some properties to get started try looking them up at http://www.devguru.com/

 

Home

This site was last updated 07/16/14