Basic Song Styling

OK, we just looked at the HTML that’s generated, here, then, is how we style it.

The included stylesheet ukeGeeks.music.css handles the two most common presentations: chords above the lyrics and chords inline with lyrics.

Chords Above Lyrics

/* PLACE CHORDS ABOVE TEXT
------------------------------ */
.ugsChords {
line-height:2.4;
}
.ugsChords code{
color:#eaeaea;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:1.2em;
font-weight:normal;
position:relative;
}
.ugsChords code strong{
position:absolute;
top:-32px;
left:-4px;
}
.ugsChords code em{
color:#d20;
margin:0 -3px;
}

This positions the chord name above the lyrics.