CSS class definition exampleCSS by class definition , a single dot
css_class_01 customizes that the style uses the css class attribute class="css_class_01" within a tag. In jQuery To select the specific class css_class_01
$(".css_class_01") CSS Classes<p
class="cssStyle01 ">CSS Class defined Content</p>
Inline CSS style <p style="color:blue"> Inline CSS Class defined Content </ p> CSS by class definition
. cssStyle01 { color:yellow; font-size: 12px; } CSS by tag definition
[ P for the paragraph tag <p></p>]
P {
color:yellow; font-size: 12px; } Combining CSS by tag and class definition.
An example defining the class bluetext of the paragraph tag. p.bluetext { color:blue; } Using the jQuery JavaScript API in the HTML Box you can
Toggle CSS of HTML elements within Google Sites.
| HTML Box Example Code:Copy and paste the code below and Insert > HTML Box in your Google Sites webpage. jQuery Method Combined CSS tag & Class CSS Defined Class jQuery Paragraph Selector
<style>
p {
margin: 4px;
font-size:16px;
font-weight:bolder;
cursor:pointer;
color:black;
}
p.bluetext {color:blue}
.cssStyle01 { background:yellow; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js">
</script>
<button class="a">Toggle CSS</button>
<p>Click to toggle CSS </p >
<p>to highlight</p >
<p class="bluetext">the words in these</
p>
<p class="bluetext">paragraph tags</
p>
<script>
$("button").click(function () {
$("p").toggleClass("cssStyle01");
});
</script>
Some Examples of CSS Definitions and values:margin: 4px; font-size:16px; font-weight:bolder; background-image:url('/image.png');
cursor:pointer; color:black; border: 2px; display: table-cell;font-style: normal; font-variant: normal; font-weight: normal; height: 345px; line-height: normal; outline-color: black; outline-style: none; outline-width: 0px; padding: 0px; text-align: -webkit-auto; vertical-align: top; white-space: normal; width: 1080px; etc... |
Google Sites Ninja > Google Sites jQuery >