So far, it\’s RoR

Ruby on Rails, PostgreSQL, SVN, etc….

Dynamic styles with HTML, CSS, and Javascript

Posted by Chirag Patel on September 12, 2007

Styles can be dynamically changed in 4 ways:

  • With Javascript (overrides all other styles)

    el = document.getElementById('pageBody');
    el.style.backgroundColor = 'red';

  • Inline styles (override both embedded and external styles)

    Inline styles are styles that are written directly in the tag on the document. Inline styles affect only the tag they are applied to.

<a href="" style="font-size:91%;">

  • Embedded styles (overrides external styles)

    Embedded styles are styles that are embedded in the head of the document. Embedded styles affect only the tags on the page they are embedded in.

<style type="text/css">
body { color: #FFFFFF; }
</style>

  • External styles (.css page)

    External styles are styles that are written in a separate document and then attached to various Web documents. External style sheets can affect any document they are attached to.

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: