Cascading Style Sheets

Updated 07/18/14

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">


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">

P.exampleOne { text-align:left}
P.exampleTwo { text-align:right}
P.exampleThree { text-align:center;color:red;}
</style></head><body>

<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