phpeveryday.com

We want to modify page in order to be like this:

For this job, create a file named "myjs.js". Enter following code:

// JavaScript Document
$(document).ready(
  function(){
	$('.lyric-text').addClass('lyric-full');
  }				  
);

What mean? The fundamental operation in jQuery is selecting a part of the document. This is done with the $() construct. In this case, jQuery find lyric-text class. Then, jQuery inject new class named "lyric-full". This job use .addClass() method. So, we must add new class in our css, like this:

.lyric-full {
  font-style: italic;
  background-color:#FFFFCC;
  border: 1px solid #FF0000;
  padding: 0.5em;
}

Thus, open your mycss.css. Update like this:

@charset "utf-8";
/* CSS Document */

body {
  font: 75% Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 2.5em;
  margin-bottom: 0;
}

h2 {
  font-size: 1.2em;
  margin-bottom: .5em;
}

h3 {
  font-size: 1.0em;
  margin-bottom:0;
}
.lyric{
  margin: 0 2em;
}
.lyric-full {
  font-style: italic;
  background-color:#FFFFCC;
  border: 1px solid #FF0000;
  padding: 0.5em;
}

Point your browser to http://localhost/test/jquery/myfirstjquery.html.